mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-30 11:10:40 +00:00
UI: Simplify dropdown design
This commit is contained in:
parent
e4be28a9e7
commit
665bae0806
1 changed files with 64 additions and 16 deletions
|
@ -1,18 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="period-options">
|
<div class="period-options">
|
||||||
{{ $t("show") }}:
|
<button type="button" class="btn btn-light dropdown-toggle btn-period-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<select
|
{{ chartPeriodOptions[chartPeriodHrs] }}
|
||||||
id="chart-period-select"
|
</button>
|
||||||
v-model="chartPeriodHrs"
|
<ul class="dropdown-menu dropdown-menu-end">
|
||||||
class="form-select form-select-sm ms-1"
|
<li v-for="(item, key) in chartPeriodOptions" :key="key">
|
||||||
>
|
<a class="dropdown-item" :class="{ active: chartPeriodHrs == key }" href="#" @click="chartPeriodHrs = key">{{ item }}</a>
|
||||||
<option value="0">{{ $t("recent") }}</option>
|
</li>
|
||||||
<option value="3">3h</option>
|
</ul>
|
||||||
<option value="6">6h</option>
|
|
||||||
<option value="24">24h</option>
|
|
||||||
<option value="168">1w</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<LineChart :chart-data="chartData" :options="chartOptions" />
|
<LineChart :chart-data="chartData" :options="chartOptions" />
|
||||||
|
@ -49,6 +45,14 @@ export default {
|
||||||
// Configurable filtering on top of the returned data
|
// Configurable filtering on top of the returned data
|
||||||
chartPeriodHrs: 0,
|
chartPeriodHrs: 0,
|
||||||
|
|
||||||
|
chartPeriodOptions: {
|
||||||
|
0: this.$t("recent"),
|
||||||
|
3: "3h",
|
||||||
|
6: "6h",
|
||||||
|
24: "24h",
|
||||||
|
168: "1w",
|
||||||
|
},
|
||||||
|
|
||||||
// A heartbeatList for 3h, 6h, 24h, 1w
|
// A heartbeatList for 3h, 6h, 24h, 1w
|
||||||
// Uses the $root.heartbeatList when value is null
|
// Uses the $root.heartbeatList when value is null
|
||||||
heartbeatList: null
|
heartbeatList: null
|
||||||
|
@ -251,15 +255,59 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.period-options {
|
.period-options {
|
||||||
padding: 0.3em 2.2em;
|
padding: 0.1em 1.0em;
|
||||||
margin-bottom: -1.5em;
|
margin-bottom: -2em;
|
||||||
float: right;
|
float: right;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
font-size: 0.8em;
|
|
||||||
|
.dropdown-menu {
|
||||||
|
padding: 0;
|
||||||
|
min-width: 50px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
.dark & {
|
||||||
|
background: $dark-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
padding: 2px 16px 4px 16px;
|
||||||
|
|
||||||
|
.dark & {
|
||||||
|
background: $dark-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark &:hover {
|
||||||
|
background: $dark-font-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark & .dropdown-item.active {
|
||||||
|
background: $primary;
|
||||||
|
color: $dark-font-color2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-period-toggle {
|
||||||
|
padding: 2px 15px;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
color: $link-color;
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
vertical-align: 0.155em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark & {
|
||||||
|
color: $dark-font-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue