LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Enhancement: Update the design of inbox listing in sidebar (#511)

Browse Source 
Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas
2020-02-19 10:30:34 +05:30
committed by GitHub
parent f00e1dcdc8
commit fbefb78817
9 changed files with 165 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View File

@@ -1,3 +1,83 @@
@mixin bubble-with-tyes {
@include padding($space-smaller $space-one);
@include margin($zero);
background: $color-primary-light;
border-radius: $space-small;
color: $color-heading;
font-size: $font-size-small;
position: relative;
.icon {
bottom: $space-smaller;
position: absolute;
right: $space-small;
}
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
.audio {
.time {
margin-top: -$space-two;
}
}
.image {
@include flex;
align-items: flex-end;
justify-content: center;
text-align: center;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
margin-left: -$space-large;
white-space: nowrap;
}
.modal-image {
max-height: 80%;
max-width: 80%;
}
}
.map {
@include flex;
flex-direction: column;
text-align: right;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
@include padding($space-small);
margin-left: -$space-smaller;
margin-top: -$space-two;
white-space: nowrap;
}
.locname {
font-weight: $font-weight-medium;
padding: $space-smaller;
}
}
}
.conversations-sidebar {
@include flex;
flex-direction: column;
@@ -51,14 +131,14 @@
.current-chat {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
flex-direction: column;
div {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
flex-direction: column;
img {
@include margin($space-normal);
@@ -76,18 +156,19 @@
.conv-empty-state {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
flex-direction: column;
}
}
.conversation-panel {
@include flex;
@include flex-weight(1);
flex-direction: column;
@include margin($zero);
flex-direction: column;
// Firefox flexbox fix
height: 100%;
margin-bottom: $space-small;
overflow-y: scroll;
>li {
@@ -117,6 +198,7 @@
}
.bubble {
@include bubble-with-tyes;
max-width: 50rem;
text-align: left;
word-wrap: break-word;
@@ -208,6 +290,7 @@
@include padding($space-smaller $space-normal);
@include flex-align($x: center, $y: null);
background: lighten($warning-color, 32%);
border: 1px solid lighten($warning-color, 26%);
border-radius: $space-smaller;
font-size: $font-size-small;
@@ -240,87 +323,6 @@
}
}
.bubble {
@include padding($space-smaller $space-one);
@include margin($zero);
background: #c7e3ff;
border-radius: $space-small;
box-shadow: 0 .5px .5px rgba(0, 0, 0, .05);
color: $color-heading;
font-size: $font-size-small;
position: relative;
.icon {
bottom: $space-smaller;
position: absolute;
right: $space-small;
}
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
.audio {
.time {
margin-top: -$space-two;
}
}
.image {
@include flex;
justify-content: center;
align-items: flex-end;
text-align: center;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
margin-left: -$space-large;
white-space: nowrap;
}
.modal-image {
max-height: 80%;
max-width: 80%;
}
}
.map {
@include flex;
flex-direction: column;
text-align: right;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
@include padding($space-small);
margin-left: -$space-smaller;
margin-top: -$space-two;
white-space: nowrap;
}
.locname {
font-weight: $font-weight-medium;
padding: $space-smaller;
}
}
}
.time {
bottom: -$space-micro;
color: $color-gray;