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

Feature: Add/Edit conversation labels (#488)

Browse Source 
Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas
2020-02-16 15:46:26 +05:30
committed by GitHub
parent 77473dc2aa
commit e61ba95cf7
31 changed files with 863 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View File

@@ -24,9 +24,18 @@
}
}
> .icon {
>.icon {
font-size: $font-size-default;
}
&.tiny {
font-size: $font-size-mini;
padding: $space-small $space-slab;
}
&.round {
border-radius: $space-larger;
}
}
.button--fixed-right-top {

4
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View File

@@ -5,6 +5,7 @@
@include flex;
@include flex-align($x: justify, $y: middle);
@include border-normal-bottom;
// Resolve Button
.button {
@include margin(0);
@@ -44,6 +45,7 @@
.user--name {
@include margin(0);
font-size: $font-size-medium;
text-transform: capitalize;
}
.user--profile__meta {
@@ -64,7 +66,7 @@
}
.button.resolve--button {
> .icon {
>.icon {
padding-right: $space-small;
font-size: $font-size-default;
}

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

@@ -2,8 +2,8 @@
@include flex;
@include flex-shrink;
@include padding($space-normal $zero $zero $space-normal);
position: relative;
cursor: pointer;
position: relative;
&.active {
background: $color-background;
@@ -18,63 +18,63 @@
.conversation--user {
font-size: $font-size-small;
margin-bottom: $zero;
text-transform: capitalize;
.label {
position: relative;
top: $space-micro;
left: $space-micro;
max-width: $space-jumbo;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: $space-micro;
white-space: nowrap;
}
}
.conversation--message {
height: $space-medium;
margin: $zero;
font-size: $font-size-small;
line-height: $space-medium;
font-weight: $font-weight-light;
text-overflow: ellipsis;
overflow: hidden;
color: $color-body;
width: 27rem;
white-space: nowrap;
font-size: $font-size-small;
font-weight: $font-weight-light;
height: $space-medium;
line-height: $space-medium;
margin: $zero;
max-width: 96%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 27rem;
}
.conversation--meta {
@include flex;
display: block;
flex-direction: column;
position: absolute;
right: $space-normal;
top: $space-normal;
@include flex;
flex-direction: column;
.unread {
$unread-size: $space-two - $space-micro;
display: none;
height: $unread-size;
min-width: $unread-size;
background: darken($success-color, 3%);
text-align: center;
padding: 0 $space-smaller;
line-height: $unread-size;
color: $color-white;
font-weight: $font-weight-medium;
font-size: $font-size-mini;
margin-left: auto;
@include round-corner;
background: darken($success-color, 3%);
color: $color-white;
display: none;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
height: $unread-size;
line-height: $unread-size;
margin-left: auto;
margin-top: $space-smaller;
min-width: $unread-size;
padding: 0 $space-smaller;
text-align: center;
}
.timestamp {
font-size: $font-size-mini;
color: $dark-gray;
line-height: $space-normal;
font-weight: $font-weight-normal;
font-size: $font-size-micro;
font-weight: $font-weight-normal;
line-height: $space-normal;
margin-left: auto;
}
}

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

@@ -47,16 +47,19 @@
@include background-gray;
@include margin(0);
@include border-normal-left;
.current-chat {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
div {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
img {
@include margin($space-normal);
width: 10rem;
@@ -87,7 +90,7 @@
height: 100%;
overflow-y: scroll;
> li {
>li {
@include flex;
@include flex-shrink;
@include margin($zero $zero $space-smaller);
@@ -147,7 +150,7 @@
@include flex-align(right, null);
.wrap {
margin-right: $space-small;
margin-right: $space-normal;
text-align: right;
}

84
app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
View File

@@ -1,10 +1,10 @@
.reply-box {
@include elegant-card;
border-bottom: 0;
margin: $space-normal;
margin-top: 0;
border-bottom: 0;
@include elegant-card;
transition: height 2s $ease-in-out-cubic;
max-height: $space-jumbo * 2;
transition: height 2s $ease-in-out-cubic;
.reply-box__top {
@include flex;
@@ -12,26 +12,25 @@
@include padding($space-one $space-normal);
@include background-white;
@include margin(0);
position: relative;
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
position: relative;
.canned {
@include elegant-card;
z-index: 100;
position: absolute;
background: #fff;
width: 24rem;
left: 0;
border-top: $space-small solid $color-white;
background: $color-white;
border-bottom: $space-small solid $color-white;
border-top: $space-small solid $color-white;
left: 0;
max-height: 14rem;
overflow: scroll;
position: absolute;
width: 24rem;
z-index: 100;
.active {
a {
background: $color-woot;
}
.active a {
background: $color-woot;
}
}
@@ -43,30 +42,30 @@
&.is-private {
background: lighten($warning-color, 38%);
> input {
>input {
background: lighten($warning-color, 38%);
}
}
> .icon {
font-size: $font-size-medium;
>.icon {
color: $medium-gray;
margin-right: $space-small;
cursor: pointer;
font-size: $font-size-medium;
margin-right: $space-small;
&.active {
color: $color-woot;
}
}
> textarea {
>textarea {
@include ghost-input();
@include margin(0);
resize: none;
background: transparent;
// Override min-height : 50px in foundation
//
min-height: 1rem;
resize: none;
}
}
@@ -80,48 +79,47 @@
.tabs {
border: 0;
padding: 0;
flex: 1;
padding: 0;
.tabs-title {
margin: 0;
transition: background .2s $ease-in-out-cubic;
transition: color .2s $ease-in-out-cubic;
transition: all .2s $ease-in-out-cubic;
transition-property: color, background;
a {
font-weight: $font-weight-medium;
padding: $space-one $space-two;
}
&:first-child {
border-bottom-left-radius: $space-small;
&.is-private.is-active {
background: lighten($warning-color, 38%);
&.is-active {
@include border-light-right;
border-left: 0;
a {
border-bottom-left-radius: $space-small;
}
a {
border-bottom-color: darken($warning-color, 15%);
color: darken($warning-color, 15%);
}
}
}
&.is-private {
&.is-active {
background: lighten($warning-color, 38%);
.tabs-title:first-child {
border-bottom-left-radius: $space-small;
a {
border-bottom-color: darken($warning-color, 15%);
color: darken($warning-color, 15%);
}
&.is-active {
@include border-light-right;
border-left: 0;
a {
border-bottom-left-radius: $space-small;
}
}
}
.is-active {
@include background-white;
margin-top: -1px;
@include border-light-left;
@include border-light-right;
margin-top: -1px;
}
.message-length {
@@ -138,11 +136,11 @@
}
.send-button {
height: 3.6rem;
border-bottom-right-radius: $space-small;
padding-top: $space-small;
padding-right: $space-two;
height: 3.6rem;
padding-left: $space-two;
padding-right: $space-two;
padding-top: $space-small;
.icon {
margin-left: $space-small;

1
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View File

@@ -13,6 +13,7 @@
.tabs-title {
a {
font-size: $font-size-default;
font-weight: $font-weight-medium;
padding-bottom: $space-slab;
padding-top: $space-slab;
}