From 9649ed18ea2c53d087c5374795480b4261a962f2 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Tue, 5 Jul 2022 14:33:06 +0200
Subject: [PATCH] StatusFilterBar: Style tweaks to indicators

* Only dim indicators when list is filtered and status not active
* Slightly smaller size to better fit the action-bar
---
 web/app/src/assets/base.css                | 29 +++++++++++++++-------
 web/app/src/components/StatusFilterBar.vue |  3 ++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 5b1e1e89..0dcd4efb 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -328,23 +328,34 @@ footer {
   width: var(--indicator-size);
 }
 
-ul.status-filter-bar {
+.status-filter-bar {
   align-items: center;
   display: flex;
   list-style-type: none;
+  margin: 0;
   padding: 0;
-  margin: 0.3rem 0;
 }
-ul.status-filter-bar .status-filter-indicator {
-  margin: 2px;
-  opacity: 33%;
+
+.status-filter-indicator {
   cursor: pointer;
+  margin: .2rem;
 }
-ul.status-filter-bar .status-filter-indicator.active {
-  opacity: 100%;
+
+.status-filter-indicator .indicator {
+  --indicator-size: 10px;
+  transition: transform var(--transition-speed-fast) ease-in-out;
 }
-ul.status-filter-bar .status-filter-indicator .indicator {
-  --indicator-size: 15px;
+
+.status-filter-indicator .indicator:hover {
+  transform: scale(1.2)
+}
+
+.is-filtered .status-filter-indicator {
+  opacity: .33;
+}
+
+.status-filter-indicator.active {
+  opacity: 1.0;
 }
 
 .status-active {
diff --git a/web/app/src/components/StatusFilterBar.vue b/web/app/src/components/StatusFilterBar.vue
index b58e9593..a0bf80f0 100644
--- a/web/app/src/components/StatusFilterBar.vue
+++ b/web/app/src/components/StatusFilterBar.vue
@@ -18,7 +18,8 @@ const visibleStatuses = computed(() => {
 </script>
 
 <template>
-  <ul class="status-filter-bar">
+  <ul class="status-filter-bar"
+    :class="{'is-filtered': activeStatuses.length > 0}">
     <li v-for="status in visibleStatuses" class="status-filter-indicator"
       :data-status="status"
       :class="{active: activeStatuses.indexOf(status) >= 0}"