Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/94479
Change subject: [WIP] List-related buttons depend on content for direction
......................................................................
[WIP] List-related buttons depend on content for direction
All icons are currently dependent on the GUI language direction to display
correctly for LTR/RTL. However, content-related directional icons like
list (bulleted/numbered) and indent (increase/decrease) should be shown
according to the direction of the actual text.
Change-Id: Ic916b527ead973c7dfc3107cafa3fec5ed7b3f92
---
M modules/oojs-ui/OO.ui.Tool.js
M modules/syntaxhighlight/ve.ui.MWSyntaxHighlightTool.js
M modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
M modules/ve/ui/styles/ve.ui.Icons-raster.css
M modules/ve/ui/styles/ve.ui.Icons-vector.css
M modules/ve/ui/tools/ve.ui.IndentationTool.js
M modules/ve/ui/tools/ve.ui.ListTool.js
7 files changed, 123 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/79/94479/1
diff --git a/modules/oojs-ui/OO.ui.Tool.js b/modules/oojs-ui/OO.ui.Tool.js
index 3c07f54..74d73dd 100644
--- a/modules/oojs-ui/OO.ui.Tool.js
+++ b/modules/oojs-ui/OO.ui.Tool.js
@@ -48,6 +48,10 @@
.append( this.$link );
this.setIcon( this.constructor.static.icon );
this.updateLabel();
+ // Corrections for list-related icons:
+ if ( this.constructor.static.iconContentDir === true ) {
+ this.$element.addClass( 'oo-ui-' +
this.toolbar.surface.getView().getDir() );
+ }
};
/* Inheritance */
@@ -68,6 +72,12 @@
OO.ui.Tool.static.tagName = 'span';
/**
+ * Whether to force the icon to follow the content direction
+ * rather than GUI direction
+ * @type {Boolean}
+ */
+OO.ui.Tool.static.iconContentDir = false;
+/**
* Symbolic name of tool.
*
* @abstract
diff --git a/modules/syntaxhighlight/ve.ui.MWSyntaxHighlightTool.js
b/modules/syntaxhighlight/ve.ui.MWSyntaxHighlightTool.js
index d404040..5c039fe 100644
--- a/modules/syntaxhighlight/ve.ui.MWSyntaxHighlightTool.js
+++ b/modules/syntaxhighlight/ve.ui.MWSyntaxHighlightTool.js
@@ -95,6 +95,7 @@
ve.ui.MWSynHiIndentTool.static.group = 'synhiEditorTool';
ve.ui.MWSynHiIndentTool.static.method = 'indent';
ve.ui.MWSynHiIndentTool.static.icon = 'indent-list';
+ve.ui.MWSynHiIndentTool.static.iconContentDir = true;
ve.ui.MWSynHiIndentTool.static.titleMessage = '';
ve.ui.MWSynHiIndentTool.static.autoAdd = false;
ve.ui.syntaxHighlightEditorToolFactory.register( ve.ui.MWSynHiIndentTool );
@@ -109,4 +110,4 @@
ve.ui.MWSynHiBeautifyTool.static.icon = 'reformat';
ve.ui.MWSynHiBeautifyTool.static.titleMessage = '';
ve.ui.MWSynHiBeautifyTool.static.autoAdd = false;
-ve.ui.syntaxHighlightEditorToolFactory.register( ve.ui.MWSynHiBeautifyTool );
\ No newline at end of file
+ve.ui.syntaxHighlightEditorToolFactory.register( ve.ui.MWSynHiBeautifyTool );
diff --git a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
index 5f9f50a..ff1a715 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
@@ -965,7 +965,6 @@
'history':
'updateToolbarSaveButtonState'
} );
target.$element.append(
target.surface.$element );
- target.setUpToolbar();
target.transformPageTitle();
target.changeDocumentTitle();
@@ -977,12 +976,12 @@
'lang': mw.config.get(
'wgVisualEditor' ).pageLanguageCode,
'dir': mw.config.get(
'wgVisualEditor' ).pageLanguageDir
} );
-
// Add appropriately mw-content-ltr or
mw-content-rtl class
target.surface.view.$element.addClass(
'mw-content-' + mw.config.get(
'wgVisualEditor' ).pageLanguageDir
);
+ target.setUpToolbar();
// Now that the surface is attached to
the document and ready,
// let it initialize itself
target.surface.initialize();
diff --git a/modules/ve/ui/styles/ve.ui.Icons-raster.css
b/modules/ve/ui/styles/ve.ui.Icons-raster.css
index 2194f7c..5442ed4 100644
--- a/modules/ve/ui/styles/ve.ui.Icons-raster.css
+++ b/modules/ve/ui/styles/ve.ui.Icons-raster.css
@@ -70,6 +70,30 @@
background-image: url(images/icons/indent-list-ltr.png);
}
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-rtl.png);
+}
+
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-ltr.png);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-rtl.png);
+}
+
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-ltr.png);
+}
+
.oo-ui-icon-italic-a {
/* @embed */
background-image: url(images/icons/italic-a.png);
@@ -116,11 +140,35 @@
background-image: url(images/icons/number-list-ltr.png);
}
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-ltr.png);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-rtl.png);
+}
+
.oo-ui-icon-outdent-list {
/* @embed */
background-image: url(images/icons/outdent-list-ltr.png);
}
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-ltr.png);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-rtl.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..ace09d8 100644
--- a/modules/ve/ui/styles/ve.ui.Icons-vector.css
+++ b/modules/ve/ui/styles/ve.ui.Icons-vector.css
@@ -70,6 +70,30 @@
background-image: url(images/icons/indent-list-ltr.svg);
}
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-ltr.svg);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-bullet-list {
+ /* @embed */
+ background-image: url(images/icons/bullet-list-rtl.svg);
+}
+
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-ltr.svg);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-indent-list {
+ /* @embed */
+ background-image: url(images/icons/indent-list-rtl.svg);
+}
+
.oo-ui-icon-italic-a {
/* @embed */
background-image: url(images/icons/italic-a.svg);
@@ -121,6 +145,35 @@
background-image: url(images/icons/outdent-list-ltr.svg);
}
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-ltr.svg);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-number-list {
+ /* @embed */
+ background-image: url(images/icons/number-list-rtl.svg);
+}
+
+.oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-ltr.svg);
+}
+
+/* @noflip */
+.oo-ui-ltr .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-ltr.svg);
+}
+
+/* @noflip */
+.oo-ui-rtl .oo-ui-icon-outdent-list {
+ /* @embed */
+ background-image: url(images/icons/outdent-list-rtl.svg);
+}
+
.oo-ui-icon-strikethrough-a {
/* @embed */
background-image: url(images/icons/strikethrough-a.svg);
diff --git a/modules/ve/ui/tools/ve.ui.IndentationTool.js
b/modules/ve/ui/tools/ve.ui.IndentationTool.js
index 24d9eed..53121d5 100644
--- a/modules/ve/ui/tools/ve.ui.IndentationTool.js
+++ b/modules/ve/ui/tools/ve.ui.IndentationTool.js
@@ -36,6 +36,13 @@
*/
ve.ui.IndentationTool.static.method = '';
+/**
+ * Indentation buttons have icons that depend on content
+ * direction, not GUI direction
+ * @type {Boolean}
+ */
+ve.ui.IndentationTool.static.iconContentDir = true;
+
/* Methods */
/**
diff --git a/modules/ve/ui/tools/ve.ui.ListTool.js
b/modules/ve/ui/tools/ve.ui.ListTool.js
index 59439ea..f54468c 100644
--- a/modules/ve/ui/tools/ve.ui.ListTool.js
+++ b/modules/ve/ui/tools/ve.ui.ListTool.js
@@ -93,6 +93,7 @@
ve.ui.BulletListTool.static.icon = 'bullet-list';
ve.ui.BulletListTool.static.titleMessage =
'visualeditor-listbutton-bullet-tooltip';
ve.ui.BulletListTool.static.style = 'bullet';
+ve.ui.BulletListTool.static.iconContentDir = true;
ve.ui.toolFactory.register( ve.ui.BulletListTool );
/**
@@ -113,4 +114,5 @@
ve.ui.NumberListTool.static.icon = 'number-list';
ve.ui.NumberListTool.static.titleMessage =
'visualeditor-listbutton-number-tooltip';
ve.ui.NumberListTool.static.style = 'number';
+ve.ui.NumberListTool.static.iconContentDir = true;
ve.ui.toolFactory.register( ve.ui.NumberListTool );
--
To view, visit https://gerrit.wikimedia.org/r/94479
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic916b527ead973c7dfc3107cafa3fec5ed7b3f92
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
