From dfa98a038c9146cade8c0863315bd8dd7038b6ef Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 20 Feb 2018 13:02:53 +0900
Subject: [PATCH] wip

---
 src/web/app/mobile/tags/page/settings.tag     | 100 -------
 .../app/mobile/tags/page/settings/profile.tag | 247 ------------------
 .../mobile/views/pages/profile-setting.vue    | 218 ++++++++++++++++
 src/web/app/mobile/views/pages/settings.vue   | 102 ++++++++
 4 files changed, 320 insertions(+), 347 deletions(-)
 delete mode 100644 src/web/app/mobile/tags/page/settings.tag
 delete mode 100644 src/web/app/mobile/tags/page/settings/profile.tag
 create mode 100644 src/web/app/mobile/views/pages/profile-setting.vue
 create mode 100644 src/web/app/mobile/views/pages/settings.vue

diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
deleted file mode 100644
index 394c198b0a..0000000000
--- a/src/web/app/mobile/tags/page/settings.tag
+++ /dev/null
@@ -1,100 +0,0 @@
-<mk-settings-page>
-	<mk-ui ref="ui">
-		<mk-settings />
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import ui from '../../scripts/ui-event';
-
-		this.on('mount', () => {
-			document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
-			ui.trigger('title', '%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%');
-			document.documentElement.style.background = '#313a42';
-		});
-	</script>
-</mk-settings-page>
-
-<mk-settings>
-	<p><mk-raw content={ '%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + I.name + '</b>') }/></p>
-	<ul>
-		<li><a href="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
-		<li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li>
-		<li><a href="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
-		<li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
-	</ul>
-	<ul>
-		<li><a @click="signout">%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
-	</ul>
-	<p><small>ver { _VERSION_ } (葵 aoi)</small></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> p
-				display block
-				margin 24px
-				text-align center
-				color #cad2da
-
-			> ul
-				$radius = 8px
-
-				display block
-				margin 16px auto
-				padding 0
-				max-width 500px
-				width calc(100% - 32px)
-				list-style none
-				background #fff
-				border solid 1px rgba(0, 0, 0, 0.2)
-				border-radius $radius
-
-				> li
-					display block
-					border-bottom solid 1px #ddd
-
-					&:hover
-						background rgba(0, 0, 0, 0.1)
-
-					&:first-child
-						border-top-left-radius $radius
-						border-top-right-radius $radius
-
-					&:last-child
-						border-bottom-left-radius $radius
-						border-bottom-right-radius $radius
-						border-bottom none
-
-					> a
-						$height = 48px
-
-						display block
-						position relative
-						padding 0 16px
-						line-height $height
-						color #4d635e
-
-						> [data-fa]:nth-of-type(1)
-							margin-right 4px
-
-						> [data-fa]:nth-of-type(2)
-							display block
-							position absolute
-							top 0
-							right 8px
-							z-index 1
-							padding 0 20px
-							font-size 1.2em
-							line-height $height
-
-	</style>
-	<script lang="typescript">
-		import signout from '../../../common/scripts/signout';
-		this.signout = signout;
-
-		this.mixin('i');
-	</script>
-</mk-settings>
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
deleted file mode 100644
index 6f7ef3ac30..0000000000
--- a/src/web/app/mobile/tags/page/settings/profile.tag
+++ /dev/null
@@ -1,247 +0,0 @@
-<mk-profile-setting-page>
-	<mk-ui ref="ui">
-		<mk-profile-setting/>
-	</mk-ui>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-	</style>
-	<script lang="typescript">
-		import ui from '../../../scripts/ui-event';
-
-		this.on('mount', () => {
-			document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
-			ui.trigger('title', '%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%');
-			document.documentElement.style.background = '#313a42';
-		});
-	</script>
-</mk-profile-setting-page>
-
-<mk-profile-setting>
-	<div>
-		<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
-		<div class="form">
-			<div style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=1024)' : '' } @click="clickBanner">
-				<img src={ I.avatar_url + '?thumbnail&size=200' } alt="avatar" @click="clickAvatar"/>
-			</div>
-			<label>
-				<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
-				<input ref="name" type="text" value={ I.name }/>
-			</label>
-			<label>
-				<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
-				<input ref="location" type="text" value={ I.profile.location }/>
-			</label>
-			<label>
-				<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
-				<textarea ref="description">{ I.description }</textarea>
-			</label>
-			<label>
-				<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
-				<input ref="birthday" type="date" value={ I.profile.birthday }/>
-			</label>
-			<label>
-				<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
-				<button @click="setAvatar" disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
-			</label>
-			<label>
-				<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
-				<button @click="setBanner" disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
-			</label>
-		</div>
-		<button class="save" @click="save" disabled={ saving }>%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> div
-				margin 8px auto
-				max-width 500px
-				width calc(100% - 16px)
-
-				@media (min-width 500px)
-					margin 16px auto
-					width calc(100% - 32px)
-
-				> p
-					display block
-					margin 0 0 8px 0
-					padding 12px 16px
-					font-size 14px
-					color #79d4e6
-					border solid 1px #71afbb
-					//color #276f86
-					//background #f8ffff
-					//border solid 1px #a9d5de
-					border-radius 8px
-
-					> [data-fa]
-						margin-right 6px
-
-				> .form
-					position relative
-					background #fff
-					box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
-					border-radius 8px
-
-					&:before
-						content ""
-						display block
-						position absolute
-						bottom -20px
-						left calc(50% - 10px)
-						border-top solid 10px rgba(0, 0, 0, 0.2)
-						border-right solid 10px transparent
-						border-bottom solid 10px transparent
-						border-left solid 10px transparent
-
-					&:after
-						content ""
-						display block
-						position absolute
-						bottom -16px
-						left calc(50% - 8px)
-						border-top solid 8px #fff
-						border-right solid 8px transparent
-						border-bottom solid 8px transparent
-						border-left solid 8px transparent
-
-					> div
-						height 128px
-						background-color #e4e4e4
-						background-size cover
-						background-position center
-						border-radius 8px 8px 0 0
-
-						> img
-							position absolute
-							top 25px
-							left calc(50% - 40px)
-							width 80px
-							height 80px
-							border solid 2px #fff
-							border-radius 8px
-
-					> label
-						display block
-						margin 0
-						padding 16px
-						border-bottom solid 1px #eee
-
-						&:last-of-type
-							border none
-
-						> p:first-child
-							display block
-							margin 0
-							padding 0 0 4px 0
-							font-weight bold
-							color #2f3c42
-
-						> input[type="text"]
-						> textarea
-							display block
-							width 100%
-							padding 12px
-							font-size 16px
-							color #192427
-							border solid 2px #ddd
-							border-radius 4px
-
-						> textarea
-							min-height 80px
-
-				> .save
-					display block
-					margin 8px 0 0 0
-					padding 16px
-					width 100%
-					font-size 16px
-					color $theme-color-foreground
-					background $theme-color
-					border-radius 8px
-
-					&:disabled
-						opacity 0.7
-
-					> [data-fa]
-						margin-right 4px
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.setAvatar = () => {
-			const i = riot.mount(document.body.appendChild(document.createElement('mk-drive-selector')), {
-				multiple: false
-			})[0];
-			i.one('selected', file => {
-				this.update({
-					avatarSaving: true
-				});
-
-				this.$root.$data.os.api('i/update', {
-					avatar_id: file.id
-				}).then(() => {
-					this.update({
-						avatarSaving: false
-					});
-
-					alert('%i18n:mobile.tags.mk-profile-setting.avatar-saved%');
-				});
-			});
-		};
-
-		this.setBanner = () => {
-			const i = riot.mount(document.body.appendChild(document.createElement('mk-drive-selector')), {
-				multiple: false
-			})[0];
-			i.one('selected', file => {
-				this.update({
-					bannerSaving: true
-				});
-
-				this.$root.$data.os.api('i/update', {
-					banner_id: file.id
-				}).then(() => {
-					this.update({
-						bannerSaving: false
-					});
-
-					alert('%i18n:mobile.tags.mk-profile-setting.banner-saved%');
-				});
-			});
-		};
-
-		this.clickAvatar = e => {
-			this.setAvatar();
-			return false;
-		};
-
-		this.clickBanner = e => {
-			this.setBanner();
-			return false;
-		};
-
-		this.save = () => {
-			this.update({
-				saving: true
-			});
-
-			this.$root.$data.os.api('i/update', {
-				name: this.$refs.name.value,
-				location: this.$refs.location.value || null,
-				description: this.$refs.description.value || null,
-				birthday: this.$refs.birthday.value || null
-			}).then(() => {
-				this.update({
-					saving: false
-				});
-
-				alert('%i18n:mobile.tags.mk-profile-setting.saved%');
-			});
-		};
-	</script>
-</mk-profile-setting>
diff --git a/src/web/app/mobile/views/pages/profile-setting.vue b/src/web/app/mobile/views/pages/profile-setting.vue
new file mode 100644
index 0000000000..3b93496a3a
--- /dev/null
+++ b/src/web/app/mobile/views/pages/profile-setting.vue
@@ -0,0 +1,218 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%</span>
+	<div class="$style.content">
+		<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
+		<div class="$style.form">
+			<div :style="os.i.banner_url ? `background-image: url(${os.i.banner_url}?thumbnail&size=1024)` : ''" @click="setBanner">
+				<img :src="`${os.i.avatar_url}?thumbnail&size=200`" alt="avatar" @click="setAvatar"/>
+			</div>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
+				<input v-model="name" type="text"/>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
+				<input v-model="location" type="text"/>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
+				<textarea v-model="description"></textarea>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
+				<input v-model="birthday" type="date"/>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
+				<button @click="setAvatar" :disabled="avatarSaving">%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
+				<button @click="setBanner" :disabled="bannerSaving">%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
+			</label>
+		</div>
+		<button class="$style.save" @click="save" :disabled="saving">%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
+	</div>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			name: (this as any).os.i.name,
+			location: (this as any).os.i.profile.location,
+			description: (this as any).os.i.description,
+			birthday: (this as any).os.i.profile.birthday,
+			avatarSaving: false,
+			bannerSaving: false,
+			saving: false
+		};
+	},
+	mounted() {
+		document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
+		document.documentElement.style.background = '#313a42';
+	},
+	methods: {
+		setAvatar() {
+			(this as any).apis.chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.avatarSaving = true;
+
+				(this as any).api('i/update', {
+					avatar_id: file.id
+				}).then(() => {
+					this.avatarSaving = false;
+					alert('%i18n:mobile.tags.mk-profile-setting.avatar-saved%');
+				});
+			});
+		},
+		setBanner() {
+			(this as any).apis.chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.bannerSaving = true;
+
+				(this as any).api('i/update', {
+					banner_id: file.id
+				}).then(() => {
+					this.bannerSaving = false;
+					alert('%i18n:mobile.tags.mk-profile-setting.banner-saved%');
+				});
+			});
+		},
+		save() {
+			this.saving = true;
+
+			(this as any).api('i/update', {
+				name: this.name,
+				location: this.location || null,
+				description: this.description || null,
+				birthday: this.birthday || null
+			}).then(() => {
+				this.saving = false;
+				alert('%i18n:mobile.tags.mk-profile-setting.saved%');
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.content
+	margin 8px auto
+	max-width 500px
+	width calc(100% - 16px)
+
+	@media (min-width 500px)
+		margin 16px auto
+		width calc(100% - 32px)
+
+	> p
+		display block
+		margin 0 0 8px 0
+		padding 12px 16px
+		font-size 14px
+		color #79d4e6
+		border solid 1px #71afbb
+		//color #276f86
+		//background #f8ffff
+		//border solid 1px #a9d5de
+		border-radius 8px
+
+		> [data-fa]
+			margin-right 6px
+
+.form
+	position relative
+	background #fff
+	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	border-radius 8px
+
+	&:before
+		content ""
+		display block
+		position absolute
+		bottom -20px
+		left calc(50% - 10px)
+		border-top solid 10px rgba(0, 0, 0, 0.2)
+		border-right solid 10px transparent
+		border-bottom solid 10px transparent
+		border-left solid 10px transparent
+
+	&:after
+		content ""
+		display block
+		position absolute
+		bottom -16px
+		left calc(50% - 8px)
+		border-top solid 8px #fff
+		border-right solid 8px transparent
+		border-bottom solid 8px transparent
+		border-left solid 8px transparent
+
+	> div
+		height 128px
+		background-color #e4e4e4
+		background-size cover
+		background-position center
+		border-radius 8px 8px 0 0
+
+		> img
+			position absolute
+			top 25px
+			left calc(50% - 40px)
+			width 80px
+			height 80px
+			border solid 2px #fff
+			border-radius 8px
+
+	> label
+		display block
+		margin 0
+		padding 16px
+		border-bottom solid 1px #eee
+
+		&:last-of-type
+			border none
+
+		> p:first-child
+			display block
+			margin 0
+			padding 0 0 4px 0
+			font-weight bold
+			color #2f3c42
+
+		> input[type="text"]
+		> textarea
+			display block
+			width 100%
+			padding 12px
+			font-size 16px
+			color #192427
+			border solid 2px #ddd
+			border-radius 4px
+
+		> textarea
+			min-height 80px
+
+.save
+	display block
+	margin 8px 0 0 0
+	padding 16px
+	width 100%
+	font-size 16px
+	color $theme-color-foreground
+	background $theme-color
+	border-radius 8px
+
+	&:disabled
+		opacity 0.7
+
+	> [data-fa]
+		margin-right 4px
+
+</style>
diff --git a/src/web/app/mobile/views/pages/settings.vue b/src/web/app/mobile/views/pages/settings.vue
new file mode 100644
index 0000000000..a3d5dd92e9
--- /dev/null
+++ b/src/web/app/mobile/views/pages/settings.vue
@@ -0,0 +1,102 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%</span>
+	<div class="$style.content">
+		<p v-html="'%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + os.i.name + '</b>')"></p>
+		<ul>
+			<li><router-link to="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
+			<li><router-link to="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</router-link></li>
+			<li><router-link to="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</router-link></li>
+			<li><router-link to="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</router-link></li>
+		</ul>
+		<ul>
+			<li><a @click="signout">%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
+		</ul>
+		<p><small>ver {{ v }} (葵 aoi)</small></p>
+	</div>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { version } from '../../../../config';
+
+export default Vue.extend({
+	data() {
+		return {
+			v: version
+		};
+	},
+	mounted() {
+		document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
+		document.documentElement.style.background = '#313a42';
+	},
+	methods: {
+		signout() {
+			(this as any).os.signout();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.content
+
+	> p
+		display block
+		margin 24px
+		text-align center
+		color #cad2da
+
+	> ul
+		$radius = 8px
+
+		display block
+		margin 16px auto
+		padding 0
+		max-width 500px
+		width calc(100% - 32px)
+		list-style none
+		background #fff
+		border solid 1px rgba(0, 0, 0, 0.2)
+		border-radius $radius
+
+		> li
+			display block
+			border-bottom solid 1px #ddd
+
+			&:hover
+				background rgba(0, 0, 0, 0.1)
+
+			&:first-child
+				border-top-left-radius $radius
+				border-top-right-radius $radius
+
+			&:last-child
+				border-bottom-left-radius $radius
+				border-bottom-right-radius $radius
+				border-bottom none
+
+			> a
+				$height = 48px
+
+				display block
+				position relative
+				padding 0 16px
+				line-height $height
+				color #4d635e
+
+				> [data-fa]:nth-of-type(1)
+					margin-right 4px
+
+				> [data-fa]:nth-of-type(2)
+					display block
+					position absolute
+					top 0
+					right 8px
+					z-index 1
+					padding 0 20px
+					font-size 1.2em
+					line-height $height
+
+</style>