[wip] better mobile setting

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

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"

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

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"

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

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

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

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"

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

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

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

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

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

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>
+		<div>
-			<li><router-link to="./settings/profile">%fa:user%%i18n:@profile%%fa:angle-right%</router-link></li>
+			<x-profile/>
-			<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>
+			<md-card class="md-layout-item md-size-50 md-small-size-100">
-		</ul>
+				<md-card-header>
-		<ul>
+					<div class="md-title">%i18n:@design%</div>
-			<li><a @click="signout">%fa:power-off%%i18n:@signout%</a></li>
+				</md-card-header>
-		</ul>
+
+				<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>
+<style lang="stylus" scoped>
-.content
+main
+	padding 0 16px
+
+	> div
+		> *
+			margin-bottom 16px
 
 	> p
 		display block

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>

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