mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webpack.ue.view][webpack.ue.manage] created 'nav_in' base animation

This commit is contained in:
xdrm-brackets 2018-03-13 15:02:41 +01:00
parent 7472c8627e
commit e0d4c278f4
4 changed files with 73 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
webpack/component/ue/manage.vue
View File

@ -2,24 +2,8 @@
<div id='CONTAINER' class='card'>
<div class='card filter'>
<div v-for='(filter_grp, gname) in gstore.filters' :title='gname'>
<div class='fold-toggle' :data-show='gstore.filters[gname][0].visible?1:0' @click='gstore.show_fgroup(gname)' :data-count='gstore.filters[gname][0].active.length'>{{ gname }}</div>
<div class='fold'>
<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='gstore.toggle_filter(gname, i); gstore.filter_handler(gname);' :title='data.code'>{{ data.name }}</span>
</div>
</div>
</div>
<div class='card container'>
<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
<button class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card' title='Créer un enseignant'>+</button>
<section class='valid' data-create='' v-show='gstore.create_card'>

2
webpack/component/ue/view.vue
View File

@ -40,6 +40,8 @@
<section v-for='(ue, pi) in gstore.ues'
:class="gstore.edit_i==pi ? 'search' : ''"
:data-id='ue.code'
:data-anim-center='gstore.open_anim.center == pi ? 1 : 0'
:data-anim-scale='gstore.open_anim.scale == pi ? 1 : 0'
:data-label='ue.label'>

43
webpack/data/ue.js
View File

@ -508,4 +508,47 @@ gstore.add('ia_handler', function(ue_i){
});
});
/* (9) Manage navigation in
---------------------------------------------------------*/
/* (1) Initialize current opened UE */
gstore.add('open_anim', {
center: -1,
scale: -1
});
/* (2) Define admin handler */
gstore.add('nav_in', function($router, ue_i){
/* (1) Abort if wrong ue_i */
if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
return;
/* (2) Set element to center */
gstore.get.open_anim.center = ue_i;
/* (3) Scale element */
(new Promise((resolve,reject) => {
setTimeout(() => {
gstore.get.open_anim.scale = ue_i;
resolve();
}, 500 );
/* (4) Load page */
})).then(() => {
setTimeout(() => {
$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
gstore.get.open_anim.center = -1;
gstore.get.open_anim.scale = -1;
}, 400);
});
});

28
webpack/scss/container.scss
View File

@ -164,6 +164,32 @@
&.valid{ box-shadow: 0; border: 1px solid $form-valid-color; }
&.search{ box-shadow: 0; border: 1px solid $form-search-color; }
// animation to center of container
&[data-anim-center='1']{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(1);
padding: 1.5em;
border: 1px solid #bbb;
box-shadow: 0 0 5vw #ddd;
z-index: 103;
transition: transform .2s ease-in-out,
padding .4s ease-in-out;
// animation to scale to container
&[data-anim-scale='1']{
padding: 10em;
transform: translateX(-50%) translateY(-50%) scale(1.5);
}
}
background-color: #fff;
color: $primary-color;
@ -173,6 +199,8 @@
justify-content: space-between;
flex-wrap: nowrap;
z-index: 102;
&[data-create]{
border: 1px solid $form-valid-color;