mudhorn/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-09-20 15:57:46 -07:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix: Fix page transition & improve active handling

Browse source 
Fix: Fix current route parsing
This commit is contained in:
Nelson Chan 2021-11-04 22:12:52 +08:00
parent 369cad90c1
commit 1a218aaa17
2 changed files with 42 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/pages/Settings.vue
View file

@ -1,46 +1,45 @@
<template>
<transition name="slide-fade" appear>
<div>
<h1 v-show="show" class="mb-3">
{{ $t("Settings") }}
</h1>
<div>
<h1 v-show="show" class="mb-3">
{{ $t("Settings") }}
</h1>
<div class="shadow-box">
<div class="row">
<div class="settings-menu">
<router-link
v-for="(item, key) in subMenus"
:key="key"
:to="`/settings/${item.path}`"
>
<div
class="menu-item"
:class="{ active: $route.name == `settings-${key}` }"
>
{{ item.title }}
</div>
</router-link>
<div class="shadow-box">
<div class="row">
<div class="settings-menu">
<router-link
v-for="(item, key) in subMenus"
:key="key"
:to="`/settings/${key}`"
>
<div class="menu-item">
{{ item.title }}
</div>
</router-link>
</div>
<div class="settings-content">
<div class="settings-content-header">
{{ subMenus[currentPage].title }}
</div>
<div class="settings-content">
<div class="settings-content-header">
{{ subMenus[$route.name.split("-")[1]].title }}
</div>
<div class="mx-3">
<router-view />
</div>
<div class="mx-3">
<router-view v-slot="{ Component }">
<transition name="slide-fade" appear>
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
import { useRoute } from "vue-router";
export default {
data() {
return {
show: true,
settings: {},
@ -49,36 +48,39 @@ export default {
subMenus: {
general: {
title: this.$t("General"),
path: "general",
},
appearance: {
title: this.$t("Appearance"),
path: "appearance",
},
notifications: {
title: this.$t("Notifications"),
path: "notifications",
},
monitorHistory: {
"monitor-history": {
title: this.$t("Monitor History"),
path: "monitor-history",
},
security: {
title: this.$t("Security"),
path: "security",
},
backup: {
title: this.$t("Backup"),
path: "backup",
},
about: {
title: this.$t("About"),
path: "about",
}
},
},
};
},
computed: {
currentPage() {
let pathEnd = useRoute().path.split("/").at(-1);
if (pathEnd == "settings" || pathEnd == null) {
return "general";
}
return pathEnd;
},
},
mounted() {
this.loadSettings();
},
@ -120,7 +122,6 @@ export default {
.shadow-box {
padding: 20px;
min-height: calc(100vh - 155px);
max-height: calc(100vh - 30px);
}
footer {
@ -154,7 +155,7 @@ footer {
}
}
.menu-item.active {
.active .menu-item {
background: $highlight-white;
border-left: 4px solid $primary;
border-top-left-radius: 0;

7
src/router.js
View file

@ -71,37 +71,30 @@ const routes = [
{
path: "general",
alias: "",
name: "settings-general",
component: General,
},
{
path: "appearance",
name: "settings-appearance",
component: Appearance,
},
{
path: "notifications",
name: "settings-notifications",
component: Notifications,
},
{
path: "monitor-history",
name: "settings-monitorHistory",
component: MonitorHistory,
},
{
path: "security",
name: "settings-security",
component: Security,
},
{
path: "backup",
name: "settings-backup",
component: Backup,
},
{
path: "about",
name: "settings-about",
component: About,
},
]