Add 'archived' icon at categories (themes)

Leonardo Merlin
1 parent df26e0f0
Showing 3 changed files with 32 additions and 1 deletions Show diff stats
src/app/components/category-list/category-list.html
src/app/components/category-list/category-list.scss
src/app/pages/respostas/respostas.controller.js
@@ -18,6 +18,9 @@
         <span class="category-list--label">{{::category.name}}</span>
         <span class="category-list--icon--right glyphicon glyphicon-chevron-right hidden-xs" ng-hide="vm.selectedCategory.slug === category.slug"></span>
         <span class="category-list--icon--right glyphicon glyphicon-remove hidden-xs" ng-show="vm.selectedCategory.slug === category.slug"></span>
+        <div ng-if="category.archived" class="category-list--icon-archived">
+          <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+        </div>
       </button>
     </div>
   </nav>
@@ -77,6 +77,24 @@
         }
     }
  
+    &--icon-archived {
+        position: absolute;
+        width: 15px;
+        height: 15px;
+        font-size: 12px;
+        bottom: 8px;
+        left: 41px;
+
+        .glyphicon {
+            position: relative;
+            top: -2px;
+            color: #fff;
+            background-color: #3FC869;
+            padding: 3px;
+            border-radius: 100%;
+        }
+    }
+
     .category-list--icon {
         position: absolute;
         top: 6px;
@@ -64,7 +64,17 @@
     // 1. Load themes
     vm.loadingThemes = true;
     vm.DialogaService.getThemes(function(themes) {
-      vm.themes = themes;
+      var archivedThemes = [];
+
+      for (var i = themes.length - 1; i >= 0; i--) {
+        var theme = themes[i];
+
+        if(theme.archived){
+          archivedThemes.push(theme);
+        }
+      }
+
+      vm.themes = archivedThemes;
       vm.loadingThemes = false;
       vm.loading = false;
...	...	@@ -18,6 +18,9 @@
18	18	<span class="category-list--label">{{::category.name}}</span>
19	19	<span class="category-list--icon--right glyphicon glyphicon-chevron-right hidden-xs" ng-hide="vm.selectedCategory.slug === category.slug"></span>
20	20	<span class="category-list--icon--right glyphicon glyphicon-remove hidden-xs" ng-show="vm.selectedCategory.slug === category.slug"></span>
	21	+ <div ng-if="category.archived" class="category-list--icon-archived">
	22	+ <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
	23	+ </div>
21	24	</button>
22	25	</div>
23	26	</nav>
...	...
...	...	@@ -77,6 +77,24 @@
77	77	}
78	78	}
79	79
	80	+ &--icon-archived {
	81	+ position: absolute;
	82	+ width: 15px;
	83	+ height: 15px;
	84	+ font-size: 12px;
	85	+ bottom: 8px;
	86	+ left: 41px;
	87	+
	88	+ .glyphicon {
	89	+ position: relative;
	90	+ top: -2px;
	91	+ color: #fff;
	92	+ background-color: #3FC869;
	93	+ padding: 3px;
	94	+ border-radius: 100%;
	95	+ }
	96	+ }
	97	+
80	98	.category-list--icon {
81	99	position: absolute;
82	100	top: 6px;
...	...
...	...	@@ -64,7 +64,17 @@
64	64	// 1. Load themes
65	65	vm.loadingThemes = true;
66	66	vm.DialogaService.getThemes(function(themes) {
67		- vm.themes = themes;
	67	+ var archivedThemes = [];
	68	+
	69	+ for (var i = themes.length - 1; i >= 0; i--) {
	70	+ var theme = themes[i];
	71	+
	72	+ if(theme.archived){
	73	+ archivedThemes.push(theme);
	74	+ }
	75	+ }
	76	+
	77	+ vm.themes = archivedThemes;
68	78	vm.loadingThemes = false;
69	79	vm.loading = false;
70	80
...	...