mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 12:08:01 +00:00
Feature: Update design for web widget (#408)
This commit is contained in:
Nithin David Thomas
committed by
Pranav Raj S
Pranav Raj S
parent
655c585358
commit
7cf19e0b52
@@ -16,22 +16,26 @@
|
||||
|
||||
.branding {
|
||||
align-items: center;
|
||||
color: $color-gray;
|
||||
color: $color-light-gray;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
filter: grayscale(1);
|
||||
font-size: $font-size-default;
|
||||
font-size: $font-size-small;
|
||||
justify-content: center;
|
||||
padding: $space-one;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: $space-slab 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: grayscale(0);
|
||||
opacity: 1;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: $space-small;
|
||||
max-width: $space-two;
|
||||
margin-right: $space-smaller;
|
||||
max-width: $space-slab;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,8 +12,14 @@ export default {
|
||||
ChatInputWrap,
|
||||
},
|
||||
props: {
|
||||
msg: String,
|
||||
onSendMessage: Function,
|
||||
msg: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
onSendMessage: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -24,11 +30,12 @@ export default {
|
||||
|
||||
.footer {
|
||||
background: $color-white;
|
||||
box-shadow: 0 -$space-micro 3px rgba(50, 50, 93, 0.04),
|
||||
0 -1px 2px rgba(0, 0, 0, 0.03);
|
||||
box-sizing: border-box;
|
||||
padding: $space-small;
|
||||
padding: $space-small $space-slab;
|
||||
width: 100%;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 20px 25px -10px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -10px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
.branding {
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<header class="header-expanded" :style="{ background: widgetColor }">
|
||||
<header class="header-expanded">
|
||||
<div>
|
||||
<!-- <img
|
||||
class="logo"
|
||||
src="http://www.hennigcompany.com/wp-content/uploads/2014/06/starbucks-logo.png"
|
||||
/> -->
|
||||
<h2 class="title">
|
||||
{{ introHeading }}
|
||||
</h2>
|
||||
@@ -39,21 +43,35 @@ export default {
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
.header-expanded {
|
||||
background: $color-woot;
|
||||
padding: $space-large;
|
||||
background: $color-white;
|
||||
padding: $space-larger $space-medium $space-large;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
color: $color-white;
|
||||
border-radius: 1.6rem;
|
||||
box-shadow: 0 10px 15px -16px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -8px rgba(0, 0, 0, 0.05) !important;
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $color-heading;
|
||||
font-size: $font-size-mega;
|
||||
font-weight: $font-weight-medium;
|
||||
margin-bottom: $space-two;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-bottom: $space-slab;
|
||||
margin-top: $space-large;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: $font-size-medium;
|
||||
line-height: 1.5;
|
||||
color: $color-body;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<textarea
|
||||
class="form-input user-message-input"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
/>
|
||||
<resizable-textarea>
|
||||
<textarea
|
||||
class="form-input user-message-input"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
/>
|
||||
</resizable-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResizableTextarea from 'widget/components/ResizableTextarea.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ResizableTextarea,
|
||||
},
|
||||
props: {
|
||||
placeholder: String,
|
||||
value: String,
|
||||
@@ -24,5 +31,6 @@ export default {
|
||||
border: 0;
|
||||
height: $space-large;
|
||||
resize: none;
|
||||
padding-top: $space-small;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,11 +4,13 @@
|
||||
<ChatSendButton
|
||||
:on-click="handleButtonClick"
|
||||
:disabled="!userInput.length"
|
||||
:color="widgetColor"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import ChatSendButton from 'widget/components/ChatSendButton.vue';
|
||||
import ChatInputArea from 'widget/components/ChatInputArea.vue';
|
||||
|
||||
@@ -42,6 +44,11 @@ export default {
|
||||
document.addEventListener('keypress', this.handleEnterKeyPress);
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
widgetColor: 'appConfig/getWidgetColor',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
handleButtonClick() {
|
||||
if (this.userInput && this.userInput.trim()) {
|
||||
|
||||
@@ -5,9 +5,11 @@
|
||||
class="send-button"
|
||||
@click="onClick"
|
||||
>
|
||||
<span v-if="!loading" class="icon-holder">
|
||||
<i class="ion-android-send" />
|
||||
</span>
|
||||
<span
|
||||
v-if="!loading"
|
||||
:style="`background-color: ${color}`"
|
||||
class="icon-holder"
|
||||
></span>
|
||||
<spinner v-else size="small" />
|
||||
</button>
|
||||
</template>
|
||||
@@ -32,6 +34,10 @@ export default {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#6e6f73',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -45,6 +51,7 @@ export default {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: $space-smaller;
|
||||
|
||||
.icon-holder {
|
||||
display: flex;
|
||||
@@ -53,6 +60,10 @@ export default {
|
||||
fill: $color-white;
|
||||
font-size: $font-size-big;
|
||||
font-weight: $font-weight-medium;
|
||||
width: $space-two;
|
||||
height: $space-two;
|
||||
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.34 7.32l-14-7a3 3 0 00-4.08 3.9l2.4 5.37c.11.262.11.558 0 .82l-2.4 5.37A3 3 0 003 20a3.14 3.14 0 001.35-.32l14-7a3 3 0 000-5.36h-.01zm-.89 3.57l-14 7a1 1 0 01-1.35-1.3l2.39-5.37a2 2 0 00.08-.22h6.89a1 1 0 000-2H4.57a2 2 0 00-.08-.22L2.1 3.41a1 1 0 011.35-1.3l14 7a1 1 0 010 1.78z' fill='%23999A9B' fill-rule='nonzero'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.34 7.32l-14-7a3 3 0 00-4.08 3.9l2.4 5.37c.11.262.11.558 0 .82l-2.4 5.37A3 3 0 003 20a3.14 3.14 0 001.35-.32l14-7a3 3 0 000-5.36h-.01zm-.89 3.57l-14 7a1 1 0 01-1.35-1.3l2.39-5.37a2 2 0 00.08-.22h6.89a1 1 0 000-2H4.57a2 2 0 00-.08-.22L2.1 3.41a1 1 0 011.35-1.3l14 7a1 1 0 010 1.78z' fill='%23999A9B' fill-rule='nonzero'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,12 +13,10 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<branding></branding>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Branding from 'widget/components/Branding.vue';
|
||||
import ChatMessage from 'widget/components/ChatMessage.vue';
|
||||
import DateSeparator from 'shared/components/DateSeparator.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
@@ -27,7 +25,6 @@ import { mapActions, mapGetters } from 'vuex';
|
||||
export default {
|
||||
name: 'ConversationWrap',
|
||||
components: {
|
||||
Branding,
|
||||
ChatMessage,
|
||||
DateSeparator,
|
||||
Spinner,
|
||||
|
||||
26
app/javascript/widget/components/ResizableTextarea.vue
Normal file
26
app/javascript/widget/components/ResizableTextarea.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$el.setAttribute(
|
||||
'style',
|
||||
`height: ${this.$el.scrollHeight}px;overflow-y:hidden;`
|
||||
);
|
||||
});
|
||||
|
||||
this.$el.addEventListener('input', this.resizeTextarea);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$el.removeEventListener('input', this.resizeTextarea);
|
||||
},
|
||||
methods: {
|
||||
resizeTextarea(event) {
|
||||
event.target.style.height = '3.2rem';
|
||||
event.target.style.height = `${event.target.scrollHeight}px`;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return this.$slots.default[0];
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user