Esanders has uploaded a new change for review. (
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).
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, 96 insertions(+), 30 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/95/333295/1
diff --git a/demos/pages/toolbars.js b/demos/pages/toolbars.js
index 580b46a..30be134 100644
--- a/demos/pages/toolbars.js
+++ b/demos/pages/toolbars.js
@@ -5,7 +5,14 @@
$containers = $(),
toolFactories = [],
toolGroupFactories = [],
- toolbars = [];
+ toolbars = [],
+ configs = [
+ {},
+ { actions: true },
+ {},
+ { actions: true },
+ { actions: true, position: 'bottom' }
+ ];
// Show some random accelerator keys that don't actually work
function getToolAccelerator( name ) {
@@ -18,10 +25,10 @@
}[ name ];
}
- for ( i = 0; i < 4; i++ ) {
+ for ( i = 0; i <= 4; 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;
}
@@ -113,7 +120,6 @@
ToolGroupTool.static.name = 'toolGroupTool';
ToolGroupTool.static.group = 'barTools';
ToolGroupTool.static.groupConfig = {
- indicator: 'down',
include: [ { group: 'moreListTools' } ]
};
@@ -133,7 +139,6 @@
},
{
type: 'list',
- indicator: 'down',
label: 'List',
icon: 'image',
include: [ { group: 'listTools' } ],
@@ -141,14 +146,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,13 +165,11 @@
toolbars[ 1 ].setup( [
{
type: 'menu',
- indicator: 'down',
icon: 'image',
include: [ { group: 'menuTools' } ]
},
{
type: 'disabledMenu',
- indicator: 'down',
icon: 'image',
include: [ { group: 'disabledMenuTools' } ]
}
@@ -182,6 +183,7 @@
{
type: 'list',
icon: 'menu',
+ indicator: '',
include: [ { group: 'listTools' } ]
}
] );
@@ -192,12 +194,10 @@
},
{
type: 'menu',
- indicator: 'down',
include: [ { group: 'menuTools' } ]
},
{
type: 'list',
- indicator: 'down',
icon: 'comment',
include: [ { group: 'listTools' } ],
allowCollapse: [ 'listTool1', 'listTool6' ]
@@ -216,7 +216,39 @@
},
{
type: 'list',
- indicator: 'down',
+ label: 'Insert',
+ include: [ { group: 'autoDisableListTools' }, { group:
'unusedStuff' } ]
+ }
+ ] );
+ toolbars[ 4 ].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' } ]
}
@@ -314,15 +346,17 @@
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 <= 4; i++ ) {
+ 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++ ) {
$containers = $containers.add(
@@ -342,7 +376,8 @@
$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( 3 ).append( '<div
class="oo-ui-demo-toolbars-contents">Word processor toolbar</div>' ),
+ $containers.eq( 4 ).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..10b4a14 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 position 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..f9784dc 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -4,9 +4,16 @@
&-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;
@@ -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: newchange
Gerrit-Change-Id: Ic9b5ed4fd5348d5b4a4f9e7a7c3e39cc1329a6c3
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
