From 503f23ad3b359fa2330e7554c4c98be88b1e2ccb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 16 Apr 2021 12:17:22 +0900
Subject: [PATCH] Tweak UI

---
 src/client/components/ui/container.vue       | 6 +++---
 src/client/pages/explore.vue                 | 2 +-
 src/client/pages/instance/index.metrics.vue  | 8 ++++----
 src/client/pages/instance/index.vue          | 4 ++--
 src/client/pages/page-editor/page-editor.vue | 8 ++++----
 src/client/pages/scratchpad.vue              | 2 +-
 src/client/pages/user/index.photos.vue       | 2 +-
 src/client/widgets/federation.vue            | 4 ++--
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index ef90a348b4..ecd48876e8 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -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;
 		},
 
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 7e0acaddf7..dc0803237b 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -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">
diff --git a/src/client/pages/instance/index.metrics.vue b/src/client/pages/instance/index.metrics.vue
index 48844e0681..17ebf5d0d6 100644
--- a/src/client/pages/instance/index.metrics.vue
+++ b/src/client/pages/instance/index.metrics.vue
@@ -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">
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 54a0584ccc..731acd8f00 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -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">
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index f8f81541ff..4583863a1c 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -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"/>
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 3664765d02..1a863e6b2e 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -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>
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index 83cd3e93f5..21d84cef4f 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -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"/>
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index f0a79a31a6..eb17915f08 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -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