diff --git a/src/web/app/common/views/components/switch.vue b/src/web/app/common/views/components/switch.vue index cfc2f38e2d..19a4adc3de 100644 --- a/src/web/app/common/views/components/switch.vue +++ b/src/web/app/common/views/components/switch.vue @@ -56,6 +56,7 @@ export default Vue.extend({ }, watch: { value() { + (this.$el).style.transition = 'all 0.3s'; (this.$refs.input as any).checked = this.checked; } }, diff --git a/src/web/app/desktop/views/components/posts.vue b/src/web/app/desktop/views/components/posts.vue index ec36889ec8..ffceff8762 100644 --- a/src/web/app/desktop/views/components/posts.vue +++ b/src/web/app/desktop/views/components/posts.vue @@ -69,11 +69,21 @@ export default Vue.extend({ margin-right 8px > footer - padding 16px - text-align center - color #ccc - border-top solid 1px #eaeaea - border-bottom-left-radius 4px - border-bottom-right-radius 4px + > * + display block + margin 0 + padding 16px + width 100% + text-align center + color #ccc + border-top solid 1px #eaeaea + border-bottom-left-radius 4px + border-bottom-right-radius 4px + > button + &:hover + background #f5f5f5 + + &:active + background #eee </style> diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue index a2c929152e..3278efb9ca 100644 --- a/src/web/app/desktop/views/components/settings.vue +++ b/src/web/app/desktop/views/components/settings.vue @@ -18,6 +18,13 @@ <x-profile/> </section> + <section class="web" v-show="page == 'web'"> + <h1>動作</h1> + <mk-switch v-model="fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み"> + <span>ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。</span> + </mk-switch> + </section> + <section class="web" v-show="page == 'web'"> <h1>デザイン</h1> <div class="div"> @@ -186,6 +193,7 @@ export default Vue.extend({ version, latestVersion: undefined, checkingForUpdate: false, + fetchOnScroll: true, autoWatch: true, enableSounds: localStorage.getItem('enableSounds') == 'true', lang: localStorage.getItem('lang') || '', @@ -223,6 +231,16 @@ export default Vue.extend({ if ((this as any).os.i.settings.auto_watch != null) { this.autoWatch = (this as any).os.i.settings.auto_watch; + this.$watch('os.i.settings.auto_watch', v => { + this.autoWatch = v; + }); + } + + if ((this as any).os.i.client_settings.fetchOnScroll != null) { + this.fetchOnScroll = (this as any).os.i.client_settings.fetchOnScroll; + this.$watch('os.i.client_settings.fetchOnScroll', v => { + this.fetchOnScroll = v; + }); } }, methods: { @@ -230,6 +248,12 @@ export default Vue.extend({ this.$router.push('/i/customize-home'); this.$emit('done'); }, + onChangeFetchOnScroll(v) { + (this as any).api('i/update_client_setting', { + name: 'fetchOnScroll', + value: v + }); + }, onChangeAutoWatch(v) { (this as any).api('i/update', { auto_watch: v diff --git a/src/web/app/desktop/views/components/timeline.vue b/src/web/app/desktop/views/components/timeline.vue index c35baa159e..99889c3cc2 100644 --- a/src/web/app/desktop/views/components/timeline.vue +++ b/src/web/app/desktop/views/components/timeline.vue @@ -8,10 +8,10 @@ %fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。 </p> <mk-posts :posts="posts" ref="timeline"> - <div slot="footer"> - <template v-if="!moreFetching">%fa:comments%</template> + <button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> + <template v-if="!moreFetching">もっと見る</template> <template v-if="moreFetching">%fa:spinner .pulse .fw%</template> - </div> + </button> </mk-posts> </div> </template> @@ -105,8 +105,10 @@ export default Vue.extend({ this.fetch(); }, onScroll() { - const current = window.scrollY + window.innerHeight; - if (current > document.body.offsetHeight - 8) this.more(); + if ((this as any).os.i.client_settings.fetchOnScroll !== false) { + const current = window.scrollY + window.innerHeight; + if (current > document.body.offsetHeight - 8) this.more(); + } }, onKeydown(e) { if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {