[4.x] RTL support in the Control Panel (#9447)

Co-authored-by: Jason Varga <jason@pixelfear.com>
statamic · Mar 11, 2024 · 478a665 · 478a665
1 parent 4025625
commit 478a665
Show file tree

Hide file tree

Showing 207 changed files with 924 additions and 789 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "vue": "^2.7.14",
     "vue-clickaway": "~2.2.2",
     "vue-countable": "^1.0.9",
-    "vue-draggable-nested-tree": "^2.2.20",
+    "vue-draggable-nested-tree": "^2.3.0-beta.1",
     "vue-js-modal": "^2.0.1",
     "vue-select": "^3.10.1",
     "vue-toasted": "^1.1.27",

diff --git a/resources/css/components/array.css b/resources/css/components/array.css
@@ -13,7 +13,7 @@
     }
 }
 .array-table {
-    @apply rounded text-sm text-left w-full;
+    @apply rounded text-sm rtl:text-right ltr:text-left w-full;
     &:focus {
         @apply outline-none;
     }
@@ -25,28 +25,28 @@
     }
 
     th {
-        @apply border-r p-2 bg-gray-300;
+        @apply rtl:border-l ltr:border-r p-2 bg-gray-300;
     }
 
     td {
         @apply p-0 m-0;
     }
 
     tr:first-child th {
-        @apply rounded-tl;
+        @apply rtl:rounded-tr ltr:rounded-tl;
     }
 
     tr:first-child td,
     tr:first-child .input-text-minimal {
-        @apply rounded-tr;
+        @apply rtl:rounded-tl ltr:rounded-tr;
     }
 
     tr:last-child th {
-        @apply rounded-bl;
+        @apply rtl:rounded-br ltr:rounded-bl;
     }
     tr:last-child td:last-child,
     tr:last-child .input-minimal {
-        @apply rounded-br;
+        @apply rtl:rounded-bl ltr:rounded-br;
     }
 
     &:focus-within {

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
@@ -16,7 +16,7 @@
 		i {
 			position: relative;
 			top: -1px;
-			margin-right: 10px;
+			margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
 		}
 	}
 }
@@ -60,12 +60,12 @@
 
     .search {
         flex: 1;
-        margin-right: 15px;
-        margin-left: 0;
+        margin-right: 15px ; [dir="rtl"] & { margin-left: 15px ; margin-right: 0 ; }
+        margin-left: 0 ; [dir="rtl"] & { margin-right: 0 ; margin-left: 0 ; }
     }
 
     > .btn {
-        margin-right: 15px;
+        margin-right: 15px ; [dir="rtl"] & { margin-left: 15px ; margin-right: 0 ; }
     }
 }
 
@@ -148,9 +148,9 @@
 
             > * {
                 @apply absolute w-auto h-auto max-w-full max-h-full;
-                left: 50%;
+                left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
                 top: 50%;
-                transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%) ; [dir="rtl"] & { transform: translate(50%, -50%); }
                 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
             }
         }

diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
@@ -41,7 +41,9 @@
     &:before {
         content: '';
         @apply border rounded absolute bg-gray-200 shadow-sm;
-        top: -3px; left: 6px; right: 0; bottom: 3px; z-index: 1;
+        top: -3px; left: 6px ; right: 0 ; bottom: 3px; z-index: 1;
+
+        [dir="rtl"] & { left: 0 ; right: 6px ; }
     }
 }
 

diff --git a/resources/css/components/configure.css b/resources/css/components/configure.css
@@ -11,6 +11,6 @@
        > .publish-fields > .toggle-fieldtype {
            @apply flex justify-between items-center flex-wrap;
            .help-block, .help-block p { @apply mb-0; }
-           .field-inner { @apply pr-8; }
+           .field-inner { @apply rtl:pl-8 ltr:pr-8; }
        }
    }
diff --git a/resources/css/components/fieldtypes/array.css b/resources/css/components/fieldtypes/array.css
@@ -24,13 +24,13 @@
         tr:last-child {
             td, th { border-radius: 0; }
         }
