[webpack.teacher.view] instant-filter new design + filter count

This commit is contained in:
xdrm-brackets 2018-03-08 18:00:39 +01:00
parent 0e305499ad
commit 158b9d2cb0
4 changed files with 211 additions and 77 deletions

View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
width="36px"
viewBox="0 0 36 30"
version="1.1"
id="Layer_1"
height="30px"
enable-background="new 0 0 36 30"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><polygon
style="fill:#231f20"
id="fill-edit"
points="22,25 22,17 35.999,0 17.988,0 0,0 14,17 14,30 " /></svg>

After

Width:  |  Height:  |  Size: 823 B

View File

@ -1,7 +1,20 @@
<template> <template>
<div id='CONTAINER'> <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'> <div class='card container'>
@ -107,19 +120,6 @@
</div> </div>
<div class='card filter'>
<div v-for='(filter_grp, gname) in gstore.filters' :title='gname'>
<div class='fold' :data-show='gstore.filters[gname][0].visible ? 1 : 0' @click='gstore.filters[gname][0].visible = !gstore.filters[gname][0].visible'>{{ gname }}</div>
<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='data.active = !data.active; gstore.filter_handler();' :title='data.code'>{{ data.name }}</span>
</div>
</div>
</div> </div>
</template> </template>

View File

