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…
	
	Add table
		Add a link
		
	
		Reference in a new issue