Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/90375
Change subject: Isolate links within ve.ui.Tool
......................................................................
Isolate links within ve.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/ve/ui/styles/ve.ui.Tool.css
M modules/ve/ui/styles/ve.ui.ToolGroup.css
M modules/ve/ui/ve.ui.Tool.js
M modules/ve/ui/ve.ui.ToolGroup.js
4 files changed, 59 insertions(+), 38 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/75/90375/1
diff --git a/modules/ve/ui/styles/ve.ui.Tool.css
b/modules/ve/ui/styles/ve.ui.Tool.css
index 0ca0b60..5c307cf 100644
--- a/modules/ve/ui/styles/ve.ui.Tool.css
+++ b/modules/ve/ui/styles/ve.ui.Tool.css
@@ -1,39 +1,46 @@
-/* ve.ui.FormatTool */
+/*!
+ * VisualEditor Tool styles.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
-.ve-ui-menuToolGroup .ve-ui-tool-paragraph .ve-ui-labeledElement-label {
+/* ve.ui.MenuToolGroup */
+
+.ve-ui-menuToolGroup [rel=paragraph] .ve-ui-labeledElement-label {
font-weight: normal;
}
-.ve-ui-menuToolGroup .ve-ui-tool-heading1 .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=heading1] .ve-ui-labeledElement-label {
font-size: 150%;
font-weight: normal;
}
-.ve-ui-menuToolGroup .ve-ui-tool-heading2 .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=heading2] .ve-ui-labeledElement-label {
font-size: 120%;
font-weight: normal;
}
-.ve-ui-menuToolGroup .ve-ui-tool-heading3 .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=heading3] .ve-ui-labeledElement-label {
font-size: 105%;
font-weight: bold;
}
-.ve-ui-menuToolGroup .ve-ui-tool-heading4 .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=heading4] .ve-ui-labeledElement-label {
font-size: 92%;
font-weight: bold;
}
-.ve-ui-menuToolGroup .ve-ui-tool-heading5 .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=heading5] .ve-ui-labeledElement-label {
font-size: 80%;
font-weight: bold;
}
-.ve-ui-menuToolGroup .ve-ui-tool-heading6 .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=heading6] .ve-ui-labeledElement-label {
font-size: 64%;
font-weight: bold;
}
-.ve-ui-menuToolGroup .ve-ui-tool-preformatted .ve-ui-labeledElement-label {
+.ve-ui-menuToolGroup [rel=preformatted] .ve-ui-labeledElement-label {
font-family: monospace, "Courier New";
}
diff --git a/modules/ve/ui/styles/ve.ui.ToolGroup.css
b/modules/ve/ui/styles/ve.ui.ToolGroup.css
index 7cf8546..2912ac2 100644
--- a/modules/ve/ui/styles/ve.ui.ToolGroup.css
+++ b/modules/ve/ui/styles/ve.ui.ToolGroup.css
@@ -27,11 +27,11 @@
display: none;
}
-.ve-ui-toolGroup .ve-ui-tool .ve-ui-labeledElement-label {
+.ve-ui-toolGroup .ve-ui-tool-link .ve-ui-labeledElement-label {
color: #000;
}
-.ve-ui-toolGroup .ve-ui-tool .ve-ui-iconedElement-icon {
+.ve-ui-toolGroup .ve-ui-tool-link .ve-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;
+}
+
+.ve-ui-barToolGroup .ve-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);
}
-.ve-ui-barToolGroup .ve-ui-tool .ve-ui-iconedElement-icon {
+.ve-ui-barToolGroup .ve-ui-tool-link .ve-ui-iconedElement-icon {
display: block;
height: 1.5em;
width: 1.5em;
opacity: 0.8;
}
-.ve-ui-barToolGroup .ve-ui-tool .ve-ui-labeledElement-label {
+.ve-ui-barToolGroup .ve-ui-tool-link .ve-ui-labeledElement-label {
display: none;
}
-.ve-ui-barToolGroup .ve-ui-tool.ve-ui-widget-disabled {
+.ve-ui-barToolGroup .ve-ui-tool.ve-ui-widget-disabled .ve-ui-tool-link {
cursor: default;
}
-.ve-ui-barToolGroup .ve-ui-tool.ve-ui-widget-disabled
.ve-ui-iconedElement-icon {
+.ve-ui-barToolGroup .ve-ui-tool.ve-ui-widget-disabled .ve-ui-tool-link
.ve-ui-iconedElement-icon {
opacity: 0.2;
}
-.ve-ui-barToolGroup .ve-ui-tool:not(.ve-ui-widget-disabled)
.ve-ui-iconedElement-icon {
+.ve-ui-barToolGroup .ve-ui-tool:not(.ve-ui-widget-disabled) .ve-ui-tool-link
.ve-ui-iconedElement-icon {
opacity: 0.8;
}
-.ve-ui-barToolGroup .ve-ui-tool:hover:not(.ve-ui-widget-disabled)
.ve-ui-iconedElement-icon {
+.ve-ui-barToolGroup .ve-ui-tool:hover:not(.ve-ui-widget-disabled)
.ve-ui-tool-link .ve-ui-iconedElement-icon {
opacity: 1;
}
@@ -162,7 +166,7 @@
border-bottom-right-radius: 0;
}
-.ve-ui-popupToolGroup .ve-ui-tool .ve-ui-iconedElement-icon {
+.ve-ui-popupToolGroup .ve-ui-tool-link .ve-ui-iconedElement-icon {
display: inline-block;
vertical-align: middle;
height: 2em;
@@ -170,7 +174,7 @@
margin-right: 0.5em;
}
-.ve-ui-popupToolGroup .ve-ui-tool .ve-ui-labeledElement-label {
+.ve-ui-popupToolGroup .ve-ui-tool-link .ve-ui-labeledElement-label {
display: inline-block;
vertical-align: middle;
line-height: 2em;
@@ -185,10 +189,14 @@
.ve-ui-listToolGroup .ve-ui-tool {
display: block;
- cursor: pointer;
- white-space: nowrap;
border: solid 1px transparent;
margin: -1px 0 -1px -1px;
+}
+
+.ve-ui-listToolGroup .ve-ui-tool-link {
+ display: block;
+ cursor: pointer;
+ white-space: nowrap;
padding-right: 0.5em;
}
@@ -215,15 +223,15 @@
cursor: default;
}
-.ve-ui-listToolGroup .ve-ui-tool.ve-ui-widget-disabled
.ve-ui-iconedElement-icon {
+.ve-ui-listToolGroup .ve-ui-tool.ve-ui-widget-disabled .ve-ui-tool-link
.ve-ui-iconedElement-icon {
opacity: 0.2;
}
-.ve-ui-listToolGroup .ve-ui-tool:not(.ve-ui-widget-disabled)
.ve-ui-iconedElement-icon {
+.ve-ui-listToolGroup .ve-ui-tool:not(.ve-ui-widget-disabled) .ve-ui-tool-link
.ve-ui-iconedElement-icon {
opacity: 0.8;
}
-.ve-ui-listToolGroup .ve-ui-tool:hover:not(.ve-ui-widget-disabled)
.ve-ui-iconedElement-icon {
+.ve-ui-listToolGroup .ve-ui-tool:hover:not(.ve-ui-widget-disabled)
.ve-ui-tool-link .ve-ui-iconedElement-icon {
opacity: 1;
}
@@ -247,16 +255,20 @@
.ve-ui-menuToolGroup .ve-ui-tool {
display: block;
+}
+
+.ve-ui-menuToolGroup .ve-ui-tool-link {
+ display: block;
cursor: pointer;
white-space: nowrap;
padding: 0.25em 1em 0.25em 0.25em;
}
-.ve-ui-menuToolGroup .ve-ui-tool .ve-ui-iconedElement-icon {
+.ve-ui-menuToolGroup .ve-ui-tool-link .ve-ui-iconedElement-icon {
background-image: none;
}
-.ve-ui-menuToolGroup .ve-ui-tool-active .ve-ui-iconedElement-icon {
+.ve-ui-menuToolGroup .ve-ui-tool-active .ve-ui-tool-link
.ve-ui-iconedElement-icon {
/* @embed */
background-image: url(images/icons/check.png);
}
diff --git a/modules/ve/ui/ve.ui.Tool.js b/modules/ve/ui/ve.ui.Tool.js
index ebc55a0..191a38e 100644
--- a/modules/ve/ui/ve.ui.Tool.js
+++ b/modules/ve/ui/ve.ui.Tool.js
@@ -31,18 +31,20 @@
// Properties
this.toolbar = toolbar;
this.active = false;
+ this.$link = this.$$( '<a>' );
// Events
this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );
// Initialization
+ this.$link
+ .addClass( 've-ui-tool-link' )
+ .append( this.$icon, this.$label );
this.$
.data( 've-ui-tool', this )
- .addClass(
- 've-ui-tool ve-ui-tool-' +
- this.constructor.static.name.replace(
/^([^\/]+)\/([^\/]+).*$/, '$1-$2' )
- )
- .append( this.$icon, this.$label );
+ .addClass( 've-ui-tool' )
+ .attr( 'rel', this.constructor.static.name.replace(
/^([^\/]+)\/([^\/]+).*$/, '$1-$2' ) )
+ .append( this.$link );
this.setLabel( titleMessage ? ve.msg( titleMessage ) : '' );
this.setIcon( this.constructor.static.icon );
};
@@ -62,7 +64,7 @@
/* Static Properties */
-ve.ui.Tool.static.tagName = 'a';
+ve.ui.Tool.static.tagName = 'span';
/**
* Symbolic name of tool.
@@ -203,9 +205,9 @@
*/
ve.ui.Tool.prototype.setTitle = function ( title ) {
if ( typeof title === 'string' && title.length ) {
- this.$.attr( 'title', title );
+ this.$link.attr( 'title', title );
} else {
- this.$.removeAttr( 'title' );
+ this.$link.removeAttr( 'title' );
}
return this;
};
diff --git a/modules/ve/ui/ve.ui.ToolGroup.js b/modules/ve/ui/ve.ui.ToolGroup.js
index 1e0a744..3a8f82a 100644
--- a/modules/ve/ui/ve.ui.ToolGroup.js
+++ b/modules/ve/ui/ve.ui.ToolGroup.js
@@ -183,9 +183,9 @@
* @returns {ve.ui.Tool|null} Tool, `null` if none was found
*/
ve.ui.ToolGroup.prototype.getTargetTool = function ( e ) {
- var $item = $( e.target ).closest( '.ve-ui-tool' );
+ var $item = $( e.target ).closest( '.ve-ui-tool-link' );
if ( $item.length ) {
- return $item.data( 've-ui-tool' );
+ return $item.parent().data( 've-ui-tool' );
}
return null;
};
--
To view, visit https://gerrit.wikimedia.org/r/90375
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I667878fe4ae682712094a61bb4b411ac5fb999c7
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
