From 230d88d18250e204b102dcd483b78039fea3760b Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Thu, 17 Oct 2013 10:25:57 -0700 Subject: [PATCH] Isolate links within OO.ui.Tool This allows other content to be added without it being nested inside an which results undesired visual and functional effects. Change-Id: I667878fe4ae682712094a61bb4b411ac5fb999c7 --- modules/oojs-ui/OO.ui.Tool.js | 14 ++++-- modules/oojs-ui/OO.ui.ToolGroup.js | 7 ++- modules/oojs-ui/styles/OO.ui.ToolGroup.css | 50 ++++++++++++------- .../support/pages/visual_editor_page.rb | 4 +- modules/ve/ui/styles/ve.ui.Tool.css | 18 ++++--- 5 files changed, 57 insertions(+), 36 deletions(-) diff --git a/modules/oojs-ui/OO.ui.Tool.js b/modules/oojs-ui/OO.ui.Tool.js index 2656805927..2bbb30a983 100644 --- a/modules/oojs-ui/OO.ui.Tool.js +++ b/modules/oojs-ui/OO.ui.Tool.js @@ -30,18 +30,22 @@ OO.ui.Tool = function OoUiTool( toolGroup, config ) { this.toolGroup = toolGroup; this.toolbar = this.toolGroup.getToolbar(); this.active = false; + this.$link = this.$$( '' ); // Events this.toolbar.connect( this, { 'updateState': 'onUpdateState' } ); // Initialization + this.$link + .addClass( 'oo-ui-tool-link' ) + .append( this.$icon, this.$label ); this.$ .data( 'oo-ui-tool', this ) .addClass( - 'oo-ui-tool oo-ui-tool-' + + 'oo-ui-tool ' + 'oo-ui-tool-name-' + this.constructor.static.name.replace( /^([^\/]+)\/([^\/]+).*$/, '$1-$2' ) ) - .append( this.$icon, this.$label ); + .append( this.$link ); this.setIcon( this.constructor.static.icon ); this.updateLabel(); }; @@ -61,7 +65,7 @@ OO.mixinClass( OO.ui.Tool, OO.ui.LabeledElement ); /* Static Properties */ -OO.ui.Tool.static.tagName = 'a'; +OO.ui.Tool.static.tagName = 'span'; /** * Symbolic name of tool. @@ -234,9 +238,9 @@ OO.ui.Tool.prototype.updateLabel = function () { tooltipParts.push( accel ); } if ( tooltipParts.length ) { - this.$.attr( 'title', tooltipParts.join( ' ' ) ); + this.$link.attr( 'title', tooltipParts.join( ' ' ) ); } else { - this.$.removeAttr( 'title' ); + this.$link.removeAttr( 'title' ); } }; diff --git a/modules/oojs-ui/OO.ui.ToolGroup.js b/modules/oojs-ui/OO.ui.ToolGroup.js index 8241dd851c..ae67c72a12 100644 --- a/modules/oojs-ui/OO.ui.ToolGroup.js +++ b/modules/oojs-ui/OO.ui.ToolGroup.js @@ -176,15 +176,18 @@ OO.ui.ToolGroup.prototype.onMouseOut = function ( e ) { /** * Get the closest tool to a jQuery.Event. * + * Only tool links are considered, which prevents other elements in the tool such as popups from + * triggering tool group interactions. + * * @method * @private * @param {jQuery.Event} e * @returns {OO.ui.Tool|null} Tool, `null` if none was found */ OO.ui.ToolGroup.prototype.getTargetTool = function ( e ) { - var $item = $( e.target ).closest( '.oo-ui-tool' ); + var $item = $( e.target ).closest( '.oo-ui-tool-link' ); if ( $item.length ) { - return $item.data( 'oo-ui-tool' ); + return $item.parent().data( 'oo-ui-tool' ); } return null; }; diff --git a/modules/oojs-ui/styles/OO.ui.ToolGroup.css b/modules/oojs-ui/styles/OO.ui.ToolGroup.css index 4328415e7b..5c6e4b497d 100644 --- a/modules/oojs-ui/styles/OO.ui.ToolGroup.css +++ b/modules/oojs-ui/styles/OO.ui.ToolGroup.css @@ -27,11 +27,11 @@ display: none; } -.oo-ui-toolGroup .oo-ui-tool .oo-ui-labeledElement-label { +.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-labeledElement-label { color: #000; } -.oo-ui-toolGroup .oo-ui-tool .oo-ui-iconedElement-icon { +.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { background-position: center center; background-repeat: no-repeat; } @@ -47,10 +47,14 @@ display: inline-block; position: relative; vertical-align: top; - height: 1.5em; - padding: 0.25em; margin: -1px 0 -1px -1px; border: solid 1px transparent; +} + +.oo-ui-barToolGroup .oo-ui-tool-link { + display: block; + height: 1.5em; + padding: 0.25em; cursor: pointer; } @@ -80,30 +84,30 @@ border-color: rgba(0,0,0,0.2); } -.oo-ui-barToolGroup .oo-ui-tool .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { display: block; height: 1.5em; width: 1.5em; opacity: 0.8; } -.oo-ui-barToolGroup .oo-ui-tool .oo-ui-labeledElement-label { +.oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-labeledElement-label { display: none; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled { +.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { cursor: default; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } -.oo-ui-barToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.8; } -.oo-ui-barToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 1; } @@ -171,7 +175,7 @@ border-bottom-right-radius: 0; } -.oo-ui-popupToolGroup .oo-ui-tool .oo-ui-iconedElement-icon { +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { display: inline-block; vertical-align: middle; height: 2em; @@ -179,7 +183,7 @@ margin-right: 0.5em; } -.oo-ui-popupToolGroup .oo-ui-tool .oo-ui-labeledElement-label { +.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-labeledElement-label { display: inline-block; vertical-align: middle; line-height: 2em; @@ -198,10 +202,14 @@ .oo-ui-listToolGroup .oo-ui-tool { display: block; - cursor: pointer; - white-space: nowrap; border: solid 1px transparent; margin: -1px 0 -1px -1px; +} + +.oo-ui-listToolGroup .oo-ui-tool-link { + display: block; + cursor: pointer; + white-space: nowrap; padding-right: 0.5em; } @@ -228,15 +236,15 @@ cursor: default; } -.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconedElement-icon { +.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } -.oo-ui-listToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-iconedElement-icon { +.oo-ui-listToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.8; } -.oo-ui-listToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-iconedElement-icon { +.oo-ui-listToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 1; } @@ -260,16 +268,20 @@ .oo-ui-menuToolGroup .oo-ui-tool { display: block; +} + +.oo-ui-menuToolGroup .oo-ui-tool-link { + display: block; cursor: pointer; white-space: nowrap; padding: 0.25em 1em 0.25em 0.25em; } -.oo-ui-menuToolGroup .oo-ui-tool .oo-ui-iconedElement-icon { +.oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { background-image: none; } -.oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-iconedElement-icon { +.oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconedElement-icon { /* @embed */ background-image: url(images/icons/check.png); } diff --git a/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb b/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb index 3f14d8b259..ae92a8692a 100644 --- a/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb +++ b/modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb @@ -6,12 +6,12 @@ class VisualEditorPage div(:container_disabled, class: 'oo-ui-widget oo-ui-widget-disabled oo-ui-flaggableElement-constructive oo-ui-pushButtonWidget') div(:content, class: 've-ce-documentNode ve-ce-branchNode') - a(:decrease_indentation, class: 'oo-ui-widget oo-ui-tool oo-ui-tool-outdent oo-ui-widget-disabled') + a(:decrease_indentation, class: 'oo-ui-widget oo-ui-tool oo-ui-tool-name-outdent oo-ui-widget-disabled') a(:decrease_indentation_on, title: 'Decrease indentation [SHIFT+TAB]') span(:downarrow, class: 'oo-ui-iconedElement-icon oo-ui-icon-down') a(:edit_ve, title: /Edit this page with VisualEditor/) span(:heading, text: 'Heading') - a(:increase_indentation, class: 'oo-ui-widget oo-ui-tool oo-ui-tool-indent oo-ui-widget-disabled') + a(:increase_indentation, class: 'oo-ui-widget oo-ui-tool oo-ui-tool-name-indent oo-ui-widget-disabled') a(:increase_indentation_on, title: 'Increase indentation [TAB]') div(:insert_references, class: 'oo-ui-window-title') span(:internal_linksuggestion, text: 'Main Page') diff --git a/modules/ve/ui/styles/ve.ui.Tool.css b/modules/ve/ui/styles/ve.ui.Tool.css index 01ba48d5d1..bde234cd48 100644 --- a/modules/ve/ui/styles/ve.ui.Tool.css +++ b/modules/ve/ui/styles/ve.ui.Tool.css @@ -5,40 +5,42 @@ * @license The MIT License (MIT); see LICENSE.txt */ -.oo-ui-menuToolGroup .oo-ui-tool-paragraph .oo-ui-labeledElement-label { +/* ve.ui.FormatTool */ + +.oo-ui-menuToolGroup .oo-ui-tool-name-paragraph .oo-ui-labeledElement-label { font-weight: normal; } -.oo-ui-menuToolGroup .oo-ui-tool-heading1 .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-heading1 .oo-ui-labeledElement-label { font-size: 150%; font-weight: normal; } -.oo-ui-menuToolGroup .oo-ui-tool-heading2 .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-heading2 .oo-ui-labeledElement-label { font-size: 120%; font-weight: normal; } -.oo-ui-menuToolGroup .oo-ui-tool-heading3 .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-heading3 .oo-ui-labeledElement-label { font-size: 105%; font-weight: bold; } -.oo-ui-menuToolGroup .oo-ui-tool-heading4 .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-heading4 .oo-ui-labeledElement-label { font-size: 92%; font-weight: bold; } -.oo-ui-menuToolGroup .oo-ui-tool-heading5 .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-heading5 .oo-ui-labeledElement-label { font-size: 80%; font-weight: bold; } -.oo-ui-menuToolGroup .oo-ui-tool-heading6 .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-heading6 .oo-ui-labeledElement-label { font-size: 64%; font-weight: bold; } -.oo-ui-menuToolGroup .oo-ui-tool-preformatted .oo-ui-labeledElement-label { +.oo-ui-menuToolGroup .oo-ui-tool-name-preformatted .oo-ui-labeledElement-label { font-family: monospace, "Courier New"; }