HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
syuilo 2018-06-14 18:53:02 +09:00
parent 120c11b181
commit c5e9b69eb3
5 changed files with 188 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/client/app/common/views/components/ui/card.vue
View file

@ -10,17 +10,23 @@
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({});
export default Vue.extend({
provide() {
return {
isCardChild: true
};
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.ui-card
margin 16px 0
padding 32px
margin 16px
padding 16px
background #fff
//box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> header
font-weight bold

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

@ -1,14 +1,16 @@
<template>
<div class="ui-input" :class="{ focused, filled }">
<div class="ui-input" :class="[{ focused, filled }, styl]">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input" @click="focus">
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
<div class="value" ref="passwordMetar"></div>
</div>
<span class="label" ref="label"><slot></slot></span>
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<template v-if="type != 'file'">
<input ref="input"
:type="type"
:value="value"
:value="v"
:required="required"
:readonly="readonly"
:pattern="pattern"
@ -16,6 +18,18 @@
@input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false">
</template>
<template v-else>
<input ref="input"
type="text"
:value="placeholder"
readonly
@click="chooseFile">
<input ref="file"
type="file"
:value="value"
@change="onChangeFile">
</template>
<div class="suffix"><slot name="suffix"></slot></div>
</div>
<div class="text"><slot name="text"></slot></div>
@ -59,17 +73,34 @@ export default Vue.extend({
},
data() {
return {
v: this.value,
focused: false,
passwordStrength: ''
}
passwordStrength: '',
styl: 'fill'
};
},
computed: {
filled(): boolean {
return this.value != '' && this.value != null;
return this.v != '' && this.v != null;
},
placeholder(): string {
if (this.type != 'file') return null;
if (this.v == null) return null;
if (typeof this.v == 'string') return this.v;
if (Array.isArray(this.v)) {
return this.v.map(file => file.name).join(', ');
} else {
return this.v.name;
}
}
},
watch: {
value(v) {
this.v = v;
},
v(v) {
if (this.withPasswordMeter) {
if (v == '') {
this.passwordStrength = '';
@ -82,6 +113,12 @@ export default Vue.extend({
}
}
},
inject: ['isCardChild'],
created() {
if (this.isCardChild) {
this.styl = 'line';
}
},
mounted() {
if (this.$refs.prefix) {
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
@ -90,6 +127,14 @@ export default Vue.extend({
methods: {
focus() {
this.$refs.input.focus();
},
chooseFile() {
this.$refs.file.click();
},
onChangeFile() {
this.v = Array.from((this.$refs.file as any).files);
this.$emit('input', this.v);
this.$emit('change', this.v);
}
}
});
@ -98,14 +143,52 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.ui-input
root(isDark, fill)
margin 32px 0
> .icon
position absolute
top 0
left 0
width 24px
text-align center
line-height 32px
color rgba(#000, 0.54)
&:not(:empty) + .input
margin-left 28px
> .input
display flex
if fill
padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
else
&: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
> .password-meter
position absolute
@ -142,7 +225,7 @@ export default Vue.extend({
> .label
position absolute
top 6px
top fill ? 6px : 0
left 0
pointer-events none
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
@ -161,7 +244,7 @@ export default Vue.extend({
width 100%
padding 0
font inherit
font-weight bold
font-weight fill ? bold : normal
font-size 16px
line-height 32px
background transparent
@ -170,6 +253,9 @@ export default Vue.extend({
outline none
box-shadow none
&[type='file']
display none
> .prefix
> .suffix
display block
@ -199,7 +285,12 @@ export default Vue.extend({
&.focused
> .input
if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
transform scaleX(1)
> .label
color $theme-color
@ -208,8 +299,20 @@ export default Vue.extend({
&.filled
> .input
> .label
top -24px
top fill ? -24px : -16px
left 0 !important
transform scale(0.8)
.ui-input[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-input:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style>

1
src/client/app/common/views/components/ui/switch.vue
View file

@ -143,7 +143,6 @@ root(isDark)
> span
display block
line-height 20px
font-weight bold
color isDark ? #c4ccd2 : rgba(#000, 0.75)
transition inherit

50
src/client/app/common/views/components/ui/textarea.vue
View file

@ -65,13 +65,43 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.ui-textarea
root(isDark, fill)
margin 32px 0
> .input
padding 12px
if fill
background rgba(#000, 0.035)
border-radius 6px
else
&:before
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
border solid 1px rgba(#000, 0.42)
border-radius 3px
pointer-events none
&:after
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
border solid 2px $theme-color
border-radius 3px
opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
pointer-events none
> .label
position absolute
@ -94,7 +124,7 @@ export default Vue.extend({
min-height 100px
padding 0
font inherit
font-weight bold
font-weight fill ? bold : normal
font-size 16px
background transparent
border none
@ -111,7 +141,11 @@ export default Vue.extend({
&.focused
> .input
if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
> .label
color $theme-color
@ -124,4 +158,16 @@ export default Vue.extend({
left 0 !important
transform scale(0.8)
.ui-textarea[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-textarea:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style>

4
src/client/app/mobile/views/pages/settings/settings.profile.vue
View file

@ -29,12 +29,12 @@
<ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span>
<span slot="prefix">%fa:picture-o%</span>
<span slot="icon">%fa:image%</span>
</ui-input>
<ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span>
<span slot="prefix">%fa:picture-o%</span>
<span slot="icon">%fa:image%</span>
</ui-input>
<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>