wip

src/client/app/common/views/components/signup.vue

@@ -1,6 +1,6 @@
 <template>
-<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
+<form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
-	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" autocomplete="off" required @input="onChangeUsername">
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" required @input="onChangeUsername">
 		<span>%i18n:@username%</span>
 		<span slot="prefix">@</span>
 		<span slot="suffix">@{{ host }}</span>
@@ -12,7 +12,7 @@
 		<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p>
 		<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
 	</ui-input>
-	<ui-input v-model="password" type="password" autocomplete="off" required @input="onChangePassword" :with-password-meter="true">
+	<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true">
 		<span>%i18n:@password%</span>
 		<span slot="prefix">%fa:lock%</span>
 		<div slot="text">
@@ -21,7 +21,7 @@
 			<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
 		</div>
 	</ui-input>
-	<ui-input v-model="retypedPassword" type="password" autocomplete="off" required @input="onChangePasswordRetype">
+	<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
 		<span>%i18n:@password% (%i18n:@retype%)</span>
 		<span slot="prefix">%fa:lock%</span>
 		<div slot="text">
@@ -31,7 +31,7 @@
 	</ui-input>
 	<div class="g-recaptcha" :data-sitekey="recaptchaSitekey" style="margin: 16px 0;"></div>
 	<label class="agree-tou" style="display: block; margin: 16px 0;">
-		<input name="agree-tou" type="checkbox" autocomplete="off" required/>
+		<input name="agree-tou" type="checkbox" required/>
 		<p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p>
 	</label>
 	<ui-button type="submit">%i18n:@create%</ui-button>

src/client/app/common/views/components/ui/button.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="ui-button">
+<div class="ui-button" :class="[styl]">
-	<button :type="type">
+	<button :type="type" @click="$emit('click')">
 		<slot></slot>
 	</button>
 </div>
@@ -20,7 +20,9 @@ export default Vue.extend({
 			styl: 'fill'
 		};
 	},
