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

Add subtle css animations for conv list

Browse source
This commit is contained in:
Nithin David 2020-07-04 20:09:32 +05:30
parent 43147b3163
commit 93b1526192
9 changed files with 50 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/administrate/utilities/_variables.scss
View file

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

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

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

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 { .conversation {
@include flex; @include flex;
@include flex-shrink; @include flex-shrink;
@ -10,6 +22,7 @@
position: relative; position: relative;
&.active { &.active {
animation: left-shift-animation .5s $swift-ease-out-function;
background: $color-background; background: $color-background;
border-bottom-color: $color-border-light; border-bottom-color: $color-border-light;
border-left-color: $color-woot; border-left-color: $color-woot;
@ -30,7 +43,7 @@
} }
} }
&:nth-last-child(2) { &:last-child {
.conversation--details { .conversation--details {
border-bottom-color: $color-border-light; border-bottom-color: $color-border-light;
} }

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

@ -120,6 +120,21 @@
@include scroll-on-hover; @include scroll-on-hover;
} }
.conversation-transition-list-move {
transition: transform .3s $swift-ease-out-function;
}
.conversation-transition-list-enter-active,
.conversation-transition-list-leave-active {
transition: all .3s $swift-ease-out-function;
}
.conversation-transition-list-enter,
.conversation-transition-list-leave-to {
opacity: 0;
transform: translateX(10px);
}
.chat-list__top { .chat-list__top {
@include flex; @include flex;
@include padding($space-normal $zero $space-small $zero); @include padding($space-normal $zero $space-small $zero);

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

@ -5,7 +5,7 @@
margin: $space-normal; margin: $space-normal;
margin-top: 0; margin-top: 0;
max-height: $space-mega * 3; 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 { &.is-focused {
@include normal-shadow; @include normal-shadow;
@ -100,7 +100,7 @@
.tabs-title { .tabs-title {
margin: 0; margin: 0;
transition: all .2s $ease-in-out-cubic; transition: all .2s $swift-ease-out-function;
transition-property: color, background; transition-property: color, background;
a { a {

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

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

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

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

2
app/javascript/dashboard/components/ChatList.vue
View file

@ -20,12 +20,14 @@
</p> </p>
<div class="conversations-list"> <div class="conversations-list">
<transition-group name="conversation-transition-list" tag="div">
<conversation-card <conversation-card
v-for="chat in conversationList" v-for="chat in conversationList"
:key="chat.id" :key="chat.id"
:active-label="label" :active-label="label"
:chat="chat" :chat="chat"
/> />
</transition-group>
<div v-if="chatListLoading" class="text-center"> <div v-if="chatListLoading" class="text-center">
<span class="spinner"></span> <span class="spinner"></span>

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

@ -84,8 +84,8 @@ $woot-snackbar-bg: #323232;
$woot-snackbar-button: #ffeb3b; $woot-snackbar-button: #ffeb3b;
$swift-ease-out-duration: .4s !default; $swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default; $swift-ease-out-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: all $swift-ease-out-duration $swift-ease-out-function !default;
$border-radius: 3px; $border-radius: 3px;
$line-height: 1; $line-height: 1;