Merge "Allow toolbar items to use OOUI icons as buttons"

This commit is contained in:
jenkins-bot 2018-03-21 22:50:43 +00:00 committed by Gerrit Code Review
commit 76dcd4216a
2 changed files with 56 additions and 25 deletions

View file

@ -305,7 +305,7 @@
return $group;
},
buildTool: function ( context, id, tool ) {
var i, label, $button, offsetOrIcon, $select, $options,
var i, label, $button, offsetOrIcon, $select, $options, oouiButton,
option, optionLabel;
if ( 'filters' in tool ) {
for ( i = 0; i < tool.filters.length; i++ ) {
@ -317,27 +317,39 @@
label = $.wikiEditor.autoMsg( tool, 'label' );
switch ( tool.type ) {
case 'button':
offsetOrIcon = $.wikiEditor.autoIconOrOffset(
tool.icon,
tool.offset,
$.wikiEditor.imgPath + 'toolbar/'
);
$button = $( '<a>' )
.attr( {
href: '#',
title: label,
rel: id,
role: 'button',
'class': 'tool tool-button'
} )
.text( label );
if ( typeof offsetOrIcon === 'object' ) {
$button
.addClass( 'wikiEditor-toolbar-spritedButton' )
.css( 'backgroundPosition', offsetOrIcon[ 0 ] + 'px ' + offsetOrIcon[ 1 ] + 'px' );
} else if ( offsetOrIcon !== undefined ) { // Bug T172500
$button
.css( 'background-image', 'url(' + offsetOrIcon + ')' );
if ( tool.oouiIcon ) {
oouiButton = new OO.ui.ButtonWidget( {
framed: false,
classes: [ 'tool' ],
icon: tool.oouiIcon,
title: label
} );
$button = oouiButton.$element;
$button.attr( 'rel', id );
$button.data( 'ooui', oouiButton );
} else {
$button = $( '<a>' )
.attr( {
href: '#',
title: label,
rel: id,
role: 'button',
'class': 'tool tool-button'
} )
.text( label );
offsetOrIcon = $.wikiEditor.autoIconOrOffset(
tool.icon,
tool.offset,
$.wikiEditor.imgPath + 'toolbar/'
);
if ( typeof offsetOrIcon === 'object' ) {
$button
.addClass( 'wikiEditor-toolbar-spritedButton' )
.css( 'backgroundPosition', offsetOrIcon[ 0 ] + 'px ' + offsetOrIcon[ 1 ] + 'px' );
} else if ( offsetOrIcon !== undefined ) { // Bug T172500
$button
.css( 'background-image', 'url(' + offsetOrIcon + ')' );
}
}
if ( 'action' in tool ) {
$button

View file

@ -320,8 +320,8 @@
.tool-button {
background-position: 2px 2px;
background-repeat: no-repeat;
display: block;
float: left;
display: inline-block;
vertical-align: middle;
height: 22px;
text-indent: -9999px;
width: 22px;
@ -330,11 +330,30 @@
overflow: hidden;
}
/* Sprited Buttons */
/* Sprited buttons */
.wikiEditor-toolbar-spritedButton {
.background-image-svg('images/toolbar/button-sprite.svg', 'images/toolbar/button-sprite.png');
}
/* OOUI buttons */
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement {
margin: 0;
padding: 3px;
> .oo-ui-buttonElement-button {
padding: 0;
border: 0;
> .oo-ui-iconElement-icon {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
left: 0;
// Reduce opacity like Apex theme
opacity: 0.7;
}
}
}
.ui-widget {
table {
td.wikieditor-toolbar-table-preview-wrapper {