Merge pull request #238 from ckeditor/t/ckeditor5/1151

Feature: Brought support for right–to–left (RTL) UI to various components' styles. See ckeditor/ckeditor5#1151.
ckeditor · Aug 12, 2019 · 70aa1a5 · 70aa1a5
2 parents cb92793 + 091c55e
commit 70aa1a5
Show file tree

Hide file tree

Showing 15 changed files with 311 additions and 51 deletions.
diff --git a/tests/manual/theme.html b/tests/manual/theme.html
@@ -1,5 +1,15 @@
 <head>
 	<style>
+		.test-settings {
+			background: #eee;
+			border: 2px solid #ccc;
+			padding: 1em;
+		}
+
+		.test-settings h2 {
+			margin-top: .3em;
+		}
+
 		.wrappable {
 			white-space: initial;
 			line-height: 3em;
@@ -26,6 +36,15 @@
 	</style>
 </head>
 
+<section class="test-settings">
+	<h2>Test settings</h2>
+	<label for="direcion-selector">Language direction:</label>
+	<select id="direcion-selector">
+		<option value="ltr">Left–to–right (LTR)</option>
+		<option value="rtl">Right-to-left (RTL)</option>
+	</select>
+</section>
+
 <h2>Icon</h2>
 
 	<h3>Icon: In–text</h3>

diff --git a/tests/manual/theme.js b/tests/manual/theme.js
@@ -575,3 +575,14 @@ function input( {
 
 	return labeledInput;
 }
+
+function setManualTestDirection( direction ) {
+	document.querySelector( '.manual-test-container' ).classList.add( 'ck' );
+	document.querySelector( '.manual-test-container' ).setAttribute( 'dir', direction );
+}
+
+document.querySelector( '#direcion-selector' ).addEventListener( 'change', evt => {
+	setManualTestDirection( evt.target.value );
+} );
+
+setManualTestDirection( 'ltr' );
diff --git a/theme/ckeditor5-font/fontcolor.css b/theme/ckeditor5-font/fontcolor.css
@@ -3,12 +3,22 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 .ck .ck-button.ck-color-table__remove-color {
 	border-bottom: 1px solid var(--ck-color-base-border);
 	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
 
 	& .ck.ck-icon {
-		margin-right: var(--ck-spacing-standard);
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-standard);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 }
 
diff --git a/theme/ckeditor5-image/textalternativeform.css b/theme/ckeditor5-image/textalternativeform.css
@@ -4,6 +4,7 @@
  */
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		outline: none;
 	}
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 
 	@mixin ck-media-phone {
@@ -33,14 +42,25 @@
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 		}
 	}

diff --git a/theme/ckeditor5-link/linkactions.css b/theme/ckeditor5-link/linkactions.css
@@ -5,6 +5,7 @@
 
 @import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@@ -56,8 +57,16 @@
 		outline: none;
 	}
 
-	& .ck-button:not(.ck-link-actions__preview) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& .ck-button:not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-button:not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 
 	@mixin ck-media-phone {
@@ -76,14 +85,25 @@
 		& .ck-button:not(.ck-link-actions__preview) {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 		}
 	}

diff --git a/theme/ckeditor5-link/linkform.css b/theme/ckeditor5-link/linkform.css
@@ -4,6 +4,7 @@
  */
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-link-form {
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		outline: none;
 	}
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 
 	@mixin ck-media-phone {
@@ -33,14 +42,25 @@
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 		}
 	}
@@ -71,8 +91,20 @@
 		border-top: 1px solid var(--ck-color-base-border);
 		width: 50%;
 
-		&:first-of-type {
-			border-right: 1px solid var(--ck-color-base-border);
+		@mixin ck-dir ltr {
+			margin-left: 0;
+
+			&:first-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: 0;
+
+			&:last-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
 		}
 	}
 

diff --git a/theme/ckeditor5-media-embed/mediaform.css b/theme/ckeditor5-media-embed/mediaform.css
@@ -4,6 +4,7 @@
  */
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-media-form {
 	padding: var(--ck-spacing-standard);
@@ -12,8 +13,16 @@
 		outline: none;
 	}
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 
 	@mixin ck-media-phone {
@@ -37,14 +46,25 @@
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 			border-radius: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 		}
 	}

diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css
@@ -8,6 +8,7 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_rounded.css";
 @import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-button,
 a.ck.ck-button {
@@ -71,8 +72,15 @@ a.ck.ck-button {
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 		& .ck-button__icon {
-			margin-left: calc(-1 * var(--ck-spacing-small));
-			margin-right: var(--ck-spacing-small);
+			@mixin ck-dir ltr {
+				margin-left: calc(-1 * var(--ck-spacing-small));
+				margin-right: var(--ck-spacing-small);
+			}
+
+			@mixin ck-dir rtl {
+				margin-right: calc(-1 * var(--ck-spacing-small));
+				margin-left: var(--ck-spacing-small);
+			}
 		}
 	}
 
@@ -107,6 +115,14 @@ a.ck.ck-button {
 		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
 		without labels (but with icons) have different sizes in Chrome */
 		vertical-align: middle;
+
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
 	}
 }