Skip to content

Commit

Permalink
Adjusted search peer UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@donaldzou
donaldzou committed Aug 10, 2024
1 parent d6b1f97 commit aa3711c
Showing 1 changed file with 47 additions and 27 deletions.
74 changes: 47 additions & 27 deletions src/static/app/src/components/configurationComponents/peerSearch.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,6 @@ export default {
class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
<i class="bi bi-plus-lg me-2"></i>Peer
</RouterLink>

<!-- <RouterLink-->
<!-- to="jobs"-->
<!-- class="text-decoration-none btn btn-primary rounded-3 btn-sm">-->
<!-- <i class="bi bi-app-indicator me-2"></i>Jobs-->
<!-- </RouterLink>-->
<button class="btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
@click="this.downloadAllPeer()">
<i class="bi bi-download me-2"></i> Download All
Expand All @@ -107,49 +101,56 @@ export default {
@keyup="this.debounce()"
v-model="this.searchString">
</div>
<div class="dropdown">
<button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
<div class="dropdown dropup">
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-filter-circle me-2"></i>
Sort
Display
</button>
<ul class="dropdown-menu mt-2 shadow rounded-3">
<ul class="dropdown-menu mt-2 shadow rounded-3 animate__animated animation__fadeInDropdown dropdown-menu-end">
<li>
<small class="dropdown-header">Sort by</small>
</li>
<li v-for="(value, key) in this.sort">
<a class="dropdown-item d-flex" role="button" @click="this.updateSort(key)">
<span class="me-auto">{{value}}</span>
<a class="dropdown-item d-flex align-items-center" role="button" @click="this.updateSort(key)">
<small class="me-auto">{{value}}</small>
<i class="bi bi-check text-primary"
v-if="store.Configuration.Server.dashboard_sort === key"></i>
</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-arrow-repeat me-2"></i>Refresh Interval
</button>
<ul class="dropdown-menu shadow mt-2 rounded-3">
<li><hr class="dropdown-divider"></li>
<li>
<small class="dropdown-header">Refresh Interval</small>
</li>
<li v-for="(value, key) in this.interval">
<a class="dropdown-item d-flex" role="button" @click="updateRefreshInterval(key)">
<span class="me-auto">{{value}}</span>
<small class="me-auto">{{value}}</small>
<i class="bi bi-check text-primary"
v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
</a></li>
</a>
</li>
</ul>
</div>
<!-- <div class="dropdown">-->
<!-- <button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"-->
<!-- type="button" data-bs-toggle="dropdown" aria-expanded="false">-->
<!-- <i class="bi bi-arrow-repeat me-2"></i>Refresh Interval-->
<!-- </button>-->
<!-- -->
<!-- </div>-->

<div class="dropdown">
<button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
<div class="dropdown dropup">
<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots me-2"></i>More
<i class="bi bi-three-dots"></i>
</button>
<ul class="dropdown-menu shadow mt-2 rounded-3">
<ul class="dropdown-menu shadow mt-2 rounded-3 animate__animated animation__fadeInDropdown">
<li>
<h6 class="dropdown-header">Peer Jobs</h6>
</li>
<li>
<a role="button" class="dropdown-item" @click="this.$emit('jobsAll')">
All Active Jobs
Active Jobs
</a>
</li>
<li>
Expand All @@ -165,4 +166,23 @@ export default {

<style scoped>
.animation__fadeInDropdown{
animation-name: fadeInDropdown;
animation-duration: 0.2s;
animation-timing-function: cubic-bezier(0.82, 0.58, 0.17, 0.9);
}
@keyframes fadeInDropdown{
0%{
opacity: 0;
filter: blur(3px);
transform: translateY(-60px);
}
100%{
opacity: 1;
filter: blur(0px);
transform: translateY(-40px);
}
}
</style>

0 comments on commit aa3711c

Please sign in to comment.