-        tr > :first-child { border-left: 0; }
-        tr > :last-child { border-right: 0; }
+        tr > :first-child { border-left: 0 ; [dir="rtl"] & { border-left: 0 ; border-right: 0 ; } }
+        tr > :last-child { border-right: 0 ; [dir="rtl"] & { border-right: 0 ; border-left: 0 ; } }
     }
 
     /*  Dynamic Mode */
     .array-dynamic .btn {
-        @apply text-blue block w-full h-auto border-0 text-left shadow-none;
+        @apply text-blue block w-full h-auto border-0 rtl:text-right ltr:text-left shadow-none;
         background: #f4f4f4;
         padding: 10px 10px 11px;
         margin: 15px 0 0;

diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css
@@ -14,7 +14,7 @@
     }
 
     .asset-upload-control {
-      @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
+      @apply mt-2 @sm:rtl:mr-4 @sm:ltr:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
     }
 
     .upload-text-button {
@@ -26,7 +26,7 @@
 }
 
 .assets-fieldtype .drag-drop-text {
-    @apply ml-1 text-gray-700;
+    @apply rtl:mr-1 ltr:ml-1 text-gray-700;
 }
 
 .assets-fieldtype .asset-upload-control {

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
@@ -125,7 +125,7 @@
         border-top-color: black;
         position: absolute;
         top: 100%;
-        left: 50%;
+        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
         margin-left: -3px
     }
 
@@ -163,7 +163,7 @@
 }
 
 .bard-add-set-button {
-    @apply flex items-center justify-center absolute -left-4 top-[-6px] z-1;
+    @apply flex items-center justify-center absolute rtl:-right-4 ltr:-left-4 top-[-6px] z-1;
 }
 
 .bard-footer-toolbar {
@@ -192,8 +192,8 @@
     /*  transition: all .15s ease-in-out; */
 
     .dropdown-menu {
-        left: -5px;
-        right: auto;
+        left: -5px ; [dir="rtl"] & { left: auto ; right: -5px ; }
+        right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
     }
 }
 
@@ -240,16 +240,16 @@
     }
 
     .bard-set-selector {
-        @apply ml-6;
+        @apply rtl:mr-6 ltr:ml-6;
     }
 
     .bard-field-options {
         @apply fixed top-0 inset-x-0 bg-gray-700 p-4 w-full;
-        text-align: right;
+        @apply ltr:text-right rtl:text-left;
         z-index: 1; /*  to appear over the top of .bard-editor */
 
         .icon { font-size: 24px; }
-        a { margin-left: 16px; color: #fff; opacity: 1; }
+        a { margin-left: 16px ; [dir="rtl"] & { margin-right: 16px ; margin-left: 0 ; } color: #fff; opacity: 1; }
     }
 }
 
@@ -382,14 +382,14 @@
         padding: 0;
         margin: 0;
         margin-bottom: .85em;
-        padding-left: 2em;
+        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
     }
 
     .tableWrapper table ol,
     .tableWrapper table ul {
         padding: 0;
         margin: 0;
-        padding-left: 2em;
+        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
     }
 
     ol ol,
@@ -398,7 +398,7 @@
     ul ul {
         margin-top: 0;
         margin-bottom: 0;
-        padding-left: 2em;
+        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
     }
 
     ul ul {
@@ -418,7 +418,7 @@
     }
 
     blockquote {
-        @apply text-gray-800 border-l-4 border-blue px-4;
+        @apply text-gray-800 rtl:border-r-4 ltr:border-l-4 border-blue px-4;
         margin: 0 0 .85em;
     }
 
@@ -439,7 +439,7 @@
         table-layout: fixed;
 
         th {
-            @apply font-bold text-left bg-gray-200;
+            @apply font-bold rtl:text-right ltr:text-left bg-gray-200;
         }
 
         td, th {
@@ -490,7 +490,7 @@
 .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
     @apply text-gray-600;
     content: attr(data-placeholder);
-    float: left;
+    float: left ; [dir="rtl"] & { float: right ; }
     height: 0;
     pointer-events: none;
 }
@@ -538,6 +538,6 @@
     table .column-resize-handle {
         @apply absolute top-0 bottom-0 pointer-events-none bg-blue-200;
         width: 3px;
-        right: -2px;
+        right: -2px ; [dir="rtl"] & { right: auto ; left: -2px ; }
     }
 }
