Better mobile setting

3 files changed, 91 insertions, 60 deletions

diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index ac7f29686f..bb02f8bb05 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -5,7 +5,7 @@
 import Vue from 'vue';
 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/theme/default.css';
 
@@ -47,6 +47,8 @@ Vue.use(MdMenu);
 Vue.use(MdList);
 Vue.use(MdSwitch);
 Vue.use(MdSubheader);
+Vue.use(MdDialog);
+Vue.use(MdDialogAlert);
 
 /**
  * init
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 2e4ae5ce36..4ebbcbcc2f 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -229,8 +229,11 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-main
+root(isDark)
 	padding 0 16px
+	margin 0 auto
+	max-width 500px
+	width 100%
 
 	> div
 		> *
@@ -240,57 +243,12 @@ main
 		display block
 		margin 24px
 		text-align center
-		color #cad2da
+		color isDark ? #cad2da : #848e9a
 
-	> ul
-		$radius = 8px
+main[data-darkmode]
+	root(true)
 
-		display block
-		margin 16px auto
-		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
+main:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue
index b81f9a8075..0315fc56bc 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -11,11 +11,6 @@
 			</md-field>
 
 			<md-field>
-				<label>%i18n:@description%</label>
-				<md-textarea v-model="description" :disabled="saving"/>
-			</md-field>
-
-			<md-field>
 				<md-icon>%fa:map-marker-alt%</md-icon>
 				<label>%i18n:@location%</label>
 				<md-input v-model="location" :disabled="saving"/>
@@ -27,6 +22,25 @@
 				<md-input type="date" v-model="birthday" :disabled="saving"/>
 			</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>
 				<md-switch v-model="os.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</md-switch>
 			</div>
@@ -40,6 +54,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { apiUrl } from '../../../../config';
 
 export default Vue.extend({
 	data() {
@@ -48,7 +63,10 @@ export default Vue.extend({
 			location: null,
 			description: null,
 			birthday: null,
-			saving: false
+			avatarId: null,
+			bannerId: null,
+			saving: false,
+			uploading: false
 		};
 	},
 
@@ -57,6 +75,8 @@ export default Vue.extend({
 		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;
+		this.avatarId = (this as any).os.i.avatarId;
+		this.bannerId = (this as any).os.i.bannerId;
 	},
 
 	methods: {
@@ -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() {
 			this.saving = true;
 
@@ -73,9 +137,16 @@ export default Vue.extend({
 				name: this.name || null,
 				location: this.location || null,
 				description: this.description || null,
-				birthday: this.birthday || null
-			}).then(() => {
+				birthday: this.birthday || null,
+				avatarId: this.avatarId,
+				bannerId: this.bannerId
+			}).then(i => {
 				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%');
 			});
 		}