[wip] better mobile setting
This commit is contained in:
syuilo
parent
a97296df45
commit
254fbbbc75
16 changed files with 220 additions and 25 deletions
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "Notifications"
|
||||
read-all: "Are you sure you want to mark all unread notifications as read?"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "Profile settings"
|
||||
will-be-published: "These profile settings will be updated."
|
||||
name: "Name"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "Notifications"
|
||||
read-all: "Êtes vous sûr de vouloir marqués toutes les notifications non-lus en tant que lus?"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "Réglages du profiles"
|
||||
will-be-published: "Ces profiles vont être publier"
|
||||
name: "Nom"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -752,7 +752,7 @@ mobile/views/pages/notifications.vue:
|
|||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "Powiadomienia"
|
||||
read-all: "Czy na pewno chcesz oznaczyć wszystkie powiadomienia jako przeczytane?"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "Ustawienia profilu"
|
||||
will-be-published: "Te ustawienia profilu zostaną zaktualizowane."
|
||||
name: "Nazwa"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -632,7 +632,7 @@ mobile/views/pages/note.vue:
|
|||
mobile/views/pages/notifications.vue:
|
||||
notifications: "通知"
|
||||
read-all: "すべての通知を既読にしますか？"
|
||||
mobile/views/pages/profile-setting.vue:
|
||||
mobile/views/pages/settings/settings.profile.vue:
|
||||
title: "プロフィール設定"
|
||||
will-be-published: "これらのプロフィールは公開されます。"
|
||||
name: "名前"
|
||||
|
|
|
|||
|
|
@ -206,6 +206,7 @@
|
|||
"vue-js-modal": "1.3.13",
|
||||
"vue-json-tree-view": "2.1.4",
|
||||
"vue-loader": "15.0.11",
|
||||
"vue-material": "^1.0.0-beta-10.2",
|
||||
"vue-router": "3.0.1",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"vuedraggable": "2.16.0",
|
||||
|
|
|
|||
|
|
@ -2,11 +2,17 @@
|
|||
* Mobile Client
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
|
||||
import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch } from 'vue-material/dist/components';
|
||||
import 'vue-material/dist/vue-material.min.css';
|
||||
import 'vue-material/dist/theme/default.css';
|
||||
|
||||
// Style
|
||||
import './style.styl';
|
||||
import '../../element.scss';
|
||||
import '../../md.scss';
|
||||
|
||||
import init from '../init';
|
||||
|
||||
|
|
@ -34,6 +40,13 @@ import MkSettings from './views/pages/settings.vue';
|
|||
import MkProfileSetting from './views/pages/profile-setting.vue';
|
||||
import MkOthello from './views/pages/othello.vue';
|
||||
|
||||
Vue.use(MdCard);
|
||||
Vue.use(MdButton);
|
||||
Vue.use(MdField);
|
||||
Vue.use(MdMenu);
|
||||
Vue.use(MdList);
|
||||
Vue.use(MdSwitch);
|
||||
|
||||
/**
|
||||
* init
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -8,10 +8,13 @@
|
|||
|
||||
html
|
||||
height 100%
|
||||
background #ececed
|
||||
background #ececed !important
|
||||
|
||||
// for md
|
||||
transition none !important
|
||||
|
||||
&[data-darkmode]
|
||||
background #191B22
|
||||
background #191B22 !important
|
||||
|
||||
body
|
||||
display flex
|
||||
|
|
|
|||
|
|
@ -1,18 +1,29 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:cog%%i18n:@settings%</span>
|
||||
<div :class="$style.content">
|
||||
<main>
|
||||
<p v-html="'%i18n:!@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p>
|
||||
<ul>
|
||||
<li><router-link to="./settings/profile">%fa:user%%i18n:@profile%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="./settings/twitter">%fa:B twitter%%i18n:@twitter%%fa:angle-right%</router-link></li>
|
||||
<li><router-link to="./settings/signin-history">%fa:sign-in-alt%%i18n:@signin-history%%fa:angle-right%</router-link></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a @click="signout">%fa:power-off%%i18n:@signout%</a></li>
|
||||
</ul>
|
||||
<p><small>ver {{ version }} ({{ codename }})</small></p>
|
||||
<div>
|
||||
<x-profile/>
|
||||
|
||||
<md-card class="md-layout-item md-size-50 md-small-size-100">
|
||||
<md-card-header>
|
||||
<div class="md-title">%i18n:@design%</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>
|
||||
<div>
|
||||
<md-switch v-model="darkmode">%i18n:@dark-mode%</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="clientSettings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</md-switch>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
<p><small>ver {{ version }} ({{ codename }})</small></p>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
|
|
@ -20,31 +31,59 @@
|
|||
import Vue from 'vue';
|
||||
import { version, codename } from '../../../config';
|
||||
|
||||
import XProfile from './settings/settings.profile.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XProfile
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
version,
|
||||
codename
|
||||
codename,
|
||||
darkmode: localStorage.getItem('darkmode') == 'true'
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
name(): string {
|
||||
return Vue.filter('userName')((this as any).os.i);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
darkmode() {
|
||||
(this as any)._updateDarkmode_(this.darkmode);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:@settings%';
|
||||
},
|
||||
|
||||
methods: {
|
||||
signout() {
|
||||
(this as any).os.signout();
|
||||
},
|
||||
|
||||
onChangeCircleIcons(v) {
|
||||
this.$store.dispatch('settings/set', {
|
||||
key: 'circleIcons',
|
||||
value: v
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.content
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
padding 0 16px
|
||||
|
||||
> div
|
||||
> *
|
||||
margin-bottom 16px
|
||||
|
||||
> p
|
||||
display block
|
||||
|
|
|
|||
126
src/client/app/mobile/views/pages/settings/settings.profile.vue
Normal file
126
src/client/app/mobile/views/pages/settings/settings.profile.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<md-card class="md-layout-item md-size-50 md-small-size-100">
|
||||
<md-card-header>
|
||||
<div class="md-title">%i18n:@title%</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>
|
||||
<md-field>
|
||||
<label>%i18n:@name%</label>
|
||||
<md-input v-model="name" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@location%</label>
|
||||
<md-input v-model="location" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@description%</label>
|
||||
<md-textarea v-model="description" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>%i18n:@birthday%</label>
|
||||
<md-input type="date" v-model="birthday" :disabled="saving"/>
|
||||
</md-field>
|
||||
|
||||
<div>
|
||||
<div class="md-body-2">%i18n:@avatar%</div>
|
||||
<md-menu md-direction="bottom-end" :md-close-on-select="true">
|
||||
<md-button md-menu-trigger>%i18n:@set-avatar%</md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item @click="uploadAvatar">%i18n:@upload-avatar%</md-menu-item>
|
||||
<md-menu-item @click="chooseAvatar">%i18n:@choose-avatar%</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="md-body-2">%i18n:@banner%</div>
|
||||
<md-menu md-direction="bottom-end" :md-close-on-select="true">
|
||||
<md-button md-menu-trigger>%i18n:@set-banner%</md-button>
|
||||
<md-menu-content>
|
||||
<md-menu-item @click="uploadAvatar">%i18n:@upload-banner%</md-menu-item>
|
||||
<md-menu-item @click="chooseAvatar">%i18n:@choose-banner%</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</div>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-primary" :disabled="saving" @click="save">%i18n:@save%</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
name: null,
|
||||
location: null,
|
||||
description: null,
|
||||
birthday: null,
|
||||
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;
|
||||
},
|
||||
methods: {
|
||||
chooseAvatar() {
|
||||
(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%');
|
||||
});
|
||||
});
|
||||
},
|
||||
chooseBanner() {
|
||||
(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%');
|
||||
});
|
||||
});
|
||||
},
|
||||
uploadAvatar() {
|
||||
// a
|
||||
},
|
||||
uploadBanner() {
|
||||
// a
|
||||
},
|
||||
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>
|
||||
13
src/client/md.scss
Normal file
13
src/client/md.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* SEE: https://vuematerial.io/themes/configuration */
|
||||
|
||||
@import '../const.json';
|
||||
|
||||
@import "~vue-material/dist/theme/engine";
|
||||
|
||||
@include md-register-theme("default", (
|
||||
primary: $themeColor,
|
||||
accent: md-get-palette-color(red, A200)
|
||||
));
|
||||
|
||||
@import "~vue-material/dist/components/MdButton/theme";
|
||||
@import "~vue-material/dist/components/MdField/theme";
|
||||
Loading…
Reference in a new issue