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

[Enhancement] Enter to send message, add click on bubble instead of icon (#202)

Browse source
This commit is contained in:
Pranav Raj S 2019-11-09 17:12:31 +05:30 • committed by GitHub
parent 63ce5607e9
commit 7e3409c3e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 84 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/packs/sdk.js
View file

@ -105,8 +105,7 @@ function bubbleClickCallback() {
}
function onClickChatBubble() {
wootOn(chatBubble, 'click', bubbleClickCallback);
wootOn(closeBubble, 'click', bubbleClickCallback);
wootOn(bubbleHolder, 'click', bubbleClickCallback);
}
function disableScroll() {

12
app/javascript/widget/assets/images/logo.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>woot-log</title>
<desc>Created with Sketch.</desc>
<g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="woot-log" fill-rule="nonzero">
<circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
<path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 916 B

10
app/javascript/widget/assets/images/message-send.svg
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
<title>Untitled</title>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>message-send</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="message-send" fill="#FFFFFF" fill-rule="nonzero">
<g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="message-send" fill="#999A9B" fill-rule="nonzero">
<path d="M18.34,7.32 L4.34,0.32 C3.20803579,-0.243393454 1.84434515,-0.0365739638 0.930331262,0.837115781 C0.0163173744,1.71080553 -0.251780361,3.06378375 0.26,4.22 L2.66,9.59 L2.66,9.59 C2.77000426,9.8522654 2.77000426,10.1477346 2.66,10.41 L0.26,15.78 C-0.153051509,16.7079201 -0.0685371519,17.7818234 0.48458191,18.6337075 C1.03770097,19.4855916 1.98429967,19.9997529 3,20 C3.46823099,19.9953274 3.9294892,19.8859921 4.35,19.68 L18.35,12.68 C19.3627539,12.1705304 20.001816,11.1336797 20.001816,10 C20.001816,8.86632027 19.3627539,7.82946961 18.35,7.32 L18.34,7.32 Z M17.45,10.89 L3.45,17.89 C3.07351737,18.0707705 2.62434212,17.9985396 2.32351279,17.7088521 C2.02268345,17.4191646 1.93356002,16.9730338 2.1,16.59 L4.49,11.22 C4.5209392,11.1482915 4.54765161,11.0748324 4.57,11 L11.46,11 C12.0122847,11 12.46,10.5522847 12.46,10 C12.46,9.44771525 12.0122847,9 11.46,9 L4.57,9 C4.54765161,8.9251676 4.5209392,8.85170847 4.49,8.78 L2.1,3.41 C1.93356002,3.02696622 2.02268345,2.5808354 2.32351279,2.2911479 C2.62434212,2.00146039 3.07351737,1.92922952 3.45,2.11 L17.45,9.11 C17.7839662,9.28109597 17.9940395,9.62475706 17.9940395,10 C17.9940395,10.3752429 17.7839662,10.718904 17.45,10.89 Z" id="Shape"></path>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

20
app/javascript/widget/components/ChatFooter.vue
View file

@ -1,6 +1,10 @@
<template>
<footer class="footer">
<ChatInputWrap :on-send-message="onSendMessage" />
<a class="branding" href="https://www.chatwoot.com" target="_blank">
<img src="~widget/assets/images/logo.svg" />
<span>We run on Chatwoot</span>
</a>
</footer>
</template>
@ -30,4 +34,20 @@ export default {
padding: $space-small;
width: 100%;
}
.branding {
align-items: center;
color: $color-body;
display: flex;
font-size: $font-size-default;
justify-content: center;
padding: $space-one;
text-align: center;
text-decoration: none;
img {
margin-right: $space-small;
max-width: $space-two;
}
}
</style>

3
app/javascript/widget/components/ChatInputArea.vue
View file

@ -21,8 +21,7 @@ export default {
@import '~widget/assets/scss/variables.scss';
.user-message-input {
border-color: $color-white;
border-bottom-color: $color-border-light;
border: 0;
height: $space-big;
resize: none;
}

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

@ -1,14 +1,10 @@
<template>
<div class="input-wrap">
<div>
<ChatInputArea v-model="userInput" :placeholder="placeholder" />
</div>
<div class="message-button-wrap">
<ChatSendButton
:on-click="handleButtonClick"
:disabled="!userInput.length"
/>
</div>
<div class="chat-message--input">
<ChatInputArea v-model="userInput" :placeholder="placeholder" />
<ChatSendButton
:on-click="handleButtonClick"
:disabled="!userInput.length"
/>
</div>
</template>
@ -39,13 +35,26 @@ export default {
userInput: '',
};
},
destroyed() {
document.removeEventListener('keypress', this.handleEnterKeyPress);
},
mounted() {
document.addEventListener('keypress', this.handleEnterKeyPress);
},
methods: {
handleButtonClick() {
if (this.userInput) {
if (this.userInput && this.userInput.trim()) {
this.onSendMessage(this.userInput);
}
this.userInput = '';
},
handleEnterKeyPress(e) {
if (e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
this.handleButtonClick();
}
},
},
};
</script>
@ -53,13 +62,9 @@ export default {
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
.input-wrap {
.message-button-wrap {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: $space-small;
}
.chat-message--input {
align-items: center;
border-bottom: 1px $color-border-light solid;
display: flex;
}
</style>

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

@ -2,12 +2,11 @@
<button
type="submit"
:disabled="disabled"
class="button send-button"
class="send-button"
@click="onClick"
>
<span v-if="!loading" class="icon-holder">
<img src="~widget/assets/images/message-send.svg" />
<span>Send</span>
</span>
<spinner v-else size="small" />
</button>
@ -42,10 +41,9 @@ export default {
@import '~widget/assets/scss/variables.scss';
.send-button {
align-items: center;
display: flex;
justify-content: space-around;
min-width: $space-big;
background: transparent;
border: 0;
cursor: pointer;
position: relative;
.icon-holder {
@ -54,10 +52,6 @@ export default {
justify-content: center;
fill: $color-white;
font-weight: $font-weight-medium;
img {
margin-right: $space-small;
}
}
}
</style>

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

@ -1,5 +1,5 @@
<template>
<section class="conversation">
<section class="conversation-wrap">
<ChatMessage
v-for="message in messages"
:key="message.id"
@ -19,14 +19,20 @@ export default {
props: {
messages: Object,
},
mounted() {
this.scrollToBottom();
},
updated() {
this.scrollToBottom();
},
methods: {
scrollToBottom() {
const container = this.$el;
container.scrollTop =
container.scrollHeight < this.minScrollHeight
? this.minScrollHeight
: container.scrollHeight;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
.conversation {
height: 100%;
}
</style>

31
app/javascript/widget/components/HelloWorld.vue
View file

@ -1,31 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

1
app/javascript/widget/helpers/actionCable.js
View file

@ -6,7 +6,6 @@ class ActionCableConnector extends BaseActionCableConnector {
this.events = {
'message.created': this.onMessageCreated,
};
console.log('joined', app, pubsubToken);
}
onMessageCreated = data => {

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

@ -3,9 +3,7 @@
<div class="header-wrap">
<ChatHeaderExpanded />
</div>
<div class="conversation-wrap">
<ConversationWrap :messages="getConversation" />
</div>
<ConversationWrap :messages="getConversation" />
<div class="footer-wrap">
<ChatFooter :on-send-message="handleSendMessage" />
</div>
@ -15,7 +13,6 @@
<script>
import { mapActions, mapGetters } from 'vuex';
// import { DEFAULT_CONVERSATION } from 'widget/store/modules/conversation';
import ChatFooter from 'widget/components/ChatFooter.vue';
import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
import ConversationWrap from 'widget/components/ConversationWrap.vue';
@ -34,20 +31,10 @@ export default {
content,
});
},
scrollToBottom() {
const container = this.$el.querySelector('.conversation-wrap');
container.scrollTop = container.scrollHeight;
},
},
computed: {
...mapGetters('conversation', ['getConversation']),
},
mounted() {
this.scrollToBottom();
},
updated() {
this.scrollToBottom();
},
};
</script>