From ab0b650696df075a666137c67ff48a2f526e32d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 5 Mar 2018 20:09:26 +0900
Subject: [PATCH] #1184

---
 .../app/common/views/components/switch.vue    |  1 +
 .../app/desktop/views/components/posts.vue    | 22 ++++++++++++-----
 .../app/desktop/views/components/settings.vue | 24 +++++++++++++++++++
 .../app/desktop/views/components/timeline.vue | 12 ++++++----
 4 files changed, 48 insertions(+), 11 deletions(-)

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') {