diff --git a/package.json b/package.json
index 4b207d5e5a..b1b8888b5c 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 ba694b73ae..431b9daa65 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 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>
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index d505b38dcc..a6f4359432 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 d1ab044eaf..df8f4a8fae 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 64cfa5a46c..ceb1abb9a0 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 beae1ffa36..a94f7e94b8 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 8368365885..0000000000
--- 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";