From 254fbbbc753fd1a0496f67204d3058f7cada107e Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 19 May 2018 20:31:13 +0900 Subject: [PATCH] [wip] better mobile setting --- locales/de.yml | 2 +- locales/en.yml | 2 +- locales/es.yml | 2 +- locales/fr.yml | 2 +- locales/it.yml | 2 +- locales/ja.yml | 2 +- locales/ko.yml | 2 +- locales/pl.yml | 2 +- locales/ru.yml | 2 +- locales/zh.yml | 2 +- package.json | 1 + src/client/app/mobile/script.ts | 13 ++ src/client/app/mobile/style.styl | 7 +- .../app/mobile/views/pages/settings.vue | 65 +++++++-- .../views/pages/settings/settings.profile.vue | 126 ++++++++++++++++++ src/client/md.scss | 13 ++ 16 files changed, 220 insertions(+), 25 deletions(-) create mode 100644 src/client/app/mobile/views/pages/settings/settings.profile.vue create mode 100644 src/client/md.scss diff --git a/locales/de.yml b/locales/de.yml index 97d304e75a..67b363c47f 100644 --- a/locales/de.yml +++ b/locales/de.yml @@ -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: "名前" diff --git a/locales/en.yml b/locales/en.yml index 5b38f775d4..93eda474ea 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -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" diff --git a/locales/es.yml b/locales/es.yml index d091e77563..9ec80fa683 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -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: "名前" diff --git a/locales/fr.yml b/locales/fr.yml index 35ebd5f77d..541ad26723 100644 --- a/locales/fr.yml +++ b/locales/fr.yml @@ -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" diff --git a/locales/it.yml b/locales/it.yml index d091e77563..9ec80fa683 100644 --- a/locales/it.yml +++ b/locales/it.yml @@ -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: "名前" diff --git a/locales/ja.yml b/locales/ja.yml index 4563e9485b..c3ee3e6c9f 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -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: "名前" diff --git a/locales/ko.yml b/locales/ko.yml index d091e77563..9ec80fa683 100644 --- a/locales/ko.yml +++ b/locales/ko.yml @@ -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: "名前" diff --git a/locales/pl.yml b/locales/pl.yml index beafb9603a..a58457e24f 100644 --- a/locales/pl.yml +++ b/locales/pl.yml @@ -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" diff --git a/locales/ru.yml b/locales/ru.yml index d091e77563..9ec80fa683 100644 --- a/locales/ru.yml +++ b/locales/ru.yml @@ -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: "名前" diff --git a/locales/zh.yml b/locales/zh.yml index d091e77563..9ec80fa683 100644 --- a/locales/zh.yml +++ b/locales/zh.yml @@ -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: "名前" diff --git a/package.json b/package.json index 9464d2d739..3fa261b8a1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 1405139be6..427c177a14 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -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 */ diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl index 847ae8eec5..d1ab044eaf 100644 --- a/src/client/app/mobile/style.styl +++ b/src/client/app/mobile/style.styl @@ -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 diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 0e9c5ea962..b16860d62c 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -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> + <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> - </div> + </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 diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue new file mode 100644 index 0000000000..6b5d07cce9 --- /dev/null +++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue @@ -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> diff --git a/src/client/md.scss b/src/client/md.scss new file mode 100644 index 0000000000..d850863efd --- /dev/null +++ b/src/client/md.scss @@ -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";