#163

CHANGELOG.md

@@ -4,6 +4,7 @@ ChangeLog
 
 unreleased
 ----------
+* New: モバイル版からプロフィールを設定できるように
 * Improve: 投稿ページに次の投稿/前の投稿リンクを作成 (#734)
 * Improve: タイムラインの投稿をダブルクリックすることで詳細な情報が見れるように
 * Fix: モバイル版でおすすめユーザーをフォローしてもタイムラインが更新されない (#736)

locales/en.yml

@@ -336,12 +336,28 @@ mobile:
     mk-search-page:
       search: "Search"
 
+    mk-settings:
+      signed-in-as: "Signed in as {}"
+
     mk-settings-page:
       profile: "Profile"
       applications: "Applications"
       twitter-integration: "Twitter integration"
       signin-history: "Sign in history"
+      api: "API"
       settings: "Settings"
+      signout: "Sign out"
+
+    mk-profile-setting-page:
+      title: "Profile Settings"
+
+    mk-profile-setting:
+      name: "Name"
+      location: "Location"
+      description: "Description"
+      birthday: "Birthday"
+      save: "Save"
+      saved: "Profile updated successfully"
 
     mk-user-followers-page:
       followers-of: "Followers of {}"

locales/ja.yml

@@ -336,12 +336,28 @@ mobile:
     mk-search-page:
       search: "検索"
 
+    mk-settings:
+      signed-in-as: "{}としてサインイン中"
+
     mk-settings-page:
       profile: "プロフィール"
       applications: "アプリケーション"
       twitter-integration: "Twitter連携"
       signin-history: "ログイン履歴"
+      api: "API"
       settings: "設定"
+      signout: "サインアウト"
+
+    mk-profile-setting-page:
+      title: "プロフィール設定"
+
+    mk-profile-setting:
+      name: "名前"
+      location: "場所"
+      description: "自己紹介"
+      birthday: "誕生日"
+      save: "保存"
+      saved: "プロフィールを保存しました"
 
     mk-user-followers-page:
       followers-of: "{}のフォロワー"

src/web/app/mobile/router.js

@@ -15,6 +15,7 @@ export default me => {
 	route('/i/drive/folder/:folder',     drive);
 	route('/i/drive/file/:file',         drive);
 	route('/i/settings',                 settings);
+	route('/i/settings/profile',         settingsProfile);
 	route('/i/settings/signin-history',  settingsSignin);
 	route('/i/settings/api',             settingsApi);
 	route('/i/settings/twitter',         settingsTwitter);
@@ -63,6 +64,10 @@ export default me => {
 		mount(document.createElement('mk-settings-page'));
 	}
 
+	function settingsProfile() {
+		mount(document.createElement('mk-profile-setting-page'));
+	}
+
 	function settingsSignin() {
 		mount(document.createElement('mk-signin-history-page'));
 	}
@@ -130,6 +135,7 @@ export default me => {
 };
 
 function mount(content) {
+	document.documentElement.style.background = '#fff';
 	if (page) page.unmount();
 	const body = document.getElementById('app');
 	page = riot.mount(body.appendChild(content))[0];

src/web/app/mobile/tags/index.js

@@ -14,6 +14,7 @@ require('./page/post.tag');
 require('./page/new-post.tag');
 require('./page/search.tag');
 require('./page/settings.tag');
+require('./page/settings/profile.tag');
 require('./page/settings/signin.tag');
 require('./page/settings/api.tag');
 require('./page/settings/authorized-apps.tag');

src/web/app/mobile/tags/page/settings.tag

@@ -1,12 +1,6 @@
 <mk-settings-page>
 	<mk-ui ref="ui">
-		<ul>
+		<mk-settings />
-			<li><a><i class="fa fa-user"></i>%i18n:mobile.tags.mk-settings-page.profile%</a></li>
-			<li><a href="./settings/authorized-apps"><i class="fa fa-puzzle-piece"></i>%i18n:mobile.tags.mk-settings-page.applications%</a></li>
-			<li><a href="./settings/twitter"><i class="fa fa-twitter"></i>%i18n:mobile.tags.mk-settings-page.twitter-integration%</a></li>
-			<li><a href="./settings/signin-history"><i class="fa fa-sign-in"></i>%i18n:mobile.tags.mk-settings-page.signin-history%</a></li>
-			<li><a href="./settings/api"><i class="fa fa-key"></i>API</a></li>
-		</ul>
 	</mk-ui>
 	<style>
 		:scope
@@ -18,6 +12,72 @@
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
 			ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%');
+			document.documentElement.style.background = '#eee';
 		});
 	</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"><i class="fa fa-user"></i>%i18n:mobile.tags.mk-settings-page.profile%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/authorized-apps"><i class="fa fa-puzzle-piece"></i>%i18n:mobile.tags.mk-settings-page.applications%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/twitter"><i class="fa fa-twitter"></i>%i18n:mobile.tags.mk-settings-page.twitter-integration%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/signin-history"><i class="fa fa-sign-in"></i>%i18n:mobile.tags.mk-settings-page.signin-history%<i class="fa fa-angle-right"></i></a></li>
+		<li><a href="./settings/api"><i class="fa fa-key"></i>%i18n:mobile.tags.mk-settings-page.api%<i class="fa fa-angle-right"></i></a></li>
+	</ul>
+	<ul>
+		<li><a onclick={ signout }><i class="fa fa-power-off"></i>%i18n:mobile.tags.mk-settings-page.signout%</a></li>
+	</ul>
+	<style>
+		:scope
+			display block
+
+			> p
+				display block
+				margin 24px
+				text-align center
+				color #555
+
+			> ul
+				display block
+				margin 16px 0
+				padding 0
+				list-style none
+				border-top solid 1px #aaa
+
+				> li
+					display block
+					background #fff
+					border-bottom solid 1px #aaa
+
+					> a
+						$height = 48px
+
+						display block
+						position relative
+						padding 0 16px
+						line-height $height
+						color #4d635e
+
+						> i:nth-of-type(1)
+							margin-right 4px
+
+						> i: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>
+		import signout from '../../../common/scripts/signout';
+		this.signout = signout;
+
+		this.mixin('i');
+	</script>
+</mk-settings>

src/web/app/mobile/tags/page/settings/profile.tag

@@ -0,0 +1,106 @@
+<mk-profile-setting-page>
+	<mk-ui ref="ui">
+		<mk-profile-setting/>
+	</mk-ui>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		import ui from '../../../scripts/ui-event';
+
+		this.on('mount', () => {
+			document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
+			ui.trigger('title', '<i class="fa fa-user"></i>%i18n:mobile.tags.mk-profile-setting-page.title%');
+			document.documentElement.style.background = '#eee';
+		});
+	</script>
+</mk-profile-setting-page>
+
+<mk-profile-setting>
+	<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>
+	<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
+	<style>
+		:scope
+			display block
+
+			> label
+				display block
+				margin 0
+				padding 16px 0
+
+				> p:first-child
+					display block
+					margin 0
+					padding 0 0 4px 8px
+					font-weight bold
+					color #333
+
+				> input[type="text"]
+				> textarea
+					display block
+					width 100%
+					padding 12px
+					font-size 16px
+					border none
+					border-radius none
+
+				> textarea
+					min-height 80px
+
+			> .save
+				display block
+				margin 8px
+				padding 16px
+				width calc(100% - 16px)
+				font-size 16px
+				color $theme-color-foreground
+				background $theme-color
+				border-radius 4px
+
+				&:disabled
+					opacity 0.7
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script>
+		this.mixin('i');
+		this.mixin('api');
+
+		this.save = () => {
+			this.update({
+				saving: true
+			});
+
+			this.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>