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

Feature: Update design for web widget (#408)

Browse source
This commit is contained in:
Nithin David Thomas 2020-01-13 12:10:40 +05:30 • committed by Pranav Raj S
parent 655c585358
commit 7cf19e0b52
11 changed files with 184 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

17
app/javascript/widget/components/ChatSendButton.vue
View file

@ -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>