Merge "MobileArticleTarget: Restructure the toolbar"

This commit is contained in:
jenkins-bot 2015-08-15 21:38:26 +00:00 committed by Gerrit Code Review
commit 39ee8f0c2f
2 changed files with 51 additions and 44 deletions

View file

@ -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;
}

View file

@ -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' );
$( '<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' );
};
/**