This commit is contained in:
syuilo 2018-05-20 14:12:58 +09:00
parent 7f846f114d
commit c85caef2d0
2 changed files with 0 additions and 227 deletions

View File

@ -37,7 +37,6 @@ import MkSearch from './views/pages/search.vue';
import MkFollowers from './views/pages/followers.vue'; import MkFollowers from './views/pages/followers.vue';
import MkFollowing from './views/pages/following.vue'; import MkFollowing from './views/pages/following.vue';
import MkSettings from './views/pages/settings.vue'; import MkSettings from './views/pages/settings.vue';
import MkProfileSetting from './views/pages/profile-setting.vue';
import MkOthello from './views/pages/othello.vue'; import MkOthello from './views/pages/othello.vue';
Vue.use(MdCard); Vue.use(MdCard);
@ -71,7 +70,6 @@ init((launch) => {
{ path: '/', name: 'index', component: MkIndex }, { path: '/', name: 'index', component: MkIndex },
{ path: '/signup', name: 'signup', component: MkSignup }, { path: '/signup', name: 'signup', component: MkSignup },
{ path: '/i/settings', component: MkSettings }, { path: '/i/settings', component: MkSettings },
{ path: '/i/settings/profile', component: MkProfileSetting },
{ path: '/i/notifications', name: 'notifications', component: MkNotifications }, { path: '/i/notifications', name: 'notifications', component: MkNotifications },
{ path: '/i/widgets', name: 'widgets', component: MkWidgets }, { path: '/i/widgets', name: 'widgets', component: MkWidgets },
{ path: '/i/messaging', name: 'messaging', component: MkMessaging }, { path: '/i/messaging', name: 'messaging', component: MkMessaging },

View File

@ -1,225 +0,0 @@
<template>
<mk-ui>
<span slot="header">%fa:user%%i18n:@title%</span>
<div :class="$style.content">
<p>%fa:info-circle%%i18n:@will-be-published%</p>
<div :class="$style.form">
<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"/>
</div>
<label>
<p>%i18n:@name%</p>
<input v-model="name" type="text"/>
</label>
<label>
<p>%i18n:@location%</p>
<input v-model="location" type="text"/>
</label>
<label>
<p>%i18n:@description%</p>
<textarea v-model="description"></textarea>
</label>
<label>
<p>%i18n:@birthday%</p>
<input v-model="birthday" type="date"/>
</label>
<label>
<p>%i18n:@avatar%</p>
<button @click="setAvatar" :disabled="avatarSaving">%i18n:@set-avatar%</button>
</label>
<label>
<p>%i18n:@banner%</p>
<button @click="setBanner" :disabled="bannerSaving">%i18n:@set-banner%</button>
</label>
</div>
<button :class="$style.save" @click="save" :disabled="saving">%fa:check%%i18n:@save%</button>
</div>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
name: null,
location: null,
description: null,
birthday: null,
avatarSaving: false,
bannerSaving: false,
saving: false
};
},
created() {
this.name = (this as any).os.i.name || '';
this.location = (this as any).os.i.profile.location;
this.description = (this as any).os.i.description;
this.birthday = (this as any).os.i.profile.birthday;
},
mounted() {
document.title = 'Misskey | %i18n:@title%';
},
methods: {
setAvatar() {
(this as any).apis.chooseDriveFile({
multiple: false
}).then(file => {
this.avatarSaving = true;
(this as any).api('i/update', {
avatarId: file.id
}).then(() => {
this.avatarSaving = false;
alert('%i18n:!@avatar-saved%');
});
});
},
setBanner() {
(this as any).apis.chooseDriveFile({
multiple: false
}).then(file => {
this.bannerSaving = true;
(this as any).api('i/update', {
bannerId: file.id
}).then(() => {
this.bannerSaving = false;
alert('%i18n:!@banner-saved%');
});
});
},
save() {
this.saving = true;
(this as any).api('i/update', {
name: this.name || null,
location: this.location || null,
description: this.description || null,
birthday: this.birthday || null
}).then(() => {
this.saving = false;
alert('%i18n:!@saved%');
});
}
}
});
</script>
<style lang="stylus" module>
@import '~const.styl'
.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(#000, 0.2)
border-radius 8px
&:before
content ""
display block
position absolute
bottom -20px
left calc(50% - 10px)
border-top solid 10px rgba(#000, 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>