Improve mobile settings

5 files changed, 32 insertions, 3 deletions

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 8ec359e83c..8cc72fb518 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -21,10 +21,13 @@ export default Vue.extend({
 		}
 	},
 	computed: {
+		lightmode(): boolean {
+			return localStorage.getItem('lightmode') == 'true';
+		},
 		style(): any {
 			return {
 				backgroundColor: this.user.avatarColor && this.user.avatarColor.length == 3 ? `rgb(${ this.user.avatarColor.join(',') })` : null,
-				backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`,
+				backgroundImage: this.lightmode ? null : `url(${ this.user.avatarUrl }?thumbnail)`,
 				borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null
 			};
 		}
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index 9e0f8e5f7e..d4ee0c66a9 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -16,10 +16,13 @@ export default Vue.extend({
 		}
 	},
 	computed: {
+		lightmode(): boolean {
+			return localStorage.getItem('lightmode') == 'true';
+		},
 		style(): any {
 			return {
 				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
+				'background-image': this.lightmode ? null : this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
 			};
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 5143a96dd5..307593e210 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -51,6 +51,10 @@
 					<div>
 						<md-switch v-model="clientSettings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</md-switch>
 					</div>
+
+					<div>
+						<md-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</md-switch>
+					</div>
 				</md-card-content>
 			</md-card>
 
@@ -134,6 +138,7 @@ export default Vue.extend({
 			version,
 			codename,
 			darkmode: localStorage.getItem('darkmode') == 'true',
+			lightmode: localStorage.getItem('lightmode') == 'true',
 			lang: localStorage.getItem('lang') || '',
 			latestVersion: undefined,
 			checkingForUpdate: false
@@ -150,6 +155,11 @@ export default Vue.extend({
 		darkmode() {
 			(this as any)._updateDarkmode_(this.darkmode);
 		},
+
+		lightmode() {
+			localStorage.setItem('lightmode', this.lightmode);
+		},
+
 		lang() {
 			localStorage.setItem('lang', this.lang);
 		}
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 0315fc56bc..8d98e11a87 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -11,6 +11,13 @@
 			</md-field>
 
 			<md-field>
+				<label>%i18n:@account%</label>
+				<span class="md-prefix">@</span>
+				<md-input v-model="username" readonly></md-input>
+				<span class="md-suffix">@{{ host }}</span>
+			</md-field>
+
+			<md-field>
 				<md-icon>%fa:map-marker-alt%</md-icon>
 				<label>%i18n:@location%</label>
 				<md-input v-model="location" :disabled="saving"/>
@@ -54,12 +61,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl } from '../../../../config';
+import { apiUrl, host } from '../../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
+			host,
 			name: null,
+			username: null,
 			location: null,
 			description: null,
 			birthday: null,
@@ -72,6 +81,7 @@ export default Vue.extend({
 
 	created() {
 		this.name = (this as any).os.i.name || '';
+		this.username = (this as any).os.i.username;
 		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;
diff --git a/src/client/app/reset.styl b/src/client/app/reset.styl
index 10bd3113a2..c0a88f27b0 100644
--- a/src/client/app/reset.styl
+++ b/src/client/app/reset.styl
@@ -1,3 +1,6 @@
+input
+	min-width 0px
+
 input:not([type])
 input[type='text']
 input[type='password']