Fix rtl UI

Author: simonprev

webapp/app/locales/en-us.json

@@ -202,6 +202,8 @@
       "reviewed": "reviewed",
       "activities_title": "Latest activities",
       "item": {
+        "rtl_badge": "RTL",
+        "rtl": "Right to left text",
         "correct_all_button": "Mark all strings as reviewed",
         "uncorrect_all_button": "Put all strings back in review"
       }

webapp/app/locales/fr-ca.json

@@ -218,6 +218,8 @@
       "reviewed": "revu",
       "activities_title": "Dernières activités",
       "item": {
+        "rtl_badge": "RTL",
+        "rtl": "Texte de droite à gauche",
         "correct_all_button": "Marquer toutes les chaînes comme vérifiées",
         "uncorrect_all_button": "Remettre toutes les chaînes à réviser"
       }

webapp/app/pods/components/conflicts-list/item/styles.scss

@@ -31,6 +31,30 @@
 .item-details {
   display: flex;
   flex-direction: column;
+
+  &[data-dir='rtl'] {
+    .item-details__column {
+      align-items: flex-end;
+    }
+    .item-details__column:first-of-type {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+
+    .item-key {
+      margin-right: 0;
+      margin-left: 15px;
+      flex-direction: row-reverse;
+    }
+
+    .item-key-prefix::before {
+      content: '';
+    }
+
+    .item-key-prefix::after {
+      content: '/';
+    }
+  }
 }
 
 .item-details__column {
@@ -154,21 +178,21 @@
 }
 
 .item-key-prefix {
-  display: block;
+  display: inline-flex;
   font-size: 11px;
   color: #959595;
+  gap: 6px;
   font-weight: 300;
 
   &::before {
     content: '/';
-    margin-right: -5px;
   }
 }
 
 .item-key {
   display: flex;
   align-items: center;
-  gap: 3px;
+  gap: 5px;
   margin-bottom: 12px;
   font-family: var(--font-monospace);
   word-break: break-all;
@@ -214,8 +238,8 @@
   justify-content: flex-end;
   position: absolute;
   gap: 10px;
-  top: 7px;
-  right: 7px;
+  top: 10px;
+  right: 10px;
   z-index: 3;
 
   &[data-dir='rtl'] {

webapp/app/pods/components/conflicts-list/item/template.hbs

@@ -25,7 +25,7 @@
           </div>
         </div>
       {{else}}
-        <div local-class='item-details'>
+        <div local-class='item-details' data-dir={{if this.revisionTextDirRtl 'rtl'}}>
           <div local-class='item-details__column'>
             <LinkTo @route='logged-in.project.translation' @models={{array @project.id @conflict.id}} local-class='key'>
               <strong local-class='item-key'>

webapp/app/pods/components/dashboard-revisions/item/component.ts

@@ -68,6 +68,10 @@ export default class DashboardRevisionsItem extends Component<Args> {
     return this.args.revision.name || this.args.revision.language.name;
   }
 
+  get rtl() {
+    return this.args.revision.rtl || this.args.revision.language.rtl;
+  }
+
   @action
   toggleShowActions() {
     this.showActions = !this.showActions;

webapp/app/pods/components/dashboard-revisions/item/template.hbs

@@ -12,6 +12,11 @@
       {{#if (get @permissions 'index_translations')}}
         <LinkTo @route='logged-in.project.revision.translations' @models={{array @project.id @revision.id}} local-class='language-name'>
           {{this.languageName}}
+          {{#if this.rtl}}
+            <AccBadge class='tooltip tooltip--top' title={{t 'components.dashboard_revisions.item.rtl'}}>
+              {{t 'components.dashboard_revisions.item.rtl_badge'}}
+            </AccBadge>
+          {{/if}}
           <span local-class='language-reviewedPercentage'>
             {{this.correctedKeysPercentage}}
             %

webapp/app/pods/components/documents-machine-translations-button/template.hbs

@@ -1,4 +1,4 @@
-<LinkTo @route='logged-in.project.files.new-machine-translations' @model={{@project.id}} local-class='button' class='button button--borderLess button--filled button--white'>
+<LinkTo @route='logged-in.project.files.new-machine-translations' @model={{@project.id}} local-class='button' class='button button--borderLess button--filled button--grey'>
   {{inline-svg '/assets/language.svg' class='button-icon'}}
   {{t 'components.documents_machine_translations_button.link'}}
 </LinkTo>

webapp/app/pods/components/related-translations-list/item/styles.scss

@@ -81,6 +81,7 @@
   right: 14px;
 
   &[data-dir='rtl'] {
+    flex-direction: row-reverse;
     right: auto;
     left: 14px;
   }

webapp/app/pods/components/translations-list/item/styles.scss

@@ -7,6 +7,37 @@
   border: 1px solid transparent;
   border-radius: var(--border-radius);
 
+  &[data-dir='rtl'] {
+    .item-header {
+      flex-direction: row-reverse;
+
+      .item-edit-wrapper {
+        flex-direction: row-reverse;
+      }
+
+      .item-meta {
+        flex-direction: row-reverse;
+        margin-right: 10px;
+      }
+
+      .item-updatedAt {
+        margin-left: 0;
+        margin-right: 10px;
+      }
+
+      .item-key {
+        flex-direction: row-reverse;
+      }
+
+      .item-key-prefix::before {
+        content: '';
+      }
+      .item-key-prefix::after {
+        content: '/';
+      }
+    }
+  }
+
   &:focus,
   &:hover {
     background: var(--background-light);
@@ -16,6 +47,12 @@
       opacity: 1;
     }
 
+    &[data-dir='rtl'] {
+      .item-edit {
+        transform: translateX(40px);
+      }
+    }
+
     .item-edit {
       transform: translateX(-40px);
       opacity: 1;
@@ -55,6 +92,10 @@
   }
 }
 
+.item-edit-wrapper {
+  display: flex;
+}
+
 .item-header {
   position: relative;
   display: flex;
@@ -89,25 +130,24 @@
 }
 
 .item-key-prefix {
-  display: block;
+  display: inline-flex;
+  gap: 5px;
   font-size: 11px;
   color: #959595;
   flex-shrink: 0;
   font-weight: 300;
 
   &::before {
     content: '/';
-    margin-right: -5px;
   }
 }
 
 .item-key {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 5px;
   transition: 0.2s ease-in-out;
   transition-property: color;
-  margin-right: 10px;
   color: var(--color-primary);
   line-height: 1.5;
   word-break: break-all;
@@ -197,6 +237,7 @@
   &[data-dir='rtl'] {
     right: auto;
     left: 14px;
+    flex-direction: row-reverse;
   }
 }
 

webapp/app/pods/components/translations-list/item/template.hbs

@@ -1,6 +1,6 @@
-<li local-class='translations-list-item {{if this.isInEditMode "item--editMode"}}'>
-  <span local-class='item-header'>
-    <span>
+<li local-class='translations-list-item {{if this.isInEditMode "item--editMode"}}' data-dir={{if this.revisionTextDirRtl 'rtl'}}>
+  <span local-class='item-header' data-dir={{if this.revisionTextDirRtl 'rtl'}}>
+    <span local-class='item-edit-wrapper'>
       <span local-class='item-edit'>
         <span role='button' {{on 'click' (fn this.toggleEdit)}}>
           {{#if this.isInEditMode}}

webapp/app/queries/project-dashboard.ts

@@ -134,9 +134,11 @@ export default gql`
           translationsCount
           isMaster
           name
+          rtl
           language {
             id
             name
+            rtl
           }
         }
 

webapp/app/styles/html-components/button.scss

@@ -236,7 +236,7 @@
 }
 
 .button--grey {
-  color: #8a8a8a;
+  color: #000;
   border-color: var(--background-light);
 
   &.button--loading svg.loading {