From 78439ec8780fef3e54f8324fdba3dd3660550514 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Thu, 7 Dec 2017 18:38:27 +0100
Subject: [PATCH] Added sending loader + 'new_msg'/'msg_pending' have a value
 for each channel

---
 public_html/css/container.css           | 12 +++++++++
 public_html/image/loader/send-input.svg | 33 +++++++++++++++++++++++++
 view/main.js                            |  4 +++
 view/vue-config.js                      | 16 +++++++++---
 view/vue/container/inbox.vue            |  6 ++---
 5 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 public_html/image/loader/send-input.svg

diff --git a/public_html/css/container.css b/public_html/css/container.css
index 69a8ed8..1109b72 100644
--- a/public_html/css/container.css
+++ b/public_html/css/container.css
@@ -119,8 +119,20 @@
 
 		border: none;
 
+		background: url('/image/loader/send-input.svg') -1em center no-repeat;
+		background-size: 1em 1em;
+
 		font-size: inherit;
 		font-family: inherit;
+
+		transition: all .2s ease-in-out;
+	}
+
+	#CONTAINER.message form.msg-input input.loading{ /* Loading input */
+		width: calc( 100% - 2em - 3em - 2.5em );
+		padding-left: 3em;
+
+		background-position: 1em center;
 	}
 
 	#CONTAINER.message form.msg-input button{ /* form send button */
diff --git a/public_html/image/loader/send-input.svg b/public_html/image/loader/send-input.svg
new file mode 100644
index 0000000..a558f9a
--- /dev/null
+++ b/public_html/image/loader/send-input.svg
@@ -0,0 +1,33 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#333">
+    <circle cx="15" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+        <animate attributeName="r" from="9" to="9"
+                 begin="0s" dur="0.8s"
+                 values="9;15;9" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="0.5" to="0.5"
+                 begin="0s" dur="0.8s"
+                 values=".5;1;.5" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+</svg>
diff --git a/view/main.js b/view/main.js
index bba4694..f34e78d 100755
--- a/view/main.js
+++ b/view/main.js
@@ -75,4 +75,8 @@ window.wsc_chat = wsc.channel('chat').listen(function(msg, err){
 	if( router.app.$route.path != '/inbox' )
 		gstore.data.notif.inbox.count += msg.msg.length;
 
+	// {7} Remove loader //
+	gstore.data.msg_pending.inbox = false;
+
+
 }).send({name: _SERVER.session.name});
\ No newline at end of file
diff --git a/view/vue-config.js b/view/vue-config.js
index a70b1ed..c65648d 100644
--- a/view/vue-config.js
+++ b/view/vue-config.js
@@ -83,14 +83,24 @@ gstore.add('func', {
 		/* (2) Send message to WebSocket */
 		wsc_chat.send(JSON.stringify({message: msg}));
 
-		/* (3) Add locally */
-		gstore.data.notif.inbox.data.push([ gstore.data.server.session.name, msg ]);
+		/* (3) Add loader */
+		gstore.data.msg_pending.inbox = true;
 	}
 });
 
 
 // new-message container
-gstore.add('new_msg', '');
+gstore.add('new_msg', {
+	inbox:     '',
+	emergency: '',
+	event:     ''
+});
+// if message loader
+gstore.add('msg_pending', {
+	inbox:     true,
+	emergency: true,
+	event:     true
+}); // true when message send pending
 
 // notification stack visibility
 gstore.add('nstack', false);
\ No newline at end of file
diff --git a/view/vue/container/inbox.vue b/view/vue/container/inbox.vue
index 5c91f2d..0ec8119 100644
--- a/view/vue/container/inbox.vue
+++ b/view/vue/container/inbox.vue
@@ -10,7 +10,7 @@
 		<div class='end-pad'></div> <!-- End Spacing -->
 
 		<form class='msg-input' @submit.prevent='new_message'>
-			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg'>
+			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg.inbox' :class='gstore.msg_pending.inbox ? "loading" : ""'>
 			<button></button>
 		</form>
 
@@ -28,10 +28,10 @@ export default {
 		new_message(msg){
 
 			// {1} Send message //
-			this.gstore.func.sendMessage(this.gstore.new_msg);
+			this.gstore.func.sendMessage(this.gstore.new_msg.inbox);
 
 			// {2} Empty input //
-			this.gstore.new_msg = '';
+			this.gstore.new_msg.inbox = '';
 		},
 		bbcode: function(msg){