chatview: remove loading animations
Animations during conversation loading are heavy and useless. Remove
them. Also remove animations of message status (sending ... and X when
message failed to send) as they are pretty useless and look weird with
lazy loading.
Add a ... icon at the top of the conversation to make it more
intuitive to the user that he can scroll further when a conversation
was lazy loaded.
Add a workaround to stop creating #messages dynamically.
Change-Id: If6183bd58002eb79d459dad5dd3c0b55eecebf86
Gitlab: #836
Reviewed-by: Sebastien Blin <sebastien.blin@savoirfairelinux.com>
diff --git a/web/chatview.css b/web/chatview.css
index d4f309a..374baaf 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -326,6 +326,15 @@
/** Main chat view */
+#lazyloading-icon {
+ margin: auto;
+ margin-bottom: 10px;
+ margin-top: 5px;
+ vertical-align: center;
+ width: 30px;
+ display: flex;
+}
+
#container {
position: relative;
height: 100%;
@@ -358,28 +367,18 @@
}
.last-message {
- padding-bottom: 1em !important;
+ padding-bottom: 1.5em !important;
}
/* General messages */
-.wc {
- will-change: transform;
-}
-
.message_wrapper {
- transform: scale(0);
max-width: 70%;
margin: 8px 0 0 0;
display: inline-block;
padding: 1em;
border-radius: 10px;
position: relative;
- -webkit-animation: talk;
- -webkit-animation-duration: 0.3s;
- -webkit-animation-delay: 0.1s;
- -webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: ease-in-out;
}
.message {
@@ -469,46 +468,9 @@
opacity: 0;
}
-.message_in > .message_wrapper:before {
- content: "";
- width: 10px;
- height: 10px;
- position: absolute;
- left: -10px;
- top: 0;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M10,0 L0,0 C10,0 10,10 10,10' fill='%23fdfdfd'/%3E %3C/svg%3E");
- transform-origin: top left;
-}
-
-.message_in + .message_in > .message_wrapper:before {
- display: none;
-}
-
-.message_out + .message_out > .message_wrapper:after {
- display: none;
-}
-
-.message_out > .message_wrapper:after {
- content: "";
- width: 10px;
- height: 10px;
- position: absolute;
- right: -10px;
- top: 0;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M0,0 L10,0 C0,0 0,10 0,10' fill='%23cfd8dc'/%3E %3C/svg%3E");
- transform-origin: top right;
-}
-
.message_delivery_status {
margin: 10px 10px;
color: #A0A0A0;
- opacity: 0;
- -webkit-animation-name: fade-in;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-delay: 0.4s;
- -webkit-animation-fill-mode: forwards;
- transition: opacity 0.5s ease-in-out;
}
.message_sender {
@@ -517,40 +479,9 @@
.sender_image {
border-radius: 50%;
- transition: transform 0.2s ease-in-out;
margin: 10px;
}
-.message_in .sender_image {
- -webkit-animation-name: enter-stage-left;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-timing-function: ease-in-out;
-}
-
-.message_out .sender_image {
- -webkit-animation-name: enter-stage-right;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-timing-function: ease-in-out;
-}
-
-@-webkit-keyframes enter-stage-left {
- from {
- transform: translateX(-100%);
- }
- to {
- transform: translateX(0);
- }
-}
-
-@-webkit-keyframes enter-stage-right {
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0);
- }
-}
-
.message_out > .message_wrapper {
background-color: #cfd8dc;
border-top-right-radius: 0;
@@ -581,15 +512,6 @@
}
}
-@-webkit-keyframes talk {
- from {
- transform: scale(0);
- }
- to {
- transform: scale(1);
- }
-}
-
.timestamp {
display: flex;
justify-content: flex-start;
@@ -652,28 +574,6 @@
.status-x {
stroke-dasharray: 12;
- stroke-dashoffset: 12;
- -webkit-animation: dash-x;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: ease-in-out;
-}
-
-.x-first {
- -webkit-animation-delay: 0.7s;
-}
-
-.x-second {
- -webkit-animation-delay: 0.9s;
-}
-
-@-webkit-keyframes dash-x{
- from {
- stroke-dashoffset: 12;
- }
- to {
- stroke-dashoffset: 0;
- }
}
/* Contact + Call interactions */
@@ -693,11 +593,6 @@
display: none;
}
-.message_type_call .message_wrapper:after,
-.message_type_contact .message_wrapper:after {
- display: none;
-}
-
.message_type_contact .text,
.message_type_call .text {
align-self: center;
@@ -844,13 +739,6 @@
.sending {
margin: 10px 10px;
color: #A0A0A0;
- opacity: 0;
- -webkit-animation-name: fade-in;
- -webkit-animation-duration: 0.2s;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-delay: 0.4s;
- -webkit-animation-fill-mode: forwards;
- transition: opacity 0.5s ease-in-out;
}
/* Classic screens */