Jelajahi Sumber

Added a RTL UI support in the automatic toolbar grouping feature.

Aleksander Nowodzinski 6 tahun lalu
induk
melakukan
25e6ce10a3
1 mengubah file dengan 16 tambahan dan 9 penghapusan
  1. 16 9
      packages/ckeditor5-ui/src/toolbar/toolbarview.js

+ 16 - 9
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -144,7 +144,7 @@ export default class ToolbarView extends View {
 		 * @protected
 		 * @member {Number}
 		 */
-		this._paddingRight = null;
+		this._horizontalPadding = null;
 
 		/**
 		 * TODO
@@ -409,18 +409,25 @@ export default class ToolbarView extends View {
 			return false;
 		}
 
-		if ( !this._paddingRight ) {
+		const uiLanguageDirection = this.locale.uiLanguageDirection;
+		const lastChildRect = new Rect( this.element.lastChild );
+		const toolbarRect = new Rect( this.element );
+
+		if ( !this._horizontalPadding ) {
+			const computedStyle = global.window.getComputedStyle( this.element );
+			const paddingProperty = uiLanguageDirection === 'ltr' ? 'paddingRight' : 'paddingLeft';
+
 			// parseInt() is essential because of quirky floating point numbers logic and DOM.
-			// If the padding turned out too big because of that, the groupped items dropdown would
+			// If the padding turned out too big because of that, the grouped items dropdown would
 			// always look (from the Rect perspective) like it overflows (while it's not).
-			this._paddingRight = Number.parseInt(
-				global.window.getComputedStyle( this.element ).paddingRight );
+			this._horizontalPadding = Number.parseInt( computedStyle[ paddingProperty ] );
 		}
 
-		const lastChildRect = new Rect( this.element.lastChild );
-		const toolbarRect = new Rect( this.element );
-
-		return lastChildRect.right > toolbarRect.right - this._paddingRight;
+		if ( uiLanguageDirection === 'ltr' ) {
+			return lastChildRect.right > toolbarRect.right - this._horizontalPadding;
+		} else {
+			return lastChildRect.left < toolbarRect.left + this._horizontalPadding;
+		}
 	}
 
 	/**