TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-05-22 06:52:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Change the style of the sorting dropdown button

Browse source
This commit is contained in:
Marshu 2025-04-20 01:09:50 +08:00
parent ae6a44e736
commit c45660e49c
2 changed files with 82 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/components/PublicGroupList.vue
View file

@ -19,12 +19,22 @@
<div v-if="group.element && group.element.monitorList && group.element.monitorList.length > 1" class="sort-dropdown"> <div v-if="group.element && group.element.monitorList && group.element.monitorList.length > 1" class="sort-dropdown">
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button" :id="'sortDropdown' + group.index" data-bs-toggle="dropdown" aria-expanded="false">
{{ $t("Sort By") }} <div class="sort-arrows">
<span v-if="group.element.sortKey" class="ms-1"> <font-awesome-icon
<span class="sort-direction-indicator"> icon="arrow-down"
{{ getSortDirectionSymbol(group.element) }} :class="{
</span> 'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'desc',
</span> 'arrow-active': group.element.sortKey && group.element.sortDirection === 'desc'
}"
/>
<font-awesome-icon
icon="arrow-up"
:class="{
'arrow-inactive': !group.element.sortKey || group.element.sortDirection !== 'asc',
'arrow-active': group.element.sortKey && group.element.sortDirection === 'asc'
}"
/>
</div>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end sort-menu" :aria-labelledby="'sortDropdown' + group.index"> <ul class="dropdown-menu dropdown-menu-end sort-menu" :aria-labelledby="'sortDropdown' + group.index">
<li> <li>
@ -32,7 +42,10 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Status") }}</span> <span>{{ $t("Status") }}</span>
<span v-if="getSortKey(group.element) === 'status'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'status'" class="sort-indicators">
<span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span> <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1"
/>
</span> </span>
</div> </div>
</a> </a>
@ -42,7 +55,10 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Name") }}</span> <span>{{ $t("Name") }}</span>
<span v-if="getSortKey(group.element) === 'name'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'name'" class="sort-indicators">
<span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span> <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1"
/>
</span> </span>
</div> </div>
</a> </a>
@ -52,7 +68,10 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Uptime") }}</span> <span>{{ $t("Uptime") }}</span>
<span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'uptime'" class="sort-indicators">
<span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span> <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1"
/>
</span> </span>
</div> </div>
</a> </a>
@ -62,7 +81,10 @@
<div class="sort-item-content"> <div class="sort-item-content">
<span>{{ $t("Cert Exp.") }}</span> <span>{{ $t("Cert Exp.") }}</span>
<span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators"> <span v-if="getSortKey(group.element) === 'cert'" class="sort-indicators">
<span class="sort-direction-indicator">{{ getSortDirectionSymbol(group.element) }}</span> <font-awesome-icon
:icon="group.element.sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'"
class="arrow-active me-1"
/>
</span> </span>
</div> </div>
</a> </a>
@ -647,21 +669,64 @@ export default {
} }
.sort-button { .sort-button {
min-width: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
padding: 0.3rem 0.7rem; padding: 0.3rem 0.6rem;
min-width: 40px;
border-radius: 10px;
background-color: white;
border: none;
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
transition: all ease-in-out 0.15s;
&:hover {
background-color: #f8f9fa;
}
&:focus, &:active {
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
border: none;
outline: none;
}
}
.sort-arrows {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 2px;
}
.arrow-inactive {
color: #aaa;
font-size: 0.7rem;
opacity: 0.5;
}
.arrow-active {
color: #4caf50;
font-size: 0.8rem;
} }
.sort-menu { .sort-menu {
min-width: auto; min-width: auto;
width: auto; width: auto;
padding: 0.2rem 0; padding: 0.2rem 0;
border-radius: 10px;
border: none;
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
overflow: hidden;
} }
.sort-item { .sort-item {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
&:hover {
background-color: #f8f9fa;
}
} }
.sort-item-content { .sort-item-content {

4
src/icon.js
View file

@ -8,6 +8,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// 2) add the icon name to the library.add() statement below. // 2) add the icon name to the library.add() statement below.
import { import {
faArrowAltCircleUp, faArrowAltCircleUp,
faArrowDown,
faArrowUp,
faCog, faCog,
faEdit, faEdit,
faEye, faEye,
@ -54,6 +56,8 @@ import {
library.add( library.add(
faArrowAltCircleUp, faArrowAltCircleUp,
faArrowDown,
faArrowUp,
faCog, faCog,
faEdit, faEdit,
faEye, faEye,