yumechi-no-kuni/src/client/app/mobile/views/pages/profile-setting.vue

226 lines
4.5 KiB
Vue
Raw Normal View History

2018-02-19 22:02:53 -06:00
<template>
<mk-ui>
2018-04-14 11:04:40 -05:00
<span slot="header">%fa:user%%i18n:@title%</span>
2018-02-22 07:38:14 -06:00
<div :class="$style.content">
2018-04-14 11:04:40 -05:00
<p>%fa:info-circle%%i18n:@will-be-published%</p>
2018-02-22 07:38:14 -06:00
<div :class="$style.form">
2018-03-29 00:48:47 -05:00
<div :style="os.i.bannerUrl ? `background-image: url(${os.i.bannerUrl}?thumbnail&size=1024)` : ''" @click="setBanner">
<img :src="`${os.i.avatarUrl}?thumbnail&size=200`" alt="avatar" @click="setAvatar"/>
2018-02-19 22:02:53 -06:00
</div>
<label>
2018-04-14 11:04:40 -05:00
<p>%i18n:@name%</p>
2018-02-19 22:02:53 -06:00
<input v-model="name" type="text"/>
</label>
<label>
2018-04-14 11:04:40 -05:00
<p>%i18n:@location%</p>
2018-02-19 22:02:53 -06:00
<input v-model="location" type="text"/>
</label>
<label>
2018-04-14 11:04:40 -05:00
<p>%i18n:@description%</p>
2018-02-19 22:02:53 -06:00
<textarea v-model="description"></textarea>
</label>
<label>
2018-04-14 11:04:40 -05:00
<p>%i18n:@birthday%</p>
2018-02-19 22:02:53 -06:00
<input v-model="birthday" type="date"/>
</label>
<label>
2018-04-14 11:04:40 -05:00
<p>%i18n:@avatar%</p>
<button @click="setAvatar" :disabled="avatarSaving">%i18n:@set-avatar%</button>
2018-02-19 22:02:53 -06:00
</label>
<label>
2018-04-14 11:04:40 -05:00
<p>%i18n:@banner%</p>
<button @click="setBanner" :disabled="bannerSaving">%i18n:@set-banner%</button>
2018-02-19 22:02:53 -06:00
</label>
</div>
2018-04-14 11:04:40 -05:00
<button :class="$style.save" @click="save" :disabled="saving">%fa:check%%i18n:@save%</button>
2018-02-19 22:02:53 -06:00
</div>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
2018-02-22 07:38:14 -06:00
name: null,
location: null,
description: null,
birthday: null,
2018-02-19 22:02:53 -06:00
avatarSaving: false,
bannerSaving: false,
saving: false
};
},
2018-02-22 07:38:14 -06:00
created() {
2018-04-05 11:36:34 -05:00
this.name = (this as any).os.i.name || '';
2018-04-07 13:58:11 -05:00
this.location = (this as any).os.i.profile.location;
2018-02-22 07:38:14 -06:00
this.description = (this as any).os.i.description;
2018-04-07 13:58:11 -05:00
this.birthday = (this as any).os.i.profile.birthday;
2018-02-22 07:38:14 -06:00
},
2018-02-19 22:02:53 -06:00
mounted() {
2018-04-14 11:04:40 -05:00
document.title = 'Misskey | %i18n:@title%';
2018-02-19 22:02:53 -06:00
},
methods: {
setAvatar() {
(this as any).apis.chooseDriveFile({
multiple: false
}).then(file => {
this.avatarSaving = true;
(this as any).api('i/update', {
2018-03-29 00:48:47 -05:00
avatarId: file.id
2018-02-19 22:02:53 -06:00
}).then(() => {
this.avatarSaving = false;
2018-04-15 17:07:32 -05:00
alert('%i18n:!@avatar-saved%');
2018-02-19 22:02:53 -06:00
});
});
},
setBanner() {
(this as any).apis.chooseDriveFile({
multiple: false
}).then(file => {
this.bannerSaving = true;
(this as any).api('i/update', {
2018-03-29 00:48:47 -05:00
bannerId: file.id
2018-02-19 22:02:53 -06:00
}).then(() => {
this.bannerSaving = false;
2018-04-15 17:07:32 -05:00
alert('%i18n:!@banner-saved%');
2018-02-19 22:02:53 -06:00
});
});
},
save() {
this.saving = true;
(this as any).api('i/update', {
2018-04-05 11:36:34 -05:00
name: this.name || null,
2018-02-19 22:02:53 -06:00
location: this.location || null,
description: this.description || null,
birthday: this.birthday || null
}).then(() => {
this.saving = false;
2018-04-15 17:07:32 -05:00
alert('%i18n:!@saved%');
2018-02-19 22:02:53 -06:00
});
}
}
});
</script>
2018-02-22 07:38:14 -06:00
<style lang="stylus" module>
2018-03-02 22:47:55 -06:00
@import '~const.styl'
2018-02-19 22:02:53 -06:00
.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>