heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

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

12
src/client/app.vue
View file

@ -87,7 +87,7 @@
</main> </main>
<template v-if="isDesktop"> <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"> <template v-if="widgetsEditMode">
<mk-button primary @click="addWidget(place)" class="add"><fa :icon="faPlus"/></mk-button> <mk-button primary @click="addWidget(place)" class="add"><fa :icon="faPlus"/></mk-button>
<x-draggable <x-draggable
@ -988,13 +988,17 @@ export default Vue.extend({
} }
> .widgets { > .widgets {
position: sticky;
top: $header-height; top: $header-height;
height: calc(100vh - #{$header-height}); min-height: calc(100vh - #{$header-height});
padding: 0 var(--margin); padding: 0 var(--margin);
overflow: auto;
box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider); 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 { &:first-of-type {
order: -1; order: -1;

6
src/client/pages/preferences/index.vue
View file

@ -68,6 +68,7 @@
</mk-switch> </mk-switch>
<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch> <mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
<mk-switch v-model="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</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> <mk-switch v-model="disablePagesScript">{{ $t('disablePagesScript') }}</mk-switch>
</div> </div>
<div class="_content"> <div class="_content">
@ -188,6 +189,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/setInfiniteScrollEnabling', value); } 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: { sfxVolume: {
get() { return this.$store.state.device.sfxVolume; }, get() { return this.$store.state.device.sfxVolume; },
set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value: parseFloat(value, 10) }); } set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value: parseFloat(value, 10) }); }

1
src/client/store.ts
View file

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