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

public_html/asset/svg/filter_icon.svg

@@ -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>

webpack/component/teacher/view.vue

@@ -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>

webpack/data/teacher.js

@@ -106,13 +106,57 @@ gstore.add('filter_handler', function(){
 
 /* (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){
 
 	// {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 //

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;
+	min-height: 100%;
-		top: 0;
-		left: 0;
-		width: calc( 100% - 20em );
-		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;
+	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;
 	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;
+	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 */
 	& > 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;
+			padding-right: 1em;
-
-			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right center no-repeat;
-			background-size: 1em 1em;
 
 			font-size: .8em;
 			color: darken($secondary-color, 10%);
@@ -682,68 +697,122 @@
 
 			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;
-			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;
-				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;
-			}
 
-			/* (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;
 		}
 
 	}