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