8
0
Эх сурвалжийг харах

Made the indent button icons match the UI language of the editor.

Aleksander Nowodzinski 6 жил өмнө
parent
commit
919a7b6868

+ 6 - 2
packages/ckeditor5-indent/src/indentui.js

@@ -35,10 +35,14 @@ export default class IndentUI extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
+		const locale = editor.locale;
 		const t = editor.t;
 
-		this._defineButton( 'indent', t( 'Increase indent' ), indentIcon );
-		this._defineButton( 'outdent', t( 'Decrease indent' ), outdentIcon );
+		const localizedIndentIcon = locale.languageDirection == 'ltr' ? indentIcon : outdentIcon;
+		const localizedOutdentIcon = locale.languageDirection == 'ltr' ? outdentIcon : indentIcon;
+
+		this._defineButton( 'indent', t( 'Increase indent' ), localizedIndentIcon );
+		this._defineButton( 'outdent', t( 'Decrease indent' ), localizedOutdentIcon );
 	}
 
 	/**

+ 63 - 2
packages/ckeditor5-indent/tests/indentui.js

@@ -12,6 +12,9 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import IndentEditing from '../src/indentediting';
 import IndentUI from '../src/indentui';
 
+import indentIcon from '../theme/icons/indent.svg';
+import outdentIcon from '../theme/icons/outdent.svg';
+
 describe( 'IndentUI', () => {
 	let editor, element;
 
@@ -49,7 +52,6 @@ describe( 'IndentUI', () => {
 
 		expect( indentButton ).to.be.instanceOf( ButtonView );
 		expect( indentButton.label ).to.equal( 'Increase indent' );
-		expect( indentButton.icon ).to.match( /<svg / );
 	} );
 
 	it( 'should set up button for outdent', () => {
@@ -57,7 +59,66 @@ describe( 'IndentUI', () => {
 
 		expect( outdentButton ).to.be.instanceOf( ButtonView );
 		expect( outdentButton.label ).to.equal( 'Decrease indent' );
-		expect( outdentButton.icon ).to.match( /<svg / );
+	} );
+
+	describe( 'icons', () => {
+		describe( 'left–to–right UI', () => {
+			it( 'should display the right icon for indent', () => {
+				const indentButton = editor.ui.componentFactory.create( 'indent' );
+
+				expect( indentButton.icon ).to.equal( indentIcon );
+			} );
+
+			it( 'should display the right icon for outdent', () => {
+				const outdentButton = editor.ui.componentFactory.create( 'outdent' );
+
+				expect( outdentButton.icon ).to.equal( outdentIcon );
+			} );
+		} );
+
+		describe( 'right–to–left UI', () => {
+			it( 'should display the right icon for indent', () => {
+				const element = document.createElement( 'div' );
+				document.body.appendChild( element );
+
+				return ClassicTestEditor
+					.create( element, {
+						plugins: [ IndentUI, IndentEditing ],
+						language: 'ar'
+					} )
+					.then( newEditor => {
+						const indentButton = newEditor.ui.componentFactory.create( 'indent' );
+
+						expect( indentButton.icon ).to.equal( outdentIcon );
+
+						return newEditor.destroy();
+					} )
+					.then( () => {
+						element.remove();
+					} );
+			} );
+
+			it( 'should display the right icon for outdent', () => {
+				const element = document.createElement( 'div' );
+				document.body.appendChild( element );
+
+				return ClassicTestEditor
+					.create( element, {
+						plugins: [ IndentUI, IndentEditing ],
+						language: 'ar'
+					} )
+					.then( newEditor => {
+						const outdentButton = newEditor.ui.componentFactory.create( 'outdent' );
+
+						expect( outdentButton.icon ).to.equal( indentIcon );
+
+						return newEditor.destroy();
+					} )
+					.then( () => {
+						element.remove();
+					} );
+			} );
+		} );
 	} );
 
 	it( 'should execute indent command on button execute', () => {