Use CSS for handling empty labels

Objective:
* Use CSS to control the styling of empty labels

Changes:

ve.ui.LabeledElement.js
* Remove emptyHtml static property
* Add/remove ve-ui-labeledElement-empty class when setting label

ve.ui.ToolGroup.css
* Hide empty labels inside popup tool group handles

ve.ui.Widget.css
* Hide empty labels inside icon button widgets

ve.ui.Toolbar.js
* Only apply default catch-all tool group properties if they were previously undefined

ve.ui.IconButtonWidget.js
* Remove emptyHtml static property

Change-Id: Icd3f772942e74b547e926829c181e914182feb75
This commit is contained in:
Trevor Parscal 2013-10-15 14:56:05 -07:00
parent 47cccb4feb
commit 580c5be915
5 changed files with 16 additions and 16 deletions

View file

@ -33,15 +33,6 @@ ve.ui.LabeledElement = function VeUiLabeledElement( $label, config ) {
ve.ui.LabeledElement.static = {};
/*
* HTML to use when label is empty.
*
* @static
* @property {string}
* @inheritable
*/
ve.ui.LabeledElement.static.emptyHtml = '&nbsp';
/* Methods */
/**
@ -52,6 +43,8 @@ ve.ui.LabeledElement.static.emptyHtml = '&nbsp';
* @chainable
*/
ve.ui.LabeledElement.prototype.setLabel = function ( value ) {
var empty = false;
if ( typeof value === 'string' && value.trim() ) {
this.$label.text( value );
this.label = value;
@ -59,9 +52,12 @@ ve.ui.LabeledElement.prototype.setLabel = function ( value ) {
this.$label.empty().append( value );
this.label = value;
} else {
this.$label.html( this.constructor.static.emptyLabel );
this.$label.empty();
this.label = null;
empty = true;
}
this.$label[empty ? 'addClass' : 'removeClass']( 've-ui-labeledElement-empty' );
return this;
};

View file

@ -137,6 +137,10 @@
margin: 0 2.25em 0 1em;
}
.ve-ui-popupToolGroup-handle .ve-ui-labeledElement-empty {
display: none;
}
.ve-ui-popupToolGroup .ve-ui-toolGroup-tools {
display: none;
position: absolute;

View file

@ -70,6 +70,10 @@ a.ve-ui-buttonWidget-button {
color: #ccc;
}
.ve-ui-iconButtonWidget .ve-ui-buttonWidget-button > .ve-ui-labeledElement-empty {
display: none;
}
/* ve.ui.PopupButtonWidget */
.ve-ui-popupButtonWidget {

View file

@ -128,10 +128,10 @@ ve.ui.Toolbar.prototype.setup = function ( groups ) {
group = groups[i];
if ( group.include === '*' ) {
// Apply defaults to catch-all groups
if ( !group.type ) {
if ( group.type === undefined ) {
group.type = 'list';
}
if ( !group.label ) {
if ( group.label === undefined ) {
group.label = 'visualeditor-toolbar-more';
}
}

View file

@ -32,7 +32,3 @@ ve.ui.IconButtonWidget = function VeUiIconButtonWidget( config ) {
ve.inheritClass( ve.ui.IconButtonWidget, ve.ui.ButtonWidget );
ve.mixinClass( ve.ui.IconButtonWidget, ve.ui.IconedElement );
/* Static Properties */
ve.ui.IconButtonWidget.static.emptyHtml = '';