diff --git a/webapp/app/locales/en-us.json b/webapp/app/locales/en-us.json index 555f52793..e7e38d7f4 100644 --- a/webapp/app/locales/en-us.json +++ b/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" } diff --git a/webapp/app/locales/fr-ca.json b/webapp/app/locales/fr-ca.json index 6de6ddc63..a83d82255 100644 --- a/webapp/app/locales/fr-ca.json +++ b/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" } diff --git a/webapp/app/pods/components/conflicts-list/item/styles.scss b/webapp/app/pods/components/conflicts-list/item/styles.scss index c4b1f7fb9..f873aaa5c 100644 --- a/webapp/app/pods/components/conflicts-list/item/styles.scss +++ b/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'] { diff --git a/webapp/app/pods/components/conflicts-list/item/template.hbs b/webapp/app/pods/components/conflicts-list/item/template.hbs index 59c3430b1..5620604a2 100644 --- a/webapp/app/pods/components/conflicts-list/item/template.hbs +++ b/webapp/app/pods/components/conflicts-list/item/template.hbs @@ -25,7 +25,7 @@ {{else}} -
+
diff --git a/webapp/app/pods/components/dashboard-revisions/item/component.ts b/webapp/app/pods/components/dashboard-revisions/item/component.ts index 503aa0996..a3749ef1c 100644 --- a/webapp/app/pods/components/dashboard-revisions/item/component.ts +++ b/webapp/app/pods/components/dashboard-revisions/item/component.ts @@ -68,6 +68,10 @@ export default class DashboardRevisionsItem extends Component { 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; diff --git a/webapp/app/pods/components/dashboard-revisions/item/template.hbs b/webapp/app/pods/components/dashboard-revisions/item/template.hbs index e21020625..416288093 100644 --- a/webapp/app/pods/components/dashboard-revisions/item/template.hbs +++ b/webapp/app/pods/components/dashboard-revisions/item/template.hbs @@ -12,6 +12,11 @@ {{#if (get @permissions 'index_translations')}} {{this.languageName}} + {{#if this.rtl}} + + {{t 'components.dashboard_revisions.item.rtl_badge'}} + + {{/if}} {{this.correctedKeysPercentage}} % diff --git a/webapp/app/pods/components/documents-machine-translations-button/template.hbs b/webapp/app/pods/components/documents-machine-translations-button/template.hbs index 77c8936db..571bab534 100644 --- a/webapp/app/pods/components/documents-machine-translations-button/template.hbs +++ b/webapp/app/pods/components/documents-machine-translations-button/template.hbs @@ -1,4 +1,4 @@ - + {{inline-svg '/assets/language.svg' class='button-icon'}} {{t 'components.documents_machine_translations_button.link'}} \ No newline at end of file diff --git a/webapp/app/pods/components/related-translations-list/item/styles.scss b/webapp/app/pods/components/related-translations-list/item/styles.scss index ed0645ad9..61e50d2e6 100644 --- a/webapp/app/pods/components/related-translations-list/item/styles.scss +++ b/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; } diff --git a/webapp/app/pods/components/translations-list/item/styles.scss b/webapp/app/pods/components/translations-list/item/styles.scss index 16c6ff84f..4426a44b8 100644 --- a/webapp/app/pods/components/translations-list/item/styles.scss +++ b/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,7 +130,8 @@ } .item-key-prefix { - display: block; + display: inline-flex; + gap: 5px; font-size: 11px; color: #959595; flex-shrink: 0; @@ -97,17 +139,15 @@ &::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; } } diff --git a/webapp/app/pods/components/translations-list/item/template.hbs b/webapp/app/pods/components/translations-list/item/template.hbs index c7fab21b1..bac92459d 100644 --- a/webapp/app/pods/components/translations-list/item/template.hbs +++ b/webapp/app/pods/components/translations-list/item/template.hbs @@ -1,6 +1,6 @@ -
  • - - +
  • + + {{#if this.isInEditMode}} diff --git a/webapp/app/queries/project-dashboard.ts b/webapp/app/queries/project-dashboard.ts index cff1c3442..cc8beeef3 100644 --- a/webapp/app/queries/project-dashboard.ts +++ b/webapp/app/queries/project-dashboard.ts @@ -134,9 +134,11 @@ export default gql` translationsCount isMaster name + rtl language { id name + rtl } } diff --git a/webapp/app/styles/html-components/button.scss b/webapp/app/styles/html-components/button.scss index f4488b2d1..934c24cad 100644 --- a/webapp/app/styles/html-components/button.scss +++ b/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 {