wip
This commit is contained in:
syuilo
parent
9059c149dd
commit
e6e02ece89
9 changed files with 145 additions and 43 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
129
src/client/app/common/views/components/material/input.vue
Normal file
129
src/client/app/common/views/components/material/input.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@ html
|
|||
height 100%
|
||||
background #ececed !important
|
||||
|
||||
// for md
|
||||
transition none !important
|
||||
|
||||
&[data-darkmode]
|
||||
background #191B22 !important
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
Loading…
Reference in a new issue