[wip] better mobile setting

This commit is contained in:
syuilo 2018-05-19 20:31:13 +09:00
parent a97296df45
commit 254fbbbc75
16 changed files with 220 additions and 25 deletions

View file

@ -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: "名前"

View file

@ -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"

View file

@ -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: "名前"

View file

@ -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"

View file

@ -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: "名前"

View file

@ -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: "名前"

View file

@ -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: "名前"

View file

@ -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"

View file

@ -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: "名前"

View file

@ -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: "名前"

View file

@ -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",

View file

@ -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
*/

View file

@ -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

View file

@ -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

View 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
View 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";