feat(client): ウィジェットを画面スクロールに連動させるオプション

locales/ja-JP.yml

@@ -515,6 +515,7 @@ enableInfiniteScroll: "自動でもっと見る"
 visibility: "公開範囲"
 poll: "アンケート"
 useCw: "内容を隠す"
+fixedWidgetsPosition: "ウィジェットの位置を固定する"
 
 _theme:
   explore: "テーマを探す"

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;
 

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) }); }

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,