diff --git a/modules/ve-mw/init/styles/ve.init.mw.MobileArticleTarget.css b/modules/ve-mw/init/styles/ve.init.mw.MobileArticleTarget.css index c5607acdbb..40e9abe0f8 100644 --- a/modules/ve-mw/init/styles/ve.init.mw.MobileArticleTarget.css +++ b/modules/ve-mw/init/styles/ve.init.mw.MobileArticleTarget.css @@ -39,21 +39,10 @@ display: none; } -.ve-init-mw-mobileArticleTarget-actions { - float: none; - display: table; -} - -.ve-init-mw-mobileArticleTarget-title-container, -.ve-init-mw-mobileArticleTarget-toolbar .ve-ui-toolbar, -.ve-init-mw-mobileArticleTarget-toolbar .ve-ui-toolbar-saveButton { - display: table-cell; - vertical-align: top; -} - .ve-init-mw-mobileArticleTarget-title-container { width: 100%; position: relative; + border-right: 1px solid #ddd; } .ve-init-mw-mobileArticleTarget-title { @@ -69,44 +58,54 @@ right: 0; } -.ve-init-mw-mobileArticleTarget-tools { +.ve-init-mw-mobileArticleTarget-pageTools, +.ve-init-mw-mobileArticleTarget-editTools { display: table; +} + +/* Edit tools has no 100% width cells */ +.ve-init-mw-mobileArticleTarget-editTools { width: 100%; } -.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup { +.ve-init-mw-mobileArticleTarget-pageTools > .oo-ui-toolGroup, +.ve-init-mw-mobileArticleTarget-pageTools > .ve-init-mw-mobileArticleTarget-title-container, +.ve-init-mw-mobileArticleTarget-editTools > .oo-ui-toolGroup { display: table-cell; +} + +.ve-init-mw-mobileArticleTarget-editTools > .oo-ui-toolGroup { text-align: center; } -.ve-init-mw-mobileArticleTarget-tools .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon { +.ve-init-mw-mobileArticleTarget-editTools .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon { left: 50%; margin-left: -1.875em; } -.ve-init-mw-mobileArticleTarget-tools .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator { +.ve-init-mw-mobileArticleTarget-editTools .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator { left: 50%; } -.ve-init-mw-mobileArticleTarget-tools .oo-ui-popupToolGroup .oo-ui-toolGroup-tools { +.ve-init-mw-mobileArticleTarget-editTools .oo-ui-popupToolGroup .oo-ui-toolGroup-tools { text-align: left; } -.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup-empty { +.ve-init-mw-mobileArticleTarget-editTools > .oo-ui-toolGroup-empty { display: none; } -.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup:last-child { +.ve-init-mw-mobileArticleTarget-editTools > .oo-ui-toolGroup:last-child { border-right: 0; } -.ve-init-mw-mobileArticleTarget-tools > .oo-ui-toolGroup > .oo-ui-toolGroup-tools +.ve-init-mw-mobileArticleTarget-editTools > .oo-ui-toolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool { width: 100%; } -.ve-init-mw-mobileArticleTarget-tools-hidden, -.ve-init-mw-mobileArticleTarget-actions-hidden { +.ve-init-mw-mobileArticleTarget-editTools-hidden, +.ve-init-mw-mobileArticleTarget-pageToolbar-hidden { display: none; } diff --git a/modules/ve-mw/init/targets/ve.init.mw.MobileArticleTarget.js b/modules/ve-mw/init/targets/ve.init.mw.MobileArticleTarget.js index bc2596e94c..e59baa554d 100644 --- a/modules/ve-mw/init/targets/ve.init.mw.MobileArticleTarget.js +++ b/modules/ve-mw/init/targets/ve.init.mw.MobileArticleTarget.js @@ -19,6 +19,9 @@ ve.init.mw.MobileArticleTarget = function VeInitMwMobileArticleTarget( config ) var currentUri = new mw.Uri(); config = config || {}; + config.toolbarConfig = $.extend( { + actions: false + }, config.toolbarConfig ); // Parent constructor ve.init.mw.MobileArticleTarget.super.call( @@ -93,8 +96,8 @@ ve.init.mw.MobileArticleTarget.prototype.onSurfaceReady = function () { */ ve.init.mw.MobileArticleTarget.prototype.onSurfaceBlur = function () { var toolbar = this.getToolbar(); - toolbar.$group.addClass( 've-init-mw-mobileArticleTarget-tools-hidden' ); - toolbar.$actions.removeClass( 've-init-mw-mobileArticleTarget-actions-hidden' ); + toolbar.$group.addClass( 've-init-mw-mobileArticleTarget-editTools-hidden' ); + this.pageToolbar.$element.removeClass( 've-init-mw-mobileArticleTarget-pageToolbar-hidden' ); }; /** @@ -102,8 +105,8 @@ ve.init.mw.MobileArticleTarget.prototype.onSurfaceBlur = function () { */ ve.init.mw.MobileArticleTarget.prototype.onSurfaceFocus = function () { var toolbar = this.getToolbar(); - toolbar.$group.removeClass( 've-init-mw-mobileArticleTarget-tools-hidden' ); - toolbar.$actions.addClass( 've-init-mw-mobileArticleTarget-actions-hidden' ); + toolbar.$group.removeClass( 've-init-mw-mobileArticleTarget-editTools-hidden' ); + this.pageToolbar.$element.addClass( 've-init-mw-mobileArticleTarget-pageToolbar-hidden' ); }; /** @@ -148,33 +151,38 @@ ve.init.mw.MobileArticleTarget.prototype.attachToolbar = function () { * @inheritdoc */ ve.init.mw.MobileArticleTarget.prototype.attachToolbarSaveButton = function () { - this.actionsToolbar = new ve.ui.TargetToolbar( this ); + this.pageToolbar = new ve.ui.TargetToolbar( this, { actions: true } ); - this.actionsToolbar.setup( [ + this.pageToolbar.setup( [ + // Back + { include: [ 'back' ] }, { type: 'list', - icon: 'menu', + icon: 'advanced', title: ve.msg( 'visualeditor-pagemenu-tooltip' ), - include: [ 'back', 'editModeSource' ] + include: [ 'editModeSource' ] } ], this.getSurface() ); - this.actionsToolbar.emit( 'updateState' ); + this.pageToolbar.emit( 'updateState' ); - this.toolbar.$group - .addClass( 've-init-mw-mobileArticleTarget-tools' ); + $( '
' ).addClass( 've-init-mw-mobileArticleTarget-title-container' ).append( + $( '
' ).addClass( 've-init-mw-mobileArticleTarget-title' ).text( + new mw.Title( ve.init.target.pageName ).getMainText() + ) + ) + // Insert title between 'back' and 'advanced' + .insertAfter( this.pageToolbar.items[0].$element ); - this.toolbar.$actions - .addClass( 've-init-mw-mobileArticleTarget-actions' ) - .append( - this.actionsToolbar.$element, - $( '
' ).addClass( 've-init-mw-mobileArticleTarget-title-container' ).append( - $( '
' ).addClass( 've-init-mw-mobileArticleTarget-title' ).text( - new mw.Title( ve.init.target.pageName ).getMainText() - ) - ), - this.toolbarSaveButton.$element - ); + this.pageToolbar.$element.addClass( 've-init-mw-mobileArticleTarget-pageToolbar' ); + this.pageToolbar.$actions.append( + this.toolbarSaveButton.$element + ); + + this.toolbar.$element.append( this.pageToolbar.$element ); + + this.pageToolbar.$group.addClass( 've-init-mw-mobileArticleTarget-pageTools' ); + this.toolbar.$group.addClass( 've-init-mw-mobileArticleTarget-editTools' ); }; /**