wip

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",

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

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

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>

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
  */

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
 

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"/>
+					<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
-					<input v-model="password" type="password" placeholder="パスワード" required/>
+						<span>ユーザー名</span>
-					<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
+						<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() {

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)
 

src/client/md.scss

@@ -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";