jenkins-bot has submitted this change and it was merged.
Change subject: Add direction classes to Toolbar based on context
......................................................................
Add direction classes to Toolbar based on context
Add rtl/ltr-related classes to the toolbar based on cursor context, so
certain icons can change based on inline and block directions.
Change-Id: I1b6e450226bf8da820fb622f28c1c3062c534bb0
---
M modules/ve/ui/styles/ve.ui.Icons-raster.css
M modules/ve/ui/styles/ve.ui.Icons-vector.css
M modules/ve/ui/ve.ui.Toolbar.js
3 files changed, 143 insertions(+), 2 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ve/ui/styles/ve.ui.Icons-raster.css
b/modules/ve/ui/styles/ve.ui.Icons-raster.css
index 2194f7c..e39b96d 100644
--- a/modules/ve/ui/styles/ve.ui.Icons-raster.css
+++ b/modules/ve/ui/styles/ve.ui.Icons-raster.css
@@ -4,6 +4,7 @@
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
+/*csslint duplicate-background-images:false */
.oo-ui-icon-bold-a {
/* @embed */
@@ -65,7 +66,31 @@
background-image: url(images/icons/bullet-list-ltr.png);
}
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-rtl.png);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-ltr.png);
+}
+
.oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-ltr.png);
+}
+
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-rtl.png);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-indent-list {
/* @embed */
background-image: url(images/icons/indent-list-ltr.png);
}
@@ -116,11 +141,35 @@
background-image: url(images/icons/number-list-ltr.png);
}
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-rtl.png);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-ltr.png);
+}
+
.oo-ui-icon-outdent-list {
/* @embed */
background-image: url(images/icons/outdent-list-ltr.png);
}
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-rtl.png);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-ltr.png);
+}
+
.oo-ui-icon-strikethrough-a {
/* @embed */
background-image: url(images/icons/strikethrough-a.png);
diff --git a/modules/ve/ui/styles/ve.ui.Icons-vector.css
b/modules/ve/ui/styles/ve.ui.Icons-vector.css
index 9913456..512d7ce 100644
--- a/modules/ve/ui/styles/ve.ui.Icons-vector.css
+++ b/modules/ve/ui/styles/ve.ui.Icons-vector.css
@@ -4,6 +4,7 @@
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
+/*csslint duplicate-background-images:false */
.oo-ui-icon-bold-a {
/* @embed */
@@ -65,7 +66,31 @@
background-image: url(images/icons/bullet-list-ltr.svg);
}
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-rtl.svg);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-ltr.svg);
+}
+
.oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-ltr.svg);
+}
+
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-rtl.svg);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-indent-list {
/* @embed */
background-image: url(images/icons/indent-list-ltr.svg);
}
@@ -116,11 +141,35 @@
background-image: url(images/icons/number-list-ltr.svg);
}
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-rtl.svg);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-ltr.svg);
+}
+
.oo-ui-icon-outdent-list {
/* @embed */
background-image: url(images/icons/outdent-list-ltr.svg);
}
+/* @noflip */
+.ve-ui-dir-block-rtl .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-rtl.svg);
+}
+
+/* @noflip */
+.ve-ui-dir-block-ltr .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-ltr.svg);
+}
+
.oo-ui-icon-strikethrough-a {
/* @embed */
background-image: url(images/icons/strikethrough-a.svg);
diff --git a/modules/ve/ui/ve.ui.Toolbar.js b/modules/ve/ui/ve.ui.Toolbar.js
index 966415d..b61d524 100644
--- a/modules/ve/ui/ve.ui.Toolbar.js
+++ b/modules/ve/ui/ve.ui.Toolbar.js
@@ -49,7 +49,11 @@
return toolbar.onSurfaceViewKeyUp.apply( toolbar,
arguments );
}
};
-
+ // default directions:
+ this.contextDirection = { 'inline': 'ltr', 'block': 'ltr' };
+ this.$element
+ .addClass( 've-ui-dir-inline-' + this.contextDirection.inline )
+ .addClass( 've-ui-dir-block-' + this.contextDirection.block );
// Events
this.surface.getModel().connect( this, { 'contextChange':
'onContextChange' } );
this.surface.connect( this, { 'addCommand': 'onSurfaceAddCommand' } );
@@ -151,8 +155,15 @@
* @fires updateState
*/
ve.ui.Toolbar.prototype.onContextChange = function () {
- var i, len, leafNodes,
+ var i, len, leafNodes, dirInline, dirBlock, fragmentAnnotation,
+ currentNodes = {
+ fragNodes: null,
+ fragAnnotations: null,
+ 'dm': {},
+ 'ce': {}
+ },
fragment = this.surface.getModel().getFragment( null, false ),
+ doc = this.surface.getView().getDocument(),
nodes = [];
leafNodes = fragment.getLeafNodes();
@@ -161,6 +172,38 @@
nodes.push( leafNodes[i].node );
}
}
+ // Update context direction for button icons UI:
+
+ // block direction (direction of the current node)
+ currentNodes.fragNodes = fragment.getCoveredNodes();
+ if ( currentNodes.fragNodes.length > 1 ) {
+ // selection of multiple nodes
+ currentNodes.dm.block =
fragment.getSiblingNodes()[0].node.parent;
+ } else {
+ // selection of a single node
+ currentNodes.dm.block = currentNodes.fragNodes[0].node;
+ }
+ // get the direction of the block:
+ currentNodes.ce.block = doc.getNodeFromOffset(
currentNodes.dm.block.getRange().start );
+ dirBlock = currentNodes.ce.block.$element.css( 'direction' );
+ // by default, inline and block are the same, unless there's an
inline-specific direction
+ dirInline = dirBlock;
+ // 'inline' direction is set by language annotation:
+ fragmentAnnotation = fragment.getAnnotations();
+ if ( fragmentAnnotation.hasAnnotationWithName( 'meta/language' ) ) {
+ dirInline = fragmentAnnotation.getAnnotationsByName(
'meta/language' ).get( 0 ).getAttribute( 'dir' );
+ }
+ if ( dirInline !== this.contextDirection.inline ) {
+ // remove previous class:
+ this.$element.removeClass( 've-ui-dir-inline-rtl
ve-ui-dir-inline-ltr' );
+ this.$element.addClass( 've-ui-dir-inline-' + dirInline );
+ this.contextDirection.inline = dirInline;
+ }
+ if ( dirBlock !== this.contextDirection.block ) {
+ this.$element.removeClass( 've-ui-dir-block-rtl
ve-ui-dir-block-ltr' );
+ this.$element.addClass( 've-ui-dir-block-' + dirBlock );
+ this.contextDirection.block = dirBlock;
+ }
this.emit( 'updateState', nodes, fragment.getAnnotations(),
fragment.getAnnotations( true ) );
};
--
To view, visit https://gerrit.wikimedia.org/r/95560
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1b6e450226bf8da820fb622f28c1c3062c534bb0
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: Catrope <roan.katt...@gmail.com>
Gerrit-Reviewer: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
