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

feat: Update reply box UI 👀 (#1623)

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas
2021-01-13 18:06:25 +05:30
committed by GitHub
parent 2d5aa9d3bd
commit fd181f18a1
9 changed files with 443 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -96,9 +96,9 @@
}
.conversation-wrap {
@include background-gray;
@include margin(0);
@include border-normal-left;
background: var(--color-background-light);
.current-chat {
@include flex;
@@ -140,8 +140,8 @@
flex-direction: column;
// Firefox flexbox fix
height: 100%;
margin-bottom: $space-small;
overflow-y: auto;
padding-bottom: var(--space-normal);
position: relative;
}

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

@@ -1,28 +1,13 @@
.reply-box {
@include light-shadow;
border-bottom: 0;
border-radius: $space-small;
margin: $space-normal;
margin-top: 0;
max-height: $space-mega * 3;
transition: box-shadow .35s $swift-ease-out-function,
height 2s $swift-ease-out-function;
&.is-focused {
@include shadow;
box-shadow: var(--shadow);
}
.reply-box__top {
@include flex;
@include flex-align($x: left, $y: middle);
@include padding($space-one $space-normal);
@include background-white;
@include margin(0);
border-top-left-radius: $space-small;
border-top-right-radius: $space-small;
position: relative;
.canned {
@include elegant-card;
background: $color-white;
@@ -41,19 +26,6 @@
}
}
&.is-active {
border-bottom-left-radius: $space-small;
border-bottom-right-radius: $space-small;
}
&.is-private {
background: lighten($warning-color, 38%);
>input {
background: lighten($warning-color, 38%);
}
}
.icon {
color: $medium-gray;
cursor: pointer;
@@ -65,9 +37,6 @@
}
}
.file-uploads>label {
cursor: pointer;
}
.attachment {
cursor: pointer;
@@ -82,87 +51,45 @@
// Override min-height : 50px in foundation
//
max-height: $space-mega * 2.4;
min-height: 4rem;
min-height: 4.8rem;
padding: var(--space-normal) 0 0;
resize: none;
}
}
.reply-box__bottom {
@include background-light;
@include flex;
@include flex-align($x: justify, $y: middle);
@include border-light-top;
border-bottom-left-radius: $space-small;
border-bottom-right-radius: $space-small;
&.is-private {
background: var(--y-50);
.tabs {
border: 0;
flex: 1;
padding: 0;
.reply-box__top {
background: var(--y-50);
.tabs-title {
margin: 0;
transition: all .2s $swift-ease-out-function;
transition-property: color, background;
a {
font-weight: $font-weight-medium;
padding: $space-one $space-two;
}
&.is-private.is-active {
background: lighten($warning-color, 38%);
a {
border-bottom-color: darken($warning-color, 15%);
color: darken($warning-color, 15%);
}
}
}
.tabs-title:first-child {
border-bottom-left-radius: $space-small;
&.is-active {
@include border-light-right;
border-left: 0;
}
a {
border-bottom-left-radius: $space-small;
}
}
.is-active {
@include background-white;
@include border-light-left;
@include border-light-right;
margin-top: -1px;
}
.message-length {
float: right;
a {
font-size: $font-size-mini;
}
}
.message-error {
color: $input-error-color;
}
}
.send-button {
border-bottom-right-radius: $space-small;
height: 3.6rem;
padding-left: $space-two;
padding-right: $space-two;
padding-top: $space-small;
.icon {
margin-left: $space-small;
>input {
background: var(--y-50);
}
}
}
.file-uploads>label {
cursor: pointer;
&:hover .button--emoji {
background: var(--b-200);
}
}
.bottom-box .button--emoji.button--upload {
height: var(--space-large);
padding: 0;
width: var(--space-large);
.file-uploads {
height: 100%;
line-height: var(--space-large);
width: 100%;
}
label {
padding: var(--space-small);
}
}
}