Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/72859
Change subject: RTL Improvements
......................................................................
RTL Improvements
Objectives:
* Make option widget icons correctly placed in RTL
* Make embedded context toolbar correctly placed in RTL
Approach:
Use separate elements for icons within option widgets which have more
flexibility when rendering in either LTR or RTL when compared to CSS background
position. The simpler approach, using CSS background position offsets, isn't
cross-browser compatible at this time.
Changes:
ve.ui.OutlineItemWidget.js
* Remove custom icon implementation, using parent class implementation instead
ve.ui.OptionWidget.js
* Add icon option, which adds an icon element only if an icon was specified
ve.ui.MenuItemWidget.js, ve-mw/ve.ui.MWParameterResultWidget.js
* Add override for icon config option
* Document icon config as private
ve.ui.Context.js
* Add detection and special handling for positioning embedded context toolbar
when rendering in RTL
ve.ui.Widget.css
* Add styles for option widget's new icon option
* Add styles to make indentation still work for outline item widgets
* Adjust styles for menu item widget as per changes in option widget
ve-mw/ve.ui.Widget.css
* Adjust styles for parameter result widget as per changes in option widget
Change-Id: Ibfa4b613e0fd7902f8a2c78b5717de402c5f82b8
---
M modules/ve-mw/ui/styles/ve.ui.Widget.css
M modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js
M modules/ve/ui/styles/ve.ui.Widget.css
M modules/ve/ui/ve.ui.Context.js
M modules/ve/ui/widgets/ve.ui.MenuItemWidget.js
M modules/ve/ui/widgets/ve.ui.OptionWidget.js
M modules/ve/ui/widgets/ve.ui.OutlineItemWidget.js
7 files changed, 82 insertions(+), 25 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/59/72859/1
diff --git a/modules/ve-mw/ui/styles/ve.ui.Widget.css
b/modules/ve-mw/ui/styles/ve.ui.Widget.css
index 88d31da..08fb76a 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 49cf9a0..7326595 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 587839b..11f3956 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;
@@ -209,6 +221,18 @@
.ve-ui-outlineItemWidget.ve-ui-optionWidget-selected {
background-color: #a7dcff;
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 */
@@ -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 37fc98b..30bf55e 100644
--- a/modules/ve/ui/ve.ui.Context.js
+++ b/modules/ve/ui/ve.ui.Context.js
@@ -260,8 +260,15 @@
);
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 5cabd71..4e51c8c 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 @@
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 0d89b9c..d1d83c5 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 @@
.append( this.$label );
this.setSelected( config.selected );
this.setHighlighted( config.highlighted );
+
+ // Options
+ if ( config.icon ) {
+ this.$icon = this.$$( '<div>' )
+ .addClass( 've-ui-optionWidget-icon ve-ui-icon-' +
config.icon )
+ .appendTo( this.$ );
+ }
};
/* Inheritance */
@@ -56,11 +64,7 @@
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;
@@ -117,9 +121,9 @@
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 @@
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 @@
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 6ba9a98..fd98b0d 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 @@
// Initialization
this.$.addClass( 've-ui-outlineItemWidget' );
- if ( config.icon ) {
- this.$.addClass( 've-ui-icon-' + config.icon );
- }
this.setLevel( config.level );
};
--
To view, visit https://gerrit.wikimedia.org/r/72859
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibfa4b613e0fd7902f8a2c78b5717de402c5f82b8
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
