diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js index 63726c3c3f..52679666c5 100644 --- a/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js +++ b/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js @@ -42,7 +42,8 @@ ve.ui.MWGalleryDialog.static.modelClasses = [ ve.dm.MWGalleryNode ]; * @inheritdoc */ ve.ui.MWGalleryDialog.prototype.initialize = function () { - var imagesCard, optionsCard, menuLayout, menuPanel, + var imagesCard, optionsCard, menuLayout, + innerMenuLayout, innerMenuPanel, innerContentPanel, modeField, captionField, widthsField, heightsField, perrowField, showFilenameField, classesField, stylesField; @@ -79,12 +80,22 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () { // Images card // General layout - menuLayout = new OO.ui.MenuLayout(); - menuPanel = new OO.ui.PanelLayout( { + menuLayout = new OO.ui.MenuLayout( { + classes: [ 've-ui-mwGalleryDialog-menuLayout' ] + } ); + innerMenuLayout = new OO.ui.MenuLayout( { + menuPosition: 'bottom', + classes: [ 've-ui-mwGalleryDialog-innerMenuLayout' ] + } ); + innerMenuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ); + innerContentPanel = new OO.ui.PanelLayout( { + padded: true, + expanded: true + } ); this.editPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, @@ -216,13 +227,20 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () { } ); // Append everything - menuLayout.$menu.append( - menuPanel.$element.append( - this.$emptyGalleryMessage, - this.galleryGroup.$element, + innerMenuLayout.$menu.append( + innerContentPanel.$element.append( this.showSearchPanelButton.$element ) ); + innerMenuLayout.$content.append( + innerMenuPanel.$element.append( + this.$emptyGalleryMessage, + this.galleryGroup.$element + ) + ); + menuLayout.$menu.append( + innerMenuLayout.$element + ); menuLayout.$content.append( this.editPanel.$element.append( this.$highlightedImage, diff --git a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css index 774220bb4d..99e5d2698d 100644 --- a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css +++ b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css @@ -41,13 +41,24 @@ margin-top: 0.5em; } -.ve-ui-mwGalleryDialog .oo-ui-menuLayout-menu { +.ve-ui-mwGalleryDialog-menuLayout > .oo-ui-menuLayout-menu { width: 14em; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } -.ve-ui-mwGalleryDialog .oo-ui-menuLayout-content { +.ve-ui-mwGalleryDialog-menuLayout > .oo-ui-menuLayout-content { left: 14em; right: 14em; } + +.ve-ui-mwGalleryDialog-innerMenuLayout > .oo-ui-menuLayout-content { + bottom: 5em; +} + +.ve-ui-mwGalleryDialog-innerMenuLayout > .oo-ui-menuLayout-menu { + height: 5em; + border-top: 1px solid #e6e6e6; + box-shadow: 0 -1px 0 0 rgba( 0, 0, 0, 0.05 ); /* stylelint-disable-line no-unsupported-browser-features */ + text-align: center; +}