Skip to content
Snippets Groups Projects
Commit 853ee415 authored by syuilo's avatar syuilo
Browse files

Better mobile setting

parent ff6409be
No related branches found
No related tags found
No related merge requests found
...@@ -813,9 +813,13 @@ mobile/views/pages/settings/settings.profile.vue: ...@@ -813,9 +813,13 @@ mobile/views/pages/settings/settings.profile.vue:
location: "場所" location: "場所"
description: "自己紹介" description: "自己紹介"
birthday: "誕生日" birthday: "誕生日"
avatar: "アイコン"
banner: "バナー"
is-bot: "このアカウントはBotです" is-bot: "このアカウントはBotです"
save: "保存" save: "保存"
saved: "プロフィールを保存しました" saved: "プロフィールを保存しました"
uploading: "アップロード中"
upload-failed: "アップロードに失敗しました"
mobile/views/pages/search.vue: mobile/views/pages/search.vue:
search: "検索" search: "検索"
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
import Vue from 'vue'; import Vue from 'vue';
import VueRouter from 'vue-router'; 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/vue-material.min.css';
import 'vue-material/dist/theme/default.css'; import 'vue-material/dist/theme/default.css';
...@@ -47,6 +47,8 @@ Vue.use(MdMenu); ...@@ -47,6 +47,8 @@ Vue.use(MdMenu);
Vue.use(MdList); Vue.use(MdList);
Vue.use(MdSwitch); Vue.use(MdSwitch);
Vue.use(MdSubheader); Vue.use(MdSubheader);
Vue.use(MdDialog);
Vue.use(MdDialogAlert);
/** /**
* init * init
......
...@@ -229,8 +229,11 @@ export default Vue.extend({ ...@@ -229,8 +229,11 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
main root(isDark)
padding 0 16px padding 0 16px
margin 0 auto
max-width 500px
width 100%
> div > div
> * > *
...@@ -240,57 +243,12 @@ main ...@@ -240,57 +243,12 @@ main
display block display block
margin 24px margin 24px
text-align center text-align center
color #cad2da color isDark ? #cad2da : #848e9a
> ul main[data-darkmode]
$radius = 8px root(true)
display block main:not([data-darkmode])
margin 16px auto root(false)
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
</style> </style>
...@@ -10,11 +10,6 @@ ...@@ -10,11 +10,6 @@
<md-input v-model="name" :disabled="saving"/> <md-input v-model="name" :disabled="saving"/>
</md-field> </md-field>
<md-field>
<label>%i18n:@description%</label>
<md-textarea v-model="description" :disabled="saving"/>
</md-field>
<md-field> <md-field>
<md-icon>%fa:map-marker-alt%</md-icon> <md-icon>%fa:map-marker-alt%</md-icon>
<label>%i18n:@location%</label> <label>%i18n:@location%</label>
...@@ -27,6 +22,25 @@ ...@@ -27,6 +22,25 @@
<md-input type="date" v-model="birthday" :disabled="saving"/> <md-input type="date" v-model="birthday" :disabled="saving"/>
</md-field> </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> <div>
<md-switch v-model="os.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</md-switch> <md-switch v-model="os.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</md-switch>
</div> </div>
...@@ -40,6 +54,7 @@ ...@@ -40,6 +54,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { apiUrl } from '../../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
...@@ -48,7 +63,10 @@ export default Vue.extend({ ...@@ -48,7 +63,10 @@ export default Vue.extend({
location: null, location: null,
description: null, description: null,
birthday: null, birthday: null,
saving: false avatarId: null,
bannerId: null,
saving: false,
uploading: false
}; };
}, },
...@@ -57,6 +75,8 @@ export default Vue.extend({ ...@@ -57,6 +75,8 @@ export default Vue.extend({
this.location = (this as any).os.i.profile.location; this.location = (this as any).os.i.profile.location;
this.description = (this as any).os.i.description; this.description = (this as any).os.i.description;
this.birthday = (this as any).os.i.profile.birthday; 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: { methods: {
...@@ -66,6 +86,50 @@ export default Vue.extend({ ...@@ -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() { save() {
this.saving = true; this.saving = true;
...@@ -73,9 +137,16 @@ export default Vue.extend({ ...@@ -73,9 +137,16 @@ export default Vue.extend({
name: this.name || null, name: this.name || null,
location: this.location || null, location: this.location || null,
description: this.description || null, description: this.description || null,
birthday: this.birthday || null birthday: this.birthday || null,
}).then(() => { avatarId: this.avatarId,
bannerId: this.bannerId
}).then(i => {
this.saving = false; 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%'); alert('%i18n:!@saved%');
}); });
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment