ChatView: Animate message statuses
Tuleap: #1073
Change-Id: I710bb70c375007d3cbc82d2751f6ad8ecc90c2f4
Reviewed-by: Guillaume Roguez <guillaume.roguez@savoirfairelinux.com>
diff --git a/web/chatview.html b/web/chatview.html
index c3a6648..151870f 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -4,6 +4,7 @@
<!-- Empty head might be needed for setSenderImage -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta charset=“utf-8”>
</head>
<body>
@@ -20,6 +21,83 @@
-->
<style>
+.status_circle {
+ fill: #A0A0A0;
+ -webkit-animation: circle-dance;
+ -webkit-animation-duration: 0.8s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+}
+
+.anim-first {
+ -webkit-animation-delay: 0.7s;
+}
+
+.anim-second {
+ -webkit-animation-delay: 0.9s;
+}
+
+.anim-third {
+ -webkit-animation-delay: 1.1s;
+}
+
+@-webkit-keyframes circle-dance {
+ 0%,50% {
+ -webkit-transform: translateY(0);
+ fill: #A0A0A0;
+ }
+ 100% {
+ -webkit-transform: translateY(-8px);
+ fill: #000;
+ }
+}
+
+.status-check {
+ stroke-dasharray: 17;
+ stroke-dashoffset: 17;
+ -webkit-animation: dash-check;
+ -webkit-animation-duration: 0.4s;
+ -webkit-animation-delay: 0.7s;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes dash-check{
+ from {
+ stroke-dashoffset: 17;
+ }
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+.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;
+ }
+}
+
.message_wrapper {
transform: scale(0);
max-width: 50%;
@@ -36,6 +114,7 @@
}
.message {
+ font: 0.875em "Open sans",Helvetica,"Segoe UI",sans-serif;
margin: 0;
display: flex;
justify-content: flex-start;
@@ -51,6 +130,12 @@
display: none;
}
+.sender_image {
+ border-radius: 50%;
+ transition: transform 0.2s ease-in-out;
+ margin: 10px 10px 10px 10px;
+}
+
.message_in .sender_image {
-webkit-animation-name: enter-stage-left;
-webkit-animation-duration: 0.2s;
@@ -178,12 +263,6 @@
transition: opacity 0.5s ease-in-out;
}
-.sender_image {
- border-radius: 50%;
- transition: transform 0.2s ease-in-out;
- margin: 10px 10px 10px 10px;
-}
-
.message_in + .message_in .sender_image {
opacity: 0;
}
@@ -242,10 +321,16 @@
case "unknown":
formatted_delivery_status = "";
break;
- case "failure":
case "sending":
+ formatted_delivery_status = "Sending<svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><circle class='status_circle anim-first' cx='4' cy='12' r='1'/><circle class='status_circle anim-second' cx='8' cy='12' r='1'/><circle class='status_circle anim-third' cx='12' cy='12' r='1'/></svg>"
+ break;
case "read":
+ break;
+ case "failure":
+ formatted_delivery_status = "Failure <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-x x-first' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M4,4 L12,12'/><path class='status-x x-second' stroke='#AA0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M12,4 L4,12'/></svg>"
+ break;
case "sent":
+ formatted_delivery_status = "Sent <svg overflow='visible' viewBox='0 -2 16 14' height='16px' width='16px'><path class='status-check' stroke='#008000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' fill='none' d='M2,8 L6,12 L14,4'/></svg>";
break;
default:
console.log("getMessageDeliveryStatusText: unknown delivery status: " + message_delivery_status);
@@ -328,7 +413,7 @@
// Set the variables
$message_text.html(getMessageHtml(message_text));
$message_sender.text(message_sender + ": ");
- $message_delivery_status.text(getMessageDeliveryStatusText(message_delivery_status));
+ $message_delivery_status.html(getMessageDeliveryStatusText(message_delivery_status));
$message_timestamp.text(getMessageTimestampText(message_timestamp));
$message_div.find($message_wrapper).append($message_timestamp);
@@ -443,7 +528,7 @@
"sender": "Me",
"timestamp": 1475275399,
"direction": "out",
- "delivery_status": "sent",
+ "delivery_status": "sending",
}
);
@@ -460,7 +545,7 @@
ring.chatview.addMessage(
{
- "id": 2,
+ "id": 1,
"text": "This is the second message in a row from me. Don't bother displaying my profile picture twice.",
"sender": "Other Guy",
"timestamp": 1475275399,
@@ -476,10 +561,32 @@
"sender": "Me",
"timestamp": 1475275399,
"direction": "out",
- "delivery_status": "sending",
+ "delivery_status": "sent",
}
);
+ ring.chatview.addMessage(
+ {
+ "id": 5,
+ "text": "Hello! This message's status will be updated to sent.",
+ "sender": "Me",
+ "timestamp": 1475275399,
+ "direction": "out",
+ "delivery_status": "sending",
+ }
+ );
+
+
+ ring.chatview.updateMessage(
+ {
+ "id": 5,
+ "text": "Hello! This message's status will be updated to sent.",
+ "sender": "Me",
+ "timestamp": 1475275399,
+ "direction": "out",
+ "delivery_status": "failure",
+ }
+ );
}