From 66b8fcc7e71c4df8dc4ab19cc7b5d19c5d7d2b3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?= <syuilotan@yahoo.co.jp> Date: Mon, 12 Feb 2018 23:17:08 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/settings.tag | 62 ---------------- .../views/components/profile-setting.vue | 73 +++++++++++++++++++ 2 files changed, 73 insertions(+), 62 deletions(-) create mode 100644 src/web/app/desktop/views/components/profile-setting.vue diff --git a/src/web/app/desktop/-tags/settings.tag b/src/web/app/desktop/-tags/settings.tag index f4e2910d88..a9c94181f4 100644 --- a/src/web/app/desktop/-tags/settings.tag +++ b/src/web/app/desktop/-tags/settings.tag @@ -1,66 +1,4 @@ -<mk-profile-setting> - <label class="avatar ui from group"> - <p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/> - <button class="ui" @click="avatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button> - </label> - <label class="ui from group"> - <p>%i18n:desktop.tags.mk-profile-setting.name%</p> - <input ref="accountName" type="text" value={ I.name } class="ui"/> - </label> - <label class="ui from group"> - <p>%i18n:desktop.tags.mk-profile-setting.location%</p> - <input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/> - </label> - <label class="ui from group"> - <p>%i18n:desktop.tags.mk-profile-setting.description%</p> - <textarea ref="accountDescription" class="ui">{ I.description }</textarea> - </label> - <label class="ui from group"> - <p>%i18n:desktop.tags.mk-profile-setting.birthday%</p> - <input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/> - </label> - <button class="ui primary" @click="updateAccount">%i18n:desktop.tags.mk-profile-setting.save%</button> - <style lang="stylus" scoped> - :scope - display block - - > .avatar - > img - display inline-block - vertical-align top - width 64px - height 64px - border-radius 4px - - > button - margin-left 8px - - </style> - <script lang="typescript"> - import updateAvatar from '../scripts/update-avatar'; - import notify from '../scripts/notify'; - - this.mixin('i'); - this.mixin('api'); - - this.avatar = () => { - updateAvatar(this.I); - }; - - this.updateAccount = () => { - this.api('i/update', { - name: this.$refs.accountName.value, - location: this.$refs.accountLocation.value || null, - description: this.$refs.accountDescription.value || null, - birthday: this.$refs.accountBirthday.value || null - }).then(() => { - notify('プロフィールを更新しました'); - }); - }; - </script> -</mk-profile-setting> - <mk-api-info> <p>Token: <code>{ I.token }</code></p> <p>%i18n:desktop.tags.mk-api-info.intro%</p> diff --git a/src/web/app/desktop/views/components/profile-setting.vue b/src/web/app/desktop/views/components/profile-setting.vue new file mode 100644 index 0000000000..abf80d3162 --- /dev/null +++ b/src/web/app/desktop/views/components/profile-setting.vue @@ -0,0 +1,73 @@ +<template> +<div class="mk-profile-setting"> + <label class="avatar ui from group"> + <p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" :src="`${$root.$data.os.i.avatar_url}?thumbnail&size=64`" alt="avatar"/> + <button class="ui" @click="updateAvatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button> + </label> + <label class="ui from group"> + <p>%i18n:desktop.tags.mk-profile-setting.name%</p> + <input v-model="name" type="text" class="ui"/> + </label> + <label class="ui from group"> + <p>%i18n:desktop.tags.mk-profile-setting.location%</p> + <input v-model="location" type="text" class="ui"/> + </label> + <label class="ui from group"> + <p>%i18n:desktop.tags.mk-profile-setting.description%</p> + <textarea v-model="description" class="ui"></textarea> + </label> + <label class="ui from group"> + <p>%i18n:desktop.tags.mk-profile-setting.birthday%</p> + <input v-model="birthday" type="date" class="ui"/> + </label> + <button class="ui primary" @click="save">%i18n:desktop.tags.mk-profile-setting.save%</button> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import updateAvatar from '../../scripts/update-avatar'; +import notify from '../../scripts/notify'; + +export default Vue.extend({ + data() { + return { + name: this.$root.$data.os.i.name, + location: this.$root.$data.os.i.location, + description: this.$root.$data.os.i.description, + birthday: this.$root.$data.os.i.birthday, + }; + }, + methods: { + updateAvatar() { + updateAvatar(this.$root.$data.os.i); + }, + save() { + this.$root.$data.os.api('i/update', { + name: this.name, + location: this.location || null, + description: this.description || null, + birthday: this.birthday || null + }).then(() => { + notify('プロフィールを更新しました'); + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-profile-setting + > .avatar + > img + display inline-block + vertical-align top + width 64px + height 64px + border-radius 4px + + > button + margin-left 8px + +</style> +