From d4c4e30fe4b08bf03b9e7dc6be568aba8b15ae47 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 11 Apr 2021 12:31:24 +0900
Subject: [PATCH] Tweak UI

---
 src/client/components/abuse-report-window.vue  | 18 +++++++-----------
 src/client/components/drive.vue                |  2 +-
 .../components/notification-setting-window.vue |  4 ++--
 src/client/style.scss                          | 10 ++++++++++
 src/client/ui/_common_/header.vue              |  9 ++++++++-
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/client/components/abuse-report-window.vue b/src/client/components/abuse-report-window.vue
index 35732d573..e92bd69ef 100644
--- a/src/client/components/abuse-report-window.vue
+++ b/src/client/components/abuse-report-window.vue
@@ -9,18 +9,14 @@
 		</I18n>
 	</template>
 	<div class="dpvffvvy">
-		<div class="_section">
-			<div class="_content">
-				<MkTextarea v-model:value="comment">
-					<span>{{ $ts.details }}</span>
-					<template #desc>{{ $ts.fillAbuseReportDescription }}</template>
-				</MkTextarea>
-			</div>
+		<div class="_root">
+			<MkTextarea v-model:value="comment">
+				<span>{{ $ts.details }}</span>
+				<template #desc>{{ $ts.fillAbuseReportDescription }}</template>
+			</MkTextarea>
 		</div>
-		<div class="_section">
-			<div class="_content">
-				<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
-			</div>
+		<div class="_root">
+			<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
 		</div>
 	</div>
 </XWindow>
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 2c8c16c48..103ae9c11 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -11,7 +11,7 @@
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 	</nav>
-	<div class="main _section" :class="{ uploading: uploadings.length > 0, fetching }"
+	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
 		ref="main"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"
diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue
index a3e221f7b..3d1749797 100644
--- a/src/client/components/notification-setting-window.vue
+++ b/src/client/components/notification-setting-window.vue
@@ -9,13 +9,13 @@
 	@closed="$emit('closed')"
 >
 	<template #header>{{ $ts.notificationSetting }}</template>
-	<div v-if="showGlobalToggle" class="_section">
+	<div v-if="showGlobalToggle" class="_root">
 		<MkSwitch v-model:value="useGlobalSetting">
 			{{ $ts.useGlobalSetting }}
 			<template #desc>{{ $ts.useGlobalSettingDesc }}</template>
 		</MkSwitch>
 	</div>
-	<div v-if="!useGlobalSetting" class="_section">
+	<div v-if="!useGlobalSetting" class="_root">
 		<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
 		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
 		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
diff --git a/src/client/style.scss b/src/client/style.scss
index a02cd1a48..62e3e3c93 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -336,11 +336,21 @@ hr {
 
 	._hr {
 		margin: var(--margin) calc(var(--root-margin, 32px) * -1);
+		border-top: solid 0.5px var(--divider);
 	}
 
 	@media (max-width: 500px) {
 		--root-margin: 10px;
 	}
+
+	& + ._root {
+		&:before {
+			content: "";
+			display: block;
+			margin: var(--root-margin) calc(var(--root-margin, 32px) * -1);
+			border-top: solid 0.5px var(--divider);
+		}
+	}
 }
 
 ._flat_ {
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index 6b09e3122..347c60f02 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -99,7 +99,14 @@ export default defineComponent({
 		},
 
 		menu(ev) {
-			const menu = this.info.menu ? this.info.menu() : [];
+			let menu = this.info.menu ? this.info.menu() : [];
+			if (!this.showActions && this.info.actions) {
+				menu = [...this.info.actions.map(x => ({
+					text: x.text,
+					icon: x.icon,
+					action: x.handler
+				})), menu.length > 0 ? null : undefined, ...menu];
+			}
 			if (this.info.share) {
 				if (menu.length > 0) menu.push(null);
 				menu.push({