Tweak UI
This commit is contained in:
		
							parent
							
								
									481b46ac9e
								
							
						
					
					
						commit
						503f23ad3b
					
				|  | @ -4,7 +4,7 @@ | |||
| 		<div class="title"><slot name="header"></slot></div> | ||||
| 		<div class="sub"> | ||||
| 			<slot name="func"></slot> | ||||
| 			<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody"> | ||||
| 			<button class="_button" v-if="foldable" @click="() => showBody = !showBody"> | ||||
| 				<template v-if="showBody"><Fa :icon="faAngleUp"/></template> | ||||
| 				<template v-else><Fa :icon="faAngleDown"/></template> | ||||
| 			</button> | ||||
|  | @ -42,7 +42,7 @@ export default defineComponent({ | |||
| 			required: false, | ||||
| 			default: false | ||||
| 		}, | ||||
| 		bodyTogglable: { | ||||
| 		foldable: { | ||||
| 			type: Boolean, | ||||
| 			required: false, | ||||
| 			default: false | ||||
|  | @ -99,7 +99,7 @@ export default defineComponent({ | |||
| 	}, | ||||
| 	methods: { | ||||
| 		toggleContent(show: boolean) { | ||||
| 			if (!this.bodyTogglable) return; | ||||
| 			if (!this.foldable) return; | ||||
| 			this.showBody = show; | ||||
| 		}, | ||||
| 
 | ||||
|  |  | |||
|  | @ -36,7 +36,7 @@ | |||
| 			<header><span>{{ $ts.exploreFediverse }}</span></header> | ||||
| 		</div> | ||||
| 
 | ||||
| 		<MkFolder :body-togglable="true" :expanded="false" ref="tags" class="_gap"> | ||||
| 		<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap"> | ||||
| 			<template #header><Fa :icon="faHashtag" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularTags }}</template> | ||||
| 
 | ||||
| 			<div class="vxjfqztj"> | ||||
|  |  | |||
|  | @ -4,7 +4,7 @@ | |||
| 		<template #header><Fa :icon="faHeartbeat"/> {{ $ts.metrics }}</template> | ||||
| 		<div class="_section" style="padding: 0 var(--margin);"> | ||||
| 			<div class="_content"> | ||||
| 				<MkContainer :body-togglable="false" class="_gap"> | ||||
| 				<MkContainer :foldable="false" class="_gap"> | ||||
| 					<template #header><Fa :icon="faMicrochip"/>{{ $ts.cpuAndMemory }}</template> | ||||
| 					<!-- | ||||
| 					<template #func> | ||||
|  | @ -27,7 +27,7 @@ | |||
| 					</div> | ||||
| 				</MkContainer> | ||||
| 
 | ||||
| 				<MkContainer :body-togglable="false" class="_gap"> | ||||
| 				<MkContainer :foldable="false" class="_gap"> | ||||
| 					<template #header><Fa :icon="faHdd"/> {{ $ts.disk }}</template> | ||||
| 					<!-- | ||||
| 					<template #func> | ||||
|  | @ -50,7 +50,7 @@ | |||
| 					</div> | ||||
| 				</MkContainer> | ||||
| 
 | ||||
| 				<MkContainer :body-togglable="false" class="_gap"> | ||||
| 				<MkContainer :foldable="false" class="_gap"> | ||||
| 					<template #header><Fa :icon="faExchangeAlt"/> {{ $ts.network }}</template> | ||||
| 					<!-- | ||||
| 					<template #func> | ||||
|  | @ -78,7 +78,7 @@ | |||
| 		<template #header><Fa :icon="faClipboardList"/> {{ $ts.jobQueue }}</template> | ||||
| 
 | ||||
| 		<div class="vkyrmkwb" :style="{ gridTemplateRows: queueHeight }"> | ||||
| 			<MkContainer :body-togglable="false" :scrollable="true" :resize-base-el="() => $el"> | ||||
| 			<MkContainer :foldable="false" :scrollable="true" :resize-base-el="() => $el"> | ||||
| 				<template #header><Fa :icon="faExclamationTriangle"/> {{ $ts.delayed }}</template> | ||||
| 
 | ||||
| 				<div class="_content"> | ||||
|  |  | |||
|  | @ -6,7 +6,7 @@ | |||
| 		<div class="sboqnrfi" :style="{ gridTemplateRows: overviewHeight }"> | ||||
| 			<MkInstanceStats :chart-limit="300" :detailed="true" class="_gap" ref="stats"/> | ||||
| 
 | ||||
| 			<MkContainer :body-togglable="true" class="_gap"> | ||||
| 			<MkContainer :foldable="true" class="_gap"> | ||||
| 				<template #header><Fa :icon="faInfoCircle"/>{{ $ts.instanceInfo }}</template> | ||||
| 
 | ||||
| 				<div class="_content"> | ||||
|  | @ -19,7 +19,7 @@ | |||
| 				</div> | ||||
| 			</MkContainer> | ||||
| 			 | ||||
| 			<MkContainer :body-togglable="true" :scrollable="true" class="_gap" style="height: 300px;"> | ||||
| 			<MkContainer :foldable="true" :scrollable="true" class="_gap" style="height: 300px;"> | ||||
| 				<template #header><Fa :icon="faDatabase"/>{{ $ts.database }}</template> | ||||
| 
 | ||||
| 				<div class="_content" v-if="dbInfo"> | ||||
|  |  | |||
|  | @ -8,7 +8,7 @@ | |||
| 		<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton> | ||||
| 	</div> | ||||
| 
 | ||||
| 	<MkContainer :body-togglable="true" :expanded="true" class="_gap"> | ||||
| 	<MkContainer :foldable="true" :expanded="true" class="_gap"> | ||||
| 		<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template> | ||||
| 		<div style="padding: 16px;"> | ||||
| 			<MkInput v-model:value="title"> | ||||
|  | @ -44,7 +44,7 @@ | |||
| 		</div> | ||||
| 	</MkContainer> | ||||
| 
 | ||||
| 	<MkContainer :body-togglable="true" :expanded="true" class="_gap"> | ||||
| 	<MkContainer :foldable="true" :expanded="true" class="_gap"> | ||||
| 		<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template> | ||||
| 		<div style="padding: 16px;"> | ||||
| 			<XBlocks class="content" v-model:value="content" :hpml="hpml"/> | ||||
|  | @ -53,7 +53,7 @@ | |||
| 		</div> | ||||
| 	</MkContainer> | ||||
| 
 | ||||
| 	<MkContainer :body-togglable="true" class="_gap"> | ||||
| 	<MkContainer :foldable="true" class="_gap"> | ||||
| 		<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template> | ||||
| 		<div class="qmuvgica"> | ||||
| 			<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5"> | ||||
|  | @ -74,7 +74,7 @@ | |||
| 		</div> | ||||
| 	</MkContainer> | ||||
| 
 | ||||
| 	<MkContainer :body-togglable="true" :expanded="true" class="_gap"> | ||||
| 	<MkContainer :foldable="true" :expanded="true" class="_gap"> | ||||
| 		<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template> | ||||
| 		<div> | ||||
| 			<MkTextarea class="_code" v-model:value="script"/> | ||||
|  |  | |||
|  | @ -5,7 +5,7 @@ | |||
| 		<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton> | ||||
| 	</div> | ||||
| 
 | ||||
| 	<MkContainer :body-togglable="true" class="_gap"> | ||||
| 	<MkContainer :foldable="true" class="_gap"> | ||||
| 		<template #header><Fa fixed-width/>{{ $ts.output }}</template> | ||||
| 		<div class="bepmlvbi"> | ||||
| 			<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <MkContainer :max-height="300"> | ||||
| <MkContainer :max-height="300" :foldable="true"> | ||||
| 	<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $ts.images }}</template> | ||||
| 	<div class="ujigsodd"> | ||||
| 		<MkLoading v-if="fetching"/> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <MkContainer :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable"> | ||||
| <MkContainer :show-header="props.showHeader" :foldable="foldable" :scrollable="scrollable"> | ||||
| 	<template #header><Fa :icon="faGlobe"/>{{ $ts._widgets.federation }}</template> | ||||
| 
 | ||||
| 	<div class="wbrkwalb"> | ||||
|  | @ -42,7 +42,7 @@ export default defineComponent({ | |||
| 		MkContainer, MkMiniChart | ||||
| 	}, | ||||
| 	props: { | ||||
| 		bodyTogglable: { | ||||
| 		foldable: { | ||||
| 			type: Boolean, | ||||
| 			required: false, | ||||
| 			default: false | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue