amybones/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

✌️

Browse source
This commit is contained in:
syuilo 2018-06-16 07:06:58 +09:00
parent 7c596be638
commit fa5a82c9ab
2 changed files with 33 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/client/app/common/views/components/signin.vue
View file

@ -1,6 +1,6 @@
<template>
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @change="onUsernameChange">
<span>%i18n:@username%</span>
<span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span>

45
src/client/app/common/views/components/ui/input.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="ui-input" :class="[{ focused, filled }, styl]">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input" @click="focus" @mousedown="focus">
<div class="input">
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
<div class="value" ref="passwordMetar"></div>
</div>
@ -30,7 +30,7 @@
:value="value"
@change="onChangeFile">
</template>
<div class="suffix"><slot name="suffix"></slot></div>
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
</div>
<div class="text"><slot name="text"></slot></div>
</div>
@ -128,6 +128,14 @@ export default Vue.extend({
mounted() {
if (this.$refs.prefix) {
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
if (this.$refs.prefix.offsetWidth) {
this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
}
}
if (this.$refs.suffix) {
if (this.$refs.suffix.offsetWidth) {
this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
}
}
},
methods: {
@ -165,14 +173,8 @@ root(isDark, fill)
margin-left 28px
> .input
display flex
cursor text
if fill
padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
else
if !fill
&:before
content ''
display block
@ -232,6 +234,7 @@ root(isDark, fill)
> .label
position absolute
z-index 1
top fill ? 6px : 0
left 0
pointer-events none
@ -247,7 +250,6 @@ root(isDark, fill)
> input
display block
flex 1
width 100%
margin 0
padding 0
@ -262,29 +264,46 @@ root(isDark, fill)
outline none
box-shadow none
if fill
padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
&[type='file']
display none
> .prefix
> .suffix
display block
align-self center
justify-self center
position absolute
z-index 1
top 0
font-size 16px
line-height 32px
line-height fill ? 44px : 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
&:empty
display none
> *
display block
min-width 16px
> .prefix
left 0
padding-right 4px
if fill
padding-left 12px
> .suffix
right 0
padding-left 4px
if fill
padding-right 12px
> .text
margin 6px 0
font-size 13px