Merge "Isolate links within OO.ui.Tool"

This commit is contained in:
jenkins-bot 2013-10-29 05:58:44 +00:00 committed by Gerrit Code Review
commit 152735294d
5 changed files with 57 additions and 36 deletions

View file

@ -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.$$( '<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 @@ 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' );
}
};

View file

@ -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;
};

View file

@ -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);
}

View file

@ -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')

View file

@ -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";
}