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