[webpack.teacher.view] instant-filter new design + filter count
This commit is contained in:
xdrm-brackets
parent
0e305499ad
commit
158b9d2cb0
|
|
@ -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 |
|
|
@ -1,7 +1,20 @@
|
|||
<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'>
|
||||
|
||||
|
|
@ -107,19 +120,6 @@
|
|||
</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>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -106,13 +106,57 @@ gstore.add('filter_handler', function(){
|
|||
|
||||
/* (3) Get Filters
|
||||
---------------------------------------------------------*/
|
||||
/* (1) Define global filter */
|
||||
gstore.add('filters', {
|
||||
formations: [{ visible: false }],
|
||||
ues: [{ visible: false }]
|
||||
/* (1) Define filter group show/hide */
|
||||
gstore.add('show_fgroup', function(gname){
|
||||
|
||||
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){
|
||||
|
||||
// {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){
|
||||
|
||||
// {1} If error -> abort //
|
||||
|
|
|
|||
|
|
@ -18,6 +18,16 @@
|
|||
|
||||
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
|
||||
---------------------------------*/
|
||||
#CONTAINER > div.card.container{
|
||||
#CONTAINER.card > div.card.container{
|
||||
|
||||
order: 2;
|
||||
flex: 1 0 calc( 100% - 20em );
|
||||
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc( 100% - 20em );
|
||||
min-height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
// flex properties
|
||||
flex-direction: row;
|
||||
|
|
@ -97,6 +106,8 @@
|
|||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// background-color: #f00;
|
||||
|
||||
z-index: 101;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -631,49 +642,53 @@
|
|||
|
||||
/* [4] Card style -> filter
|
||||
---------------------------------*/
|
||||
#CONTAINER > div.card.filter{
|
||||
#CONTAINER.card > div.card.filter{
|
||||
|
||||
order: 1;
|
||||
flex: 1 0 calc( 90% );
|
||||
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: #{$header-height + .5em };
|
||||
left: calc( 100% - 20em );
|
||||
// deflt - marg - scrollBarOffset
|
||||
width: calc( 20em - 2*.5em - .5em );
|
||||
height: calc( 100% - 2*.5em - #{$header-height} );
|
||||
min-height: calc( 4em - 2*.5em - 2*.5em );
|
||||
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
|
||||
border-radius: 3px / 3px;
|
||||
background-color: #fff;
|
||||
|
||||
// background-color: #0f0;
|
||||
|
||||
box-shadow: 0 2px 2px darken(#fff, 10%);
|
||||
|
||||
// flex
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 110;
|
||||
|
||||
overflow: visible;
|
||||
// overflow-y: visible;
|
||||
|
||||
/* (1) Filter Group */
|
||||
& > div[title]{
|
||||
|
||||
flex: 0 1 5em;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
margin: .5em 1em;
|
||||
|
||||
/* (1.1) Title content */
|
||||
& > div.fold{
|
||||
& > div.fold-toggle{
|
||||
content: attr(title);
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
padding-right: 1.4em;
|
||||
|
||||
background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right center no-repeat;
|
||||
background-size: 1em 1em;
|
||||
padding-right: 1em;
|
||||
|
||||
font-size: .8em;
|
||||
color: darken($secondary-color, 10%);
|
||||
|
|
@ -682,68 +697,122 @@
|
|||
|
||||
cursor: pointer;
|
||||
|
||||
transition: color .2s ease-in-out;
|
||||
|
||||
&[data-show='1']{
|
||||
background-image: url('/asset/svg/up_arrow.svg@bbbbbb');
|
||||
&:hover{
|
||||
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 */
|
||||
& > span{
|
||||
/* (1.2) Filter box */
|
||||
& > div.fold{
|
||||
|
||||
display: none;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
margin-top: 2em;
|
||||
|
||||
text-indent: 2em;
|
||||
margin-bottom: 1em;
|
||||
border: 1px solid #ddd;
|
||||
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){
|
||||
margin-top: .5em;
|
||||
}
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
/* (1.3) Pseudo-checkbox */
|
||||
&:before{
|
||||
content: '';
|
||||
/* (1.3) Filter item */
|
||||
& > span{
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin-left: .5em;
|
||||
width: calc( 1em - 2*2px );
|
||||
height: calc( 1em - 2*2px );
|
||||
position: relative;
|
||||
|
||||
border-radius: 3px / 3px;
|
||||
border: 2px solid $secondary-color;
|
||||
padding: .5em 0;
|
||||
padding-left: 2em;
|
||||
|
||||
background: #fff center center no-repeat;
|
||||
background-size: auto 80%;
|
||||
background-color: #fff;
|
||||
&:hover{ background-color: darken(#fff,5%); }
|
||||
|
||||
transition: background .2s ease-in-out,
|
||||
border-color .2s ease-in-out;
|
||||
&:nth-child(2n){
|
||||
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;
|
||||
}
|
||||
|
||||
/* (1.4) Active pseudo-checkbox */
|
||||
&.active:before{
|
||||
transition: background-color .2s ease-in-out;
|
||||
|
||||
background-image: url('/asset/svg/checkbox.svg@ffffff');
|
||||
background-color: $form-valid-color;
|
||||
border-color: $form-valid-color;
|
||||
/* (1.3.1) Pseudo-checkbox */
|
||||
&:before{
|
||||
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'
|
||||
& > div.fold[data-show='1'] ~ span{
|
||||
display: block;
|
||||
// only show item box if filter_group has 'data-show'
|
||||
& > div.fold-toggle[data-show='1'] + div.fold{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue