From b0717b6866c1d41dbb2cd77f3195f3ef45813f72 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Wed, 8 Jun 2016 11:48:40 +0200 Subject: [PATCH] EZS-703: As a user, I want to create content from the Dashboard --- bundle/Resources/config/css.yml | 4 + bundle/Resources/config/yui.yml | 29 ++++- .../Resources/public/css/modules/buttons.css | 43 +++++++ .../css/theme/views/create-content-popup.css | 17 +++ .../public/css/views/content-type.css | 1 - .../css/views/create-content-button.css | 10 ++ .../public/css/views/create-content-popup.css | 35 ++++++ bundle/Resources/public/css/views/general.css | 16 ++- .../js/views/cof-contentcreationview.js | 36 ++++++ .../js/views/cof-contenttypeselectorview.js | 17 +-- .../js/views/cof-createcontentbuttonview.js | 69 +++++++++++ .../js/views/cof-createcontentpopupview.js | 111 ++++++++++++++++++ ...cof-createcontent-dashboardblocksplugin.js | 54 +++++++++ ...content-universaldiscoveryserviceplugin.js | 28 ++++- .../plugins/cof-selectcontenttypeplugin.js | 2 +- .../templates/create-content-button.hbt | 1 + .../public/templates/create-content-popup.hbt | 3 + 17 files changed, 456 insertions(+), 20 deletions(-) create mode 100644 bundle/Resources/public/css/theme/views/create-content-popup.css create mode 100644 bundle/Resources/public/css/views/create-content-button.css create mode 100644 bundle/Resources/public/css/views/create-content-popup.css create mode 100644 bundle/Resources/public/js/views/cof-createcontentbuttonview.js create mode 100644 bundle/Resources/public/js/views/cof-createcontentpopupview.js create mode 100644 bundle/Resources/public/js/views/plugins/cof-createcontent-dashboardblocksplugin.js create mode 100644 bundle/Resources/public/templates/create-content-button.hbt create mode 100644 bundle/Resources/public/templates/create-content-popup.hbt diff --git a/bundle/Resources/config/css.yml b/bundle/Resources/config/css.yml index 42b0ef6..18b15f8 100644 --- a/bundle/Resources/config/css.yml +++ b/bundle/Resources/config/css.yml @@ -7,6 +7,10 @@ system: - '@ContentOnTheFlyBundle/Resources/public/css/views/content-creation.css' - '@ContentOnTheFlyBundle/Resources/public/css/views/discovery-create.css' - '@ContentOnTheFlyBundle/Resources/public/css/views/content-type.css' + - '@ContentOnTheFlyBundle/Resources/public/css/views/create-content-button.css' + - '@ContentOnTheFlyBundle/Resources/public/css/views/create-content-popup.css' - '@ContentOnTheFlyBundle/Resources/public/css/theme/views/content-creation.css' - '@ContentOnTheFlyBundle/Resources/public/css/theme/views/discovery-create.css' - '@ContentOnTheFlyBundle/Resources/public/css/theme/views/content-type.css' + - '@ContentOnTheFlyBundle/Resources/public/css/theme/views/discovery-create.css' + - '@ContentOnTheFlyBundle/Resources/public/css/theme/views/create-content-popup.css' diff --git a/bundle/Resources/config/yui.yml b/bundle/Resources/config/yui.yml index ecb4678..62d1c20 100644 --- a/bundle/Resources/config/yui.yml +++ b/bundle/Resources/config/yui.yml @@ -20,12 +20,19 @@ system: - 'ez-contentcreateplugin' - 'ez-pluginregistry' - 'ez-viewservicebaseplugin' - dependencyOf: ['ez-universaldiscoveryviewservice'] + dependencyOf: ['ez-universaldiscoveryviewservice', ez-dashboardblocksviewservice] path: %ezcontentonthefly.public_dir%/js/views/plugins/cof-createcontent-universaldiscoveryserviceplugin.js cof-selectcontenttypeplugin: requires: ['ez-contentcreateplugin', 'ez-locationmodel'] - dependencyOf: ['ez-universaldiscoveryviewservice'] + dependencyOf: ['ez-universaldiscoveryviewservice', 'ez-dashboardblocksviewservice'] path: %ezcontentonthefly.public_dir%/js/views/plugins/cof-selectcontenttypeplugin.js + cof-createcontent-dashboardblocksplugin: + requires: + - 'plugin' + - 'ez-pluginregistry' + - 'cof-createcontentbuttonview' + dependencyOf: ['ez-dashboardblocksview'] + path: %ezcontentonthefly.public_dir%/js/views/plugins/cof-createcontent-dashboardblocksplugin.js cof-universaldiscoverycreateview: requires: - 'ez-universaldiscoverymethodbaseview' @@ -55,3 +62,21 @@ system: contenttypeselectorview-ez-template: type: 'template' path: %ez_platformui.public_dir%/templates/contenttypeselector.hbt + cof-createcontentbuttonview: + requires: + - 'ez-templatebasedview' + - 'cof-createcontentpopupview' + - 'createcontentbuttonview-ez-template' + path: %ezcontentonthefly.public_dir%/js/views/cof-createcontentbuttonview.js + createcontentbuttonview-ez-template: + type: 'template' + path: %ezcontentonthefly.public_dir%/templates/create-content-button.hbt + cof-createcontentpopupview: + requires: + - 'ez-templatebasedview' + - 'cof-contentcreationview' + - 'createcontentpopupview-ez-template' + path: %ezcontentonthefly.public_dir%/js/views/cof-createcontentpopupview.js + createcontentpopupview-ez-template: + type: 'template' + path: %ezcontentonthefly.public_dir%/templates/create-content-popup.hbt diff --git a/bundle/Resources/public/css/modules/buttons.css b/bundle/Resources/public/css/modules/buttons.css index 056f727..13b6048 100644 --- a/bundle/Resources/public/css/modules/buttons.css +++ b/bundle/Resources/public/css/modules/buttons.css @@ -21,3 +21,46 @@ background: #bbb; cursor: not-allowed; } + +.cof-btn.cof-btn--create { + text-transform: uppercase; + color: #fff; + font-size: .875rem; + font-weight: 700; + background: #3FB499; + padding: .7rem 2rem .7rem 2.6rem; + position: relative; +} + +.cof-btn--create:before { + color: #fff; + font-family: "ez-platformui-icomoon"; + content: "\E61D"; + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); +} + +.cof-btn--close { + background: none; +} + +.cof-btn--close:before, +.cof-btn--close:after { + content: ''; + width: 1px; + height: 100%; + background: #aaa; + position: absolute; + top: 50%; + left: 50%; +} + +.cof-btn--close:before { + transform: translate(-50%, -50%) rotate(45deg); +} + +.cof-btn--close:after { + transform: translate(-50%, -50%) rotate(-45deg); +} diff --git a/bundle/Resources/public/css/theme/views/create-content-popup.css b/bundle/Resources/public/css/theme/views/create-content-popup.css new file mode 100644 index 0000000..916be53 --- /dev/null +++ b/bundle/Resources/public/css/theme/views/create-content-popup.css @@ -0,0 +1,17 @@ +/** + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ + +.ez-view-createcontentpopupview { + background: rgba(0, 0, 0, .6); +} + +.ez-view-createcontentpopupview .cof-create-popup { + background: #d8d8d8; + border-radius: .5rem; +} + +.ez-view-createcontentpopupview .cof-content-creation__tooltip:before { + border-color: transparent #bbb transparent transparent; +} diff --git a/bundle/Resources/public/css/views/content-type.css b/bundle/Resources/public/css/views/content-type.css index af7d6a7..5679fe6 100644 --- a/bundle/Resources/public/css/views/content-type.css +++ b/bundle/Resources/public/css/views/content-type.css @@ -6,7 +6,6 @@ .ez-view-contenttypeselectorview .cof-content-creation__tooltip { width: 15rem; position: fixed; - left: 28rem; padding: 1rem; transform: translateY(-50%); } diff --git a/bundle/Resources/public/css/views/create-content-button.css b/bundle/Resources/public/css/views/create-content-button.css new file mode 100644 index 0000000..01c06c8 --- /dev/null +++ b/bundle/Resources/public/css/views/create-content-button.css @@ -0,0 +1,10 @@ +/** + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ + +.ez-view-createcontentbuttonview { + position: absolute; + top: 2vh; + right: 6rem; +} diff --git a/bundle/Resources/public/css/views/create-content-popup.css b/bundle/Resources/public/css/views/create-content-popup.css new file mode 100644 index 0000000..448f3fb --- /dev/null +++ b/bundle/Resources/public/css/views/create-content-popup.css @@ -0,0 +1,35 @@ +/** + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ + +.ez-view-createcontentpopupview { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 300; +} + +.ez-view-createcontentpopupview .ez-view-contentcreationview { + height: 40rem; +} + +.ez-view-createcontentpopupview .cof-create-popup { + position: absolute; + top: 3rem; + left: calc(50% - 12.5rem); +} + +.ez-view-createcontentpopupview .cof-btn--close { + position: absolute; + z-index: 2; + top: 2rem; + right: 2rem; + height: 2rem; + width: 2rem; + border: 0 none; + padding: 0; + overflow: hidden; +} diff --git a/bundle/Resources/public/css/views/general.css b/bundle/Resources/public/css/views/general.css index 18d396b..f95a95f 100644 --- a/bundle/Resources/public/css/views/general.css +++ b/bundle/Resources/public/css/views/general.css @@ -3,10 +3,14 @@ * For full copyright and license information view LICENSE file distributed with this source code. */ - .cof-is-hidden { - display: none !important; - } +.cof-is-hidden { + display: none !important; +} - .cof-invisible { - opacity: 0 !important; - } +.cof-invisible { + opacity: 0 !important; +} + +.cof-index-reset { + z-index: auto !important; +} diff --git a/bundle/Resources/public/js/views/cof-contentcreationview.js b/bundle/Resources/public/js/views/cof-contentcreationview.js index 91132e4..799375f 100644 --- a/bundle/Resources/public/js/views/cof-contentcreationview.js +++ b/bundle/Resources/public/js/views/cof-contentcreationview.js @@ -298,6 +298,20 @@ YUI.add('cof-contentcreationview', function (Y) { return; } + if (this.get('redirectionPrevented')) { + /** + * Fired to create a new content of a given type + * + * @event createContent + * @param contentType {eZ.ContentType} content type + */ + this.fire('createContent', { + contentType: contentTypeSelector.get('selectedContentType') + }); + + return; + } + createContentView = new CreateContentConstructor({ content: contentTypeSelector.get('content'), version: contentTypeSelector.get('version'), @@ -569,6 +583,28 @@ YUI.add('cof-contentcreationview', function (Y) { suggestedItemTemplate: { value: '
  • <%= data.path %>
    • ' }, + + /** + * Should prevent from closing discovery widget? + * + * @attribute closingDiscoveryWidgetPrevented + * @type Boolean + * @default true + */ + closingDiscoveryWidgetPrevented: { + value: true + }, + + /** + * Should redirect to create content? + * + * @attribute redirectionPrevented + * @type Boolean + * @default false + */ + redirectionPrevented: { + value: false + }, } }); }); diff --git a/bundle/Resources/public/js/views/cof-contenttypeselectorview.js b/bundle/Resources/public/js/views/cof-contenttypeselectorview.js index 5bdcf05..fff4f41 100644 --- a/bundle/Resources/public/js/views/cof-contenttypeselectorview.js +++ b/bundle/Resources/public/js/views/cof-contenttypeselectorview.js @@ -19,6 +19,7 @@ YUI.add('cof-contenttypeselectorview', function (Y) { SELECTOR_TOOLTIP = '.cof-content-creation__tooltip', ATTR_ID = 'data-id', ATTR_DESCRIPTION = 'data-description', + PX = 'px', SCROLL_TIMEOUT = 100; /** @@ -78,6 +79,8 @@ YUI.add('cof-contenttypeselectorview', function (Y) { * @param text {String} text to show on remove button */ this.fire('itemSelected', {text: event.text}); + + this._correctTooltipPosition(); }, /** @@ -89,7 +92,6 @@ YUI.add('cof-contenttypeselectorview', function (Y) { this._toggleTooltip(true); this._setCorrectTooltipPositionOnScroll(); - this._correctTooltipPosition(); }, /** @@ -154,22 +156,23 @@ YUI.add('cof-contenttypeselectorview', function (Y) { _correctTooltipPosition: function () { var container = this.get('container'), selectedItem = container.one(SELECTOR_ITEM_SELECTED), + selectedItemRect, contentTypeListRect = container.one(SELECTOR_CONTENT_TYPE_LIST).getDOMNode().getBoundingClientRect(), - contentTypeListRectTop = contentTypeListRect.top, - tooltip = container.one(SELECTOR_TOOLTIP), - selectedItemRectTop; + tooltipSpace = 40, + tooltip = container.one(SELECTOR_TOOLTIP); if (!selectedItem) { return; } - selectedItemRectTop = selectedItem.getDOMNode().getBoundingClientRect().top; + selectedItemRect = selectedItem.getDOMNode().getBoundingClientRect(); - if (selectedItemRectTop < contentTypeListRectTop || selectedItemRectTop > contentTypeListRectTop + contentTypeListRect.height) { + if (selectedItemRect.top < contentTypeListRect.top || selectedItemRect.top > contentTypeListRect.top + contentTypeListRect.height) { tooltip.addClass(CLASS_INVISIBLE); } else { tooltip.removeClass(CLASS_INVISIBLE); - tooltip.setStyle('top', selectedItemRectTop); + tooltip.setStyle('top', selectedItemRect.top + PX); + tooltip.setStyle('left', selectedItemRect.left + selectedItemRect.width + tooltipSpace + PX); } }, diff --git a/bundle/Resources/public/js/views/cof-createcontentbuttonview.js b/bundle/Resources/public/js/views/cof-createcontentbuttonview.js new file mode 100644 index 0000000..fc8b414 --- /dev/null +++ b/bundle/Resources/public/js/views/cof-createcontentbuttonview.js @@ -0,0 +1,69 @@ +/* + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ +YUI.add('cof-createcontentbuttonview', function (Y) { + 'use strict'; + + /** + * Provides the Create Action view class + * + * @module cof-createcontentbuttonview + */ + Y.namespace('cof'); + + var SELECTOR_BTN_CREATE = '.cof-btn--create', + EVENTS = {}; + + EVENTS[SELECTOR_BTN_CREATE] = {'tap': '_showPopup'}; + + /** + * The Create Content Button View + * + * @namespace cof + * @class createContentButtonView + * @constructor + * @extends eZ.TemplateBasedView + */ + Y.cof.CreateContentButtonView = Y.Base.create('createContentButtonView', Y.eZ.TemplateBasedView, [], { + events: EVENTS, + + initializer: function () { + this.get('createContentPopupView').on('displayedChange', this._toggleOverlay, this); + }, + + render: function () { + this.get('container') + .setHTML(this.template()) + .append(this.get('createContentPopupView').render().get('container')); + + return this; + }, + + /** + * Shows the create content popup + * + * @protected + * @method _showPopup + */ + _showPopup: function () { + this.get('createContentPopupView').set('displayed', true); + }, + }, { + ATTRS: { + /** + * The create content popup view instance + * + * @attribute createContentPopupView + * @type cof.CreateContentPopupView + */ + createContentPopupView: { + valueFn: function () { + return new Y.cof.CreateContentPopupView({ + bubbleTargets: this + }); + } + }, + } + }); +}); diff --git a/bundle/Resources/public/js/views/cof-createcontentpopupview.js b/bundle/Resources/public/js/views/cof-createcontentpopupview.js new file mode 100644 index 0000000..b2b8773 --- /dev/null +++ b/bundle/Resources/public/js/views/cof-createcontentpopupview.js @@ -0,0 +1,111 @@ +/* + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ +YUI.add('cof-createcontentpopupview', function (Y) { + 'use strict'; + + /** + * Provides the Create Content Popup View class + * + * @module cof-createcontentpopupview + */ + Y.namespace('cof'); + + var CLASS_HIDDEN = 'cof-is-hidden', + CLASS_INDEX_RESET = 'cof-index-reset', + SELECTOR_POPUP = '.cof-create-popup', + SELECTOR_CLOSE_BUTTON = '.cof-btn--close', + SELECTOR_VIEW_CONTAINER = '.ez-view-container', + EVENTS = {}; + + EVENTS[SELECTOR_CLOSE_BUTTON] = {'tap': '_close'}; + + /** + * The Create Content Popup view + * + * @namespace cof + * @class CreateContentPopup + * @constructor + * @extends eZ.TemplateBasedView + */ + Y.cof.CreateContentPopupView = Y.Base.create('createContentPopupView', Y.eZ.TemplateBasedView, [], { + events: EVENTS, + + initializer: function () { + this.after('displayedChange', this._toggleDisplay, this); + }, + + render: function () { + var container = this.get('container'); + + container.setHTML(this.template()); + container.one(SELECTOR_POPUP).append(this.get('contentCreationView').render().get('container')); + + return this._toggleDisplay(); + }, + + /** + * Shows/hides popup + * + * @method _toggleDisplay + * @protected + * @return {Y.cof.PopupView} the view itself + */ + _toggleDisplay: function () { + var isDisplayed = this.get('displayed'), + toggleMethodName = isDisplayed ? 'removeClass' : 'addClass', + zIndexMethodName = isDisplayed ? 'addClass' : 'removeClass'; + + this.get('container')[toggleMethodName](CLASS_HIDDEN); + Y.one(SELECTOR_VIEW_CONTAINER)[zIndexMethodName](CLASS_INDEX_RESET); + + this.get('contentCreationView').set('displayed', isDisplayed); + + return this; + }, + + /** + * Closes popup + * + * @method _close + * @param event {Object} event facade + * @protected + */ + _close: function (event) { + event.preventDefault(); + + this.set('displayed', false); + }, + }, { + ATTRS: { + /** + * The content creation view instance + * + * @attribute contentCreationView + * @type cof.ContentCreationView + */ + contentCreationView: { + valueFn: function () { + return new Y.cof.ContentCreationView({ + bubbleTargets: this, + finishBtnText: 'Finish', + closingDiscoveryWidgetPrevented: false, + redirectionPrevented: true + }); + } + }, + + /** + * Displayed flag + * + * @attribute displayed + * @default false + * @type Boolean + */ + displayed: { + value: false + }, + } + }); +}); diff --git a/bundle/Resources/public/js/views/plugins/cof-createcontent-dashboardblocksplugin.js b/bundle/Resources/public/js/views/plugins/cof-createcontent-dashboardblocksplugin.js new file mode 100644 index 0000000..e457b98 --- /dev/null +++ b/bundle/Resources/public/js/views/plugins/cof-createcontent-dashboardblocksplugin.js @@ -0,0 +1,54 @@ +/* + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ +YUI.add('cof-createcontent-dashboardblocksplugin', function (Y) { + 'use strict'; + /** + * Adds the create content button to the Dashboard Blocks View + * + * @module cof-dashboardblocks + */ + + Y.namespace('cof.Plugin'); + + Y.cof.Plugin.DashboardBlocks = Y.Base.create('DashboardBlocks', Y.Plugin.Base, [], { + initializer: function () { + this.onHostEvent('activeChange', this._appendCreateButton, this); + }, + + /** + * Appends the create button to the Universal Discovery Browse View + * + * @protected + * @method _appendCreateButton + */ + _appendCreateButton: function () { + this.get('host') + .get('container') + .append(this.get('createContentButtonView').render().get('container')); + } + }, { + NS: 'dashboardBlocks', + + ATTRS: { + /** + * The create content button view instance + * + * @attribute createContentButtonView + * @type cof.CreateContentButtonView + */ + createContentButtonView: { + valueFn: function () { + return new Y.cof.CreateContentButtonView({ + bubbleTargets: this.get('host'), + }); + } + } + } + }); + + Y.eZ.PluginRegistry.registerPlugin( + Y.cof.Plugin.DashboardBlocks, ['dashboardBlocksView'] + ); +}); diff --git a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryserviceplugin.js b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryserviceplugin.js index e0b6352..45fcef9 100644 --- a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryserviceplugin.js +++ b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryserviceplugin.js @@ -73,8 +73,10 @@ YUI.add('cof-createcontent-universaldiscoveryserviceplugin', function (Y) { var host = this.get('host'), app = host.get('app'); - event.preventDefault(); - event.stopPropagation(); + if (target.get('preventClosingDiscoveryWidget')) { + event.preventDefault(); + event.stopPropagation(); + } event.selection.location.loadPath({api: host.get('capi')}, Y.bind(function (error, path) { if (error) { @@ -239,6 +241,26 @@ YUI.add('cof-createcontent-universaldiscoveryserviceplugin', function (Y) { }); }); }, + + /** + * Sets the contentType, languageCode, parentLocation and parentContent on the next + * view service if the users wants to create a new content + * + * @method setNextViewServiceParameters + * @param {eZ.ViewService} service + */ + setNextViewServiceParameters: function (service) { + var host = this.get('host'); + + if (host.get('parentLocation')) { + service.setAttrs({ + parentLocation: host.get('parentLocation'), + parentContent: host.get('contentType'), + contentType: host.get('contentType'), + languageCode: host.get('languageCode') + }); + } + }, }, { NS: 'CreateContentUniversalDiscoveryServicePlugin', ATTRS: { @@ -267,6 +289,6 @@ YUI.add('cof-createcontent-universaldiscoveryserviceplugin', function (Y) { }); Y.eZ.PluginRegistry.registerPlugin( - Y.cof.Plugin.CreateContentUniversalDiscoveryService, ['universalDiscoveryViewService'] + Y.cof.Plugin.CreateContentUniversalDiscoveryService, ['universalDiscoveryViewService', 'dashboardBlocksViewService'] ); }); diff --git a/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js b/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js index 9d8c9af..fcb03de 100644 --- a/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js +++ b/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js @@ -94,6 +94,6 @@ YUI.add('cof-selectcontenttypeplugin', function (Y) { }); Y.eZ.PluginRegistry.registerPlugin( - Y.cof.Plugin.SelectContentType, ['universalDiscoveryViewService'] + Y.cof.Plugin.SelectContentType, ['universalDiscoveryViewService', 'dashboardBlocksViewService'] ); }); diff --git a/bundle/Resources/public/templates/create-content-button.hbt b/bundle/Resources/public/templates/create-content-button.hbt new file mode 100644 index 0000000..fee7e75 --- /dev/null +++ b/bundle/Resources/public/templates/create-content-button.hbt @@ -0,0 +1 @@ + diff --git a/bundle/Resources/public/templates/create-content-popup.hbt b/bundle/Resources/public/templates/create-content-popup.hbt new file mode 100644 index 0000000..4f92c21 --- /dev/null +++ b/bundle/Resources/public/templates/create-content-popup.hbt @@ -0,0 +1,3 @@ +
    + +