blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

StatusFilterBar: Style tweaks to indicators

Browse Source 
* Only dim indicators when list is filtered and status not active
* Slightly smaller size to better fit the action-bar
This commit is contained in:
Pablo Vazquez 2022-07-05 14:33:06 +02:00 committed by Francesco Siddi
parent 964e9cb1a3
commit 9649ed18ea
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/app/src/assets/base.css
View File

@ -328,23 +328,34 @@ footer {
width: var(--indicator-size); width: var(--indicator-size);
} }
ul.status-filter-bar { .status-filter-bar {
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0;
padding: 0; padding: 0;
margin: 0.3rem 0;
} }
ul.status-filter-bar .status-filter-indicator {
margin: 2px; .status-filter-indicator {
opacity: 33%;
cursor: pointer; 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 { .status-active {

3
web/app/src/components/StatusFilterBar.vue
View File

@ -18,7 +18,8 @@ const visibleStatuses = computed(() => {
</script> </script>
<template> <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" <li v-for="status in visibleStatuses" class="status-filter-indicator"
:data-status="status" :data-status="status"
:class="{active: activeStatuses.indexOf(status) >= 0}" :class="{active: activeStatuses.indexOf(status) >= 0}"