jenkins-bot has submitted this change and it was merged.
Change subject: MobileArticleTarget: Restructure the toolbar
......................................................................
MobileArticleTarget: Restructure the toolbar
* Rename the actions toolbar the 'pageToolbar', and place the save button in
its actions section.
* Inject the title amongst the pageToolbar tools, so we can have tools either
side of it.
* Don't use the hamburger icon, as this has a (different) expected behaviour
in MF. Replace it with a back button, and move the edit switch action over
to the right in an 'advanced' group.
The toolbar is back to being laid out like the source editing toolbar in MF.
Change-Id: I4e00a8cdf603968ee32872323c88e587c1e1a487
---
M modules/ve-mw/init/styles/ve.init.mw.MobileArticleTarget.css
M modules/ve-mw/init/targets/ve.init.mw.MobileArticleTarget.js
2 files changed, 51 insertions(+), 44 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
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 c5607ac..40e9abe 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 bc2596e..e59baa5 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 @@
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.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.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 @@
* @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' );
+ $( '<div>' ).addClass( 've-init-mw-mobileArticleTarget-title-container'
).append(
+ $( '<div>' ).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,
- $( '<div>' ).addClass(
've-init-mw-mobileArticleTarget-title-container' ).append(
- $( '<div>' ).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' );
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/231787
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4e00a8cdf603968ee32872323c88e587c1e1a487
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