diff --git a/resources/css/components/fieldtypes/checkboxes.css b/resources/css/components/fieldtypes/checkboxes.css
@@ -8,6 +8,6 @@
     }
 
     .option + label {
-        @apply ml-2;
+        @apply rtl:mr-2 ltr:ml-2;
     }
 }
diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
@@ -1,6 +1,14 @@
+.code-fieldtype-container {
+    direction: ltr;
+}
+
 .code-fieldtype-toolbar {
     @apply bg-white shadow-none rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2;
     padding: 4px 8px;
+
+    [dir='rtl'] & {
+        direction: rtl;
+    }
 }
 
 .code-fieldtype-toolbar select {

diff --git a/resources/css/components/fieldtypes/datetime.css b/resources/css/components/fieldtypes/datetime.css
@@ -5,7 +5,7 @@
 .daterange {
 	outline: none;
 	width: 100%;
-	.icon-remove { right: 32px; }
+	.icon-remove { right: 32px ; [dir="rtl"] & { right: auto ; left: 32px ; } }
 
     .dr-calendar { max-width: 250px; }
 
@@ -24,7 +24,7 @@
 	color: #777;
     height: 18px;
     width: 18px;
-    margin-right: 8px;
+    margin-right: 8px ; [dir="rtl"] & { margin-left: 8px ; margin-right: 0 ; }
 	text-shadow: 0 1px 1px #FFF;
 }
 

diff --git a/resources/css/components/fieldtypes/environment.css b/resources/css/components/fieldtypes/environment.css
@@ -8,7 +8,7 @@
     .icon {
         display: inline-block;
         vertical-align: middle;
-        margin-right: 5px;
+        margin-right: 5px ; [dir="rtl"] & { margin-left: 5px ; margin-right: 0 ; }
         &:before {
             top: 1px;
         }

diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .grid-table {
-    @apply w-full text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
+    @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: auto;
@@ -17,8 +17,8 @@
         top: -1px;
         z-index: auto;
 
-        &:first-child { @apply rounded-tl pl-3; }
-        &:last-child { @apply rounded-tr; }
+        &:first-child { @apply rtl:rounded-tr ltr:rounded-tl rtl:pr-3 ltr:pl-3; }
+        &:last-child { @apply rtl:rounded-tl ltr:rounded-tr; }
         &.grid-drag-handle-header {
             @apply w-3;
         }
@@ -40,11 +40,11 @@
         @apply border-b px-2 py-3 align-top;
 
         &:first-child.grid-cell {
-            @apply pl-3;
+            @apply rtl:pr-3 ltr:pl-3;
         }
 
         &.drag-handle {
-            @apply border-r h-full p-2;
+            @apply rtl:border-l ltr:border-r h-full p-2;
             width: 1%;
             cursor: grab;
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
@@ -55,8 +55,8 @@
 
     tr:last-child td {
         @apply border-b-0;
-        &:first-child { @apply rounded-bl; }
-        &:last-child { @apply rounded-br; }
+        &:first-child { @apply rtl:rounded-br ltr:rounded-bl; }
+        &:last-child { @apply rtl:rounded-bl ltr:rounded-br; }
     }
 
     tr.draggable-source--is-dragging td {
@@ -65,7 +65,7 @@
 }
 
 .grid-table tbody .row-controls {
-    @apply pl-0 text-center;
+    @apply rtl:pr-0 ltr:pl-0 text-center;
     width: 1%;
     padding-top: 21px; /*  pseudo-center for text/select fields */
 }

diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
@@ -37,7 +37,7 @@
         @apply flex items-center;
 
         button {
-            @apply text-gray-700 inline-block focus:outline-none px-2 py-1 mr-1;
+            @apply text-gray-700 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
 
             &:hover {
                 @apply text-blue;
@@ -154,7 +154,7 @@
     }
 
     .markdown-preview {
-        @apply border-none p-2 text-left;
+        @apply border-none p-2 rtl:text-right ltr:text-left;
         p { line-height: 1.2; }
     }
 }