parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix search bar behaviour (step 6)

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-02 14:42:25 -05:00
parent 1d26e0338f
commit cb27e81b7c
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pvc-vue/src/components/general/VMSearchBar.vue
View File

@ -5,13 +5,12 @@
class="btn btn-outline-secondary list-toggle-btn"
@click="toggleList"
:class="{
'active': showList,
'filtering': showList && isFilterActive
'active': showList && !isFilterActive,
'filtering': showList && isFilterActive
}"
:title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'List VMs'"
:title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'Show VM list'"
>
<i class="fas" :class="showList && isFilterActive ? 'fa-filter' : 'fa-list'"></i>
{{ showList ? (isFilterActive ? 'Filtering' : 'All VMs') : 'List VMs' }}
<i class="fas fa-list"></i> List VMs
</button>
<div class="search-box">
@ -24,6 +23,7 @@
@focus="handleFocus"
@blur="handleBlur"
@click="handleSearchClick"
:class="{ 'search-active': showList && isFilterActive }"
class="form-control search-input"
>
<button
@ -568,16 +568,17 @@ const scrollToSelectedVM = () => {
}
.list-toggle-btn.active {
background-color: #6c757d;
color: white;
}
.list-toggle-btn.filtering {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.list-toggle-btn.filtering {
background-color: white;
color: #212529;
border-color: #6c757d;
}
.filter-dropdown {
position: relative;
}
@ -794,4 +795,9 @@ const scrollToSelectedVM = () => {
background-color: #0d6efd !important;
z-index: 2 !important;
}
.search-input.search-active {
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
</style>