Przeglądaj źródła

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.
Piotrek Koszuliński 6 lat temu
rodzic
commit
cb6750a294

+ 19 - 0
packages/ckeditor5-theme-lark/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>

+ 11 - 0
packages/ckeditor5-theme-lark/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' );

+ 11 - 1
packages/ckeditor5-theme-lark/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);
+		}
 	}
 }
 

+ 25 - 5
packages/ckeditor5-theme-lark/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);
+				}
 			}
 		}
 	}

+ 25 - 5
packages/ckeditor5-theme-lark/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);
+				}
 			}
 		}
 	}

+ 39 - 7
packages/ckeditor5-theme-lark/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);
+			}
 		}
 	}
 

+ 25 - 5
packages/ckeditor5-theme-lark/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);
+				}
 			}
 		}
 	}

+ 18 - 2
packages/ckeditor5-theme-lark/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;
+		}
 	}
 }
 

+ 27 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -5,6 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_disabled.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
 of the component, floating–point numbers have been used which, for the default font size
@@ -15,12 +16,20 @@ of the component, floating–point numbers have been used which, for the default
 	/* 14px at 13px font-size */
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-spacing: 1px;
+	--ck-switch-button-translation: 1.3846153847em;
 }
 
 .ck.ck-button.ck-switchbutton {
 	& .ck-button__label {
-		/* Separate the label from the switch */
-		margin-right: calc(2*var(--ck-spacing-large));
+		@mixin ck-dir ltr {
+			/* Separate the label from the switch */
+			margin-right: calc(2*var(--ck-spacing-large));
+		}
+
+		@mixin ck-dir rtl {
+			/* Separate the label from the switch */
+			margin-left: calc(2*var(--ck-spacing-large));
+		}
 	}
 
 	&.ck-disabled .ck-button__toggle {
@@ -30,8 +39,15 @@ of the component, floating–point numbers have been used which, for the default
 	& .ck-button__toggle {
 		@mixin ck-rounded-corners;
 
-		/* Make sure the toggle is always to the right as far as possible. */
-		margin-left: auto;
+		@mixin ck-dir ltr {
+			/* Make sure the toggle is always to the right as far as possible. */
+			margin-left: auto;
+		}
+
+		@mixin ck-dir rtl {
+			/* Make sure the toggle is always to the left as far as possible. */
+			margin-right: auto;
+		}
 
 		/* Gently animate the background color of the toggle switch */
 		transition: background 400ms ease;
@@ -83,7 +99,13 @@ of the component, floating–point numbers have been used which, for the default
 			 * 		2*var(--ck-switch-button-toggle-spacing) )
 			 * 	)
 			 */
-			transform: translateX( 1.3846153847em );
+			@mixin ck-dir ltr {
+				transform: translateX( var( --ck-switch-button-translation ) );
+			}
+
+			@mixin ck-dir rtl {
+				transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+			}
 		}
 	}
 }

