diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 4698c3b08..96eeff815 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -766,7 +766,7 @@ html.csstransitions body.outer.preload .outer-form-container{-webkit-transform:s .fancy-layout .control-tabs.master-tabs.scroll-after:after,.fancy-layout.control-tabs.master-tabs.scroll-after:after{color:#ffffff} .fancy-layout .control-tabs.master-tabs > div > div.tabs-container,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container{background:#d35400;padding-left:20px;padding-right:20px} .fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs{margin-left:-8px} -.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li{margin-left:-10px} +.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li{margin-left:-10px;top:1px} .fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li span.tab-close,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li span.tab-close{top:9px;right:-3px;left:auto;z-index:110} .fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li span.tab-close i,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li span.tab-close i{top:4px;right:1px;color:rgba(255,255,255,0.3) !important;font:14px bold "Helvetica Neue",Helvetica,Arial,sans-serif} .fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover,.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover{color:#ffffff !important} diff --git a/modules/backend/assets/less/layout/fancylayout.less b/modules/backend/assets/less/layout/fancylayout.less index 536e27c06..8c4d5c4bb 100644 --- a/modules/backend/assets/less/layout/fancylayout.less +++ b/modules/backend/assets/less/layout/fancylayout.less @@ -55,6 +55,7 @@ margin-left: -8px; > li { margin-left: -10px; + top: 1px; span.tab-close{ top: 9px; diff --git a/modules/system/assets/ui/js/inspector.surface.js b/modules/system/assets/ui/js/inspector.surface.js index 6b9ca3824..4c6d78e75 100644 --- a/modules/system/assets/ui/js/inspector.surface.js +++ b/modules/system/assets/ui/js/inspector.surface.js @@ -119,6 +119,7 @@ if (!this.parentSurface) { $(this.tableContainer).one('dispose-control', this.proxy(this.dispose)) $(this.tableContainer).on('click', 'tr.group, tr.control-group', this.proxy(this.onGroupClick)) + $(this.tableContainer).on('focus-control', this.proxy(this.focusFirstEditor)) } } @@ -126,6 +127,7 @@ if (!this.parentSurface) { $(this.tableContainer).off('dispose-control', this.proxy(this.dispose)) $(this.tableContainer).off('click', 'tr.group, tr.control-group', this.proxy(this.onGroupClick)) + $(this.tableContainer).off('focus-control', this.proxy(this.focusFirstEditor)) } } diff --git a/modules/system/assets/ui/js/inspector.wrapper.popup.js b/modules/system/assets/ui/js/inspector.wrapper.popup.js index 4904aaaff..a8b3da0c0 100644 --- a/modules/system/assets/ui/js/inspector.wrapper.popup.js +++ b/modules/system/assets/ui/js/inspector.wrapper.popup.js @@ -33,6 +33,8 @@ this.showPopover() this.initSurface(this.$popoverContainer.find('[data-surface-container]').get(0), properties, values) + this.repositionPopover() + this.registerPopupHandlers() } @@ -40,6 +42,8 @@ this.showPopover() this.surface.moveToContainer(this.$popoverContainer.find('[data-surface-container]').get(0)) + this.repositionPopover() + this.registerPopupHandlers() } @@ -104,6 +108,8 @@ this.popoverObj = this.$element.data('oc.popover') this.$popoverContainer = this.popoverObj.$container + this.$popoverContainer.addClass('inspector-temporary-placement') + if (this.options.inspectorCssClass !== undefined) { this.$popoverContainer.addClass(this.options.inspectorCssClass) } @@ -118,6 +124,12 @@ this.$popoverContainer.find('[data-inspector-description]').text(this.description) } + InspectorPopup.prototype.repositionPopover = function() { + this.popoverObj.reposition() + this.$popoverContainer.removeClass('inspector-temporary-placement') + this.$popoverContainer.find('div[data-surface-container] > div').trigger('focus-control') + } + InspectorPopup.prototype.forceClose = function() { this.$popoverContainer.trigger('close.oc.popover') } diff --git a/modules/system/assets/ui/js/popover.js b/modules/system/assets/ui/js/popover.js index e10bfc27c..ca8f6f8e2 100644 --- a/modules/system/assets/ui/js/popover.js +++ b/modules/system/assets/ui/js/popover.js @@ -147,14 +147,7 @@ /* * Determine the popover position */ - var - placement = this.calcPlacement(), - position = this.calcPosition(placement) - - this.$container.css({ - left: position.x, - top: position.y - }).addClass('placement-'+placement) + this.reposition() /* * Display the popover @@ -198,6 +191,19 @@ } } + Popover.prototype.reposition = function() { + var + placement = this.calcPlacement(), + position = this.calcPosition(placement) + + this.$container.removeClass('placement-center placement-bottom placement-top placement-left placement-right') + + this.$container.css({ + left: position.x, + top: position.y + }).addClass('placement-'+placement) + } + Popover.prototype.getContent = function () { return typeof this.options.content == 'function' ? this.options.content.call(this.$el[0], this) diff --git a/modules/system/assets/ui/less/inspector.less b/modules/system/assets/ui/less/inspector.less index b56211751..6e6c14a92 100644 --- a/modules/system/assets/ui/less/inspector.less +++ b/modules/system/assets/ui/less/inspector.less @@ -444,6 +444,12 @@ div.control-popover { } } } + + &.inspector-temporary-placement { + visibility: hidden; + left: 0!important; + top: 0!important; + } } .inspector-columns-editor { diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index 81d523ff1..9a701ad45 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -2324,9 +2324,7 @@ if(this.options.container) $(this.options.container).append(this.$container) else $(document.body).append(this.$container) -var -placement=this.calcPlacement(),position=this.calcPosition(placement) -this.$container.css({left:position.x,top:position.y}).addClass('placement-'+placement) +this.reposition() this.$container.addClass('in') if(this.$overlay)this.$overlay.addClass('in') $(document.body).addClass('popover-open') @@ -2341,6 +2339,10 @@ return false if(!self.options.closeOnEsc){return false} if(e.keyCode==27){self.hide() return false}})}} +Popover.prototype.reposition=function(){var +placement=this.calcPlacement(),position=this.calcPosition(placement) +this.$container.removeClass('placement-center placement-bottom placement-top placement-left placement-right') +this.$container.css({left:position.x,top:position.y}).addClass('placement-'+placement)} Popover.prototype.getContent=function(){return typeof this.options.content=='function'?this.options.content.call(this.$el[0],this):this.options.content} Popover.prototype.calcDimensions=function(){var documentWidth=$(document).width(),documentHeight=$(document).height(),targetOffset=this.$el.offset(),targetWidth=this.$el.outerWidth(),targetHeight=this.$el.outerHeight() @@ -3377,9 +3379,11 @@ this.build() if(!this.parentSurface){$.oc.foundation.controlUtils.markDisposable(this.tableContainer)} this.registerHandlers()} Surface.prototype.registerHandlers=function(){if(!this.parentSurface){$(this.tableContainer).one('dispose-control',this.proxy(this.dispose)) -$(this.tableContainer).on('click','tr.group, tr.control-group',this.proxy(this.onGroupClick))}} +$(this.tableContainer).on('click','tr.group, tr.control-group',this.proxy(this.onGroupClick)) +$(this.tableContainer).on('focus-control',this.proxy(this.focusFirstEditor))}} Surface.prototype.unregisterHandlers=function(){if(!this.parentSurface){$(this.tableContainer).off('dispose-control',this.proxy(this.dispose)) -$(this.tableContainer).off('click','tr.group, tr.control-group',this.proxy(this.onGroupClick))}} +$(this.tableContainer).off('click','tr.group, tr.control-group',this.proxy(this.onGroupClick)) +$(this.tableContainer).off('focus-control',this.proxy(this.focusFirstEditor))}} Surface.prototype.build=function(){this.tableContainer=document.createElement('div') var dataTable=document.createElement('table'),tbody=document.createElement('tbody') $.oc.foundation.element.addClass(dataTable,'inspector-fields') @@ -3733,9 +3737,11 @@ this.popoverObj=null BaseProto.dispose.call(this)} InspectorPopup.prototype.createSurfaceAndUi=function(properties,values,title,description){this.showPopover() this.initSurface(this.$popoverContainer.find('[data-surface-container]').get(0),properties,values) +this.repositionPopover() this.registerPopupHandlers()} InspectorPopup.prototype.adoptSurface=function(){this.showPopover() this.surface.moveToContainer(this.$popoverContainer.find('[data-surface-container]').get(0)) +this.repositionPopover() this.registerPopupHandlers()} InspectorPopup.prototype.cleanupAfterSwitch=function(){this.cleaningUp=true this.switched=true @@ -3758,11 +3764,15 @@ this.$element.ocPopover({content:this.getPopoverContents(),highlightModalTarget: this.setInspectorVisibleFlag(true) this.popoverObj=this.$element.data('oc.popover') this.$popoverContainer=this.popoverObj.$container +this.$popoverContainer.addClass('inspector-temporary-placement') 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) this.$popoverContainer.find('[data-inspector-description]').text(this.description)} +InspectorPopup.prototype.repositionPopover=function(){this.popoverObj.reposition() +this.$popoverContainer.removeClass('inspector-temporary-placement') +this.$popoverContainer.find('div[data-surface-container] > div').trigger('focus-control')} InspectorPopup.prototype.forceClose=function(){this.$popoverContainer.trigger('close.oc.popover')} InspectorPopup.prototype.registerPopupHandlers=function(){this.surface.options.onPopupDisplayed=this.proxy(this.onPopupEditorDisplayed) this.surface.options.onPopupHidden=this.proxy(this.onPopupEditorHidden) diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index bba5295ac..9dc00468c 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -2501,6 +2501,7 @@ div.control-popover.control-inspector > div:before,div.control-popover.control-i div.control-popover.hero .inspector-fields th,div.control-popover.hero .inspector-fields td{padding:9px 12px;font-weight:600 !important;font-size:13px} div.control-popover.hero .inspector-fields td{font-weight:400 !important} div.control-popover.hero .inspector-fields div.custom-select.select2-container .select2-selection{height:36px;line-height:36px} +div.control-popover.inspector-temporary-placement{visibility:hidden;left:0 !important;top:0 !important} .inspector-columns-editor{min-height:400px;margin-bottom:20px;border-bottom:1px solid #bdc3c7} .inspector-columns-editor .items-column{width:250px} .inspector-columns-editor .inspector-wrapper{background:#f2f2f2;border-left:2px solid #bdc3c7}