From 29ed58e4b349e30e4c389cae1050e1a689a7d466 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Mon, 28 Aug 2017 19:43:24 +0900 Subject: [PATCH] #163 --- CHANGELOG.md | 1 + locales/en.yml | 16 +++ locales/ja.yml | 16 +++ src/web/app/mobile/router.js | 6 + src/web/app/mobile/tags/index.js | 1 + src/web/app/mobile/tags/page/settings.tag | 74 ++++++++++-- .../app/mobile/tags/page/settings/profile.tag | 106 ++++++++++++++++++ 7 files changed, 213 insertions(+), 7 deletions(-) create mode 100644 src/web/app/mobile/tags/page/settings/profile.tag diff --git a/CHANGELOG.md b/CHANGELOG.md index d850457df3..fb41a5ab7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ChangeLog unreleased ---------- +* New: モバイル版からプロフィールを設定できるように * Improve: 投稿ページに次の投稿/前の投稿リンクを作成 (#734) * Improve: タイムラインの投稿をダブルクリックすることで詳細な情報が見れるように * Fix: モバイル版でおすすめユーザーをフォローしてもタイムラインが更新されない (#736) diff --git a/locales/en.yml b/locales/en.yml index 9bf6446641..6d636a1108 100644 --- a/locales/en.yml +++ b/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 {}" diff --git a/locales/ja.yml b/locales/ja.yml index d2b282bff6..75b1fd6275 100644 --- a/locales/ja.yml +++ b/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: "{}のフォロワー" diff --git a/src/web/app/mobile/router.js b/src/web/app/mobile/router.js index d0b45d9614..de4108a593 100644 --- a/src/web/app/mobile/router.js +++ b/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]; diff --git a/src/web/app/mobile/tags/index.js b/src/web/app/mobile/tags/index.js index 02d1541fcd..2e6b478079 100644 --- a/src/web/app/mobile/tags/index.js +++ b/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'); diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag index 58094a876a..710591071d 100644 --- a/src/web/app/mobile/tags/page/settings.tag +++ b/src/web/app/mobile/tags/page/settings.tag @@ -1,12 +1,6 @@ <mk-settings-page> <mk-ui ref="ui"> - <ul> - <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-settings /> </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> diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag new file mode 100644 index 0000000000..dfe0586c1c --- /dev/null +++ b/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>