KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Add click interaction for conversation list (#1460)

Browse source
This commit is contained in:
Nithin David Thomas 2020-11-29 13:28:36 +05:30 committed by GitHub
parent bb31b21060
commit d51c5d5768
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View file

@ -236,7 +236,7 @@ $breadcrumbs-item-slash: true;
// 11. Button
// ----------
$button-padding: $space-one $space-two;
$button-padding: $space-one $space-normal;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;

4
app/javascript/dashboard/assets/scss/_variables.scss
View file

@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232;
$woot-snackbar-button: #ffeb3b;
$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
// Ionicons
$ionicons-font-path: '~ionicons/fonts';

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

@ -1,3 +1,5 @@
$resolve-button-width: 13.2rem;
// Conversation header - Light BG
.conv-header {
@include padding($space-small $space-normal);
@ -71,7 +73,7 @@
.button.resolve--button {
@include flex-align($x: center, $y: middle);
width: 13.2rem;
width: $resolve-button-width;
>.icon {
font-size: $font-size-default;

15
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View file

@ -1,3 +1,15 @@
@keyframes left-shift-animation {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(1px);
}
}
.conversation {
@include flex;
@include flex-shrink;
@ -10,6 +22,7 @@
position: relative;
&.active {
animation: left-shift-animation .25s $swift-ease-out-function;
background: $color-background;
border-bottom-color: $color-border-light;
border-left-color: $color-woot;
@ -30,7 +43,7 @@
}
}
&:nth-last-child(2) {
&:last-child {
.conversation--details {
border-bottom-color: $color-border-light;
}

2
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View file

@ -72,7 +72,7 @@
.chat-list__top {
@include flex;
@include padding($zero $zero $space-small $zero);
@include padding($zero $zero $space-micro $zero);
align-items: center;
justify-content: space-between;

20
app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
View file

@ -5,10 +5,12 @@
margin: $space-normal;
margin-top: 0;
max-height: $space-mega * 3;
transition: box-shadow .35s $ease-in-out-cubic, height 2s $ease-in-out-cubic;
transition: box-shadow .35s $swift-ease-out-function,
height 2s $swift-ease-out-function;
&.is-focused {
@include normal-shadow;
@include shadow;
}
.reply-box__top {
@ -47,7 +49,7 @@
&.is-private {
background: lighten($warning-color, 38%);
> input {
>input {
background: lighten($warning-color, 38%);
}
}
@ -63,7 +65,7 @@
}
}
.file-uploads > label {
.file-uploads>label {
cursor: pointer;
}
@ -73,7 +75,7 @@
padding: 0 $space-small;
}
> textarea {
>textarea {
@include ghost-input();
@include margin(0);
background: transparent;
@ -100,7 +102,7 @@
.tabs-title {
margin: 0;
transition: all .2s $ease-in-out-cubic;
transition: all .2s $swift-ease-out-function;
transition-property: color, background;
a {
@ -124,10 +126,10 @@
&.is-active {
@include border-light-right;
border-left: 0;
}
a {
border-bottom-left-radius: $space-small;
}
a {
border-bottom-left-radius: $space-small;
}
}

2
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View file

@ -56,7 +56,7 @@
display: flex;
flex-direction: row;
font-size: $font-size-small;
transition: all .15s $ease-in-out-cubic;
transition: border-color .15s $swift-ease-out-function;
}
&.is-active {

2
app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
View file

@ -24,7 +24,7 @@ table {
tr {
.show-if-hover {
opacity: 0;
transition: all 0.2s $ease-in-out-cubic;
transition: opacity 0.2s $swift-ease-out-function;
}
&:hover {

4
app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
View file

@ -106,6 +106,10 @@ export default {
&.clear.more--button {
color: var(--color-body);
}
&:hover {
color: var(--w-800);
}
}
.actions--container {

2
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
View file

@ -152,7 +152,7 @@ export default {
display: flex;
font-size: var(--font-size-small);
font-weight: 400;
padding: var(--space-normal);
padding: var(--space-normal) var(--space-normal) var(--space-slab);
text-align: left;
line-height: var(--font-size-large);
}

14
app/javascript/widget/assets/scss/_mixins.scss
View file

@ -4,9 +4,9 @@ $shadow-color-2: rgba(0, 0, 0, 0.07);
$shadow-color-3: rgba(50, 50, 93, .08);
$shadow-color-4: rgba(0, 0, 0, .05);
$color-shadow-medium: rgba(0, 0, 0, 0.1);
$color-shadow-light: rgba(0, 0, 0, 0.06);
$color-shadow-large: rgba(0, 0, 0, 0.25);
$color-shadow-medium: rgba(50, 50, 93, 0.08);
$color-shadow-light: rgba(50, 50, 93, 0.04);
$color-shadow-large: rgba(50, 50, 93, 0.25);
$color-shadow-outline: rgba(66, 153, 225, 0.5);
@mixin normal-shadow {
@ -36,14 +36,14 @@ $color-shadow-outline: rgba(66, 153, 225, 0.5);
}
@mixin shadow {
box-shadow: 0 1px 10px 4px $color-shadow-medium,
0 1px 5px 2px $color-shadow-light;
box-shadow: 0 1px 10px 2px $color-shadow-medium,
0 1px 5px 1px $color-shadow-light;
}
@mixin shadow-medium {
box-shadow: 0 4px 24px 8px $color-shadow-medium,
0 2px 16px 4px $color-shadow-light;
box-shadow: 0 4px 24px 4px $color-shadow-medium,
0 2px 16px 2px $color-shadow-light;
}