mti
/
discord-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[lib.popup-controller][scss.global] design for 'loading' animation in submit <button> before api response + [lib.*-controller] when called from popup will call 'gs.get.popup().hide' to remove the loading animation and close the popup

This commit is contained in:
xdrm-brackets 2018-03-29 12:56:17 +02:00
parent 3e3a9197b2
commit 32f4e9a7b3
7 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public_html/asset/svg/loader.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
<circle transform="translate(8 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"/>
</circle>
<circle transform="translate(16 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3" keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"/>
</circle>
<circle transform="translate(24 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"/>
</circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 928 B

10
webpack/lib/channel-controller.js
View File

@ -211,16 +211,16 @@ export default class ChannelController{
/* (3) Try to create room in API */
api.call('POST /channel', { link: link, name: name }, function(rs){
/* (1) Manage error */
/* (1) Hide popup */
gs.get.popup.hide();
/* (2) Manage error */
if( rs.error !== 0 || rs.cid == null )
return false;
/* (2) Reload channel list */
/* (3) Reload channel list */
this.fetch();
/* (3) Hide popup */
gs.get.popup.hide();
}.bind(this), auth.token);
return true;

4
webpack/lib/content-controller.js
View File

@ -87,6 +87,8 @@ export default class ContentController{
/* (3) Call api UPDATE */
api.call(`PUT /user/${this.uid}`, { username: username }, function(rs){
gs.get.popup.hide();
// manage error
if( rs.error !== 0 )
return;
@ -125,7 +127,7 @@ export default class ContentController{
return false;
/* (3) Call api UPDATE */
api.call(`PUT /user/${this.uid}`, { password: password }, () => {}, auth.token);
api.call(`PUT /user/${this.uid}`, { password: password }, () => gs.get.popup.hide(), auth.token);
/* (4) Error */
return true;

32
webpack/lib/popup-controller.js
View File

@ -16,6 +16,10 @@ export default class PopupController{
/* (3) Active popup */
this.active = null;
/* (4) Loading state */
this.loading = false;
/* (2) Popups
@ -35,8 +39,8 @@ export default class PopupController{
if( !this.name.is_valid() )
return;
if( gs.get.room.create(this.type.mutable, this.name.mutable) )
return this.parent.hide();
// loading
this.parent.loading = gs.get.room.create(this.type.mutable, this.name.mutable);
}
@ -59,8 +63,8 @@ export default class PopupController{
if( !this.link.is_valid() )
return false;
if( gs.get.channel.create(this.name.mutable, this.link.mutable) )
return this.parent.hide();
// loading
this.parent.loading = gs.get.channel.create(this.name.mutable, this.link.mutable);
}
});
@ -75,8 +79,9 @@ export default class PopupController{
if( !this.username.is_valid() )
return false;
if( gs.get.content.change_username(this.username.mutable) )
this.parent.hide();
// loading
this.parent.loading = gs.get.content.change_username(this.username.mutable);
}
});
@ -91,8 +96,8 @@ export default class PopupController{
if( !this.username.is_valid() )
return false;
if( gs.get.channel.invite(this.username.mutable) )
return this.parent.hide();
// loading
this.parent.loading = gs.get.channel.invite(this.username.mutable);
}
});
@ -100,7 +105,7 @@ export default class PopupController{
/* (5) Remove channel */
this.register('channel.remove', {
reset(){ },
submit(){ gs.get.channel.remove() && this.parent.hide(); }
submit(){ this.parent.loading = gs.get.channel.remove(); }
});
/* (6) Remove channel */
@ -112,13 +117,13 @@ export default class PopupController{
messages: []
},
reset(){ this.data = { id: '', type: '', name: '', messages: [] }; },
submit(){ gs.get.room.remove(this.data.type, this.data.id) && this.parent.hide(); }
submit(){ this.parent.loading = gs.get.room.remove(this.data.type, this.data.id); }
});
/* (7) Leave channel */
this.register('channel.leave', {
reset(){ },
submit(){ gs.get.channel.remove() && this.parent.hide(); }
submit(){ this.parent.loading = gs.get.channel.remove(); }
});
/* (8) Change password */
@ -139,8 +144,7 @@ export default class PopupController{
if( !this.password.is_valid || !this.confirm.is_valid() )
return false;
if( gs.get.content.change_password(this.password.mutable) )
return this.parent.hide();
this.loading = gs.get.content.change_password(this.password.mutable);
}
});
@ -243,6 +247,7 @@ export default class PopupController{
this.filter = true;
/* (6) Reset popup */
this.loading = false;
this.list[name].reset();
/* (7) Show popup */
@ -272,6 +277,7 @@ export default class PopupController{
this.list[this.active].active = false;
/* (5) Reset popup */
this.loading = false;
this.list[this.active].reset();
/* (6) Reset @active */

10
webpack/lib/room-controller.js
View File

@ -229,6 +229,8 @@ export default class RoomController{
/* (3) Try to create room in API */
api.call(`POST /channel/room/${gs.get.content.cid}`, { type: type, name: name }, function(rs){
gs.get.popup.hide();
/* (1) Manage error */
if( rs.error !== 0 || rs.rid == null )
return false;
@ -236,9 +238,6 @@ export default class RoomController{
/* (2) Reload room list */
this.fetch();
/* (3) Hide popup */
gs.get.popup.hide();
}.bind(this), auth.token);
return true;
@ -267,6 +266,8 @@ export default class RoomController{
/* (3) Try to create room in API */
api.call(`DELETE /channel/room/${gs.get.content.cid}/${rid}`, {}, function(rs){
gs.get.popup.hide();
/* (1) Manage error */
if( rs.error !== 0 )
return false;
@ -274,9 +275,6 @@ export default class RoomController{
/* (2) Reload room list */
this.fetch();
/* (3) Hide popup */
gs.get.popup.hide();
}.bind(this), auth.token);
return true;

8
webpack/scss/global.scss
View File

@ -153,7 +153,8 @@
border: 0;
border-radius: 3px / 3px;
background-color: $main;
background: $main center center no-repeat;
background-size: contain;
color: #fff;
font-size: .8em;
@ -172,6 +173,11 @@
&:hover{ background-color: darken($main, 5%);}
&:active{ background-color: darken($main, 10%);}
}
&[data-loading='1']{
background-image: url('../asset/svg/loader.svg');
color: transparent;
}
}
}

16
webpack/vue/auth/wrapper.vue
View File

@ -31,7 +31,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Room</button>
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.create`).submit()'>Create Room</button>
</span>
</div>
@ -49,7 +49,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit' @click='gs.popup.get(`channel.create`).submit()'>Create Channel</button>
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.create`).submit()'>Create Channel</button>
</span>
</div>
@ -66,7 +66,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit' @click='gs.popup.get(`username.change`).submit()'>Save</button>
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`username.change`).submit()'>Save</button>
</span>
</div>
@ -81,7 +81,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
</span>
</div>
@ -95,7 +95,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit invalid' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
</span>
</div>
@ -109,7 +109,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit invalid' @click='gs.popup.get(`room.remove`).submit()'>Remove</button>
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.remove`).submit()'>Remove</button>
</span>
</div>
@ -123,7 +123,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit invalid' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
</span>
</div>
@ -142,7 +142,7 @@
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit' @click='gs.popup.get(`password.change`).submit()'>Update</button>
<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`password.change`).submit()'>Update</button>
</span>
</div>