wip

2 files changed, 131 insertions, 0 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 803854468e..659c2aca2a 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 0000000000..42ff0bb4b8
--- /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>