This commit is contained in:
syuilo 2018-06-14 06:29:01 +09:00
parent 9059c149dd
commit e6e02ece89
9 changed files with 145 additions and 43 deletions

View File

@ -211,7 +211,6 @@
"vue-js-modal": "1.3.13", "vue-js-modal": "1.3.13",
"vue-json-tree-view": "2.1.4", "vue-json-tree-view": "2.1.4",
"vue-loader": "15.2.1", "vue-loader": "15.2.1",
"vue-material": "^1.0.0-beta-10.2",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-template-compiler": "2.5.16", "vue-template-compiler": "2.5.16",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",

View File

@ -7,11 +7,6 @@ html
cursor progress !important cursor progress !important
body body
// for md
font-size 16px !important
line-height initial !important
letter-spacing initial !important
overflow-wrap break-word overflow-wrap break-word
#error #error

View File

@ -29,6 +29,7 @@ import fileTypeIcon from './file-type-icon.vue';
import Switch from './switch.vue'; import Switch from './switch.vue';
import Othello from './othello.vue'; import Othello from './othello.vue';
import welcomeTimeline from './welcome-timeline.vue'; import welcomeTimeline from './welcome-timeline.vue';
import uiInput from './material/input.vue';
Vue.component('mk-analog-clock', analogClock); Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-menu', menu); Vue.component('mk-menu', menu);
@ -59,3 +60,4 @@ Vue.component('mk-file-type-icon', fileTypeIcon);
Vue.component('mk-switch', Switch); Vue.component('mk-switch', Switch);
Vue.component('mk-othello', Othello); Vue.component('mk-othello', Othello);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput);

View 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>

View File

@ -5,10 +5,6 @@
import Vue from 'vue'; import Vue from 'vue';
import VueRouter from 'vue-router'; 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 // Style
import './style.styl'; import './style.styl';
import '../../element.scss'; import '../../element.scss';
@ -44,17 +40,6 @@ import MkSettings from './views/pages/settings.vue';
import MkOthello from './views/pages/othello.vue'; import MkOthello from './views/pages/othello.vue';
import MkTag from './views/pages/tag.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 * init
*/ */

View File

@ -10,9 +10,6 @@ html
height 100% height 100%
background #ececed !important background #ececed !important
// for md
transition none !important
&[data-darkmode] &[data-darkmode]
background #191B22 !important background #191B22 !important

View File

@ -7,9 +7,16 @@
<p>%fa:lock% ログイン</p> <p>%fa:lock% ログイン</p>
<div> <div>
<form @submit.prevent="onSubmit"> <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> <button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
</form> </form>
<div> <div>
@ -33,7 +40,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { apiUrl, copyright } from '../../../config'; import { apiUrl, copyright, host } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
@ -45,7 +52,8 @@ export default Vue.extend({
token: '', token: '',
apiUrl, apiUrl,
copyright, copyright,
users: [] users: [],
host
}; };
}, },
mounted() { mounted() {

View File

@ -56,7 +56,7 @@ export default define({
left 92px left 92px
margin 0 margin 0
line-height 100px line-height 100px
color #fff !important // !important is for md color #fff
font-weight bold font-weight bold
text-shadow 0 0 8px rgba(#000, 0.5) text-shadow 0 0 8px rgba(#000, 0.5)

View File

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