From 758a31f4ae19aef89245219bd638c0ec4e4d8a26 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 6 Jul 2020 00:03:08 +0900
Subject: [PATCH] =?UTF-8?q?feat(client):=20=E3=82=A6=E3=82=A3=E3=82=B8?=
 =?UTF-8?q?=E3=82=A7=E3=83=83=E3=83=88=E3=82=92=E7=94=BB=E9=9D=A2=E3=82=B9?=
 =?UTF-8?q?=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=AB=E9=80=A3=E5=8B=95?=
 =?UTF-8?q?=E3=81=95=E3=81=9B=E3=82=8B=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7?=
 =?UTF-8?q?=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                      |  1 +
 src/client/app.vue                     | 12 ++++++++----
 src/client/pages/preferences/index.vue |  6 ++++++
 src/client/store.ts                    |  1 +
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 774802379..95e03babc 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -515,6 +515,7 @@ enableInfiniteScroll: "自動でもっと見る"
 visibility: "公開範囲"
 poll: "アンケート"
 useCw: "内容を隠す"
+fixedWidgetsPosition: "ウィジェットの位置を固定する"
 
 _theme:
   explore: "テーマを探す"
diff --git a/src/client/app.vue b/src/client/app.vue
index 89ee4c7eb..673949ce1 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -87,7 +87,7 @@
 		</main>
 
 		<template v-if="isDesktop">
-			<div class="widgets" :class="{ edit: widgetsEditMode }" v-for="place in ['left', 'right']" :key="place">
+			<div class="widgets" :class="{ edit: widgetsEditMode, fixed: $store.state.device.fixedWidgetsPosition }" v-for="place in ['left', 'right']" :key="place">
 				<template v-if="widgetsEditMode">
 					<mk-button primary @click="addWidget(place)" class="add"><fa :icon="faPlus"/></mk-button>
 					<x-draggable
@@ -988,13 +988,17 @@ export default Vue.extend({
 		}
 
 		> .widgets {
-			position: sticky;
 			top: $header-height;
-			height: calc(100vh - #{$header-height});
+			min-height: calc(100vh - #{$header-height});
 			padding: 0 var(--margin);
-			overflow: auto;
 			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
 
+			&.fixed {
+				position: sticky;
+				height: calc(100vh - #{$header-height});
+				overflow: auto;
+			}
+
 			&:first-of-type {
 				order: -1;
 
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 148b4a97b..f3a6f1db2 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -68,6 +68,7 @@
 			</mk-switch>
 			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
 			<mk-switch v-model="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</mk-switch>
+			<mk-switch v-model="fixedWidgetsPosition">{{ $t('fixedWidgetsPosition') }}</mk-switch>
 			<mk-switch v-model="disablePagesScript">{{ $t('disablePagesScript') }}</mk-switch>
 		</div>
 		<div class="_content">
@@ -188,6 +189,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/setInfiniteScrollEnabling', value); }
 		},
 
+		fixedWidgetsPosition: {
+			get() { return this.$store.state.device.fixedWidgetsPosition; },
+			set(value) { this.$store.commit('device/set', { key: 'fixedWidgetsPosition', value }); }
+		},
+
 		sfxVolume: {
 			get() { return this.$store.state.device.sfxVolume; },
 			set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value: parseFloat(value, 10) }); }
diff --git a/src/client/store.ts b/src/client/store.ts
index 3eb221b5c..bf1bdf1a8 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -57,6 +57,7 @@ export const defaultDeviceSettings = {
 	showFixedPostForm: false,
 	disablePagesScript: true,
 	enableInfiniteScroll: true,
+	fixedWidgetsPosition: true,
 	roomGraphicsQuality: 'medium',
 	roomUseOrthographicCamera: true,
 	sfxVolume: 0.3,