scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-01 19:48:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust space between message bubbles in widget (#309)

Browse Source
This commit is contained in:
Nithin David Thomas
2019-11-27 11:45:33 +05:30
committed by Pranav Raj S
parent ded8f33fc8
commit 7c65142fcd
3 changed files with 72 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/widget/assets/scss/woot.scss
View File

@@ -1,12 +1,12 @@
@import 'reset';
@import 'variables';
@import 'buttons';
@import 'mixins';
@import 'forms';
@import 'reset';
html,
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 10px;
height: 100%;
}

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

@@ -31,52 +31,54 @@ export default {
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
<style lang="scss">
@import '~widget/assets/scss/variables.scss';
.conversation-wrap {
.agent-message {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
margin: 0 0 $space-micro $space-small;
max-width: 88%;
.agent-message {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
margin: 0 0 $space-micro $space-small;
& + .agent-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-left-radius: $space-smaller;
}
.user-avatar {
visibility: hidden;
}
.agent-name {
display: none;
}
}
& + .user-message {
margin-bottom: $space-normal;
}
.avatar-wrap {
flex-shrink: 1;
flex-grow: 0;
}
.message-wrap {
max-width: 90%;
flex-shrink: 0;
flex-grow: 1;
margin-left: $space-small;
.agent-name {
font-weight: $font-weight-medium;
& + .agent-message {
margin-bottom: $space-smaller;
margin-left: $space-two;
color: $color-body;
.chat-bubble {
border-top-left-radius: $space-smaller;
}
.user-avatar {
visibility: hidden;
}
.agent-name {
display: none;
}
}
& + .user-message {
margin-top: $space-normal;
}
.avatar-wrap {
flex-shrink: 1;
flex-grow: 0;
}
.message-wrap {
max-width: 90%;
flex-shrink: 0;
flex-grow: 1;
margin-left: $space-small;
.agent-name {
font-weight: $font-weight-medium;
margin-bottom: $space-smaller;
margin-left: $space-two;
color: $color-body;
}
}
}
}

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

@@ -22,34 +22,36 @@ export default {
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
<style lang="scss">
@import '~widget/assets/scss/variables.scss';
.conversation-wrap {
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0 $space-smaller $space-micro auto;
max-width: 85%;
text-align: right;
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0 $space-smaller $space-micro auto;
text-align: right;
& + .user-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
& + .user-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
}
.user-avatar {
visibility: hidden;
}
.agent-name {
display: none;
}
}
.user-avatar {
visibility: hidden;
& + .agent-message {
margin-top: $space-normal;
}
.agent-name {
display: none;
.message-wrap {
margin-right: $space-small;
}
}
& + .agent-message {
margin-bottom: $space-normal;
}
.message-wrap {
margin-right: $space-small;
}
}
</style>