@ -106,13 +106,57 @@ gstore.add('filter_handler', function(){
/* (3) Get Filters /* (3) Get Filters
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Define global filter */ /* (1) Define filter group show/hide */
gstore.add('filters', { gstore.add('show_fgroup', function(gname){
formations: [{ visible: false }],
ues: [{ visible: false }] var opened = gstore.get.filters[gname] != null && gstore.get.filters[gname][0].visible;
// {1} hide all by default//
for( var f in gstore.get.filters )
gstore.get.filters[f][0].visible = false;
// {2} If wrong @gname -> abort //
if( gstore.get.filters[gname] == null )
return;
// {3} Show selected filter //
gstore.get.filters[gname][0].visible = !opened;
}); });
/* (2) Get Formations */ /* (2) Define filter item toggle */
gstore.add('toggle_filter', function(gname, i){
// {1} If wrong @gname -> abort //
if( gstore.get.filters[gname] == null )
return;
// {2} If wrong @i -> abort //
if( gstore.get.filters[gname][i] == null )
return;
// {3} Toggle filter activation //
gstore.get.filters[gname][i].active = !gstore.get.filters[gname][i].active;
// {4} Update active table //
gstore.get.filters[gname][0].active.splice(0);
console.log(gstore.get.filters[gname][0].active);
for( var f = 1 ; f < gstore.get.filters[gname].length ; f++ )
if( gstore.get.filters[gname][f].active )
gstore.get.filters[gname][0].active.push(f);
console.log(gstore.get.filters[gname][0].active);
});
/* (3) Define global filter */
gstore.add('filters', {
formations: [{ visible: false, active: [] }],
ues: [{ visible: false, active: [] }]
});
/* (4) Get Formations */
api.call('GET formation', {}, function(rs){ api.call('GET formation', {}, function(rs){
// {1} If error -> abort // // {1} If error -> abort //
@ -129,7 +173,7 @@ api.call('GET formation', {}, function(rs){
}); });
/* (3) Get UEs */ /* (5) Get UEs */
api.call('GET ue', {}, function(rs){ api.call('GET ue', {}, function(rs){
// {1} If error -> abort // // {1} If error -> abort //

View File

@ -18,6 +18,16 @@
z-index: 100; z-index: 100;
// card container
&.card{
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
} }
@ -81,14 +91,13 @@
/* [3] Card style -> container /* [3] Card style -> container
---------------------------------*/ ---------------------------------*/
#CONTAINER > div.card.container{ #CONTAINER.card > div.card.container{
order: 2;
flex: 1 0 calc( 100% - 20em );
display: flex; display: flex;
position: absolute; min-height: 100%;
top: 0;
left: 0;
width: calc( 100% - 20em );
min-height: 100%;
// flex properties // flex properties
flex-direction: row; flex-direction: row;
@ -97,6 +106,8 @@
align-content: flex-start; align-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
// background-color: #f00;
z-index: 101; z-index: 101;
overflow: hidden; overflow: hidden;
@ -631,49 +642,53 @@
/* [4] Card style -> filter /* [4] Card style -> filter
---------------------------------*/ ---------------------------------*/
#CONTAINER > div.card.filter{ #CONTAINER.card > div.card.filter{
order: 1;
flex: 1 0 calc( 90% );
display: flex; display: flex;
position: fixed; min-height: calc( 4em - 2*.5em - 2*.5em );
top: #{$header-height + .5em };
left: calc( 100% - 20em ); margin: .5em;
// deflt - marg - scrollBarOffset padding: .5em;
width: calc( 20em - 2*.5em - .5em );
height: calc( 100% - 2*.5em - #{$header-height} );
border-radius: 3px / 3px; border-radius: 3px / 3px;
background-color: #fff; background-color: #fff;
// background-color: #0f0;
box-shadow: 0 2px 2px darken(#fff, 10%); box-shadow: 0 2px 2px darken(#fff, 10%);
// flex // flex
flex-direction: column; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: center;
flex-wrap: nowrap; flex-wrap: wrap;
overflow: hidden; z-index: 110;
overflow-y: auto;
overflow: visible;
// overflow-y: visible;
/* (1) Filter Group */ /* (1) Filter Group */
& > div[title]{ & > div[title]{
flex: 0 1 5em;
display: block; display: block;
position: relative; position: relative;
margin: .5em 1em; margin: .5em 1em;
/* (1.1) Title content */ /* (1.1) Title content */
& > div.fold{ & > div.fold-toggle{
content: attr(title); content: attr(title);
display: inline-block; display: inline-block;
position: relative; position: relative;
padding-right: 1.4em; padding-right: 1em;
background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right center no-repeat;
background-size: 1em 1em;
font-size: .8em; font-size: .8em;
color: darken($secondary-color, 10%); color: darken($secondary-color, 10%);
@ -682,68 +697,122 @@
cursor: pointer; cursor: pointer;
transition: color .2s ease-in-out;
&[data-show='1']{ &:hover{
background-image: url('/asset/svg/up_arrow.svg@bbbbbb'); color: $primary-color;
} }
&[data-count]:after{
content: attr(data-count);
display: inline-block;
position: absolute;
margin-top: -.1em;
margin-left: .5em;
width: 1em;
height: clac( 1.5em - 2*.2em );
padding: .2em .5em;
border-radius: 3px;
background: $form-valid-color;
color: #fff;
font-size: .8em;
text-align: center;
}
// greyed when 0
&[data-count='0']:after{ background-color: #ddd; }
} }
/* (1.2) Filter element */ /* (1.2) Filter box */
& > span{ & > div.fold{
display: none; display: none;
position: relative; position: absolute;
width: 15em;
height: 15em;
margin-top: 2em;
text-indent: 2em; border: 1px solid #ddd;
margin-bottom: 1em; border-radius: 3px;
cursor: default; background-color: #fff;
&:hover{ text-decoration: underline; } flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
&:nth-child(2){ overflow: hidden;
margin-top: .5em; overflow-y: auto;
}
/* (1.3) Pseudo-checkbox */ /* (1.3) Filter item */
&:before{ & > span{
content: '';
display: block; display: block;
position: absolute; position: relative;
margin-left: .5em;
width: calc( 1em - 2*2px );
height: calc( 1em - 2*2px );
border-radius: 3px / 3px; padding: .5em 0;
border: 2px solid $secondary-color; padding-left: 2em;
background: #fff center center no-repeat; background-color: #fff;
background-size: auto 80%; &:hover{ background-color: darken(#fff,5%); }
transition: background .2s ease-in-out, &:nth-child(2n){
border-color .2s ease-in-out; background-color: #f9f9f9;
&:hover{ background-color: darken(#f9f9f9,5%); }
}
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer; cursor: pointer;
}
/* (1.4) Active pseudo-checkbox */ transition: background-color .2s ease-in-out;
&.active:before{
background-image: url('/asset/svg/checkbox.svg@ffffff'); /* (1.3.1) Pseudo-checkbox */
background-color: $form-valid-color; &:before{
border-color: $form-valid-color; content: '';
display: block;
position: absolute;
margin-top: .2em;
margin-left: calc( .5em - 2em );
width: calc( 1em - .2em );
height: calc( 1em - .2em );
border-radius: 50%;
background: $form-valid-color;
transform: scale(0);
transition: transform .1s ease-in-out;
cursor: pointer;
}
/* (1.3.2) Active pseudo-checkbox */
&.active:before{
transform: scale(1);
}
} }
} }
// only show items if filter_group has 'data-show' // only show item box if filter_group has 'data-show'
& > div.fold[data-show='1'] ~ span{ & > div.fold-toggle[data-show='1'] + div.fold{
display: block; display: flex;
} }
} }