-	inject: ['isCardChild'],
+	inject: {
+		isCardChild: { default: false }
+	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';

src/client/app/common/views/components/ui/card.vue

@@ -25,9 +25,13 @@ export default Vue.extend({
 root(isDark)
 	margin 16px
 	padding 16px
+	color isDark ? #fff : #000
 	background isDark ? #282C37 : #fff
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
+	@media (min-width 500px)
+		padding 32px
+
 	> header
 		font-weight normal
 		font-size 24px

src/client/app/common/views/components/ui/form.vue

@@ -11,7 +11,7 @@ import Vue from 'vue';
 export default Vue.extend({
 	props: {
 		disabled: {
-			type: String,
+			type: Boolean,
 			required: false
 		}
 	}

src/client/app/common/views/components/ui/input.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="ui-input" :class="[{ focused, filled }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
-	<div class="input" @click="focus">
+	<div class="input" @click="focus" @mousedown="focus">
 		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
 			<div class="value" ref="passwordMetar"></div>
 		</div>
@@ -62,7 +62,6 @@ export default Vue.extend({
 			required: false
 		},
 		autocomplete: {
-			type: String,
 			required: false
 		},
 		withPasswordMeter: {
@@ -113,7 +112,9 @@ export default Vue.extend({
 			}
 		}
 	},
-	inject: ['isCardChild'],
+	inject: {
+		isCardChild: { default: false }
+	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';
@@ -160,6 +161,7 @@ root(isDark, fill)
 
 	> .input
 		display flex
+		cursor text
 
 		if fill
 			padding 6px 12px

src/client/app/common/views/components/ui/radio.vue

@@ -87,7 +87,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px rgba(#000, 0.54)
+		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 		border-radius 100%
 		transition inherit
 

src/client/app/common/views/components/ui/select.vue

@@ -48,7 +48,9 @@ export default Vue.extend({
 			this.v = v;
 		}
 	},
-	inject: ['isCardChild'],
+	inject: {
+		isCardChild: { default: false }
+	},
 	created() {
 		if (this.isCardChild) {
 			this.styl = 'line';
@@ -101,7 +103,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background rgba(#000, 0.42)
+				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
 
 			&:after
 				content ''
@@ -141,14 +143,15 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			height 32px
+			color isDark ? #fff : #000
 			background transparent
 			border none
 			border-radius 0
 			outline none
 			box-shadow none
 
-			&[type='file']
+			*
-				display none
+				color #000
 
 		> .prefix
 		> .suffix

src/client/app/common/views/components/ui/switch.vue

@@ -92,7 +92,7 @@ root(isDark)
 		margin 3px 0 0 0
 		width 34px
 		height 14px
-		background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
+		background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
 		outline none
 		border-radius 14px
 		transition inherit

src/client/app/config.ts

@@ -1,6 +1,8 @@
 declare const _HOST_: string;
 declare const _HOSTNAME_: string;
 declare const _URL_: string;
+declare const _NAME_: string;
+declare const _DESCRIPTION_: string;
 declare const _API_URL_: string;
 declare const _WS_URL_: string;
 declare const _DOCS_URL_: string;
@@ -21,6 +23,8 @@ declare const _GOOGLE_MAPS_API_KEY_: string;
 export const host = _HOST_;
 export const hostname = _HOSTNAME_;
 export const url = _URL_;
+export const name = _NAME_;
+export const description = _DESCRIPTION_;
 export const apiUrl = _API_URL_;
 export const wsUrl = _WS_URL_;
 export const docsUrl = _DOCS_URL_;

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

@@ -1,41 +1,27 @@
 <template>
 <mk-ui>
 	<span slot="header">%fa:cog%%i18n:@settings%</span>
-	<main>
+	<main :data-darkmode="$store.state.device.darkmode">
-		<p v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p>
+		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
+
 		<div>
 			<x-profile/>
 
 			<ui-card>
 				<div slot="title">%fa:palette% %i18n:@design%</div>
 
-				<div>
+				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
-					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
+				<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
-				</div>
-
-				<div>
-					<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
-				</div>
 
 				<div>
 					<div class="md-body-2">%i18n:@timeline%</div>
-
+					<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
-					<div>
+					<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
-						<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
+					<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
-					</div>
-
-					<div>
-						<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
-					</div>
-
-					<div>
-						<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
-					</div>
 				</div>
 
 				<div>
 					<div class="md-body-2">%i18n:@post-style%</div>
-
 					<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio>
 					<ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio>
 				</div>
@@ -43,26 +29,11 @@
 
 			<ui-card>
 				<div slot="title">%fa:cog% %i18n:@behavior%</div>
-
+				<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
-				<div>
+				<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
-					<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
+				<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
-				</div>
+				<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
-
+				<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
-				<div>
-					<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
-				</div>
-
-				<div>
-					<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
-				</div>
-
-				<div>
-					<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
-				</div>
-
-				<div>
-					<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
-				</div>
 			</ui-card>
 
 			<ui-card>
@@ -98,13 +69,16 @@
 				<template v-if="latestVersion !== undefined">
 					<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
 				</template>
-				<md-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
+				<ui-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
 					<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
 					<template v-else>%i18n:@check-for-updates%</template>
-				</md-button>
+				</ui-button>
 			</ui-card>
 		</div>
-		<p><small>ver {{ version }} ({{ codename }})</small></p>
+
+		<footer>
+			<small>ver {{ version }} ({{ codename }})</small>
+		</footer>
 	</main>
 </mk-ui>
 </template>
@@ -249,13 +223,18 @@ root(isDark)
 	max-width 500px
 	width 100%
 
-	> p
+	> .signin-as
-		display block
+		margin 16px
-		margin 16px 0
 		padding 16px
 		text-align center
-		color isDark ? #cad2da : #2c662d
+		color isDark ? #49ab63 : #2c662d
-		background #fcfff5
+		background isDark ? #273c34 : #fcfff5
+		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
+	> footer
+		margin 16px
+		text-align center
+		color isDark ? #c9d2e0 : #888
 
 main[data-darkmode]
 	root(true)

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

@@ -30,11 +30,13 @@
 		<ui-input type="file" @change="onAvatarChange">
 			<span>%i18n:@avatar%</span>
 			<span slot="icon">%fa:image%</span>
+			<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
 		</ui-input>
 
 		<ui-input type="file" @change="onBannerChange">
 			<span>%i18n:@banner%</span>
 			<span slot="icon">%fa:image%</span>
+			<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
 		</ui-input>
 
 		<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
@@ -62,7 +64,8 @@ export default Vue.extend({
 			isBot: false,
 			isCat: false,
 			saving: false,
-			uploading: false
+			avatarUploading: false,
+			bannerUploading: false
 		};
 	},
 
@@ -80,7 +83,7 @@ export default Vue.extend({
 
 	methods: {
 		onAvatarChange([file]) {
-			this.uploading = true;
+			this.avatarUploading = true;
 
 			const data = new FormData();
 			data.append('file', file);
@@ -93,16 +96,16 @@ export default Vue.extend({
 			.then(response => response.json())
 			.then(f => {
 				this.avatarId = f.id;
-				this.uploading = false;
+				this.avatarUploading = false;
 			})
 			.catch(e => {
-				this.uploading = false;
+				this.avatarUploading = false;
 				alert('%18n:!@upload-failed%');
 			});
 		},
 
 		onBannerChange([file]) {
-			this.uploading = true;
+			this.bannerUploading = true;
 
 			const data = new FormData();
 			data.append('file', file);
@@ -115,10 +118,10 @@ export default Vue.extend({
 			.then(response => response.json())
 			.then(f => {
 				this.bannerId = f.id;
-				this.uploading = false;
+				this.bannerUploading = false;
 			})
 			.catch(e => {
-				this.uploading = false;
+				this.bannerUploading = false;
 				alert('%18n:!@upload-failed%');
 			});
 		},

src/client/app/mobile/views/pages/welcome.vue

@@ -35,7 +35,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl, copyright, host } from '../../../config';
+import { apiUrl, copyright, host, name, description } from '../../../config';
 
 export default Vue.extend({
 	data() {
@@ -48,7 +48,9 @@ export default Vue.extend({
 			apiUrl,
 			copyright,
 			users: [],
-			host
+			host,
+			name,
+			description
 		};
 	},
 	mounted() {

src/config/types.ts

@@ -15,6 +15,8 @@ export type Source = {
 		 */
 		url: string;
 	};
+	name?: string;
+	description?: string;
 	url: string;
 	port: number;
 	https?: { [x: string]: string };

webpack.config.ts

@@ -79,6 +79,8 @@ const consts = {
 	_DEV_URL_: config.dev_url,
 	_LANG_: '%lang%',
 	_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
+	_NAME_: config.name,
+	_DESCRIPTION_: config.description,
 	_HOST_: config.host,
 	_HOSTNAME_: config.hostname,
 	_URL_: config.url,