LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 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 'variables';
@import 'buttons'; @import 'buttons';
@import 'mixins'; @import 'mixins';
@import 'forms'; @import 'forms';
@import 'reset';
html, html,
body { 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; font-size: 10px;
height: 100%; height: 100%;
} }

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

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