Improve usability

This commit is contained in:
syuilo 2020-11-07 12:30:16 +09:00
parent b79eed01e0
commit c6dd932a0b
3 changed files with 14 additions and 5 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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 {