limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-29 05:17:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

✌️

Browse source
This commit is contained in:
syuilo 2018-06-16 07:06:58 +09:00
parent 401381649d
commit 1c50e88e71
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> <template>
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit"> <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>%i18n:@username%</span>
<span slot="prefix">@</span> <span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span> <span slot="suffix">@{{ host }}</span>

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

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