ndi-2018
/
main
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added sending loader + 'new_msg'/'msg_pending' have a value for each channel

This commit is contained in:
xdrm-brackets 2017-12-07 18:38:27 +01:00
parent 40598a5418
commit 78439ec878
5 changed files with 65 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public_html/css/container.css
View File

@ -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 */

33
public_html/image/loader/send-input.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
view/main.js
View File

@ -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});

16
view/vue-config.js
View File

@ -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);

6
view/vue/container/inbox.vue
View File

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