From e6e02ece89e9e2af2ae0aa4c57cb9fcdb3d5b890 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 14 Jun 2018 06:29:01 +0900
Subject: [PATCH] wip

---
 package.json                                  |   1 -
 src/client/app/app.styl                       |   5 -
 .../app/common/views/components/index.ts      |   2 +
 .../views/components/material/input.vue       | 129 ++++++++++++++++++
 src/client/app/mobile/script.ts               |  15 --
 src/client/app/mobile/style.styl              |   3 -
 src/client/app/mobile/views/pages/welcome.vue |  18 ++-
 .../app/mobile/views/widgets/profile.vue      |   2 +-
 src/client/md.scss                            |  13 --
 9 files changed, 145 insertions(+), 43 deletions(-)
 create mode 100644 src/client/app/common/views/components/material/input.vue
 delete mode 100644 src/client/md.scss

diff --git a/package.json b/package.json
index 4b207d5e5..b1b8888b5 100644
--- a/package.json
+++ b/package.json
@@ -211,7 +211,6 @@
 		"vue-js-modal": "1.3.13",
 		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.2.1",
-		"vue-material": "^1.0.0-beta-10.2",
 		"vue-router": "3.0.1",
 		"vue-template-compiler": "2.5.16",
 		"vuedraggable": "2.16.0",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index ba694b73a..431b9daa6 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -7,11 +7,6 @@ html
 			cursor progress !important
 
 body
-	// for md
-	font-size 16px !important
-	line-height initial !important
-	letter-spacing initial !important
-
 	overflow-wrap break-word
 
 #error
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 803854468..659c2aca2 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -29,6 +29,7 @@ import fileTypeIcon from './file-type-icon.vue';
 import Switch from './switch.vue';
 import Othello from './othello.vue';
 import welcomeTimeline from './welcome-timeline.vue';
+import uiInput from './material/input.vue';
 
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
@@ -59,3 +60,4 @@ Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-switch', Switch);
 Vue.component('mk-othello', Othello);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
