KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chore: UI fixes and enhancements (#796)

Browse source 
Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas 2020-05-02 09:47:36 +05:30 committed by GitHub
parent 8906fd808d
commit a951fb20cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 335 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View file

@ -49,10 +49,10 @@ $global-font-size: 10px;
$global-width: 100%; $global-width: 100%;
$global-lineheight: 1.5; $global-lineheight: 1.5;
$foundation-palette: (primary: $color-woot, $foundation-palette: (primary: $color-woot,
secondary: #777, secondary: #35c5ff,
success: #13ce66, success: #44ce4b,
warning: #ffc82c, warning: #ffc532,
alert: #ff4949); alert: #ff382d);
$light-gray: #c0ccda; $light-gray: #c0ccda;
$medium-gray: #8492a6; $medium-gray: #8492a6;
$dark-gray: $color-gray; $dark-gray: $color-gray;
@ -127,7 +127,7 @@ $header-styles: (small: ("h1": ("font-size": 24),
$header-text-rendering: optimizeLegibility; $header-text-rendering: optimizeLegibility;
$small-font-size: 80%; $small-font-size: 80%;
$header-small-font-color: $medium-gray; $header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6; $paragraph-lineheight: 1.45;
$paragraph-margin-bottom: 1rem; $paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility; $paragraph-text-rendering: optimizeLegibility;
$code-color: $black; $code-color: $black;

2
app/javascript/dashboard/assets/scss/_helper-classes.scss
View file

@ -29,7 +29,7 @@
background: $color-white; background: $color-white;
border-radius: $space-large; border-radius: $space-large;
left: 0; left: 0;
margin: $space-slab 0 auto; margin: $space-slab auto;
padding: $space-normal; padding: $space-normal;
top: 0; top: 0;

12
app/javascript/dashboard/assets/scss/_variables.scss
View file

@ -46,7 +46,8 @@ $color-gray: #6e6f73;
$color-light-gray: #999a9b; $color-light-gray: #999a9b;
$color-border: #e0e6ed; $color-border: #e0e6ed;
$color-border-light: #f0f4f5; $color-border-light: #f0f4f5;
$color-background: #eff2f7; $color-background: #f4f6fb;
$color-border-dark: #cad0d4;
$color-background-light: #f9fafc; $color-background-light: #f9fafc;
$color-white: #fff; $color-white: #fff;
$color-body: #3c4858; $color-body: #3c4858;
@ -54,11 +55,10 @@ $color-heading: #1f2d3d;
$color-extra-light-blue: #f5f7f9; $color-extra-light-blue: #f5f7f9;
$primary-color: $color-woot; $primary-color: $color-woot;
$secondary-color: #ff5216; $secondary-color: #35c5ff;
$success-color: #13ce66; $success-color: #44ce4b;
$warning-color: #ffc82c; $warning-color: #ffc532;
$alert-color: #ff4949; $alert-color: #ff382d;
// Color-palettes // Color-palettes
$color-primary-light: #c7e3ff; $color-primary-light: #c7e3ff;

9
app/javascript/dashboard/assets/scss/views/settings/inbox.scss
View file

@ -5,6 +5,7 @@
@include padding($space-normal $space-two $zero); @include padding($space-normal $space-two $zero);
} }
} }
// Conversation header - Light BG // Conversation header - Light BG
.settings-header { .settings-header {
@include padding($space-small $space-normal); @include padding($space-small $space-normal);
@ -14,6 +15,7 @@
@include border-normal-bottom; @include border-normal-bottom;
height: $header-height; height: $header-height;
min-height: $header-height; min-height: $header-height;
// Resolve Button // Resolve Button
.button { .button {
@include margin(0); @include margin(0);
@ -83,7 +85,7 @@
background: $color-woot; background: $color-woot;
} }
& + .item { &+.item {
&::before { &::before {
background: $color-woot; background: $color-woot;
} }
@ -112,7 +114,7 @@
background: $color-border; background: $color-border;
border-radius: 20px; border-radius: 20px;
color: $color-white; color: $color-white;
font-size: $font-size-small; font-size: $font-size-micro;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
height: $space-normal; height: $space-normal;
left: $space-normal; left: $space-normal;
@ -161,6 +163,7 @@
&:hover { &:hover {
@include background-gray; @include background-gray;
.arrow { .arrow {
opacity: 1; opacity: 1;
transform: translateX($space-small); transform: translateX($space-small);
@ -228,7 +231,7 @@
@include padding($space-medium); @include padding($space-medium);
} }
> a > img { >a>img {
width: $space-larger * 5; width: $space-larger * 5;
} }
} }

4
app/javascript/dashboard/assets/scss/views/settings/integrations.scss
View file

@ -1,8 +1,8 @@
.integrations-wrap { .integrations-wrap {
.integration { .integration {
background: $color-white; background: $color-white;
border: 2px solid $color-border; border: 1px solid $color-border;
border-radius: $space-slab; border-radius: $space-smaller;
padding: $space-normal; padding: $space-normal;
.integration--image { .integration--image {

3
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View file

@ -45,6 +45,7 @@
.user--name { .user--name {
@include margin(0); @include margin(0);
font-size: $font-size-medium; font-size: $font-size-medium;
line-height: 1.3;
text-transform: capitalize; text-transform: capitalize;
} }
@ -65,6 +66,8 @@
} }
.button.resolve--button { .button.resolve--button {
width: 13.2rem;
>.icon { >.icon {
font-size: $font-size-default; font-size: $font-size-default;
padding-right: $space-small; padding-right: $space-small;

4
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View file

@ -2,11 +2,13 @@
@include flex; @include flex;
@include flex-shrink; @include flex-shrink;
@include padding($space-normal $zero $zero $space-normal); @include padding($space-normal $zero $zero $space-normal);
border-left: 4px solid transparent;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&.active { &.active {
background: $color-background; background: $color-background;
border-left-color: $color-woot;
} }
.conversation--details { .conversation--details {
@ -64,7 +66,7 @@
background: darken($success-color, 3%); background: darken($success-color, 3%);
color: $color-white; color: $color-white;
display: none; display: none;
font-size: $font-size-mini; font-size: $font-size-micro;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
height: $unread-size; height: $unread-size;
line-height: $unread-size; line-height: $unread-size;

304
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View file

@ -1,10 +1,11 @@
@mixin bubble-with-tyes { @mixin bubble-with-types {
@include padding($space-smaller $space-one); @include padding($space-one $space-normal);
@include margin($zero); @include margin($zero);
background: $color-primary-light; background: $color-woot;
border-radius: $space-small; border-radius: $space-one;
color: $color-heading; color: $color-white;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-normal;
position: relative; position: relative;
.icon { .icon {
@ -15,6 +16,17 @@
.message-text__wrap { .message-text__wrap {
position: relative; position: relative;
.time {
color: $color-primary-light;
display: block;
font-size: $font-size-micro;
line-height: 1.8;
}
.link {
color: $color-white;
}
} }
.message-text { .message-text {
@ -51,8 +63,7 @@
} }
&::before { &::before {
$color-black: #000; background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
background-image: linear-gradient(-180deg, transparent 3%, $color-black 70%);
bottom: 0; bottom: 0;
content: ''; content: '';
height: 20%; height: 20%;
@ -94,6 +105,7 @@
.load-more-conversations { .load-more-conversations {
font-size: $font-size-small; font-size: $font-size-small;
margin: 0;
padding: $space-normal; padding: $space-normal;
width: 100%; width: 100%;
} }
@ -122,10 +134,10 @@
.status--filter { .status--filter {
@include padding($zero null $zero $space-normal); @include padding($zero null $zero $space-normal);
@include border-light;
@include round-corner; @include round-corner;
@include margin($space-smaller $space-slab $zero $zero); @include margin($space-smaller $space-slab $zero $zero);
background-color: $color-background; background-color: $color-background-light;
border: 1px solid $color-border;
float: right; float: right;
font-size: $font-size-mini; font-size: $font-size-mini;
height: $space-medium; height: $space-medium;
@ -192,168 +204,192 @@
height: 100%; height: 100%;
margin-bottom: $space-small; margin-bottom: $space-small;
overflow-y: auto; overflow-y: auto;
}
>li { .conversation-panel>li {
@include flex; @include flex;
@include flex-shrink; @include flex-shrink;
@include margin($zero $zero $space-smaller); @include margin($zero $zero $space-micro);
&:first-child { &:first-child {
margin-top: auto; margin-top: auto;
}
&:last-child {
margin-bottom: $space-small;
}
&.unread--toast {
span {
@include elegant-card;
@include round-corner;
background: $color-woot;
color: $color-white;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
margin: $space-one auto;
padding: $space-smaller $space-two;
} }
}
&:last-child { .bubble {
margin-bottom: $space-small; @include bubble-with-types;
max-width: 50rem;
text-align: left;
word-wrap: break-word;
.aplayer {
box-shadow: none;
font-family: inherit;
} }
}
&.unread--toast { &.left {
span {
@include elegant-card; .bubble {
@include round-corner; @include border-normal;
background: $color-woot; background: $white;
color: $color-white; border-bottom-left-radius: $space-smaller;
font-size: $font-size-mini; border-top-left-radius: $space-smaller;
font-weight: $font-weight-medium; color: $color-body;
margin: $space-one auto; margin-right: auto;
padding: $space-smaller $space-two;
.time {
color: $color-light-gray;
} }
.image .time {
color: $color-white;
}
.link {
color: $color-primary-dark;
}
.file {
.text-block-title {
color: $color-body;
}
.icon-wrap {
color: $color-woot;
}
.download {
color: $color-primary-dark;
}
}
}
+.right {
margin-top: $space-one;
.bubble {
border-top-right-radius: $space-one;
}
}
}
&.right {
@include flex-align(right, null);
.wrap {
margin-right: $space-normal;
text-align: right;
} }
.bubble { .bubble {
@include bubble-with-tyes; border-bottom-right-radius: $space-smaller;
max-width: 50rem; border-top-right-radius: $space-smaller;
text-align: left; margin-left: auto;
word-wrap: break-word;
.aplayer { &.is-private {
box-shadow: none; background: lighten($warning-color, 32%);
font-family: inherit; border: 1px solid $color-border;
}
}
&.left {
.bubble {
background: $white;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
color: $color-heading; color: $color-heading;
margin-right: auto; padding-right: $space-large;
} position: relative;
+.right { &::before {
margin-top: $space-one; bottom: 0;
color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
}
.bubble { .time {
border-top-right-radius: $space-small; color: $color-light-gray;
} }
} }
} }
&.right { +.left {
@include flex-align(right, null); margin-top: $space-one;
.wrap {
margin-right: $space-normal;
text-align: right;
}
.bubble { .bubble {
border-bottom-right-radius: 0; border-top-left-radius: $space-one;
border-top-right-radius: 0;
margin-left: auto;
&.is-private {
background: lighten($warning-color, 32%);
color: $color-heading;
padding-right: $space-large;
position: relative;
&::before {
bottom: 0;
color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
}
}
}
+.left {
margin-top: $space-one;
.bubble {
border-top-left-radius: $space-small;
}
} }
} }
}
.wrap { .wrap {
@include margin($zero $space-normal); @include margin($zero $space-normal);
max-width: 69%; max-width: 69%;
.sender--name { .sender--name {
font-size: $font-size-mini; font-size: $font-size-mini;
margin-bottom: $space-smaller; margin-bottom: $space-smaller;
}
} }
}
.sender--thumbnail { .sender--thumbnail {
@include round-corner(); @include round-corner();
height: $space-slab; height: $space-slab;
margin-right: $space-one; margin-right: $space-one;
margin-top: $space-micro; margin-top: $space-micro;
width: $space-slab; width: $space-slab;
} }
.activity-wrap { .activity-wrap {
@include flex; @include flex;
@include margin($space-small auto); @include margin($space-small auto);
@include padding($space-smaller $space-normal); @include padding($space-small $space-normal);
@include flex-align($x: center, $y: null); @include flex-align($x: center, $y: null);
background: lighten($warning-color, 32%); background: lighten($warning-color, 32%);
border: 1px solid lighten($warning-color, 26%); border: 1px solid lighten($warning-color, 22%);
border-radius: $space-smaller; border-radius: $space-smaller;
font-size: $font-size-small; font-size: $font-size-small;
p { p {
color: $color-heading; color: $color-heading;
margin-bottom: $zero; margin-bottom: $zero;
.ion-person { .ion-person {
color: $color-body; color: $color-body;
font-size: $font-size-default; font-size: $font-size-default;
margin-right: $space-small; margin-right: $space-small;
position: relative; position: relative;
top: $space-micro; top: $space-micro;
}
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
} }
.time { .message-text__wrap {
color: $medium-gray; position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
} }
} }
.time { .time {
bottom: -$space-micro; color: $medium-gray;
color: $color-gray;
float: right;
font-size: $font-size-micro; font-size: $font-size-micro;
font-style: italic;
margin-left: $space-slab; margin-left: $space-slab;
right: -$space-micro;
text-align: right;
} }
} }
} }

10
app/javascript/dashboard/assets/scss/widgets/_login.scss
View file

@ -42,22 +42,26 @@
font-size: $font-size-default; font-size: $font-size-default;
input { input {
padding: $space-slab;
height: $space-larger;
font-size: $font-size-default; font-size: $font-size-default;
height: $space-larger;
padding: $space-slab;
} }
.error { .error {
font-size: $font-size-small; font-size: $font-size-small;
} }
} }
.button {
height: $space-larger;
}
} }
.sigin__footer { .sigin__footer {
font-size: $font-size-default; font-size: $font-size-default;
padding: $space-medium; padding: $space-medium;
> a { >a {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
} }

2
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View file

@ -48,7 +48,7 @@
margin-bottom: $space-micro; margin-bottom: $space-micro;
margin-top: $space-micro; margin-top: $space-micro;
>.inbox-icon { .inbox-icon {
display: inline-block; display: inline-block;
margin-right: $space-micro; margin-right: $space-micro;
min-width: $space-normal; min-width: $space-normal;

37
app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
View file

@ -1,33 +1,32 @@
.ui-snackbar-container { .ui-snackbar-container {
position: absolute; left: 0;
margin: 0 auto;
max-width: 40rem;
overflow: hidden; overflow: hidden;
z-index: 9999; position: absolute;
top: $space-normal; right: 0;
left: $space-normal;
width: 100%;
text-align: center; text-align: center;
top: $space-normal;
z-index: 9999;
} }
.ui-snackbar { .ui-snackbar {
text-align: left; @include padding($space-slab $space-medium);
@include shadow;
background-color: $woot-snackbar-bg;
border-radius: $space-smaller;
display: inline-block; display: inline-block;
min-width: 24rem; margin-bottom: $space-small;
max-width: 40rem; max-width: 40rem;
min-height: 3rem; min-height: 3rem;
background-color: $woot-snackbar-bg; min-width: 24rem;
@include padding($space-slab $space-medium); text-align: left;
@include border-top-radius($space-micro);
@include border-right-radius($space-micro);
@include border-bottom-radius($space-micro);
@include border-left-radius($space-micro);
margin-bottom: $space-small;
// box-shadow: 0 1px 3px alpha(black, 0.12), 0 1px 2px alpha(black, 0.24);
} }
.ui-snackbar-text { .ui-snackbar-text {
font-size: $font-size-small;
color: $color-white; color: $color-white;
font-size: $font-size-small;
font-weight: $font-weight-medium;
} }
.ui-snackbar-action { .ui-snackbar-action {
@ -35,12 +34,12 @@
padding-left: 3rem; padding-left: 3rem;
button { button {
@include margin(0);
@include padding(0);
background: none; background: none;
border: 0; border: 0;
color: $woot-snackbar-button; color: $woot-snackbar-button;
font-size: $font-size-small; font-size: $font-size-small;
text-transform: uppercase; text-transform: uppercase;
@include margin(0);
@include padding(0);
} }
} }

16
app/javascript/dashboard/components/SnackbarContainer.vue
View file

@ -1,6 +1,10 @@
<template> <template>
<transition-group name="toast-fade" tag="div" class="ui-snackbar-container"> <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
<woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage" /> <woot-snackbar
v-for="snackMessage in snackMessages"
:key="snackMessage"
:message="snackMessage"
/>
</transition-group> </transition-group>
</template> </template>
@ -9,8 +13,12 @@
import WootSnackbar from './Snackbar'; import WootSnackbar from './Snackbar';
export default { export default {
components: {
WootSnackbar,
},
props: { props: {
duration: { duration: {
type: Number,
default: 2500, default: 2500,
}, },
}, },
@ -22,16 +30,12 @@ export default {
}, },
mounted() { mounted() {
bus.$on('newToastMessage', (message) => { bus.$on('newToastMessage', message => {
this.snackMessages.push(message); this.snackMessages.push(message);
window.setTimeout(() => { window.setTimeout(() => {
this.snackMessages.splice(0, 1); this.snackMessages.splice(0, 1);
}, this.duration); }, this.duration);
}); });
}, },
components: {
WootSnackbar,
},
}; };
</script> </script>

11
app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
View file

@ -44,12 +44,12 @@ export default {
.file { .file {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: $space-normal; padding: $space-smaller 0;
cursor: pointer; cursor: pointer;
.icon-wrap { .icon-wrap {
font-size: $font-size-giga; font-size: $font-size-giga;
color: $color-woot; color: $color-white;
line-height: 1; line-height: 1;
margin-left: $space-smaller; margin-left: $space-smaller;
margin-right: $space-slab; margin-right: $space-slab;
@ -57,15 +57,22 @@ export default {
.text-block-title { .text-block-title {
margin: 0; margin: 0;
color: $color-white;
font-weight: $font-weight-bold;
} }
.button { .button {
padding: 0; padding: 0;
margin: 0; margin: 0;
color: $color-primary-light;
} }
.meta { .meta {
padding-right: $space-two; padding-right: $space-two;
} }
.time {
min-width: $space-larger;
}
} }
</style> </style>

2
app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<span class="message-text__wrap"> <span class="message-text__wrap">
<span class="time">{{ readableTime }}</span>
<span v-html="message"></span> <span v-html="message"></span>
<span class="time">{{ readableTime }}</span>
</span> </span>
</template> </template>

2
app/javascript/dashboard/i18n/locale/en/login.json
View file

@ -16,6 +16,6 @@
}, },
"FORGOT_PASSWORD": "Forgot your password?", "FORGOT_PASSWORD": "Forgot your password?",
"CREATE_NEW_ACCOUNT": "Create new account", "CREATE_NEW_ACCOUNT": "Create new account",
"SUBMIT": "Sign In" "SUBMIT": "Login"
} }
} }

2
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View file

@ -185,7 +185,7 @@ export default {
.close-button { .close-button {
position: absolute; position: absolute;
right: $space-slab; right: $space-normal;
top: $space-slab; top: $space-slab;
font-size: $font-size-default; font-size: $font-size-default;
color: $color-heading; color: $color-heading;

2
app/javascript/shared/helpers/MessageFormatter.js
View file

@ -16,7 +16,7 @@ class MessageFormatter {
return this.message.replace( return this.message.replace(
urlRegex, urlRegex,
url => url =>
`<a rel="noreferrer noopener nofollow" href="${url}" target="_blank">${url}</a>` `<a rel="noreferrer noopener nofollow" href="${url}" class="link" target="_blank">${url}</a>`
); );
} }

2
app/javascript/shared/helpers/specs/MessageFormatter.spec.js
View file

@ -6,7 +6,7 @@ describe('#MessageFormatter', () => {
const message = const message =
'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com'; 'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com';
expect(new MessageFormatter(message).formattedMessage).toEqual( expect(new MessageFormatter(message).formattedMessage).toEqual(
'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" target="_blank">https://www.chatwoot.com</a>' 'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" class="link" target="_blank">https://www.chatwoot.com</a>'
); );
}); });
}); });

7
app/javascript/widget/assets/scss/_forms.scss
View file

@ -22,7 +22,10 @@ $input-height: $space-two * 2;
outline: none; outline: none;
padding: $space-smaller; padding: $space-smaller;
position: relative; position: relative;
transition: background .2s, border .2s, box-shadow .2s, color .2s; transition: background .2s,
border .2s,
box-shadow .2s,
color .2s;
width: 100%; width: 100%;
&:focus { &:focus {
@ -37,7 +40,7 @@ $input-height: $space-two * 2;
&.small { &.small {
font-size: $font-size-small; font-size: $font-size-small;
height: $space-large; height: $space-large;
padding: $space-small $space-slab; padding: $space-small $space-one;
} }
&.default { &.default {

5
app/javascript/widget/assets/scss/_variables.scss
View file

@ -52,12 +52,13 @@ $color-light-gray: #999a9b;
$color-border: #e0e6ed; $color-border: #e0e6ed;
$color-border-transparent: rgba(224, 230, 237, 0.5); $color-border-transparent: rgba(224, 230, 237, 0.5);
$color-border-light: #f0f4f5; $color-border-light: #f0f4f5;
$color-background: #ecf3f9; $color-border-dark: #cad0d4;
$color-background: #f4f6fb;
$color-background-light: #fafafa; $color-background-light: #fafafa;
$color-white: #fff; $color-white: #fff;
$color-body: #3c4858; $color-body: #3c4858;
$color-heading: #1f2d3d; $color-heading: #1f2d3d;
$color-error: #ff4949; $color-error: #ff382d;
// Thumbnail // Thumbnail

43
app/javascript/widget/components/AgentMessage.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<div class="agent-bubble"> <div
class="agent-message-wrap"
:class="{ 'has-response': hasRecordedResponse }"
>
<div class="agent-message"> <div class="agent-message">
<div class="avatar-wrap"> <div class="avatar-wrap">
<thumbnail <thumbnail
@ -108,7 +111,7 @@ export default {
}, },
avatarUrl() { avatarUrl() {
// eslint-disable-next-line // eslint-disable-next-line
const BotImage = require('dashboard/assets/images/chatwoot_bot.png') const BotImage = require('dashboard/assets/images/chatwoot_bot.png');
if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) { if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
return BotImage; return BotImage;
} }
@ -146,17 +149,6 @@ export default {
@import '~widget/assets/scss/variables.scss'; @import '~widget/assets/scss/variables.scss';
.conversation-wrap { .conversation-wrap {
.agent-bubble {
margin-bottom: $space-micro;
& + .agent-bubble {
.agent-message {
.chat-bubble {
border-top-left-radius: $space-smaller;
}
}
}
}
.agent-message { .agent-message {
align-items: flex-end; align-items: flex-end;
display: flex; display: flex;
@ -165,10 +157,6 @@ export default {
margin: 0 0 $space-micro $space-small; margin: 0 0 $space-micro $space-small;
max-width: 88%; max-width: 88%;
& + .user-message {
margin-top: $space-one;
}
.avatar-wrap { .avatar-wrap {
height: $space-medium; height: $space-medium;
width: $space-medium; width: $space-medium;
@ -199,5 +187,26 @@ export default {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
.agent-message-wrap {
+ .agent-message-wrap {
margin-top: $space-micro;
.agent-message .chat-bubble {
border-top-left-radius: $space-smaller;
}
}
+ .user-message-wrap {
margin-top: $space-normal;
}
&.has-response + .user-message-wrap {
margin-top: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
}
}
}
} }
</style> </style>

5
app/javascript/widget/components/AgentMessageBubble.vue
View file

@ -124,6 +124,11 @@ export default {
background: $color-white; background: $color-white;
border-bottom-left-radius: $space-smaller; border-bottom-left-radius: $space-smaller;
color: $color-body; color: $color-body;
.link {
word-break: break-word;
color: $color-woot;
}
} }
} }
</style> </style>

2
app/javascript/widget/components/AvailableAgents.vue
View file

@ -64,7 +64,7 @@ export default {
font-size: $font-size-default; font-size: $font-size-default;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
color: $color-white; color: $color-white;
padding: $space-one $space-normal $space-one $space-small; padding: $space-small $space-normal $space-small $space-small;
line-height: 1.4; line-height: 1.4;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

2
app/javascript/widget/components/ConversationWrap.vue
View file

@ -102,7 +102,7 @@ export default {
.conversation-wrap { .conversation-wrap {
flex: 1; flex: 1;
padding: $space-large $space-small $zero $space-small; padding: $space-large $space-small $space-small $space-small;
} }
.message--loader { .message--loader {

9
app/javascript/widget/components/FileBubble.vue
View file

@ -59,11 +59,11 @@ export default {
.file { .file {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: $space-one $space-slab; padding: $space-slab;
cursor: pointer; cursor: pointer;
.icon-wrap { .icon-wrap {
font-size: $font-size-bigger; font-size: $font-size-mega;
color: $color-woot; color: $color-woot;
line-height: 1; line-height: 1;
margin-left: $space-smaller; margin-left: $space-smaller;
@ -72,11 +72,14 @@ export default {
.title { .title {
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
font-size: $font-size-small; font-size: $font-size-default;
margin: 0; margin: 0;
} }
.download { .download {
color: $color-woot;
font-weight: $font-weight-medium;
font-size: $font-size-mini;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: $font-size-small; font-size: $font-size-small;

5
app/javascript/widget/components/ImageBubble.vue
View file

@ -29,11 +29,10 @@ export default {
max-width: 100%; max-width: 100%;
&::before { &::before {
$color-black: #000;
background-image: linear-gradient( background-image: linear-gradient(
-180deg, -180deg,
transparent 3%, transparent 3%,
$color-black 70% $color-heading 130%
); );
bottom: 0; bottom: 0;
content: ''; content: '';
@ -55,7 +54,7 @@ export default {
bottom: $space-smaller; bottom: $space-smaller;
color: $color-white; color: $color-white;
position: absolute; position: absolute;
right: $space-small; right: $space-slab;
white-space: nowrap; white-space: nowrap;
} }
} }

69
app/javascript/widget/components/UserMessage.vue
View file

@ -1,24 +1,26 @@
<template> <template>
<div class="user-message"> <div class="user-message-wrap">
<div class="message-wrap" :class="{ 'in-progress': isInProgress }"> <div class="user-message">
<UserMessageBubble <div class="message-wrap" :class="{ 'in-progress': isInProgress }">
v-if="showTextBubble" <UserMessageBubble
:message="message.content" v-if="showTextBubble"
:status="message.status" :message="message.content"
/> :status="message.status"
<div v-if="hasAttachments" class="chat-bubble has-attachment user"> />
<div v-for="attachment in message.attachments" :key="attachment.id"> <div v-if="hasAttachments" class="chat-bubble has-attachment user">
<file-bubble <div v-for="attachment in message.attachments" :key="attachment.id">
v-if="attachment.file_type !== 'image'" <file-bubble
:url="attachment.data_url" v-if="attachment.file_type !== 'image'"
:is-in-progress="isInProgress" :url="attachment.data_url"
/> :is-in-progress="isInProgress"
<image-bubble />
v-else <image-bubble
:url="attachment.data_url" v-else
:thumb="attachment.thumb_url" :url="attachment.data_url"
:readable-time="readableTime" :thumb="attachment.thumb_url"
/> :readable-time="readableTime"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -80,16 +82,6 @@ export default {
max-width: 85%; max-width: 85%;
text-align: right; text-align: right;
& + .user-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
}
}
& + .agent-message {
margin-top: $space-normal;
margin-bottom: $space-micro;
}
.message-wrap { .message-wrap {
margin-right: $space-small; margin-right: $space-small;
} }
@ -103,13 +95,28 @@ export default {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
.user.has-attachment { .user.has-attachment {
.icon-wrap { .icon-wrap {
color: $color-white; color: $color-white;
} }
.download { .download {
opacity: 0.8; color: $color-white;
}
}
.user-message-wrap {
+ .user-message-wrap {
margin-top: $space-micro;
.user-message .chat-bubble {
border-top-right-radius: $space-smaller;
}
}
+ .agent-message-wrap {
margin-top: $space-normal;
} }
} }
} }

2
app/javascript/widget/components/UserMessageBubble.vue
View file

@ -45,7 +45,7 @@ export default {
display: inline-block; display: inline-block;
font-size: $font-size-default; font-size: $font-size-default;
line-height: 1.5; line-height: 1.5;
padding: $space-small $space-normal; padding: $space-slab $space-normal $space-slab $space-normal;
text-align: left; text-align: left;
> a { > a {

2
app/javascript/widget/views/Home.vue
View file

@ -86,7 +86,7 @@ export default {
.header-wrap { .header-wrap {
flex-shrink: 0; flex-shrink: 0;
border-radius: $space-normal; border-radius: $space-normal $space-normal $space-small $space-small;
background: white; background: white;
z-index: 99; z-index: 99;
@include shadow-large; @include shadow-large;