LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases 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
29 changed files with 335 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -1,5 +1,8 @@
<template>
<div class="agent-bubble">
<div
class="agent-message-wrap"
:class="{ 'has-response': hasRecordedResponse }"
>
<div class="agent-message">
<div class="avatar-wrap">
<thumbnail
@@ -108,7 +111,7 @@ export default {
},
avatarUrl() {
// 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) {
return BotImage;
}
@@ -146,17 +149,6 @@ export default {
@import '~widget/assets/scss/variables.scss';
.conversation-wrap {
.agent-bubble {
margin-bottom: $space-micro;
& + .agent-bubble {
.agent-message {
.chat-bubble {
border-top-left-radius: $space-smaller;
}
}
}
}
.agent-message {
align-items: flex-end;
display: flex;
@@ -165,10 +157,6 @@ export default {
margin: 0 0 $space-micro $space-small;
max-width: 88%;
& + .user-message {
margin-top: $space-one;
}
.avatar-wrap {
height: $space-medium;
width: $space-medium;
@@ -199,5 +187,26 @@ export default {
padding: 0;
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>

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

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

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

@@ -64,7 +64,7 @@ export default {
font-size: $font-size-default;
font-weight: $font-weight-medium;
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;
display: inline-block;
vertical-align: middle;

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

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

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

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

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

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

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

@@ -1,24 +1,26 @@
<template>
<div class="user-message">
<div class="message-wrap" :class="{ 'in-progress': isInProgress }">
<UserMessageBubble
v-if="showTextBubble"
: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">
<file-bubble
v-if="attachment.file_type !== 'image'"
:url="attachment.data_url"
:is-in-progress="isInProgress"
/>
<image-bubble
v-else
:url="attachment.data_url"
:thumb="attachment.thumb_url"
:readable-time="readableTime"
/>
<div class="user-message-wrap">
<div class="user-message">
<div class="message-wrap" :class="{ 'in-progress': isInProgress }">
<UserMessageBubble
v-if="showTextBubble"
: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">
<file-bubble
v-if="attachment.file_type !== 'image'"
:url="attachment.data_url"
:is-in-progress="isInProgress"
/>
<image-bubble
v-else
:url="attachment.data_url"
:thumb="attachment.thumb_url"
:readable-time="readableTime"
/>
</div>
</div>
</div>
</div>
@@ -80,16 +82,6 @@ export default {
max-width: 85%;
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 {
margin-right: $space-small;
}
@@ -103,13 +95,28 @@ export default {
padding: 0;
overflow: hidden;
}
.user.has-attachment {
.icon-wrap {
color: $color-white;
}
.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;
font-size: $font-size-default;
line-height: 1.5;
padding: $space-small $space-normal;
padding: $space-slab $space-normal $space-slab $space-normal;
text-align: left;
> a {

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

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