Improve mobile settings

locales/ja.yml

@@ -810,6 +810,7 @@ mobile/views/pages/settings/settings.profile.vue:
   title: "プロフィール"
   will-be-published: "これらのプロフィールは公開されます。"
   name: "名前"
+  account: "アカウント"
   location: "場所"
   description: "自己紹介"
   birthday: "誕生日"
@@ -837,6 +838,7 @@ mobile/views/pages/settings.vue:
   specify-language: "言語を指定"
   design: "デザインと表示"
   dark-mode: "ダークモード"
+  i-am-under-limited-internet: "私は通信を制限されている"
   circle-icons: "円形のアイコンを使用"
   timeline: "タイムライン"
   show-reply-target: "リプライ先を表示する"

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

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)`
 			};
 		}
 	}

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);
 		}

src/client/app/mobile/views/pages/settings/settings.profile.vue

@@ -10,6 +10,13 @@
 				<md-input v-model="name" :disabled="saving"/>
 			</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>
@@ -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;

src/client/app/reset.styl

@@ -1,3 +1,6 @@
+input
+	min-width 0px
+
 input:not([type])
 input[type='text']
 input[type='password']