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 <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits