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