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 @@ + + + + + + + + + + + + + + + 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 @@
- +
@@ -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){