From 6d4b894f95d5ec510e9245a1afbb8a232a959c1e Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Fri, 24 Feb 2023 12:35:06 +0530 Subject: [PATCH] chore: Refactor chat list for RTL (#6524) * chore: Refactor chat list for RTL * chore: Modal * fix: Show more button margin * chore: Inbox name fix --- .../dashboard/assets/scss/_rtl.scss | 26 ++++++- .../scss/widgets/_conversation-card.scss | 70 +++++++++---------- .../scss/widgets/_conversation-view.scss | 2 +- .../components/widgets/InboxName.vue | 2 + .../widgets/conversation/ConversationCard.vue | 1 - .../conversationCardComponents/CardLabels.vue | 2 +- .../conversation/contact/ConversationForm.vue | 4 -- 7 files changed, 62 insertions(+), 45 deletions(-) diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss index 42c974f37..27c7d5a16 100644 --- a/app/javascript/dashboard/assets/scss/_rtl.scss +++ b/app/javascript/dashboard/assets/scss/_rtl.scss @@ -234,6 +234,7 @@ } .show-more--button { + margin: unset; transform: rotate(180deg); } } @@ -242,6 +243,14 @@ text-align: right; } + // Card label + .label-container { + .label { + margin-left: var(--space-smaller); + margin-right: 0; + } + } + // Secondary sidebar toggle button .toggle-sidebar { margin-left: 0; @@ -404,14 +413,27 @@ direction: initial; } + // Modal + .modal-container { + text-align: right; + + .modal-footer { + button { + margin-left: 0; + margin-right: var(--space-small); + } + } + } + // Other changes .account-selector--wrap { direction: initial; } - .inbox--name { - direction: initial; + .inbox--name .inbox--icon { + margin-left: var(--space-micro); + margin-right: 0; } .colorpicker--chrome { diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index 52a50afb6..858e86b28 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -13,18 +13,18 @@ @include flex; @include flex-shrink; border-bottom: 1px solid transparent; - border-left: $space-micro solid transparent; + border-left: var(--space-micro) solid transparent; border-top: 1px solid transparent; cursor: pointer; - padding: 0 0 0 $space-normal; + padding: 0 var(--space-normal); position: relative; &.active { animation: left-shift-animation 0.25s $swift-ease-out-function; - background: $color-background; - border-bottom-color: $color-border-light; - border-left-color: $color-woot; - border-top-color: $color-border-light; + background: var(--color-background); + border-bottom-color: var(--color-border-light); + border-left-color: var(--color-woot); + border-top-color: var(--color-border-light); .conversation--details { border-top-color: transparent; @@ -43,7 +43,7 @@ &:last-child { .conversation--details { - border-bottom-color: $color-border-light; + border-bottom-color: var(--color-border-light); } } @@ -51,33 +51,32 @@ @include border-light-bottom; @include border-light-top; border-bottom-color: transparent; - margin: 0 0 0 $space-one; - padding: $space-slab 0; + padding: var(--space-slab) 0; } .conversation--user { - font-size: $font-size-small; - margin-bottom: 0; + font-size: var(--font-size-small); + margin: 0 var(--space-one); text-transform: capitalize; .label { - left: $space-micro; - max-width: $space-jumbo; + left: var(--space-one); + max-width: var(--space-jumbo); overflow: hidden; position: relative; text-overflow: ellipsis; - top: $space-micro; + top: var(--space-one); white-space: nowrap; } } .conversation--message { - color: $color-body; - font-size: $font-size-small; - font-weight: $font-weight-normal; - height: $space-medium; - line-height: $space-medium; - margin: 0; + color: var(--color-body); + font-size: var(--font-size-small); + font-weight: var(--font-weight-normal); + height: var(--space-medium); + line-height: var(--space-medium); + margin: 0 var(--space-one); max-width: 96%; overflow: hidden; text-overflow: ellipsis; @@ -89,32 +88,31 @@ @include flex; flex-direction: column; position: absolute; - right: $space-normal; - top: $space-normal; + right: var(--space-normal); + top: var(--space-normal); .unread { - $unread-size: $space-normal; @include round-corner; @include light-shadow; background: darken($success-color, 3%); - color: $color-white; + color: var(--white); display: none; - font-size: $font-size-micro; - font-weight: $font-weight-black; - height: $unread-size; - line-height: $unread-size; + font-size: var(--font-size-micro); + font-weight: var(--font-weight-black); + height: var(--space-normal); + line-height: var(--space-normal); margin-left: auto; - margin-top: $space-smaller; - min-width: $unread-size; - padding: 0 $space-smaller; + margin-top: var(--space-smaller); + min-width: var(--space-normal); + padding: 0 var(--space-smaller); text-align: center; } .timestamp { color: $dark-gray; - font-size: $font-size-micro; - font-weight: $font-weight-normal; - line-height: $space-normal; + font-size: var(--font-size-micro); + font-weight: var(--font-weight-normal); + line-height: var(--space-normal); margin-left: auto; } } @@ -125,11 +123,11 @@ } .conversation--message { - font-weight: $font-weight-bold; + font-weight: var(--font-weight-bold); } .conversation--user { - font-weight: $font-weight-bold; + font-weight: var(--font-weight-bold); } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 8a8aab43a..41f3d2159 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -81,8 +81,8 @@ } .conversations-list { - overflow-y: auto; flex: 1 1; + overflow-y: auto; @include breakpoint(large up) { @include scroll-on-hover; diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue index cb0b9fb06..feb71803c 100644 --- a/app/javascript/dashboard/components/widgets/InboxName.vue +++ b/app/javascript/dashboard/components/widgets/InboxName.vue @@ -25,6 +25,7 @@ export default {