ソースを参照

Mirrored the order of TableProperties alignment buttons when the UI is RTL.

Aleksander Nowodzinski 5 年 前
コミット
09dc7b8dd7

+ 1 - 1
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -790,7 +790,7 @@ export default class TableCellPropertiesView extends View {
 		const right = t( 'Align cell text to the right' );
 		const justify = t( 'Justify cell text' );
 
-		// Returns object with a proper order of labeles.
+		// Returns object with a proper order of labels.
 		if ( locale.uiLanguageDirection === 'rtl' ) {
 			return { right, center, left, justify };
 		} else {

+ 11 - 5
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -681,13 +681,19 @@ export default class TablePropertiesView extends View {
 	 * @type {Object.<String,String>}
 	 */
 	get _alignmentLabels() {
+		const locale = this.locale;
 		const t = this.t;
 
-		return {
-			left: t( 'Align table to the left' ),
-			center: t( 'Center table' ),
-			right: t( 'Align table to the right' )
-		};
+		const left = t( 'Align table to the left' );
+		const center = t( 'Center table' );
+		const right = t( 'Align table to the right' );
+
+		// Returns object with a proper order of labels.
+		if ( locale.uiLanguageDirection === 'rtl' ) {
+			return { right, center, left };
+		} else {
+			return { left, center, right };
+		}
 	}
 }
 

+ 4 - 2
packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js

@@ -474,7 +474,7 @@ describe( 'table cell properties', () => {
 							expect( toolbar.ariaLabel ).to.equal( 'Horizontal text alignment toolbar' );
 						} );
 
-						it( 'should bring alignment buttons in the right order in LTR (default)', () => {
+						it( 'should bring alignment buttons in the right order (left-to-right UI)', () => {
 							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
 								'Align cell text to the left',
 								'Align cell text to the center',
@@ -487,7 +487,7 @@ describe( 'table cell properties', () => {
 							] );
 						} );
 
-						it( 'should bring alignment buttons in the right order in RTL', () => {
+						it( 'should bring alignment buttons in the right order (right-to-left UI)', () => {
 							// Creates its own local instances of locale, view and toolbar.
 							const locale = {
 								t: val => val,
@@ -507,6 +507,8 @@ describe( 'table cell properties', () => {
 							expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
 								true, false, false, false
 							] );
+
+							view.destroy();
 						} );
 
 						it( 'should change the #horizontalAlignment value', () => {

+ 24 - 1
packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js

@@ -439,7 +439,7 @@ describe( 'table properties', () => {
 							expect( toolbar.ariaLabel ).to.equal( 'Table alignment toolbar' );
 						} );
 
-						it( 'should bring alignment buttons', () => {
+						it( 'should bring alignment buttons in the right order (left-to-right UI)', () => {
 							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
 								'Align table to the left',
 								'Center table',
@@ -451,6 +451,29 @@ describe( 'table properties', () => {
 							] );
 						} );
 
+						it( 'should bring alignment buttons in the right order (right-to-left UI)', () => {
+							// Creates its own local instances of locale, view and toolbar.
+							const locale = {
+								t: val => val,
+								uiLanguageDirection: 'rtl',
+								contentLanguageDirection: 'rtl'
+							};
+							const view = new TablePropertiesView( locale, VIEW_OPTIONS );
+							const toolbar = view.alignmentToolbar;
+
+							expect( toolbar.items.map( ( { label } ) => label ) ).to.have.ordered.members( [
+								'Align table to the right',
+								'Center table',
+								'Align table to the left'
+							] );
+
+							expect( toolbar.items.map( ( { isOn } ) => isOn ) ).to.have.ordered.members( [
+								false, true, false
+							] );
+
+							view.destroy();
+						} );
+
 						it( 'should change the #horizontalAlignment value', () => {
 							toolbar.items.last.fire( 'execute' );
 							expect( view.alignment ).to.equal( 'right' );