From 158b9d2cb070828d61b1d79ae42e6e11b133e3e2 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 8 Mar 2018 18:00:39 +0100 Subject: [PATCH] [webpack.teacher.view] instant-filter new design + filter count --- public_html/asset/svg/filter_icon.svg | 21 +++ webpack/component/teacher/view.vue | 28 ++-- webpack/data/teacher.js | 56 +++++++- webpack/scss/container.scss | 183 ++++++++++++++++++-------- 4 files changed, 211 insertions(+), 77 deletions(-) create mode 100644 public_html/asset/svg/filter_icon.svg diff --git a/public_html/asset/svg/filter_icon.svg b/public_html/asset/svg/filter_icon.svg new file mode 100644 index 0000000..8bc8069 --- /dev/null +++ b/public_html/asset/svg/filter_icon.svg @@ -0,0 +1,21 @@ + +image/svg+xml \ No newline at end of file diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue index e30e93b..dae6a93 100644 --- a/webpack/component/teacher/view.vue +++ b/webpack/component/teacher/view.vue @@ -1,7 +1,20 @@ diff --git a/webpack/data/teacher.js b/webpack/data/teacher.js index f4a8b4c..1c39f65 100644 --- a/webpack/data/teacher.js +++ b/webpack/data/teacher.js @@ -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 // diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index 920233e..a956019 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -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; } }