feat: Add RTL Support to Widget (#11022)
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code. Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget https://github.com/chatwoot/chatwoot/issues/9791 Other PR: https://github.com/chatwoot/chatwoot/pull/11016
This commit is contained in:
Sivin Varghese
@@ -4,28 +4,18 @@
|
||||
|
||||
.conversation-wrap {
|
||||
.agent-message {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin: 0 0 $space-micro $space-small;
|
||||
max-width: 88%;
|
||||
@apply items-end flex flex-row justify-start mt-0 ltr:mr-0 rtl:mr-2 mb-0.5 ltr:ml-2 rtl:ml-0 max-w-[88%];
|
||||
|
||||
.avatar-wrap {
|
||||
flex-shrink: 0;
|
||||
height: $space-medium;
|
||||
width: $space-medium;
|
||||
@apply flex-shrink-0 h-6 w-6;
|
||||
|
||||
.user-thumbnail-box {
|
||||
margin-top: -$space-large;
|
||||
@apply -mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin-left: $space-small;
|
||||
max-width: 90%;
|
||||
@apply flex-grow flex-shrink-0 ltr:ml-2 rtl:mr-2 max-w-[90%];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,10 +32,7 @@
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
margin: $space-small 0;
|
||||
padding-left: $space-micro;
|
||||
@apply text-xs font-medium my-2 ltr:pl-0.5 rtl:pr-0.5;
|
||||
}
|
||||
|
||||
.has-attachment {
|
||||
@@ -56,146 +43,127 @@
|
||||
}
|
||||
|
||||
&.has-text {
|
||||
margin-top: $space-smaller;
|
||||
@apply mt-1;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-message-wrap {
|
||||
+ .agent-message-wrap {
|
||||
margin-top: $space-micro;
|
||||
@apply mt-0.5;
|
||||
|
||||
.agent-message .chat-bubble {
|
||||
border-top-left-radius: $space-smaller;
|
||||
@apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
+ .user-message-wrap {
|
||||
margin-top: $space-normal;
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
&.has-response + .user-message-wrap {
|
||||
margin-top: $space-micro;
|
||||
@apply mt-0.5;
|
||||
|
||||
.chat-bubble {
|
||||
border-top-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&.has-response + .agent-message-wrap {
|
||||
margin-top: $space-normal;
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin: 0 $space-smaller $space-micro auto;
|
||||
max-width: 85%;
|
||||
text-align: right;
|
||||
@apply flex items-end flex-row justify-end max-w-[85%] ltr:text-right rtl:text-left mt-0 ltr:ml-auto rtl:mr-auto ltr:mr-1 rtl:ml-1 mb-0.5;
|
||||
|
||||
.message-wrap {
|
||||
margin-right: $space-small;
|
||||
max-width: 100%;
|
||||
@apply max-w-full ltr:mr-2 rtl:ml-2;
|
||||
}
|
||||
|
||||
.in-progress,
|
||||
.is-failed {
|
||||
.in-progress {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.is-failed {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@apply flex items-end flex-row-reverse;
|
||||
|
||||
.chat-bubble.user {
|
||||
background: $color-error !important;
|
||||
// TODO: Remove the important
|
||||
@apply bg-n-ruby-9 dark:bg-n-ruby-9 #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user.has-attachment {
|
||||
.icon-wrap {
|
||||
color: $color-white;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.download {
|
||||
color: $color-white;
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message-wrap {
|
||||
+ .user-message-wrap {
|
||||
margin-top: $space-micro;
|
||||
@apply mt-0.5;
|
||||
|
||||
.user-message .chat-bubble {
|
||||
border-top-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
+ .agent-message-wrap {
|
||||
margin-top: $space-normal;
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: $space-normal;
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $space-small;
|
||||
width: 100%;
|
||||
@apply flex flex-col flex-nowrap mt-0 overflow-y-auto w-full pb-2;
|
||||
|
||||
.chat-bubble-wrap {
|
||||
margin-bottom: $space-smaller;
|
||||
@apply mb-1;
|
||||
|
||||
&:first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
border: 1px solid $color-border-dark;
|
||||
@apply border border-solid border-n-slate-5 dark:border-n-slate-11/50 text-n-black;
|
||||
}
|
||||
|
||||
+ .chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
border-top-left-radius: $space-smaller;
|
||||
@apply ltr:rounded-tl-[0.25rem] rtl:rounded-tr-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .chat-bubble {
|
||||
border-bottom-left-radius: $space-two;
|
||||
@apply ltr:rounded-bl-[1.25rem] rtl:rounded-br-[1.25rem];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-widget-right .unread-wrap {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
@apply ltr:text-right rtl:text-left overflow-hidden;
|
||||
|
||||
.chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
border-bottom-right-radius: $space-smaller;
|
||||
border-radius: $space-two;
|
||||
@apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem] rounded-[1.25rem];
|
||||
}
|
||||
|
||||
+ .chat-bubble-wrap {
|
||||
.chat-bubble {
|
||||
border-top-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-tr-[0.25rem] rtl:rounded-tl-[0.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .chat-bubble {
|
||||
border-bottom-right-radius: $space-two;
|
||||
@apply ltr:rounded-br-[1.25rem] rtl:rounded-bl-[1.25rem];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,15 +173,8 @@
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
@include light-shadow;
|
||||
border-radius: $space-two;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
font-size: $font-size-default;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
padding: $space-slab $space-normal;
|
||||
text-align: left;
|
||||
@apply shadow-[0_0.25rem_6px_rgba(50,50,93,0.08),0_1px_3px_rgba(0,0,0,0.05)] rounded-[1.25rem] inline-block text-sm leading-[1.5] max-w-full ltr:text-left rtl:text-right py-3 px-4 text-white;
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
:not([audio]) {
|
||||
@@ -221,7 +182,7 @@
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $color-primary;
|
||||
@apply text-n-brand;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -230,19 +191,18 @@
|
||||
}
|
||||
|
||||
&.user {
|
||||
border-bottom-right-radius: $space-smaller;
|
||||
@apply ltr:rounded-br-[0.25rem] rtl:rounded-bl-[0.25rem];
|
||||
|
||||
> a {
|
||||
color: $color-white;
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.agent {
|
||||
border-bottom-left-radius: $space-smaller;
|
||||
color: $color-body;
|
||||
@apply ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] text-n-slate-12;
|
||||
|
||||
.link {
|
||||
color: $color-woot;
|
||||
@apply text-n-brand;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user