mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

Fix filter popovers in modals (#3844)

Browse Source 
Since popovers and modals currently share the same z-index (600) a popover that gets created for a filter inside a modal is invisible. It is hidden below the modal. This commit adds a check to see if a filter is created from within a modal window. If yes, the popover will be added to the modal container. Otherwise the default container value `false` is used. Credit to @tobias-kuendig
This commit is contained in:
Tobias Kündig 2018-11-01 15:31:16 +01:00 committed by Luke Towers
parent 4d4ac92d2f
commit bfd726f173
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
modules/system/assets/ui/js/filter.js
View File

@ -223,7 +223,15 @@
var self = this, var self = this,
scopeName = $scope.data('scope-name'), scopeName = $scope.data('scope-name'),
data = this.scopeValues[scopeName], data = this.scopeValues[scopeName],
isLoaded = true isLoaded = true,
container = false
// If the filter is running in a modal, popovers should be
// attached to the modal container. This prevents z-index issues.
var modalParent = $scope.parents('.modal-dialog')
if (modalParent.length > 0) {
container = modalParent[0]
}
if (!data) { if (!data) {
data = { loading: true } data = { loading: true }
@ -246,7 +254,8 @@
modal: false, modal: false,
highlightModalTarget: true, highlightModalTarget: true,
closeOnPageClick: true, closeOnPageClick: true,
placement: 'bottom' placement: 'bottom',
container: container
}) })
this.toggleFilterButtons() this.toggleFilterButtons()

6
modules/system/assets/ui/storm-min.js vendored
View File

@ -3077,14 +3077,16 @@ this.toggleFilterButtons(items)
this.updateScopeSetting(this.$activeScope,items.active.length) this.updateScopeSetting(this.$activeScope,items.active.length)
this.isActiveScopeDirty=true this.isActiveScopeDirty=true
this.focusSearch()} this.focusSearch()}
FilterWidget.prototype.displayPopover=function($scope){var self=this,scopeName=$scope.data('scope-name'),data=this.scopeValues[scopeName],isLoaded=true FilterWidget.prototype.displayPopover=function($scope){var self=this,scopeName=$scope.data('scope-name'),data=this.scopeValues[scopeName],isLoaded=true,container=false
var modalParent=$scope.parents('.modal-dialog')
if(modalParent.length>0){container=modalParent[0]}
if(!data){data={loading:true} if(!data){data={loading:true}
isLoaded=false} isLoaded=false}
data=$.extend({},data,{apply_button_text:this.getLang('filter.scopes.apply_button_text','Apply'),clear_button_text:this.getLang('filter.scopes.clear_button_text','Clear')}) data=$.extend({},data,{apply_button_text:this.getLang('filter.scopes.apply_button_text','Apply'),clear_button_text:this.getLang('filter.scopes.clear_button_text','Clear')})
data.scopeName=scopeName data.scopeName=scopeName
data.optionsHandler=self.options.optionsHandler data.optionsHandler=self.options.optionsHandler
$scope.data('oc.popover',null) $scope.data('oc.popover',null)
$scope.ocPopover({content:Mustache.render(self.getPopoverTemplate(),data),modal:false,highlightModalTarget:true,closeOnPageClick:true,placement:'bottom'}) $scope.ocPopover({content:Mustache.render(self.getPopoverTemplate(),data),modal:false,highlightModalTarget:true,closeOnPageClick:true,placement:'bottom',container:container})
this.toggleFilterButtons() this.toggleFilterButtons()
if(!isLoaded){self.loadOptions(scopeName)}} if(!isLoaded){self.loadOptions(scopeName)}}
FilterWidget.prototype.loadOptions=function(scopeName){var $form=this.$el.closest('form'),self=this,data={scopeName:scopeName} FilterWidget.prototype.loadOptions=function(scopeName){var $form=this.$el.closest('form'),self=this,data={scopeName:scopeName}