From 61acdf9f468d93951c8fa509876c2a10490108b7 Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Thu, 15 Oct 2015 20:17:50 -0700 Subject: [PATCH] Fixed Redactor toolbar styling in Fancy layout, minor fix in Inspector. --- modules/backend/assets/css/october.css | 2 +- .../assets/less/layout/fancylayout.less | 5 +- .../system/assets/ui/js/inspector.manager.js | 62 +++++++++++++------ .../system/assets/ui/js/inspector.surface.js | 4 +- .../assets/ui/js/inspector.wrapper.popup.js | 4 ++ modules/system/assets/ui/less/popover.less | 2 +- modules/system/assets/ui/storm-min.js | 29 +++++---- modules/system/assets/ui/storm.css | 2 +- 8 files changed, 74 insertions(+), 36 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 0d94b2f16..559efe4c7 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -868,7 +868,7 @@ html.csstransitions body.outer.preload .outer-form-container{-webkit-transform:s .fancy-layout .field-richeditor{border:none;border-left:1px solid #e0e0e0 !important} .fancy-layout .field-richeditor,.fancy-layout .field-richeditor .redactor_box,.fancy-layout .field-richeditor .redactor_toolbar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-top-right-radius:0;border-top-left-radius:0} .fancy-layout .field-richeditor .redactor-box textarea{background:white;padding:20px !important;color:#333333;font-size:14px} -.fancy-layout .secondary-content-tabs .field-richeditor .redactor-box .redactor-toolbar{margin:20px 20px 0 20px !important;-webkit-border-radius:3px !important;-moz-border-radius:3px !important;border-radius:3px !important} +.fancy-layout .secondary-content-tabs .field-richeditor .redactor-box .redactor-toolbar{margin:20px 0 0 0!important;left:20px;right:20px;width:auto;-webkit-border-radius:3px !important;-moz-border-radius:3px !important;border-radius:3px !important} body.side-panel-not-fixed .fancy-layout .field-richeditor{border-left:none} html.cssanimations .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator > span{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;background-image:url('../../../system/assets/ui/images/loader-white.svg');background-size:20px 20px} .flyout-container > .flyout{overflow:hidden;width:0;left:0 !important;-webkit-transition:width 0.1s;transition:width 0.1s} diff --git a/modules/backend/assets/less/layout/fancylayout.less b/modules/backend/assets/less/layout/fancylayout.less index 20d924717..536e27c06 100644 --- a/modules/backend/assets/less/layout/fancylayout.less +++ b/modules/backend/assets/less/layout/fancylayout.less @@ -562,7 +562,10 @@ .secondary-content-tabs .field-richeditor { .redactor-box .redactor-toolbar { - margin: 20px 20px 0 20px !important; + margin: 20px 0 0 0!important; + left: 20px; + right: 20px; + width: auto; .border-radius(3px) !important; } } diff --git a/modules/system/assets/ui/js/inspector.manager.js b/modules/system/assets/ui/js/inspector.manager.js index 73267680d..a4f6f7403 100644 --- a/modules/system/assets/ui/js/inspector.manager.js +++ b/modules/system/assets/ui/js/inspector.manager.js @@ -35,45 +35,70 @@ return $container } + InspectorManager.prototype.loadElementOptions = function($element) { + var options = {} + + // Only specific options are allowed, don't load all options with data() + // + if ($element.data('inspector-css-class')) { + options.inspectorCssClass = $element.data('inspector-css-class') + } + + return options + } + InspectorManager.prototype.createInspectorPopup = function($element, containerSupported) { - new $.oc.inspector.wrappers.popup($element, null, { - containerSupported: containerSupported - }) + var options = $.extend(this.loadElementOptions($element), { + containerSupported: containerSupported + }) + + new $.oc.inspector.wrappers.popup($element, null, options) } InspectorManager.prototype.createInspectorContainer = function($element, $container) { - new $.oc.inspector.wrappers.container($element, null, { - containerSupported: true, - container: $container - }) + var options = $.extend(this.loadElementOptions($element), { + containerSupported: true, + container: $container + }) + + new $.oc.inspector.wrappers.container($element, null, options) } InspectorManager.prototype.switchToPopup = function(wrapper) { - new $.oc.inspector.wrappers.popup(wrapper.$element, wrapper, { - containerSupported: true - }) + var options = $.extend(this.loadElementOptions(wrapper.$element), { + containerSupported: true + }) + + new $.oc.inspector.wrappers.popup(wrapper.$element, wrapper, options) wrapper.cleanupAfterSwitch() this.setContainerPreference(false) } InspectorManager.prototype.switchToContainer = function(wrapper) { - var $container = this.getContainerElement(wrapper.$element) + var $container = this.getContainerElement(wrapper.$element), + options = $.extend(this.loadElementOptions(wrapper.$element), { + containerSupported: true, + container: $container + }) if (!$container) { throw new Error('Cannot switch to container: a container element is not found') } - new $.oc.inspector.wrappers.container(wrapper.$element, wrapper, { - containerSupported: true, - container: $container - }) + new $.oc.inspector.wrappers.container(wrapper.$element, wrapper, options) wrapper.cleanupAfterSwitch() this.setContainerPreference(true) } - InspectorManager.prototype.createInspector = function($element) { + InspectorManager.prototype.createInspector = function(element) { + var $element = $(element) + + if ($element.data('oc.inspectorVisible')) { + return false + } + var $container = this.getContainerElement($element) // If there's no container option, create the Inspector popup @@ -142,10 +167,9 @@ InspectorManager.prototype.onInspectableClicked = function(ev) { var $element = $(ev.currentTarget) - if ($element.data('oc.inspectorVisible')) + if (this.createInspector($element) === false) { return false - - this.createInspector($element) + } } $.oc.inspector.manager = new InspectorManager() diff --git a/modules/system/assets/ui/js/inspector.surface.js b/modules/system/assets/ui/js/inspector.surface.js index 63d9b6ff3..6b9ca3824 100644 --- a/modules/system/assets/ui/js/inspector.surface.js +++ b/modules/system/assets/ui/js/inspector.surface.js @@ -45,8 +45,8 @@ this.parsedProperties = $.oc.inspector.engine.processPropertyGroups(properties) this.container = containerElement this.inspectorUniqueId = inspectorUniqueId - this.values = values - this.originalValues = $.extend(true, {}, values) // Clone the values hash + this.values = values !== null ? values : {} + this.originalValues = $.extend(true, {}, this.values) // Clone the values hash this.idCounter = 1 this.popupCounter = 0 this.parentSurface = parentSurface diff --git a/modules/system/assets/ui/js/inspector.wrapper.popup.js b/modules/system/assets/ui/js/inspector.wrapper.popup.js index 8ee408fb2..4904aaaff 100644 --- a/modules/system/assets/ui/js/inspector.wrapper.popup.js +++ b/modules/system/assets/ui/js/inspector.wrapper.popup.js @@ -104,6 +104,10 @@ this.popoverObj = this.$element.data('oc.popover') this.$popoverContainer = this.popoverObj.$container + if (this.options.inspectorCssClass !== undefined) { + this.$popoverContainer.addClass(this.options.inspectorCssClass) + } + if (this.options.containerSupported) { var moveToContainerButton = $('') diff --git a/modules/system/assets/ui/less/popover.less b/modules/system/assets/ui/less/popover.less index 5e3297e91..6255301ba 100644 --- a/modules/system/assets/ui/less/popover.less +++ b/modules/system/assets/ui/less/popover.less @@ -188,7 +188,7 @@ div.control-popover { } &:before { - .transform(~'transform: rotate(270deg)'); + .transform(~'rotate(270deg)'); } } } diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index 473d48014..700f544f0 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -3490,8 +3490,8 @@ this.rawProperties=properties this.parsedProperties=$.oc.inspector.engine.processPropertyGroups(properties) this.container=containerElement this.inspectorUniqueId=inspectorUniqueId -this.values=values -this.originalValues=$.extend(true,{},values) +this.values=values!==null?values:{} +this.originalValues=$.extend(true,{},this.values) this.idCounter=1 this.popupCounter=0 this.parentSurface=parentSurface @@ -3743,17 +3743,25 @@ if($containerHolder.length===0){return null} var $container=$containerHolder.find($containerHolder.data('inspector-container')) if($container.length===0){throw new Error('Inspector container '+$containerHolder.data['inspector-container']+' element is not found.')} return $container} -InspectorManager.prototype.createInspectorPopup=function($element,containerSupported){new $.oc.inspector.wrappers.popup($element,null,{containerSupported:containerSupported})} -InspectorManager.prototype.createInspectorContainer=function($element,$container){new $.oc.inspector.wrappers.container($element,null,{containerSupported:true,container:$container})} -InspectorManager.prototype.switchToPopup=function(wrapper){new $.oc.inspector.wrappers.popup(wrapper.$element,wrapper,{containerSupported:true}) +InspectorManager.prototype.loadElementOptions=function($element){var options={} +if($element.data('inspector-css-class')){options.inspectorCssClass=$element.data('inspector-css-class')} +return options} +InspectorManager.prototype.createInspectorPopup=function($element,containerSupported){var options=$.extend(this.loadElementOptions($element),{containerSupported:containerSupported}) +new $.oc.inspector.wrappers.popup($element,null,options)} +InspectorManager.prototype.createInspectorContainer=function($element,$container){var options=$.extend(this.loadElementOptions($element),{containerSupported:true,container:$container}) +new $.oc.inspector.wrappers.container($element,null,options)} +InspectorManager.prototype.switchToPopup=function(wrapper){var options=$.extend(this.loadElementOptions(wrapper.$element),{containerSupported:true}) +new $.oc.inspector.wrappers.popup(wrapper.$element,wrapper,options) wrapper.cleanupAfterSwitch() this.setContainerPreference(false)} -InspectorManager.prototype.switchToContainer=function(wrapper){var $container=this.getContainerElement(wrapper.$element) +InspectorManager.prototype.switchToContainer=function(wrapper){var $container=this.getContainerElement(wrapper.$element),options=$.extend(this.loadElementOptions(wrapper.$element),{containerSupported:true,container:$container}) if(!$container){throw new Error('Cannot switch to container: a container element is not found')} -new $.oc.inspector.wrappers.container(wrapper.$element,wrapper,{containerSupported:true,container:$container}) +new $.oc.inspector.wrappers.container(wrapper.$element,wrapper,options) wrapper.cleanupAfterSwitch() this.setContainerPreference(true)} -InspectorManager.prototype.createInspector=function($element){var $container=this.getContainerElement($element) +InspectorManager.prototype.createInspector=function(element){var $element=$(element) +if($element.data('oc.inspectorVisible')){return false} +var $container=this.getContainerElement($element) if(!$container){this.createInspectorPopup($element,false)} else{if(!this.applyValuesFromContainer($container)||!this.containerHidingAllowed($container)){return} $.oc.foundation.controlUtils.disposeControls($container.get(0)) @@ -3772,9 +3780,7 @@ $container.trigger(allowedEvent) if(allowedEvent.isDefaultPrevented()){return false} return true} InspectorManager.prototype.onInspectableClicked=function(ev){var $element=$(ev.currentTarget) -if($element.data('oc.inspectorVisible')) -return false -this.createInspector($element)} +if(this.createInspector($element)===false){return false}} $.oc.inspector.manager=new InspectorManager()}(window.jQuery);+function($){"use strict";if($.oc.inspector===undefined) $.oc.inspector={} if($.oc.inspector.wrappers===undefined) @@ -3905,6 +3911,7 @@ this.$element.ocPopover({content:this.getPopoverContents(),highlightModalTarget: this.setInspectorVisibleFlag(true) this.popoverObj=this.$element.data('oc.popover') this.$popoverContainer=this.popoverObj.$container +if(this.options.inspectorCssClass!==undefined){this.$popoverContainer.addClass(this.options.inspectorCssClass)} if(this.options.containerSupported){var moveToContainerButton=$('') this.$popoverContainer.find('.popover-head').append(moveToContainerButton)} this.$popoverContainer.find('[data-inspector-title]').text(this.title) diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 6511dadf3..601acfcaf 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -1212,7 +1212,7 @@ div.control-popover .popover-head .close{float:none;position:absolute;right:11px div.control-popover .popover-head .close:hover{opacity:1;filter:alpha(opacity=100)} div.control-popover .popover-head .inspector-move-to-container{opacity:0.4;filter:alpha(opacity=40);position:absolute;top:12px;right:26px;float:none;color:#ffffff;cursor:pointer} div.control-popover .popover-head .inspector-move-to-container:hover{opacity:1;filter:alpha(opacity=100);color:#ffffff} -div.control-popover .popover-head .inspector-move-to-container:before{-webkit-transform:transform:rotate(270deg);-ms-transform:transform:rotate(270deg);transform:transform:rotate(270deg)} +div.control-popover .popover-head .inspector-move-to-container:before{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)} div.control-popover.placement-bottom .popover-head:before{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-bottom:8px solid #d35400;left:15px;top:-8px} div.control-popover.placement-left .popover-head:before{content:'';display:block;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-left:8px solid #d35400;right:-8px;top:7px} div.control-popover.placement-right .popover-head:before{content:'';display:block;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-right:8px solid #d35400;left:-8px;top:7px}