Better mobile setting
This commit is contained in:
syuilo
parent
ff6409be3f
commit
853ee415ae
4 changed files with 95 additions and 60 deletions
|
|
@ -813,9 +813,13 @@ mobile/views/pages/settings/settings.profile.vue:
|
|||
location: "場所"
|
||||
description: "自己紹介"
|
||||
birthday: "誕生日"
|
||||
avatar: "アイコン"
|
||||
banner: "バナー"
|
||||
is-bot: "このアカウントはBotです"
|
||||
save: "保存"
|
||||
saved: "プロフィールを保存しました"
|
||||
uploading: "アップロード中"
|
||||
upload-failed: "アップロードに失敗しました"
|
||||
|
||||
mobile/views/pages/search.vue:
|
||||
search: "検索"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
|
||||
import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader } from 'vue-material/dist/components';
|
||||
import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader, MdDialog, MdDialogAlert } from 'vue-material/dist/components';
|
||||
import 'vue-material/dist/vue-material.min.css';
|
||||
import 'vue-material/dist/theme/default.css';
|
||||
|
||||
|
|
@ -47,6 +47,8 @@ Vue.use(MdMenu);
|
|||
Vue.use(MdList);
|
||||
Vue.use(MdSwitch);
|
||||
Vue.use(MdSubheader);
|
||||
Vue.use(MdDialog);
|
||||
Vue.use(MdDialogAlert);
|
||||
|
||||
/**
|
||||
* init
|
||||
|
|
|
|||
|
|
@ -229,8 +229,11 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
root(isDark)
|
||||
padding 0 16px
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
width 100%
|
||||
|
||||
> div
|
||||
> *
|
||||
|
|
@ -240,57 +243,12 @@ main
|
|||
display block
|
||||
margin 24px
|
||||
text-align center
|
||||
color #cad2da
|
||||
color isDark ? #cad2da : #848e9a
|
||||
|
||||
> ul
|
||||
$radius = 8px
|
||||
main[data-darkmode]
|
||||
root(true)
|
||||
|
||||
display block
|
||||
margin 16px auto
|
||||
padding 0
|
||||
max-width 500px
|
||||
width calc(100% - 32px)
|
||||
list-style none
|
||||
background #fff
|
||||
border solid 1px rgba(#000, 0.2)
|
||||
border-radius $radius
|
||||
|
||||
> li
|
||||
display block
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
&:hover
|
||||
background rgba(#000, 0.1)
|
||||
|
||||
&:first-child
|
||||
border-top-left-radius $radius
|
||||
border-top-right-radius $radius
|
||||
|
||||
&:last-child
|
||||
border-bottom-left-radius $radius
|
||||
border-bottom-right-radius $radius
|
||||
border-bottom none
|
||||
|
||||
> a
|
||||
$height = 48px
|
||||
|
||||
display block
|
||||
position relative
|
||||
padding 0 16px
|
||||
line-height $height
|
||||
color #4d635e
|
||||
|
||||
> [data-fa]:nth-of-type(1)
|
||||
margin-right 4px
|
||||
|
||||
> [data-fa]: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
|
||||
main:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@
|
|||
<md-input v-model="name" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@description%</label>
|
||||
<md-textarea v-model="description" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<md-icon>%fa:map-marker-alt%</md-icon>
|
||||
<label>%i18n:@location%</label>
|
||||
|
|
@ -27,6 +22,25 @@
|
|||
<md-input type="date" v-model="birthday" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@description%</label>
|
||||
<md-textarea v-model="description" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@avatar%</label>
|
||||
<md-file @md-change="onAvatarChange"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@banner%</label>
|
||||
<md-file @md-change="onBannerChange"/>
|
||||
</md-field>
|
||||
|
||||
<md-dialog-alert
|
||||
:md-active.sync="uploading"
|
||||
md-content="%18n:!@uploading%"/>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="os.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</md-switch>
|
||||
</div>
|
||||
|
|
@ -40,6 +54,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { apiUrl } from '../../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
|
|
@ -48,7 +63,10 @@ export default Vue.extend({
|
|||
location: null,
|
||||
description: null,
|
||||
birthday: null,
|
||||
saving: false
|
||||
avatarId: null,
|
||||
bannerId: null,
|
||||
saving: false,
|
||||
uploading: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -57,6 +75,8 @@ export default Vue.extend({
|
|||
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;
|
||||
this.avatarId = (this as any).os.i.avatarId;
|
||||
this.bannerId = (this as any).os.i.bannerId;
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -66,6 +86,50 @@ export default Vue.extend({
|
|||
});
|
||||
},
|
||||
|
||||
onAvatarChange([file]) {
|
||||
this.uploading = true;
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
data.append('i', (this as any).os.i.token);
|
||||
|
||||
fetch(apiUrl + '/drive/files/create', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(f => {
|
||||
this.avatarId = f.id;
|
||||
this.uploading = false;
|
||||
})
|
||||
.catch(e => {
|
||||
this.uploading = false;
|
||||
alert('%18n:!@upload-failed%');
|
||||
});
|
||||
},
|
||||
|
||||
onBannerChange([file]) {
|
||||
this.uploading = true;
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
data.append('i', (this as any).os.i.token);
|
||||
|
||||
fetch(apiUrl + '/drive/files/create', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(f => {
|
||||
this.bannerId = f.id;
|
||||
this.uploading = false;
|
||||
})
|
||||
.catch(e => {
|
||||
this.uploading = false;
|
||||
alert('%18n:!@upload-failed%');
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
this.saving = true;
|
||||
|
||||
|
|
@ -73,9 +137,16 @@ export default Vue.extend({
|
|||
name: this.name || null,
|
||||
location: this.location || null,
|
||||
description: this.description || null,
|
||||
birthday: this.birthday || null
|
||||
}).then(() => {
|
||||
birthday: this.birthday || null,
|
||||
avatarId: this.avatarId,
|
||||
bannerId: this.bannerId
|
||||
}).then(i => {
|
||||
this.saving = false;
|
||||
(this as any).os.i.avatarId = i.avatarId;
|
||||
(this as any).os.i.avatarUrl = i.avatarUrl;
|
||||
(this as any).os.i.bannerId = i.bannerId;
|
||||
(this as any).os.i.bannerUrl = i.bannerUrl;
|
||||
|
||||
alert('%i18n:!@saved%');
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue