jenkins-bot has submitted this change and it was merged.
Change subject: Isolate links within OO.ui.Tool
......................................................................
Isolate links within OO.ui.Tool
This allows other content to be added without it being nested inside an
<a> which results undesired visual and functional effects.
Change-Id: I667878fe4ae682712094a61bb4b411ac5fb999c7
---
M modules/oojs-ui/OO.ui.Tool.js
M modules/oojs-ui/OO.ui.ToolGroup.js
M modules/oojs-ui/styles/OO.ui.ToolGroup.css
M modules/ve-mw/test/browser/features/support/pages/visual_editor_page.rb
M modules/ve/ui/styles/ve.ui.Tool.css
5 files changed, 57 insertions(+), 36 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/oojs-ui/OO.ui.Tool.js b/modules/oojs-ui/OO.ui.Tool.js
index 2656805..2bbb30a 100644
--- a/modules/oojs-ui/OO.ui.Tool.js
+++ b/modules/oojs-ui/OO.ui.Tool.js
@@ -30,18 +30,22 @@
this.toolGroup = toolGroup;
this.toolbar = this.toolGroup.getToolbar();
this.active = false;
+ this.$link = this.$$( '<a>' );
// 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 @@
/* Static Properties */
-OO.ui.Tool.static.tagName = 'a';
+OO.ui.Tool.static.tagName = 'span';
/**
* Symbolic name of tool.
@@ -234,9 +238,9 @@
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 8241dd8..ae67c72 100644
--- a/modules/oojs-ui/OO.ui.ToolGroup.js
+++ b/modules/oojs-ui/OO.ui.ToolGroup.js
@@ -176,15 +176,18 @@
/**
* 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 4328415..5c6e4b4 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 3f14d8b..ae92a86 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 @@
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 01ba48d..bde234c 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";
}
--
To view, visit https://gerrit.wikimedia.org/r/90375
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I667878fe4ae682712094a61bb4b411ac5fb999c7
Gerrit-PatchSet: 12
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