+ 30 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -6,6 +6,7 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 :root {
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
@@ -16,11 +17,25 @@
 	font-size: inherit;
 
 	& .ck-dropdown__arrow {
-		right: var(--ck-spacing-standard);
 		width: var(--ck-dropdown-arrow-size);
+	}
+
+	@mixin ck-dir ltr {
+		& .ck-dropdown__arrow {
+			right: var(--ck-spacing-standard);
 
-		/* A space to accommodate the triangle. */
-		margin-left: var(--ck-spacing-small);
+			/* A space to accommodate the triangle. */
+			margin-left: var(--ck-spacing-small);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-dropdown__arrow {
+			left: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-right: var(--ck-spacing-small);
+		}
 	}
 
 	&.ck-disabled .ck-dropdown__arrow {
@@ -28,9 +43,18 @@
 	}
 
 	& .ck-button.ck-dropdown__button {
-		&:not(.ck-button_with-text) {
-			/* Make sure dropdowns with just an icon have the right inner spacing */
-			padding-left: var(--ck-spacing-small);
+		@mixin ck-dir ltr {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-left: var(--ck-spacing-small);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-right: var(--ck-spacing-small);
+			}
 		}
 
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

+ 33 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -11,12 +11,21 @@
 }
 
 .ck.ck-splitbutton {
+	/*
+	 * Note: ck-rounder and ck-dir mixins don't go together (because they both use @nest).
+	 */
 	& > .ck-splitbutton__action {
-		/* Don't round the first button on the right side */
-		@mixin ck-rounded-corners {
+		@nest [dir="ltr"].ck-rounder-corners & {
+			/* Don't round the action button on the right side */
 			border-top-right-radius: unset;
 			border-bottom-right-radius: unset;
 		}
+
+		@nest [dir="rtl"].ck-rounded-corners & {
+			/* Don't round the action button on the left side */
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
 	}
 
 	& > .ck-splitbutton__arrow {
@@ -24,10 +33,18 @@
 		it must get some arbitrary min-width. */
 		min-width: unset;
 
-		/* Don't round the arrow button on the right side */
-		@mixin ck-rounded-corners {
-			border-top-left-radius: unset;
-			border-bottom-left-radius: unset;
+		@nest [dir="ltr"].ck-rounder-corners & {
+			/* Don't round the arrow button on the left side */
+			@mixin ck-rounded-corners {
+				border-top-left-radius: unset;
+				border-bottom-left-radius: unset;
+			}
+		}
+
+		@nest [dir="rtl"].ck-rounded-corners & {
+			/* Don't round the arrow button on the right side */
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
 		}
 
 		& svg {
@@ -45,8 +62,16 @@
 			background: var(--ck-color-split-button-hover-background);
 		}
 
-		& > .ck-splitbutton__arrow:not(.ck-disabled) {
-			border-left-color: var(--ck-color-split-button-hover-border);
+		@nest [dir="ltr"].ck-rounder-corners & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled) {
+				border-left-color: var(--ck-color-split-button-hover-border);
+			}
+		}
+
+		@nest [dir="rtl"].ck-rounded-corners & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled) {
+				border-right-color: var(--ck-color-split-button-hover-border);
+			}
 		}
 	}
 

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css

@@ -23,6 +23,14 @@
 	padding: 0 var(--ck-spacing-standard);
 	border: 1px solid transparent;
 
+	&[dir="ltr"] {
+		text-align: left;
+	}
+
+	&[dir="rtl"] {
+		text-align: right;
+	}
+
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
 	& > *:first-child {
 		margin-top: var(--ck-spacing-large);

+ 24 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -4,6 +4,7 @@
  */
 
 @import "../../../mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-toolbar {
 	@mixin ck-rounded-corners;
@@ -13,14 +14,24 @@
 	border: 1px solid var(--ck-color-toolbar-border);
 
 	& > * {
-		/* (#11) Separate toolbar items. */
-		margin-right: var(--ck-spacing-small);
-
 		/* Make sure items wrapped to the next line have v-spacing */
 		margin-top: var(--ck-spacing-small);
 		margin-bottom: var(--ck-spacing-small);
 	}
 
+	& > * {
+		/* (#11) Separate toolbar items. */
+		margin-right: var(--ck-spacing-small);
+	}
+
+	@mixin ck-dir rtl {
+		& > * {
+			/* (#11) Separate toolbar items. */
+			margin-left: var(--ck-spacing-small);
+			margin-right: 0;
+		}
+	}
+
 	&.ck-toolbar_vertical {
 		/* Items in a vertical toolbar span the entire width. */
 		padding: 0;
@@ -41,8 +52,16 @@
 		}
 	}
 
-	& > *:last-child {
-		margin-right: 0;
+	@mixin ck-dir ltr {
+		& > *:last-child {
+			margin-right: 0;
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > *:last-child {
+			margin-left: 0;
+		}
 	}
 
 	@nest .ck-toolbar-container & {

+ 10 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css

@@ -78,7 +78,15 @@
 
 	& button::-moz-focus-inner {
 		/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
-	    padding: 0;
-	    border: 0
+		padding: 0;
+		border: 0
 	}
 }
+
+/**
+ * Default UI rules for RTL languages.
+ */
+.ck[dir="rtl"],
+.ck[dir="rtl"] .ck {
+	text-align: right;
+}

+ 6 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -125,6 +125,12 @@
 	}
 }
 
+/* In a RTL environment, align the selection handler to the right side of the widget */
+.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handler .ck-widget__selection-handler {
+	left: auto;
+	right: calc(0px - var(--ck-widget-outline-thickness));
+}
+
 /* Style the widget when it's selected but the editable it belongs to lost focus. */
 .ck-editor__editable.ck-blurred .ck-widget {
 	&.ck-widget_selected,