From 32de11c4bbaa92cff645b8addaae11b06c5a412c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 20 May 2018 09:04:48 +0900
Subject: [PATCH] wip

---
 locales/ja.yml                                |  38 ++++-
 src/client/app/app.styl                       |   5 +
 src/client/app/mobile/script.ts               |   3 +-
 .../app/mobile/views/pages/settings.vue       | 159 +++++++++++++++++-
 .../views/pages/settings/settings.profile.vue |  72 ++------
 src/client/md.scss                            |   2 +-
 6 files changed, 207 insertions(+), 72 deletions(-)

diff --git a/locales/ja.yml b/locales/ja.yml
index bb10dfb4f..2d50fbbaf 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -807,18 +807,13 @@ mobile/views/pages/notifications.vue:
   read-all: "すべての通知を既読にしますか？"
 
 mobile/views/pages/settings/settings.profile.vue:
-  title: "プロフィール設定"
+  title: "プロフィール"
   will-be-published: "これらのプロフィールは公開されます。"
   name: "名前"
   location: "場所"
   description: "自己紹介"
   birthday: "誕生日"
-  avatar: "アイコン"
-  banner: "バナー"
-  avatar-saved: "アイコンを保存しました"
-  banner-saved: "バナーを保存しました"
-  set-avatar: "アイコンを選択する"
-  set-banner: "バナーを選択する"
+  is-bot: "このアカウントはBotです"
   save: "保存"
   saved: "プロフィールを保存しました"
 
@@ -831,9 +826,34 @@ mobile/views/pages/selectdrive.vue:
 
 mobile/views/pages/settings.vue:
   signed-in-as: "{}としてサインイン中"
-  profile: "プロフィール"
+  lang: "言語"
+  lang-tip: "変更はページの再読み込み後に反映されます。"
+  recommended: "推奨"
+  auto: "自動"
+  specify-language: "言語を指定"
+  design: "デザインと表示"
+  dark-mode: "ダークモード"
+  circle-icons: "円形のアイコンを使用"
+  timeline: "タイムライン"
+  show-reply-target: "リプライ先を表示する"
+  show-my-renotes: "自分の行ったRenoteを表示する"
+  show-renoted-my-notes: "Renoteされた自分の投稿を表示する"
+  behavior: "動作"
+  fetch-on-scroll: "スクロールで自動読み込み"
+  disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
   twitter: "Twitter連携"
-  signin-history: "サインイン履歴"
+  twitter-connect: "Twitterアカウントに接続する"
+  twitter-reconnect: "再接続する"
+  twitter-disconnect: "切断する"
+  update: "Misskey Update"
+  version: "バージョン:"
+  latest-version: "最新のバージョン:"
+  update-checking: "アップデートを確認中"
+  check-for-updates: "アップデートを確認"
+  no-updates: "利用可能な更新はありません"
+  no-updates-desc: "お使いのMisskeyは最新です。"
+  update-available: "新しいバージョンが利用可能です"
+  update-available-desc: "ページを再度読み込みすると更新が適用されます。"
   settings: "設定"
   signout: "サインアウト"
 
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 431b9daa6..ba694b73a 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -7,6 +7,11 @@ html
 			cursor progress !important
 
 body
+	// for md
+	font-size 16px !important
+	line-height initial !important
+	letter-spacing initial !important
+
 	overflow-wrap break-word
 
 #error
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 427c177a1..ac7f29686 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -5,7 +5,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch } from 'vue-material/dist/components';
+import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader } from 'vue-material/dist/components';
 import 'vue-material/dist/vue-material.min.css';
 import 'vue-material/dist/theme/default.css';
 
@@ -46,6 +46,7 @@ Vue.use(MdField);
 Vue.use(MdMenu);
 Vue.use(MdList);
 Vue.use(MdSwitch);
