diff --git a/modules/ve-mw/ui/styles/ve.ui.Widget.css b/modules/ve-mw/ui/styles/ve.ui.Widget.css index 88d31daa71..08fb76a3ef 100644 --- a/modules/ve-mw/ui/styles/ve.ui.Widget.css +++ b/modules/ve-mw/ui/styles/ve.ui.Widget.css @@ -291,8 +291,11 @@ .ve-ui-mwParameterResultWidget { padding-right: 0.25em; - background-position: 0.5em 0.25em; - background-repeat: no-repeat; +} + +.ve-ui-mwParameterResultWidget .ve-ui-optionWidget-icon { + top: 0.25em; + margin-top: 0; } .ve-ui-mwParameterResultWidget.ve-ui-widget-disabled { diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js index 49cf9a0e5a..7326595720 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js +++ b/modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js @@ -16,14 +16,22 @@ * @param {Object} [config] Config options */ ve.ui.MWParameterResultWidget = function VeUiMWParameterResultWidget( data, config ) { + // Configuration initialization + config = ve.extendObject( {}, config, { 'icon': 'parameter' } ); + // Parent constructor ve.ui.OptionWidget.call( this, data, config ); // Initialization - this.$.addClass( 've-ui-mwParameterResultWidget ve-ui-icon-parameter' ); + this.$.addClass( 've-ui-mwParameterResultWidget' ); this.setLabel( this.buildLabel() ); }; +/** + * @private + * @cfg {string} icon + */ + /* Inheritance */ ve.inheritClass( ve.ui.MWParameterResultWidget, ve.ui.OptionWidget ); diff --git a/modules/ve/ui/styles/ve.ui.Widget.css b/modules/ve/ui/styles/ve.ui.Widget.css index 587839b1b7..11f3956a56 100644 --- a/modules/ve/ui/styles/ve.ui.Widget.css +++ b/modules/ve/ui/styles/ve.ui.Widget.css @@ -182,9 +182,21 @@ cursor: default; } +.ve-ui-optionWidget .ve-ui-optionWidget-icon { + position: absolute; + top: 50%; + left: 0.5em; + width: 2em; + height: 2em; + margin-top: -1em; + background-repeat: no-repeat; + background-position: center center; +} + /* ve.ui.OutlineItemWidget */ .ve-ui-outlineItemWidget { + position: relative; padding: 1.25em 1.25em 1.25em 3.5em; background-position: 1em center; background-repeat: no-repeat; @@ -211,6 +223,18 @@ text-shadow: 0 1px 1px rgba(255,255,255,0.5); } +.ve-ui-outlineItemWidget-level-0 .ve-ui-optionWidget-icon { + left: 1em; +} + +.ve-ui-outlineItemWidget-level-1 .ve-ui-optionWidget-icon { + left: 3em; +} + +.ve-ui-outlineItemWidget-level-2 .ve-ui-optionWidget-icon { + left: 5em; +} + /* ve.ui.OutlineControlsWidget */ .ve-ui-outlineControlsWidget { @@ -360,8 +384,19 @@ /* ve.ui.MenuItemWidget */ .ve-ui-menuItemWidget { - background-position: 1em center; - background-repeat: no-repeat; + position: relative; +} + +.ve-ui-menuItemWidget.ve-ui-optionWidget-selected:not(.ve-ui-optionWidget-highlighted) { + background-color: transparent; +} + +.ve-ui-menuItemWidget .ve-ui-optionWidget-icon { + display: none; +} + +.ve-ui-menuItemWidget.ve-ui-optionWidget-selected .ve-ui-optionWidget-icon { + display: block; } /* ve.ui.MenuSectionItemWidget */ diff --git a/modules/ve/ui/ve.ui.Context.js b/modules/ve/ui/ve.ui.Context.js index 37fc98b160..30bf55e9dc 100644 --- a/modules/ve/ui/ve.ui.Context.js +++ b/modules/ve/ui/ve.ui.Context.js @@ -260,8 +260,15 @@ ve.ui.Context.prototype.updateDimensions = function ( transition ) { ); focusableWidth = focusedNode.$focusable.outerWidth(); $container = this.$menu; - position = { 'x': focusableOffset.left + focusableWidth, 'y': focusableOffset.top }; - this.popup.align = 'right'; + position = { 'y': focusableOffset.top }; + // HACK: Proper RTL detection plz! + if ( $( 'body' ).is( '.rtl,.ve-rtl' ) ) { + position.x = focusableOffset.left; + this.popup.align = 'left'; + } else { + position.x = focusableOffset.left + focusableWidth; + this.popup.align = 'right'; + } } else { $container = inspector ? this.inspectors.$ : this.$menu; this.popup.align = 'center'; diff --git a/modules/ve/ui/widgets/ve.ui.MenuItemWidget.js b/modules/ve/ui/widgets/ve.ui.MenuItemWidget.js index 5cabd71361..4e51c8c1cf 100644 --- a/modules/ve/ui/widgets/ve.ui.MenuItemWidget.js +++ b/modules/ve/ui/widgets/ve.ui.MenuItemWidget.js @@ -16,6 +16,9 @@ * @param {Object} [config] Config options */ ve.ui.MenuItemWidget = function VeUiMenuItemWidget( data, config ) { + // Configuration initialization + config = ve.extendObject( {}, config, { 'icon': 'check' } ); + // Parent constructor ve.ui.OptionWidget.call( this, data, config ); @@ -23,10 +26,11 @@ ve.ui.MenuItemWidget = function VeUiMenuItemWidget( data, config ) { this.$.addClass( 've-ui-menuItemWidget' ); }; +/** + * @private + * @cfg {string} icon + */ + /* Inheritance */ ve.inheritClass( ve.ui.MenuItemWidget, ve.ui.OptionWidget ); - -/* Static Properties */ - -ve.ui.MenuItemWidget.static.selectedClass = 've-ui-icon-check'; diff --git a/modules/ve/ui/widgets/ve.ui.OptionWidget.js b/modules/ve/ui/widgets/ve.ui.OptionWidget.js index 0d89b9cb10..d1d83c5d32 100644 --- a/modules/ve/ui/widgets/ve.ui.OptionWidget.js +++ b/modules/ve/ui/widgets/ve.ui.OptionWidget.js @@ -17,6 +17,7 @@ * @param {Mixed} data Option data * @param {Object} [config] Config options * @cfg {jQuery|string} [label] Option label + * @cfg {string} [icon] Symbolic name of icon * @cfg {boolean} [selected=false] Select option * @cfg {boolean} [highlighted=false] Highlight option * @cfg {string} [rel] Value for `rel` attribute in DOM, allowing per-option styling @@ -44,6 +45,13 @@ ve.ui.OptionWidget = function VeUiOptionWidget( data, config ) { .append( this.$label ); this.setSelected( config.selected ); this.setHighlighted( config.highlighted ); + + // Options + if ( config.icon ) { + this.$icon = this.$$( '
' ) + .addClass( 've-ui-optionWidget-icon ve-ui-icon-' + config.icon ) + .appendTo( this.$ ); + } }; /* Inheritance */ @@ -56,12 +64,8 @@ ve.mixinClass( ve.ui.OptionWidget, ve.ui.LabeledElement ); ve.ui.OptionWidget.static.tagName = 'li'; -ve.ui.OptionWidget.static.selectedClass = 've-ui-optionWidget-selected'; - ve.ui.OptionWidget.static.selectable = true; -ve.ui.OptionWidget.static.highlightedClass = 've-ui-optionWidget-highlighted'; - ve.ui.OptionWidget.static.highlightable = true; /* Methods */ @@ -117,9 +121,9 @@ ve.ui.OptionWidget.prototype.setSelected = function ( state ) { if ( !this.disabled && this.constructor.static.selectable ) { this.selected = !!state; if ( this.selected ) { - this.$.addClass( this.constructor.static.selectedClass ); + this.$.addClass( 've-ui-optionWidget-selected' ); } else { - this.$.removeClass( this.constructor.static.selectedClass ); + this.$.removeClass( 've-ui-optionWidget-selected' ); } } return this; @@ -136,9 +140,9 @@ ve.ui.OptionWidget.prototype.setHighlighted = function ( state ) { if ( !this.disabled && this.constructor.static.highlightable ) { this.highlighted = !!state; if ( this.highlighted ) { - this.$.addClass( this.constructor.static.highlightedClass ); + this.$.addClass( 've-ui-optionWidget-highlighted' ); } else { - this.$.removeClass( this.constructor.static.highlightedClass ); + this.$.removeClass( 've-ui-optionWidget-highlighted' ); } } return this; @@ -154,9 +158,9 @@ ve.ui.OptionWidget.prototype.flash = function ( done ) { var $this = this.$; if ( !this.disabled && this.constructor.static.highlightable ) { - $this.removeClass( this.constructor.static.highlightedClass ); + $this.removeClass( 've-ui-optionWidget-highlighted' ); setTimeout( ve.bind( function () { - $this.addClass( this.constructor.static.highlightedClass ); + $this.addClass( 've-ui-optionWidget-highlighted' ); if ( done ) { setTimeout( done, 100 ); } diff --git a/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js b/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js index 6ba9a9814d..fd98b0dd14 100644 --- a/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js +++ b/modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js @@ -14,7 +14,6 @@ * @constructor * @param {Mixed} data Item data * @param {Object} [config] Config options - * @cfg {string} [icon] Symbolic name of icon * @cfg {number} [level] Indentation level * @cfg {boolean} [moveable] Allow modification from outline controls */ @@ -31,9 +30,6 @@ ve.ui.OutlineItemWidget = function VeUiOutlineItemWidget( data, config ) { // Initialization this.$.addClass( 've-ui-outlineItemWidget' ); - if ( config.icon ) { - this.$.addClass( 've-ui-icon-' + config.icon ); - } this.setLevel( config.level ); };