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

This commit is contained in:
syuilo 2020-07-06 00:03:08 +09:00
parent 462204e204
commit 3799708daf
4 changed files with 16 additions and 4 deletions

View File

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

View File

@ -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;

View File

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

View File

@ -57,6 +57,7 @@ export const defaultDeviceSettings = {
showFixedPostForm: false,
disablePagesScript: true,
enableInfiniteScroll: true,
fixedWidgetsPosition: true,
roomGraphicsQuality: 'medium',
roomUseOrthographicCamera: true,
sfxVolume: 0.3,