Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/231787
Change subject: Make the mobile toolbar a little more sane:
......................................................................
Make the mobile toolbar a little more sane:
* Rename the actions toolbar the 'pageToolbar' and place the
save button in its actions section
* Inject the title amongs the pageToolbar tools, so we can
have tools either side of it.
* Don't use the hamburger icon as this has an 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(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/87/231787/1
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..640af82 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: newchange
Gerrit-Change-Id: I4e00a8cdf603968ee32872323c88e587c1e1a487
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
