Improve usability
This commit is contained in:
		
							parent
							
								
									b79eed01e0
								
							
						
					
					
						commit
						c6dd932a0b
					
				|  | @ -121,7 +121,11 @@ export default defineComponent({ | |||
| 					return this.window(); | ||||
| 				} | ||||
| 
 | ||||
| 				this.$router.push(this.to); | ||||
| 				if (this.$router.currentRoute.value.path === this.to) { | ||||
| 					window.scroll({ top: 0, behavior: 'smooth' }); | ||||
| 				} else { | ||||
| 					this.$router.push(this.to); | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
|  |  | |||
|  | @ -1,12 +1,12 @@ | |||
| <template> | ||||
| <div class="fdidabkb"> | ||||
| 	<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> | ||||
| 	<template v-if="info"> | ||||
| 		<div class="titleContainer"> | ||||
| 			<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"/> | ||||
| 					<span v-if="tab.title" class="text">{{ tab.title }}</span> | ||||
| 				</div> | ||||
|  | @ -20,7 +20,7 @@ | |||
| 				</div> | ||||
| 			</template> | ||||
| 		</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> | ||||
| </div> | ||||
| </template> | ||||
|  |  | |||
|  | @ -3,7 +3,7 @@ | |||
| 	<XSidebar ref="nav" class="sidebar"/> | ||||
| 
 | ||||
| 	<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"/> | ||||
| 		</header> | ||||
| 		<main ref="main"> | ||||
|  | @ -211,6 +211,10 @@ export default defineComponent({ | |||
| 			if (window._scroll) window._scroll(); | ||||
| 		}, | ||||
| 
 | ||||
| 		onHeaderClick() { | ||||
| 			window.scroll({ top: 0, behavior: 'smooth' }); | ||||
| 		}, | ||||
| 
 | ||||
| 		onContextmenu(e) { | ||||
| 			const path = this.$route.path; | ||||
| 			os.contextMenu([{ | ||||
|  | @ -292,6 +296,7 @@ export default defineComponent({ | |||
| 			backdrop-filter: blur(32px); | ||||
| 			background-color: var(--header); | ||||
| 			border-bottom: solid 1px var(--divider); | ||||
| 			user-select: none; | ||||
| 		} | ||||
| 
 | ||||
| 		> main { | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue