jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/333295 )
Change subject: Support toolbar position:bottom
......................................................................
Support toolbar position:bottom
Make tool groups expand upwards, and move the border to the top.
Also default the tool group indicators to 'down'/'up' depending
on position (minor breaking change).
Bug: T97582
Change-Id: Ic9b5ed4fd5348d5b4a4f9e7a7c3e39cc1329a6c3
---
M demos/pages/toolbars.js
M src/Toolbar.js
M src/themes/apex/layouts.less
M src/themes/apex/tools.less
M src/themes/mediawiki/tools.less
M src/toolgroups/ListToolGroup.js
M src/toolgroups/MenuToolGroup.js
M src/toolgroups/PopupToolGroup.js
8 files changed, 125 insertions(+), 44 deletions(-)
Approvals:
jenkins-bot: Verified
VolkerE: Looks good to me, approved
diff --git a/demos/pages/toolbars.js b/demos/pages/toolbars.js
index 580b46a..c11ea24 100644
--- a/demos/pages/toolbars.js
+++ b/demos/pages/toolbars.js
@@ -5,7 +5,15 @@
$containers = $(),
toolFactories = [],
toolGroupFactories = [],
- toolbars = [];
+ toolbars = [],
+ configs = [
+ {},
+ { actions: true },
+ {},
+ { actions: true },
+ { position: 'bottom' },
+ { actions: true, position: 'bottom' }
+ ];
// Show some random accelerator keys that don't actually work
function getToolAccelerator( name ) {
@@ -18,10 +26,10 @@
}[ name ];
}
- for ( i = 0; i < 4; i++ ) {
+ for ( i = 0; i <= 5; i++ ) {
toolFactories.push( new OO.ui.ToolFactory() );
toolGroupFactories.push( new OO.ui.ToolGroupFactory() );
- toolbars.push( new OO.ui.Toolbar( toolFactories[ i ],
toolGroupFactories[ i ], { actions: true } ) );
+ toolbars.push( new OO.ui.Toolbar( toolFactories[ i ],
toolGroupFactories[ i ], configs[ i ] ) );
toolbars[ i ].getToolAccelerator = getToolAccelerator;
}
@@ -102,6 +110,7 @@
PopupTool.static.icon = 'help';
toolFactories[ 2 ].register( PopupTool );
+ toolFactories[ 4 ].register( PopupTool );
ToolGroupTool = function ( toolGroup, config ) {
// Parent constructor
@@ -113,12 +122,12 @@
ToolGroupTool.static.name = 'toolGroupTool';
ToolGroupTool.static.group = 'barTools';
ToolGroupTool.static.groupConfig = {
- indicator: 'down',
include: [ { group: 'moreListTools' } ]
};
toolFactories[ 0 ].register( ToolGroupTool );
toolFactories[ 3 ].register( ToolGroupTool );
+ toolFactories[ 5 ].register( ToolGroupTool );
// Toolbar
toolbars[ 0 ].setup( [
@@ -133,7 +142,6 @@
},
{
type: 'list',
- indicator: 'down',
label: 'List',
icon: 'image',
include: [ { group: 'listTools' } ],
@@ -141,14 +149,12 @@
},
{
type: 'disabledList',
- indicator: 'down',
label: 'List',
icon: 'image',
include: [ { group: 'disabledListTools' } ]
},
{
type: 'list',
- indicator: 'down',
label: 'Auto-disabling list',
icon: 'image',
include: [ { group: 'autoDisableListTools' } ]
@@ -162,19 +168,16 @@
toolbars[ 1 ].setup( [
{
type: 'menu',
- indicator: 'down',
icon: 'image',
include: [ { group: 'menuTools' } ]
},
{
type: 'disabledMenu',
- indicator: 'down',
icon: 'image',
include: [ { group: 'disabledMenuTools' } ]
}
] );
- // Fake toolbar to be injected into the first toolbar
- // demonstrating right-aligned menus
+ // Action toolbar for toolbars[3]
toolbars[ 2 ].setup( [
{
include: [ { group: 'popupTools' } ]
@@ -182,6 +185,7 @@
{
type: 'list',
icon: 'menu',
+ indicator: '',
include: [ { group: 'listTools' } ]
}
] );
@@ -192,12 +196,10 @@
},
{
type: 'menu',
- indicator: 'down',
include: [ { group: 'menuTools' } ]
},
{
type: 'list',
- indicator: 'down',
icon: 'comment',
include: [ { group: 'listTools' } ],
allowCollapse: [ 'listTool1', 'listTool6' ]
@@ -216,21 +218,65 @@
},
{
type: 'list',
- indicator: 'down',
+ label: 'Insert',
+ include: [ { group: 'autoDisableListTools' }, { group:
'unusedStuff' } ]
+ }
+ ] );
+ // Action toolbar for toolbars[5]
+ toolbars[ 4 ].setup( [
+ {
+ include: [ { group: 'popupTools' } ]
+ },
+ {
+ type: 'list',
+ icon: 'menu',
+ indicator: '',
+ include: [ { group: 'listTools' } ]
+ }
+ ] );
+ toolbars[ 5 ].setup( [
+ {
+ type: 'bar',
+ include: [ { group: 'history' } ]
+ },
+ {
+ type: 'menu',
+ include: [ { group: 'menuTools' } ]
+ },
+ {
+ type: 'list',
+ icon: 'comment',
+ include: [ { group: 'listTools' } ],
+ allowCollapse: [ 'listTool1', 'listTool6' ]
+ },
+ {
+ type: 'bar',
+ include: [ { group: 'link' } ]
+ },
+ {
+ type: 'bar',
+ include: [ { group: 'cite' } ]
+ },
+ {
+ type: 'bar',
+ include: [ { group: 'citeDisabled' } ]
+ },
+ {
+ type: 'list',
label: 'Insert',
include: [ { group: 'autoDisableListTools' }, { group:
'unusedStuff' } ]
}
] );
- saveButton = new OO.ui.ButtonWidget( { label: 'Save', flags: [
'progressive', 'primary' ] } );
- deleteButton = new OO.ui.ButtonWidget( { label: 'Delete', flags: [
'destructive' ] } );
actionButton = new OO.ui.ButtonWidget( { label: 'Action' } );
actionButtonDisabled = new OO.ui.ButtonWidget( { label: 'Disabled',
disabled: true } );
- toolbars[ 1 ].$actions
- .append( actionButton.$element, actionButtonDisabled.$element );
+ toolbars[ 1 ].$actions.append( actionButton.$element,
actionButtonDisabled.$element );
- toolbars[ 3 ].$actions
- .append( toolbars[ 2 ].$element, deleteButton.$element,
saveButton.$element );
+ for ( i = 3; i <= 5; i += 2 ) {
+ deleteButton = new OO.ui.ButtonWidget( { label: 'Delete',
flags: [ 'destructive' ] } );
+ saveButton = new OO.ui.ButtonWidget( { label: 'Save', flags: [
'progressive', 'primary' ] } );
+ toolbars[ i ].$actions.append( toolbars[ i - 1 ].$element,
deleteButton.$element, saveButton.$element );
+ }
for ( i = 0; i < toolbars.length; i++ ) {
toolbars[ i ].emit( 'updateState' );
@@ -313,18 +359,24 @@
createToolGroup( 0, 'autoDisableListTools' );
createToolGroup( 1, 'menuTools' );
createToolGroup( 1, 'disabledMenuTools' );
- createToolGroup( 2, 'listTools' );
- createToolGroup( 3, 'history' );
- createToolGroup( 3, 'link' );
- createToolGroup( 3, 'cite' );
- createToolGroup( 3, 'citeDisabled' );
- createToolGroup( 3, 'menuTools' );
- createToolGroup( 3, 'listTools' );
- createToolGroup( 3, 'moreListTools' );
- createToolGroup( 3, 'autoDisableListTools' );
- createToolGroup( 3, 'unusedStuff' );
+ for ( i = 3; i <= 5; i += 2 ) {
+ createToolGroup( i - 1, 'listTools' );
+ createToolGroup( i, 'history' );
+ createToolGroup( i, 'link' );
+ createToolGroup( i, 'cite' );
+ createToolGroup( i, 'citeDisabled' );
+ createToolGroup( i, 'menuTools' );
+ createToolGroup( i, 'listTools' );
+ createToolGroup( i, 'moreListTools' );
+ createToolGroup( i, 'autoDisableListTools' );
+ createToolGroup( i, 'unusedStuff' );
+ }
for ( i = 0; i < toolbars.length; i++ ) {
+ if ( i === 2 || i === 4 ) {
+ // Action toolbars
+ continue;
+ }
$containers = $containers.add(
new OO.ui.PanelLayout( {
expanded: false,
@@ -333,16 +385,14 @@
.addClass( 'oo-ui-demo-container
oo-ui-demo-toolbars' )
);
- if ( i === 2 ) {
- continue;
- }
- $containers.eq( i ).append( toolbars[ i ].$element );
+ $containers.last().append( toolbars[ i ].$element );
}
$containers.append( '' );
$demo.append(
$containers.eq( 0 ).append( '<div
class="oo-ui-demo-toolbars-contents">Toolbar</div>' ),
$containers.eq( 1 ).append( '<div
class="oo-ui-demo-toolbars-contents">Toolbar with action buttons</div>' ),
- $containers.eq( 3 ).append( '<div
class="oo-ui-demo-toolbars-contents">Word processor toolbar</div>' )
+ $containers.eq( 2 ).append( '<div
class="oo-ui-demo-toolbars-contents">Word processor toolbar</div>' ),
+ $containers.eq( 3 ).prepend( '<div
class="oo-ui-demo-toolbars-contents">Position bottom</div>' )
);
for ( i = 0; i < toolbars.length; i++ ) {
toolbars[ i ].initialize();
diff --git a/src/Toolbar.js b/src/Toolbar.js
index 4df56d8..2a1ad04 100644
--- a/src/Toolbar.js
+++ b/src/Toolbar.js
@@ -279,6 +279,7 @@
* in the toolbar, but are not configured as tools. By default, actions are
displayed on the right side of
* the toolbar.
* @cfg {boolean} [shadow] Add a shadow below the toolbar.
+ * @cfg {string} [position='top'] Whether the toolbar is positioned above
('top') or below ('bottom') content.
*/
OO.ui.Toolbar = function OoUiToolbar( toolFactory, toolGroupFactory, config ) {
// Allow passing positional parameters inside the config object
@@ -303,6 +304,7 @@
this.toolGroupFactory = toolGroupFactory;
this.groups = [];
this.tools = {};
+ this.position = config.position || 'top';
this.$bar = $( '<div>' );
this.$actions = $( '<div>' );
this.initialized = false;
@@ -325,7 +327,7 @@
if ( config.shadow ) {
this.$bar.append( '<div class="oo-ui-toolbar-shadow"></div>' );
}
- this.$element.addClass( 'oo-ui-toolbar' ).append( this.$bar );
+ this.$element.addClass( 'oo-ui-toolbar oo-ui-toolbar-position-' +
this.position ).append( this.$bar );
};
/* Setup */
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index 8688abb..f000baa 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -169,6 +169,7 @@
}
&-framed {
+ border: 1px solid #ccc;
border-radius: 0.5em;
}
diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less
index 0c662e9..3465f51 100644
--- a/src/themes/apex/tools.less
+++ b/src/themes/apex/tools.less
@@ -2,8 +2,15 @@
.theme-oo-ui-toolbar () {
&-bar {
- border-bottom: 1px solid #ccc;
.oo-ui-vertical-gradient(#fff, #F1F7FB);
+
+ .oo-ui-toolbar-position-top & {
+ border-bottom: 1px solid #ccc;
+ }
+
+ .oo-ui-toolbar-position-bottom & {
+ border-top: 1px solid #ccc;
+ }
.oo-ui-toolbar-bar {
border: 0;
@@ -293,11 +300,18 @@
}
.oo-ui-toolGroup-tools {
- top: 2.5em;
margin: 0 -1px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 0.3125em 1.25em rgba( 0, 0, 0, 0.25 );
+
+ .oo-ui-toolbar-position-top & {
+ top: 2.5em;
+ }
+
+ .oo-ui-toolbar-position-bottom & {
+ bottom: 2.5em;
+ }
}
.oo-ui-tool-link {
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
index b0dfdab..afc2887 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -4,12 +4,19 @@
&-bar {
background-color: @background-color-toolbar;
color: @color-default;
- border-bottom: @border-toolbar;
box-shadow: @box-shadow-toolbar;
font-weight: 500;
+ .oo-ui-toolbar-position-top & {
+ border-bottom: @border-toolbar;
+ }
+
+ .oo-ui-toolbar-position-bottom & {
+ border-top: @border-toolbar;
+ }
+
.oo-ui-toolbar-bar {
- border-bottom: 0;
+ border: 0;
background-color: transparent;
box-shadow: none;
}
@@ -242,12 +249,19 @@
}
.oo-ui-toolGroup-tools {
- top: 3.125em;
margin: 0 -1px;
border: @border-toolbar;
background-color: @background-color-toolbar;
box-shadow: @box-shadow-menu;
min-width: 16em;
+
+ .oo-ui-toolbar-position-top & {
+ top: 3.125em;
+ }
+
+ .oo-ui-toolbar-position-bottom & {
+ bottom: 3.125em;
+ }
}
.oo-ui-tool-link {
diff --git a/src/toolgroups/ListToolGroup.js b/src/toolgroups/ListToolGroup.js
index 5db85b9..5161587 100644
--- a/src/toolgroups/ListToolGroup.js
+++ b/src/toolgroups/ListToolGroup.js
@@ -50,7 +50,6 @@
* // Configurations for list toolgroup.
* type: 'list',
* label: 'ListToolGroup',
- * indicator: 'down',
* icon: 'ellipsis',
* title: 'This is the title, displayed when user moves the mouse
over the list toolgroup',
* header: 'This is the header',
diff --git a/src/toolgroups/MenuToolGroup.js b/src/toolgroups/MenuToolGroup.js
index f19bc7d..60fc770 100644
--- a/src/toolgroups/MenuToolGroup.js
+++ b/src/toolgroups/MenuToolGroup.js
@@ -65,7 +65,6 @@
* type: 'menu',
* header: 'This is the (optional) header',
* title: 'This is the (optional) title',
- * indicator: 'down',
* include: [ 'settings', 'stuff' ]
* }
* ] );
diff --git a/src/toolgroups/PopupToolGroup.js b/src/toolgroups/PopupToolGroup.js
index 0c727c0..898ba6a 100644
--- a/src/toolgroups/PopupToolGroup.js
+++ b/src/toolgroups/PopupToolGroup.js
@@ -26,7 +26,9 @@
}
// Configuration initialization
- config = config || {};
+ config = $.extend( {
+ indicator: toolbar.position === 'bottom' ? 'up' : 'down'
+ }, config );
// Parent constructor
OO.ui.PopupToolGroup.parent.call( this, toolbar, config );
--
To view, visit https://gerrit.wikimedia.org/r/333295
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic9b5ed4fd5348d5b4a4f9e7a7c3e39cc1329a6c3
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