+Vue.component('ui-input', uiInput);
diff --git a/src/client/app/common/views/components/material/input.vue b/src/client/app/common/views/components/material/input.vue
new file mode 100644
index 000000000..42ff0bb4b
--- /dev/null
+++ b/src/client/app/common/views/components/material/input.vue
@@ -0,0 +1,129 @@
+<template>
+<div class="ui-input" :class="{ focused, filled }">
+	<div class="input">
+		<span class="label" ref="label"><slot></slot></span>
+		<div class="prefix" ref="prefix" @click="focus"><slot name="prefix"></slot></div>
+		<input ref="input" :value="value" @input="$emit('input', $event.target.value)" @focus="focused = true" @blur="focused = false">
+		<div class="suffix" @click="focus"><slot name="suffix"></slot></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['value'],
+	data() {
+		return {
+			focused: false
+		}
+	},
+	computed: {
+		filled(): boolean {
+			return this.value != '' && this.value != null;
+		}
+	},
+	mounted() {
+		this.$refs.label.style.left = this.$refs.prefix.offsetWidth + 'px';
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.ui-input
+	padding-bottom 16px
+
+	> .input
+		display flex
+		margin-top 16px
+
+		&:before
+			content ''
+			display block
+			position absolute
+			bottom 0
+			left 0
+			right 0
+			height 1px
+			background rgba(#000, 0.42)
+
+		&:after
+			content ''
+			display block
+			position absolute
+			bottom 0
+			left 0
+			right 0
+			height 2px
+			background $theme-color
+			opacity 0
+			transform scaleX(0.12)
+			transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+			will-change border opacity transform
+
+		> .label
+			position absolute
+			top 0
+			left 0
+			pointer-events none
+			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
+			transition-duration 0.3s
+			font-size 16px
+			line-height 32px
+			color rgba(#000, 0.54)
+			pointer-events none
+
+		> input
+			display block
+			flex 1
+			width 100%
+			padding 0
+			font-size 16px
+			line-height 32px
+			background transparent
+			border none
+			border-radius 0
+			outline none
+			box-shadow none
+
+		> .prefix
+		> .suffix
+			display block
+			align-self center
+			justify-self center
+			font-size 16px
+			line-height 32px
+			color rgba(#000, 0.54)
+
+		> .prefix
+			padding-right 4px
+
+		> .suffix
+			padding-left 4px
+
+	&.focused
+		> .input
+			&:after
+				opacity 1
+				transform scaleX(1)
+
+			> .label
+				color $theme-color
+
+	&.focused
+	&.filled
+		> .input
+			> .label
+				top -16px
+				left 0 !important
+				font-size 12px
+				line-height 20px
+
+</style>
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index d505b38dc..a6f435943 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -5,10 +5,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader, MdDialog, MdDialogAlert, MdRadio } 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';
@@ -44,17 +40,6 @@ import MkSettings from './views/pages/settings.vue';
 import MkOthello from './views/pages/othello.vue';
 import MkTag from './views/pages/tag.vue';
 
-Vue.use(MdCard);
-Vue.use(MdButton);
-Vue.use(MdField);
-Vue.use(MdMenu);
-Vue.use(MdList);
-Vue.use(MdSwitch);
-Vue.use(MdSubheader);
-Vue.use(MdDialog);
-Vue.use(MdDialogAlert);
-Vue.use(MdRadio);
-
 /**
  * init
  */
diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl
index d1ab044ea..df8f4a8fa 100644
--- a/src/client/app/mobile/style.styl
+++ b/src/client/app/mobile/style.styl
@@ -10,9 +10,6 @@ html
 	height 100%
 	background #ececed !important
 
-	// for md
-	transition none !important
-
 	&[data-darkmode]
 		background #191B22 !important
 
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 64cfa5a46..ceb1abb9a 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -7,9 +7,16 @@
 			<p>%fa:lock% ログイン</p>
 			<div>
 				<form @submit.prevent="onSubmit">
-					<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
-					<input v-model="password" type="password" placeholder="パスワード" required/>
-					<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
+					<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
+						<span>ユーザー名</span>
+						<span slot="prefix">@</span>
+						<span slot="suffix">@{{ host }}</span>
+					</ui-input>
+					<ui-input v-model="password" type="password" placeholder="パスワード" required>
+						<span>パスワード</span>
+						<span slot="prefix">%fa:lock%</span>
+					</ui-input>
+					<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
 					<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
 				</form>
 				<div>
@@ -33,7 +40,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl, copyright } from '../../../config';
+import { apiUrl, copyright, host } from '../../../config';
 
 export default Vue.extend({
 	data() {
@@ -45,7 +52,8 @@ export default Vue.extend({
 			token: '',
 			apiUrl,
 			copyright,
-			users: []
+			users: [],
+			host
 		};
 	},
 	mounted() {
diff --git a/src/client/app/mobile/views/widgets/profile.vue b/src/client/app/mobile/views/widgets/profile.vue
index beae1ffa3..a94f7e94b 100644
--- a/src/client/app/mobile/views/widgets/profile.vue
+++ b/src/client/app/mobile/views/widgets/profile.vue
@@ -56,7 +56,7 @@ export default define({
 	left 92px
 	margin 0
 	line-height 100px
-	color #fff !important // !important is for md
+	color #fff
 	font-weight bold
 	text-shadow 0 0 8px rgba(#000, 0.5)
 
diff --git a/src/client/md.scss b/src/client/md.scss
deleted file mode 100644
index 836836588..000000000
--- a/src/client/md.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/* SEE: https://vuematerial.io/themes/configuration */
-
-@import '../const.json';
-
-@import "~vue-material/dist/theme/engine";
-
-@include md-register-theme("default", (
-	primary: $themeColor,
-	accent: $themeColor
-));
-
-@import "~vue-material/dist/components/MdButton/theme";
-@import "~vue-material/dist/components/MdField/theme";