From 953b6d96283883c542f630b718dbc90b448e72cf Mon Sep 17 00:00:00 2001 From: Maxime Rainville Date: Thu, 22 Aug 2019 16:01:27 +1200 Subject: [PATCH 1/5] FIX Make the HoverBar in-between block more visible --- client/dist/js/bundle.js | 2 +- client/dist/styles/bundle.css | 2 +- .../components/ElementEditor/ElementList.js | 6 +- .../src/components/ElementEditor/HoverBar.js | 175 +++++------------- .../components/ElementEditor/HoverBar.scss | 111 ++++++----- 5 files changed, 117 insertions(+), 179 deletions(-) diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js index 4ae2fc13..2bd6cc41 100644 --- a/client/dist/js/bundle.js +++ b/client/dist/js/bundle.js @@ -1 +1 @@ -!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s="./client/src/bundles/bundle.js")}({"./client/src/boot/index.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var o=n("./client/src/boot/registerComponents.js"),a=r(o),i=n("./client/src/boot/registerTransforms.js"),l=r(i);window.document.addEventListener("DOMContentLoaded",function(){(0,a.default)(),(0,l.default)()})},"./client/src/boot/registerComponents.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),a=r(o),i=n("./client/src/components/ElementEditor/Element.js"),l=r(i),u=n("./client/src/components/ElementEditor/ElementActions.js"),c=r(u),s=n("./client/src/components/ElementEditor/ElementEditor.js"),d=r(s),f=n("./client/src/components/ElementEditor/ElementList.js"),p=r(f),m=n("./client/src/components/ElementEditor/Toolbar.js"),y=r(m),b=n("./client/src/components/ElementEditor/AddNewButton.js"),v=r(b),h=n("./client/src/components/ElementEditor/Header.js"),g=r(h),E=n("./client/src/components/ElementEditor/Content.js"),_=r(E),O=n("./client/src/components/ElementEditor/Summary.js"),T=r(O),j=n("./client/src/components/ElementEditor/InlineEditForm.js"),I=r(j),w=n("./client/src/components/ElementEditor/AddElementPopover.js"),D=r(w),k=n("./client/src/components/ElementEditor/HoverBar.js"),S=r(k),A=n("./client/src/components/ElementEditor/DragPositionIndicator.js"),P=r(A),C=n("./client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js"),N=r(C);t.default=function(){a.default.component.registerMany({ElementEditor:d.default,ElementToolbar:y.default,ElementAddNewButton:v.default,ElementList:p.default,Element:l.default,ElementActions:c.default,ElementHeader:g.default,ElementContent:_.default,ElementSummary:T.default,ElementInlineEditForm:I.default,AddElementPopover:D.default,HoverBar:S.default,DragPositionIndicator:P.default,TextCheckboxGroupField:N.default})}},"./client/src/boot/registerTransforms.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),a=r(o),i=n("./client/src/state/history/readOneBlockQuery.js"),l=r(i),u=n("./client/src/components/HistoricElementView/HistoricElementView.js"),c=r(u),s=n("./client/src/state/history/revertToBlockVersionMutation.js"),d=r(s),f=n("./client/src/state/editor/readBlocksForAreaQuery.js"),p=r(f),m=n("./client/src/state/editor/addElementMutation.js"),y=r(m),b=n("./client/src/components/ElementActions/ArchiveAction.js"),v=r(b),h=n("./client/src/components/ElementActions/PublishAction.js"),g=r(h),E=n("./client/src/components/ElementActions/SaveAction.js"),_=r(E),O=n("./client/src/components/ElementActions/UnpublishAction.js"),T=r(O);t.default=function(){a.default.transform("elemental-fieldgroup",function(e){e.component("FieldGroup.HistoryViewer.VersionDetail",c.default,"HistoricElement")},{after:"field-holders"}),a.default.transform("elements-history",function(e){e.component("HistoryViewer.Form_ItemEditForm",l.default,"ElementHistoryViewer")}),a.default.transform("blocks-history-revert",function(e){e.component("HistoryViewerToolbar.VersionedAdmin.HistoryViewer.Element.HistoryViewerVersionDetail",d.default,"BlockRevertMutation")}),a.default.transform("cms-element-editor",function(e){e.component("ElementList",p.default,"PageElements")}),a.default.transform("cms-element-adder",function(e){e.component("AddElementPopover",y.default,"ElementAddButton")}),a.default.transform("element-actions",function(e){e.component("ElementActions",_.default,"ElementActionsWithSave"),e.component("ElementActions",g.default,"ElementActionsWithPublish"),e.component("ElementActions",T.default,"ElementActionsWithUnpublish"),e.component("ElementActions",v.default,"ElementActionsWithArchive")})}},"./client/src/bundles/bundle.js":function(e,t,n){"use strict";n("./client/src/legacy/ElementEditor/entwine.js"),n("./client/src/boot/index.js")},"./client/src/components/ElementActions/AbstractAction.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=!!e&&e.ID;this.setState({dragTargetElementId:n,dragSpot:!1===t?"bottom":"top"})}},{key:"handleDragEnd",value:function(e,t){var n=this.props;(0,n.actions.handleSortBlock)(e,t,n.areaId).then(function(){var e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}),this.setState({dragTargetElementId:null,dragSpot:null})}},{key:"render",value:function(){var e=this.props,t=e.fieldName,n=e.formState,r=e.ToolbarComponent,o=e.ListComponent,a=e.areaId,i=e.elementTypes,l=e.isDraggingOver,u=e.connectDropTarget,c=e.allowedElements,s=this.state,d=s.dragTargetElementId,p=s.dragSpot,m=c.map(function(e){return i.find(function(t){return t.class===e})});return u(f.default.createElement("div",{className:"element-editor"},f.default.createElement(r,{elementTypes:m,areaId:a,onDragOver:this.handleDragOver}),f.default.createElement(o,{allowedElementTypes:m,elementTypes:i,areaId:a,onDragOver:this.handleDragOver,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd,dragSpot:p,isDraggingOver:l,dragTargetElementId:d}),f.default.createElement(j.default,{elementTypes:i}),f.default.createElement("input",{name:t,type:"hidden",value:JSON.stringify(n)||"",className:"no-change-track"})))}}]),t}(d.PureComponent);D.propTypes={fieldName:m.default.string,elementTypes:m.default.arrayOf(v.elementTypeType).isRequired,allowedElements:m.default.arrayOf(m.default.string).isRequired,areaId:m.default.number.isRequired,actions:m.default.shape({handleSortBlock:m.default.func})},t.Component=D,t.default=(0,b.compose)(w.default,(0,E.DropTarget)("element",{},function(e,t){return{connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}}),(0,h.connect)(u),(0,y.inject)(["ElementToolbar","ElementList"],function(e,t){return{ToolbarComponent:e,ListComponent:t}},function(){return"ElementEditor"}),O.default)(D)},"./client/src/components/ElementEditor/ElementList.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;var l=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:null;return(Array.isArray(t)?t:a().elementTypes).find(function(t){return t.class===e||t.name===e})}},"./client/src/state/editor/loadElementFormStateName.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementFormStateName=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),n=t.form.elementForm.formNameTemplate;return e?n.replace("{id}",e):n}},"./client/src/state/editor/loadElementSchemaValue.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementSchemaValue=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),r=n.form.elementForm[e]||"";return t?r+"/"+t:r}},"./client/src/state/editor/publishBlockMutation.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.config=t.mutation=void 0;var r=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=!!e&&e.ID;this.setState({dragTargetElementId:n,dragSpot:!1===t?"bottom":"top"})}},{key:"handleDragEnd",value:function(e,t){var n=this.props;(0,n.actions.handleSortBlock)(e,t,n.areaId).then(function(){var e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}),this.setState({dragTargetElementId:null,dragSpot:null})}},{key:"render",value:function(){var e=this.props,t=e.fieldName,n=e.formState,r=e.ToolbarComponent,o=e.ListComponent,a=e.areaId,i=e.elementTypes,l=e.isDraggingOver,u=e.connectDropTarget,c=e.allowedElements,s=this.state,d=s.dragTargetElementId,p=s.dragSpot,m=c.map(function(e){return i.find(function(t){return t.class===e})});return u(f.default.createElement("div",{className:"element-editor"},f.default.createElement(r,{elementTypes:m,areaId:a,onDragOver:this.handleDragOver}),f.default.createElement(o,{allowedElementTypes:m,elementTypes:i,areaId:a,onDragOver:this.handleDragOver,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd,dragSpot:p,isDraggingOver:l,dragTargetElementId:d}),f.default.createElement(j.default,{elementTypes:i}),f.default.createElement("input",{name:t,type:"hidden",value:JSON.stringify(n)||"",className:"no-change-track"})))}}]),t}(d.PureComponent);D.propTypes={fieldName:m.default.string,elementTypes:m.default.arrayOf(g.elementTypeType).isRequired,allowedElements:m.default.arrayOf(m.default.string).isRequired,areaId:m.default.number.isRequired,actions:m.default.shape({handleSortBlock:m.default.func})},t.Component=D,t.default=(0,b.compose)(w.default,(0,E.DropTarget)("element",{},function(e,t){return{connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}}),(0,v.connect)(u),(0,y.inject)(["ElementToolbar","ElementList"],function(e,t){return{ToolbarComponent:e,ListComponent:t}},function(){return"ElementEditor"}),O.default)(D)},"./client/src/components/ElementEditor/ElementList.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;var l=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:null;return(Array.isArray(t)?t:a().elementTypes).find(function(t){return t.class===e||t.name===e})}},"./client/src/state/editor/loadElementFormStateName.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementFormStateName=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),n=t.form.elementForm.formNameTemplate;return e?n.replace("{id}",e):n}},"./client/src/state/editor/loadElementSchemaValue.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementSchemaValue=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),r=n.form.elementForm[e]||"";return t?r+"/"+t:r}},"./client/src/state/editor/publishBlockMutation.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.config=t.mutation=void 0;var r=Object.assign||function(e){for(var t=1;t{i18n._t('ElementList.ADD_BLOCKS', 'Add blocks to place your content')}; } - const output = blocks.map((element) => ( + let output = blocks.map((element) => (
)); + output = [ + + ].concat(output); + const dragIndicatorIndex = this.getDragIndicatorIndex(); if (isDraggingOver && dragIndicatorIndex !== null) { output.splice(dragIndicatorIndex, 0, ); diff --git a/client/src/components/ElementEditor/HoverBar.js b/client/src/components/ElementEditor/HoverBar.js index 9dce646e..b504ef43 100644 --- a/client/src/components/ElementEditor/HoverBar.js +++ b/client/src/components/ElementEditor/HoverBar.js @@ -4,6 +4,45 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { inject } from 'lib/Injector'; import { elementTypeType } from 'types/elementTypeType'; +import i18n from 'i18n'; + +/** + * Render an hoverbar without any state + */ +function StatelessHoverBar({ + AddElementPopoverComponent, + elementTypes, + elementId, + areaId, + popoverOpen, + onToggle }) { + const hoverBarClassNames = classNames('font-icon-plus-circled', 'hover-bar__line'); + const areaClasses = classNames( + 'hover-bar__area', + { 'hover-bar__area--focus': popoverOpen } + ); + const label = i18n._t('ElementAddNewButton.ADD_BLOCK', 'Add block'); + + return ( +
+ + +
+ ); +} /** * The HoverBar component used in the context of an ElementEditor allows CMS users to add available @@ -12,151 +51,29 @@ import { elementTypeType } from 'types/elementTypeType'; class HoverBar extends Component { constructor(props) { super(props); - - this.handleMouseEnter = this.handleMouseEnter.bind(this); - this.handleMouseLeave = this.handleMouseLeave.bind(this); - this.renderHoverBar = this.renderHoverBar.bind(this); this.toggle = this.toggle.bind(this); - this.state = { - timeoutRef: null, - delayAreaActive: false, - instAreaActive: false, popoverOpen: false }; } - /** - * Handle mouse entering the hover area between two elements. Calculates if mouse entered via - * 'delayed' or 'instantaneous' hover area and 'activates' these areas with a time out in the - * former case and instantaneously in the latter. - * - * @param event - */ - handleMouseEnter(event) { - const { elementId } = this.props; - - // padding of elemental editor + width of font-icon - const plusButtonWidth = 50; - - const addBlockAreaContainer = window.document.getElementById(`AddBlockArea_${elementId}`); - const clientWidth = addBlockAreaContainer.clientWidth; - const offsetLeft = addBlockAreaContainer.getBoundingClientRect().left; - const mousePos = event.pageX - offsetLeft; - const delayArea = clientWidth - plusButtonWidth; - - // mouse entered within 'delay' hover area - if (mousePos < delayArea) { - const timeoutRef = setTimeout(() => { - this.setState({ - delayAreaActive: true, - }); - }, 200); - - this.setState({ - timeoutRef, - }); - } else { - // mouse entered within 'instantaneous' hover area - this.setState({ - instAreaActive: true, - }); - } - } - - /** - * Handles mouse leaving the hover area between two elements. - * 'Deactivates' both the 'delayed' and 'instantaneous' hover area sections, unless the popover - * is rendered. - * - */ - handleMouseLeave() { - clearTimeout(this.state.timeoutRef); - - if (this.state.popoverOpen) { - return; - } - this.setState({ delayAreaActive: false, instAreaActive: false }); - } - toggle() { this.setState({ popoverOpen: !this.state.popoverOpen }); } - /** - * Render a hover bar. Styling depends on the hover area section that triggered this function. - * - * @returns {DOMElement} - */ - renderHoverBar(calledInstantaneously) { - const { elementId } = this.props; - - const hoverBarClassNames = classNames( - 'font-icon-plus-circled', - 'element-editor__add-block-hover-bar', - { - 'element-editor__add-block-hover-bar--delay': !calledInstantaneously, - 'element-editor__add-block-hover-bar--inst': calledInstantaneously, - } - ); - - return ( - Date: Mon, 26 Aug 2019 16:58:05 +1200 Subject: [PATCH 4/5] Doc type of cssPrefix argument Co-Authored-By: Robbie Averill --- client/src/lib/prefixClassNames.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/lib/prefixClassNames.js b/client/src/lib/prefixClassNames.js index 4095aff1..6fad7d8c 100644 --- a/client/src/lib/prefixClassNames.js +++ b/client/src/lib/prefixClassNames.js @@ -2,7 +2,7 @@ import classNames from 'classnames'; /** * Utility method wrap around classeNames to prefix the return class names - * @param cssPrefix + * @param {string} cssPrefix * @returns {Function} */ const prefixClassNames = (cssPrefix) => (...args) => { From ce72d57a5e15f39f384ad416f2b0adef20aaf374 Mon Sep 17 00:00:00 2001 From: Maxime Rainville Date: Wed, 28 Aug 2019 10:34:44 +1200 Subject: [PATCH 5/5] Answer PR feedback --- client/dist/js/bundle.js | 2 +- client/dist/styles/bundle.css | 2 +- .../src/components/ElementEditor/HoverBar.js | 6 +- .../components/ElementEditor/HoverBar.scss | 119 +++++++++--------- 4 files changed, 66 insertions(+), 63 deletions(-) diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js index 9ded979d..b85b19d6 100644 --- a/client/dist/js/bundle.js +++ b/client/dist/js/bundle.js @@ -1 +1 @@ -!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s="./client/src/bundles/bundle.js")}({"./client/src/boot/index.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var o=n("./client/src/boot/registerComponents.js"),a=r(o),i=n("./client/src/boot/registerTransforms.js"),l=r(i);window.document.addEventListener("DOMContentLoaded",function(){(0,a.default)(),(0,l.default)()})},"./client/src/boot/registerComponents.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),a=r(o),i=n("./client/src/components/ElementEditor/Element.js"),l=r(i),u=n("./client/src/components/ElementEditor/ElementActions.js"),c=r(u),s=n("./client/src/components/ElementEditor/ElementEditor.js"),d=r(s),f=n("./client/src/components/ElementEditor/ElementList.js"),p=r(f),m=n("./client/src/components/ElementEditor/Toolbar.js"),y=r(m),b=n("./client/src/components/ElementEditor/AddNewButton.js"),g=r(b),v=n("./client/src/components/ElementEditor/Header.js"),h=r(v),E=n("./client/src/components/ElementEditor/Content.js"),_=r(E),O=n("./client/src/components/ElementEditor/Summary.js"),T=r(O),j=n("./client/src/components/ElementEditor/InlineEditForm.js"),I=r(j),w=n("./client/src/components/ElementEditor/AddElementPopover.js"),D=r(w),k=n("./client/src/components/ElementEditor/HoverBar.js"),S=r(k),P=n("./client/src/components/ElementEditor/DragPositionIndicator.js"),A=r(P),C=n("./client/src/components/TextCheckboxGroupField/TextCheckboxGroupField.js"),N=r(C);t.default=function(){a.default.component.registerMany({ElementEditor:d.default,ElementToolbar:y.default,ElementAddNewButton:g.default,ElementList:p.default,Element:l.default,ElementActions:c.default,ElementHeader:h.default,ElementContent:_.default,ElementSummary:T.default,ElementInlineEditForm:I.default,AddElementPopover:D.default,HoverBar:S.default,DragPositionIndicator:A.default,TextCheckboxGroupField:N.default})}},"./client/src/boot/registerTransforms.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),a=r(o),i=n("./client/src/state/history/readOneBlockQuery.js"),l=r(i),u=n("./client/src/components/HistoricElementView/HistoricElementView.js"),c=r(u),s=n("./client/src/state/history/revertToBlockVersionMutation.js"),d=r(s),f=n("./client/src/state/editor/readBlocksForAreaQuery.js"),p=r(f),m=n("./client/src/state/editor/addElementMutation.js"),y=r(m),b=n("./client/src/components/ElementActions/ArchiveAction.js"),g=r(b),v=n("./client/src/components/ElementActions/PublishAction.js"),h=r(v),E=n("./client/src/components/ElementActions/SaveAction.js"),_=r(E),O=n("./client/src/components/ElementActions/UnpublishAction.js"),T=r(O);t.default=function(){a.default.transform("elemental-fieldgroup",function(e){e.component("FieldGroup.HistoryViewer.VersionDetail",c.default,"HistoricElement")},{after:"field-holders"}),a.default.transform("elements-history",function(e){e.component("HistoryViewer.Form_ItemEditForm",l.default,"ElementHistoryViewer")}),a.default.transform("blocks-history-revert",function(e){e.component("HistoryViewerToolbar.VersionedAdmin.HistoryViewer.Element.HistoryViewerVersionDetail",d.default,"BlockRevertMutation")}),a.default.transform("cms-element-editor",function(e){e.component("ElementList",p.default,"PageElements")}),a.default.transform("cms-element-adder",function(e){e.component("AddElementPopover",y.default,"ElementAddButton")}),a.default.transform("element-actions",function(e){e.component("ElementActions",_.default,"ElementActionsWithSave"),e.component("ElementActions",h.default,"ElementActionsWithPublish"),e.component("ElementActions",T.default,"ElementActionsWithUnpublish"),e.component("ElementActions",g.default,"ElementActionsWithArchive")})}},"./client/src/bundles/bundle.js":function(e,t,n){"use strict";n("./client/src/legacy/ElementEditor/entwine.js"),n("./client/src/boot/index.js")},"./client/src/components/ElementActions/AbstractAction.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=!!e&&e.ID;this.setState({dragTargetElementId:n,dragSpot:!1===t?"bottom":"top"})}},{key:"handleDragEnd",value:function(e,t){var n=this.props;(0,n.actions.handleSortBlock)(e,t,n.areaId).then(function(){var e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}),this.setState({dragTargetElementId:null,dragSpot:null})}},{key:"render",value:function(){var e=this.props,t=e.fieldName,n=e.formState,r=e.ToolbarComponent,o=e.ListComponent,a=e.areaId,i=e.elementTypes,l=e.isDraggingOver,u=e.connectDropTarget,c=e.allowedElements,s=this.state,d=s.dragTargetElementId,p=s.dragSpot,m=c.map(function(e){return i.find(function(t){return t.class===e})});return u(f.default.createElement("div",{className:"element-editor"},f.default.createElement(r,{elementTypes:m,areaId:a,onDragOver:this.handleDragOver}),f.default.createElement(o,{allowedElementTypes:m,elementTypes:i,areaId:a,onDragOver:this.handleDragOver,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd,dragSpot:p,isDraggingOver:l,dragTargetElementId:d}),f.default.createElement(j.default,{elementTypes:i}),f.default.createElement("input",{name:t,type:"hidden",value:JSON.stringify(n)||"",className:"no-change-track"})))}}]),t}(d.PureComponent);D.propTypes={fieldName:m.default.string,elementTypes:m.default.arrayOf(g.elementTypeType).isRequired,allowedElements:m.default.arrayOf(m.default.string).isRequired,areaId:m.default.number.isRequired,actions:m.default.shape({handleSortBlock:m.default.func})},t.Component=D,t.default=(0,b.compose)(w.default,(0,E.DropTarget)("element",{},function(e,t){return{connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}}),(0,v.connect)(u),(0,y.inject)(["ElementToolbar","ElementList"],function(e,t){return{ToolbarComponent:e,ListComponent:t}},function(){return"ElementEditor"}),O.default)(D)},"./client/src/components/ElementEditor/ElementList.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;var l=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:null;return(Array.isArray(t)?t:a().elementTypes).find(function(t){return t.class===e||t.name===e})}},"./client/src/state/editor/loadElementFormStateName.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementFormStateName=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),n=t.form.elementForm.formNameTemplate;return e?n.replace("{id}",e):n}},"./client/src/state/editor/loadElementSchemaValue.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementSchemaValue=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),r=n.form.elementForm[e]||"";return t?r+"/"+t:r}},"./client/src/state/editor/publishBlockMutation.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.config=t.mutation=void 0;var r=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=!!e&&e.ID;this.setState({dragTargetElementId:n,dragSpot:!1===t?"bottom":"top"})}},{key:"handleDragEnd",value:function(e,t){var n=this.props;(0,n.actions.handleSortBlock)(e,t,n.areaId).then(function(){var e=window.jQuery(".cms-preview");e.entwine("ss.preview")._loadUrl(e.find("iframe").attr("src"))}),this.setState({dragTargetElementId:null,dragSpot:null})}},{key:"render",value:function(){var e=this.props,t=e.fieldName,n=e.formState,r=e.ToolbarComponent,o=e.ListComponent,a=e.areaId,i=e.elementTypes,l=e.isDraggingOver,u=e.connectDropTarget,c=e.allowedElements,s=this.state,d=s.dragTargetElementId,p=s.dragSpot,m=c.map(function(e){return i.find(function(t){return t.class===e})});return u(f.default.createElement("div",{className:"element-editor"},f.default.createElement(r,{elementTypes:m,areaId:a,onDragOver:this.handleDragOver}),f.default.createElement(o,{allowedElementTypes:m,elementTypes:i,areaId:a,onDragOver:this.handleDragOver,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd,dragSpot:p,isDraggingOver:l,dragTargetElementId:d}),f.default.createElement(j.default,{elementTypes:i}),f.default.createElement("input",{name:t,type:"hidden",value:JSON.stringify(n)||"",className:"no-change-track"})))}}]),t}(d.PureComponent);D.propTypes={fieldName:m.default.string,elementTypes:m.default.arrayOf(g.elementTypeType).isRequired,allowedElements:m.default.arrayOf(m.default.string).isRequired,areaId:m.default.number.isRequired,actions:m.default.shape({handleSortBlock:m.default.func})},t.Component=D,t.default=(0,b.compose)(w.default,(0,E.DropTarget)("element",{},function(e,t){return{connectDropTarget:e.dropTarget(),isDraggingOver:t.isOver()}}),(0,v.connect)(u),(0,y.inject)(["ElementToolbar","ElementList"],function(e,t){return{ToolbarComponent:e,ListComponent:t}},function(){return"ElementEditor"}),O.default)(D)},"./client/src/components/ElementEditor/ElementList.js":function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.Component=void 0;var l=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:null;return(Array.isArray(t)?t:a().elementTypes).find(function(t){return t.class===e||t.name===e})}},"./client/src/state/editor/loadElementFormStateName.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementFormStateName=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementFormStateName=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),n=t.form.elementForm.formNameTemplate;return e?n.replace("{id}",e):n}},"./client/src/state/editor/loadElementSchemaValue.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadElementSchemaValue=void 0;var r=n(12),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.loadElementSchemaValue=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=o.default.getSection("DNADesign\\Elemental\\Controllers\\ElementalAreaController"),r=n.form.elementForm[e]||"";return t?r+"/"+t:r}},"./client/src/state/editor/publishBlockMutation.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.config=t.mutation=void 0;var r=Object.assign||function(e){for(var t=1;t diff --git a/client/src/components/ElementEditor/HoverBar.scss b/client/src/components/ElementEditor/HoverBar.scss index 80f25ed8..a0f3ab4e 100644 --- a/client/src/components/ElementEditor/HoverBar.scss +++ b/client/src/components/ElementEditor/HoverBar.scss @@ -1,80 +1,83 @@ $transition: all ease .2s; .element-editor { + &__hover-bar { height: 0; display: flex; width: 100%; position: relative; align-items: center; + } + + &__hover-bar-area { + background-color: transparent; + min-height: $spacer * 1.5; + width: 100%; + margin: 0; + padding: 0; + border: none; + outline: none; + transition: $transition; + position: relative; - &__area { - background-color: transparent; - min-height: $spacer * 1.5; - width: 100%; - margin: 0; - padding: 0; - border: none; + &:hover, &:focus, &--focus { outline: none; - transition: $transition; - position: relative; - &-inner { - margin: 0 0; - display: block; - position: relative; - transition: $transition; + .element-editor__hover-bar-area-inner { + margin: 0 20px; } - &:hover, &:focus, &--focus { - outline: none; - - .element-editor__hover-bar__area-inner { - margin: 0 20px; - } - .element-editor__hover-bar__line { - opacity: 1; - border-radius: 5px; - max-height: 5px; - &:before { - transform: translateY(calc(2px + -50%)) scale(1); - } + .element-editor__hover-bar-line { + opacity: 1; + border-radius: 5px; + max-height: 5px; + &:before { + transform: translateY(calc(3px + -50%)) scale(1); } } } + } - &__line { - background-color: $blue; - transition: $transition; - opacity: 0; - align-self: center; - width: 100%; - border: 0; - position: absolute; - display: flex; - justify-content: flex-end; - padding: 0; - top: 50%; - transform: translateY(-66%); - max-height: 0; - border-radius: 0; + &__hover-bar-area-inner { + margin: 0 0; + display: block; + position: relative; + transition: $transition; + } - &:before { - font-size: 1.5rem; - background-image: radial-gradient(#fff 50%, transparent 50%); - // position plus 'button' to be able to modify it's z-index - position: relative; - z-index: 2; - margin-right: 50%; - right: -.5em; - display: block; - height: 1em; - // IE-11 fallback - transform: translateY(-35%); - transform: translateY(calc(-1px + -50%)) scale(0); - transition: $transition; - color: $blue; - } + &__hover-bar-line { + background-color: $blue; + transition: $transition; + opacity: 0; + align-self: center; + width: 100%; + border: 0; + position: absolute; + display: flex; + justify-content: flex-end; + padding: 0; + top: 50%; + transform: translateY(-66%); + max-height: 0; + border-radius: 0; + + &:before { + font-size: 1.5rem; + background-image: radial-gradient(#fff 50%, transparent 50%); + // position plus 'button' to be able to modify it's z-index + position: relative; + z-index: 2; + margin-right: 50%; + right: -.5em; + display: block; + height: 1em; + // IE-11 fallback + transform: translateY(-35%); + transform: translateY(calc(-1px + -50%)) scale(0); + transition: $transition; + color: $blue; } } + }