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

21
app/javascript/dashboard/assets/scss/_variables.scss
View File

@@ -12,7 +12,7 @@ $font-size-mega: 3.4rem;
$font-size-giga: 4.0rem;
// spaces
$zero: 0rem;
$zero: 0;
$space-micro: 0.2rem;
$space-smaller: 0.4rem;
$space-small: 0.8rem;
@@ -42,16 +42,16 @@ $woot-logo-padding: $space-large $space-two;
// Colors
$color-woot: #1f93ff;
$color-gray: #6E6F73;
$color-light-gray: #999A9B;
$color-border: #E0E6ED;
$color-gray: #6e6f73;
$color-light-gray: #999a9b;
$color-border: #e0e6ed;
$color-border-light: #f0f4f5;
$color-background: #EFF2F7;
$color-background-light: #F9FAFC;
$color-white: #FFF;
$color-body: #3C4858;
$color-heading: #1F2D3D;
$color-extra-light-blue: #F5F7F9;
$color-background: #eff2f7;
$color-background-light: #f9fafc;
$color-white: #fff;
$color-body: #3c4858;
$color-heading: #1f2d3d;
$color-extra-light-blue: #f5f7f9;
$primary-color: $color-woot;
$secondary-color: #ff5216;
@@ -61,6 +61,7 @@ $alert-color: #ff4949;
// Color-palettes
$color-primary-light: #c7e3ff;
$color-primary-dark: darken($color-woot, 20%);
// Thumbnail

2
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View File

@@ -57,6 +57,8 @@
}
.multiselect__placeholder {
color: $color-gray;
font-weight: $font-weight-normal;
padding-top: $space-small;
}

2
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View File

@@ -34,7 +34,7 @@
.conversation--message {
color: $color-body;
font-size: $font-size-small;
font-weight: $font-weight-light;
font-weight: $font-weight-normal;
height: $space-medium;
line-height: $space-medium;
margin: $zero;

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;

40
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View File

@@ -1,7 +1,7 @@
.side-menu {
i {
min-width: $space-two;
margin-right: $space-smaller;
min-width: $space-two;
}
}
@@ -27,6 +27,26 @@
border-radius: $space-smaller;
color: $color-gray;
font-size: $font-size-default;
font-weight: $font-weight-medium;
}
.active a {
color: $color-woot;
}
}
.nested {
a {
font-size: $font-size-small;
margin-bottom: $space-micro;
margin-top: $space-micro;
>.inbox-icon {
display: inline-block;
margin-right: $space-micro;
min-width: $space-normal;
text-align: center;
}
}
}
}
@@ -36,17 +56,17 @@
@include flex;
@include space-between-column;
@include padding($space-one $space-normal $space-one $space-one);
flex-direction: column;
@include border-normal-top;
flex-direction: column;
position: relative;
.dropdown-pane {
@include elegant-card;
@include border-light;
display: block;
left: 18%;
top: -110%;
visibility: visible;
display: block;
width: 80%;
z-index: 999;
@@ -79,23 +99,23 @@
font-size: $font-size-medium;
margin-top: $space-medium;
> span {
>span {
margin-left: auto;
}
}
}
.menu-title + ul > li > a {
.menu-title+ul>li>a {
@include padding($space-micro null);
color: $medium-gray;
line-height: $global-lineheight;
}
.current-user {
align-items: center;
@include flex;
flex-direction: row;
align-items: center;
cursor: pointer;
flex-direction: row;
.current-user--data {
@include flex;
@@ -105,7 +125,7 @@
font-size: $font-size-small;
font-weight: $font-weight-medium;
line-height: 1;
margin-bottom: $zero;
margin-bottom: $space-smaller;
margin-left: $space-one;
margin-top: $space-micro;
}
@@ -132,7 +152,7 @@
display: none;
margin-right: $space-normal;
@media screen and (max-width: 1200px){
@media screen and (max-width: 1200px) {
display: block;
}
}
@@ -141,7 +161,7 @@
display: block;
margin-right: $space-normal;
@media screen and (max-width: 1200px){
@media screen and (max-width: 1200px) {
display: none;
}
}