+Vue.use(MdSubheader);
 
 /**
  * init
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index b16860d62..2e4ae5ce3 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -6,9 +6,9 @@
 		<div>
 			<x-profile/>
 
-			<md-card class="md-layout-item md-size-50 md-small-size-100">
+			<md-card>
 				<md-card-header>
-					<div class="md-title">%i18n:@design%</div>
+					<div class="md-title">%fa:palette% %i18n:@design%</div>
 				</md-card-header>
 
 				<md-card-content>
@@ -19,6 +19,95 @@
 					<div>
 						<md-switch v-model="clientSettings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</md-switch>
 					</div>
+
+					<div>
+						<div class="md-body-2">%i18n:@timeline%</div>
+
+						<div>
+							<md-switch v-model="clientSettings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</md-switch>
+						</div>
+
+						<div>
+							<md-switch v-model="clientSettings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</md-switch>
+						</div>
+
+						<div>
+							<md-switch v-model="clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</md-switch>
+						</div>
+					</div>
+				</md-card-content>
+			</md-card>
+
+			<md-card>
+				<md-card-header>
+					<div class="md-title">%fa:cog% %i18n:@behavior%</div>
+				</md-card-header>
+
+				<md-card-content>
+					<div>
+						<md-switch v-model="clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</md-switch>
+					</div>
+
+					<div>
+						<md-switch v-model="clientSettings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</md-switch>
+					</div>
+				</md-card-content>
+			</md-card>
+
+			<md-card>
+				<md-card-header>
+					<div class="md-title">%fa:language% %i18n:@lang%</div>
+				</md-card-header>
+
+				<md-card-content>
+					<md-field>
+						<md-select v-model="lang" placeholder="%i18n:@auto%">
+							<md-optgroup label="%i18n:@recommended%">
+								<md-option value="">%i18n:@auto%</md-option>
+							</md-optgroup>
+
+							<md-optgroup label="%i18n:@specify-language%">
+								<md-option value="ja">日本語</md-option>
+								<md-option value="en">English</md-option>
+								<md-option value="fr">Français</md-option>
+								<md-option value="pl">Polski</md-option>
+								<md-option value="de">Deutsch</md-option>
+							</md-optgroup>
+						</md-select>
+					</md-field>
+					<span class="md-helper-text">%fa:info-circle% %i18n:@lang-tip%</span>
+				</md-card-content>
+			</md-card>
+
+			<md-card>
+				<md-card-header>
+					<div class="md-title">%fa:B twitter% %i18n:@twitter%</div>
+				</md-card-header>
+
+				<md-card-content>
+					<p class="account" v-if="os.i.twitter"><a :href="`https://twitter.com/${os.i.twitter.screenName}`" target="_blank">@{{ os.i.twitter.screenName }}</a></p>
+					<p>
+						<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ os.i.twitter ? '%i18n:!@twitter-reconnect%' : '%i18n:!@twitter-connect%' }}</a>
+						<span v-if="os.i.twitter"> or </span>
+						<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="os.i.twitter">%i18n:@twitter-disconnect%</a>
+					</p>
+				</md-card-content>
+			</md-card>
+
+			<md-card>
+				<md-card-header>
+					<div class="md-title">%fa:sync-alt% %i18n:@update%</div>
+				</md-card-header>
+
+				<md-card-content>
+					<div>%i18n:@version% <i>{{ version }}</i></div>
+					<template v-if="latestVersion !== undefined">
+						<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
+					</template>
+					<md-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
+						<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
+						<template v-else>%i18n:@check-for-updates%</template>
+					</md-button>
 				</md-card-content>
 			</md-card>
 		</div>
@@ -29,7 +118,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { version, codename } from '../../../config';
+import { apiUrl, version, codename } from '../../../config';
+import checkForUpdate from '../../../common/scripts/check-for-update';
 
 import XProfile from './settings/settings.profile.vue';
 
@@ -40,9 +130,13 @@ export default Vue.extend({
 
 	data() {
 		return {
+			apiUrl,
 			version,
 			codename,
-			darkmode: localStorage.getItem('darkmode') == 'true'
+			darkmode: localStorage.getItem('darkmode') == 'true',
+			lang: localStorage.getItem('lang') || '',
+			latestVersion: undefined,
+			checkingForUpdate: false
 		};
 	},
 
@@ -55,6 +149,9 @@ export default Vue.extend({
 	watch: {
 		darkmode() {
 			(this as any)._updateDarkmode_(this.darkmode);
+		},
+		lang() {
+			localStorage.setItem('lang', this.lang);
 		}
 	},
 
@@ -67,11 +164,65 @@ export default Vue.extend({
 			(this as any).os.signout();
 		},
 
+		onChangeFetchOnScroll(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'fetchOnScroll',
+				value: v
+			});
+		},
+
+		onChangeDisableViaMobile(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'disableViaMobile',
+				value: v
+			});
+		},
+
 		onChangeCircleIcons(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'circleIcons',
 				value: v
 			});
+		},
+
+		onChangeShowReplyTarget(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'showReplyTarget',
+				value: v
+			});
+		},
+
+		onChangeShowMyRenotes(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'showMyRenotes',
+				value: v
+			});
+		},
+
+		onChangeShowRenotedMyNotes(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'showRenotedMyNotes',
+				value: v
+			});
+		},
+
+		checkForUpdate() {
+			this.checkingForUpdate = true;
+			checkForUpdate((this as any).os, true, true).then(newer => {
+				this.checkingForUpdate = false;
+				this.latestVersion = newer;
+				if (newer == null) {
+					(this as any).apis.dialog({
+						title: '%i18n:!@no-updates%',
+						text: '%i18n:!@no-updates-desc%'
+					});
+				} else {
+					(this as any).apis.dialog({
+						title: '%i18n:!@update-available%',
+						text: '%i18n:!@update-available-desc%'
+					});
+				}
+			});
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue
index 6b5d07cce..b81f9a807 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -1,7 +1,7 @@
 <template>
-	<md-card class="md-layout-item md-size-50 md-small-size-100">
+	<md-card>
 		<md-card-header>
-			<div class="md-title">%i18n:@title%</div>
+			<div class="md-title">%fa:pencil-alt% %i18n:@title%</div>
 		</md-card-header>
 
 		<md-card-content>
@@ -10,41 +10,25 @@
 				<md-input v-model="name" :disabled="saving"/>
 			</md-field>
 
-			<md-field>
-				<label>%i18n:@location%</label>
-				<md-input v-model="location" :disabled="saving"/>
-			</md-field>
-
 			<md-field>
 				<label>%i18n:@description%</label>
 				<md-textarea v-model="description" :disabled="saving"/>
 			</md-field>
 
 			<md-field>
+				<md-icon>%fa:map-marker-alt%</md-icon>
+				<label>%i18n:@location%</label>
+				<md-input v-model="location" :disabled="saving"/>
+			</md-field>
+
+			<md-field>
+				<md-icon>%fa:birthday-cake%</md-icon>
 				<label>%i18n:@birthday%</label>
 				<md-input type="date" v-model="birthday" :disabled="saving"/>
 			</md-field>
 
 			<div>
-				<div class="md-body-2">%i18n:@avatar%</div>
-				<md-menu md-direction="bottom-end" :md-close-on-select="true">
-					<md-button md-menu-trigger>%i18n:@set-avatar%</md-button>
-					<md-menu-content>
-						<md-menu-item @click="uploadAvatar">%i18n:@upload-avatar%</md-menu-item>
-						<md-menu-item @click="chooseAvatar">%i18n:@choose-avatar%</md-menu-item>
-					</md-menu-content>
-				</md-menu>
-			</div>
-
-			<div>
-				<div class="md-body-2">%i18n:@banner%</div>
-				<md-menu md-direction="bottom-end" :md-close-on-select="true">
-					<md-button md-menu-trigger>%i18n:@set-banner%</md-button>
-					<md-menu-content>
-						<md-menu-item @click="uploadAvatar">%i18n:@upload-banner%</md-menu-item>
-						<md-menu-item @click="chooseAvatar">%i18n:@choose-banner%</md-menu-item>
-					</md-menu-content>
-				</md-menu>
+				<md-switch v-model="os.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</md-switch>
 			</div>
 		</md-card-content>
 
@@ -67,47 +51,21 @@ export default Vue.extend({
 			saving: false
 		};
 	},
+
 	created() {
 		this.name = (this as any).os.i.name || '';
 		this.location = (this as any).os.i.profile.location;
 		this.description = (this as any).os.i.description;
 		this.birthday = (this as any).os.i.profile.birthday;
 	},
+
 	methods: {
-		chooseAvatar() {
-			(this as any).apis.chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.avatarSaving = true;
-
-				(this as any).api('i/update', {
-					avatarId: file.id
-				}).then(() => {
-					this.avatarSaving = false;
-					alert('%i18n:!@avatar-saved%');
-				});
+		onChangeIsBot() {
+			(this as any).api('i/update', {
+				isBot: (this as any).os.i.isBot
 			});
 		},
-		chooseBanner() {
-			(this as any).apis.chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.bannerSaving = true;
 
-				(this as any).api('i/update', {
-					bannerId: file.id
-				}).then(() => {
-					this.bannerSaving = false;
-					alert('%i18n:!@banner-saved%');
-				});
-			});
-		},
-		uploadAvatar() {
-			// a
-		},
-		uploadBanner() {
-			// a
-		},
 		save() {
 			this.saving = true;
 
diff --git a/src/client/md.scss b/src/client/md.scss
index d850863ef..836836588 100644
--- a/src/client/md.scss
+++ b/src/client/md.scss
@@ -6,7 +6,7 @@
 
 @include md-register-theme("default", (
 	primary: $themeColor,
-	accent: md-get-palette-color(red, A200)
+	accent: $themeColor
 ));
 
 @import "~vue-material/dist/components/MdButton/theme";