Improve usability
This commit is contained in:
parent
b79eed01e0
commit
c6dd932a0b
3 changed files with 14 additions and 5 deletions
|
@ -121,9 +121,13 @@ export default defineComponent({
|
||||||
return this.window();
|
return this.window();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.$router.currentRoute.value.path === this.to) {
|
||||||
|
window.scroll({ top: 0, behavior: 'smooth' });
|
||||||
|
} else {
|
||||||
this.$router.push(this.to);
|
this.$router.push(this.to);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="fdidabkb">
|
<div class="fdidabkb">
|
||||||
<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
|
<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
|
||||||
<button class="_button back" v-if="withBack && canBack" @click="back()"><Fa :icon="faChevronLeft"/></button>
|
<button class="_button back" v-if="withBack && canBack" @click.stop="back()"><Fa :icon="faChevronLeft"/></button>
|
||||||
</transition>
|
</transition>
|
||||||
<template v-if="info">
|
<template v-if="info">
|
||||||
<div class="titleContainer">
|
<div class="titleContainer">
|
||||||
<template v-if="info.tabs">
|
<template v-if="info.tabs">
|
||||||
<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click="tab.onClick" v-tooltip="tab.tooltip">
|
<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
|
||||||
<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
|
<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
|
||||||
<span v-if="tab.title" class="text">{{ tab.title }}</span>
|
<span v-if="tab.title" class="text">{{ tab.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<button class="_button action" v-if="info.action" @click="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
|
<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<XSidebar ref="nav" class="sidebar"/>
|
<XSidebar ref="nav" class="sidebar"/>
|
||||||
|
|
||||||
<div class="contents" ref="contents" :class="{ wallpaper }">
|
<div class="contents" ref="contents" :class="{ wallpaper }">
|
||||||
<header class="header" ref="header" @contextmenu.prevent.stop="onContextmenu">
|
<header class="header" ref="header" @contextmenu.prevent.stop="onContextmenu" @click="onHeaderClick">
|
||||||
<XHeader :info="pageInfo"/>
|
<XHeader :info="pageInfo"/>
|
||||||
</header>
|
</header>
|
||||||
<main ref="main">
|
<main ref="main">
|
||||||
|
@ -211,6 +211,10 @@ export default defineComponent({
|
||||||
if (window._scroll) window._scroll();
|
if (window._scroll) window._scroll();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onHeaderClick() {
|
||||||
|
window.scroll({ top: 0, behavior: 'smooth' });
|
||||||
|
},
|
||||||
|
|
||||||
onContextmenu(e) {
|
onContextmenu(e) {
|
||||||
const path = this.$route.path;
|
const path = this.$route.path;
|
||||||
os.contextMenu([{
|
os.contextMenu([{
|
||||||
|
@ -292,6 +296,7 @@ export default defineComponent({
|
||||||
backdrop-filter: blur(32px);
|
backdrop-filter: blur(32px);
|
||||||
background-color: var(--header);
|
background-color: var(--header);
|
||||||
border-bottom: solid 1px var(--divider);
|
border-bottom: solid 1px var(--divider);
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
> main {
|
> main {
|
||||||
|
|
Loading…
Reference in a new issue