Skip to content

Commit 5d098d3

Browse files
rstoenescurstoenescu
committed
fix: Match Form components height
1 parent 079eec5 commit 5d098d3

File tree

10 files changed

+144
-38
lines changed

10 files changed

+144
-38
lines changed

‎dev/components/form/size-test.vue‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div>
3+
<div class="layout-padding">
4+
<div class="row no-wrap size-test-example">
5+
<div>
6+
<p class="caption">QInput</p>
7+
<q-input v-model="text" />
8+
<q-input stack-label="Stack Label" v-model="text" />
9+
<q-input float-label="Float Label" v-model="text" />
10+
</div>
11+
12+
<div>
13+
<p class="caption">QSelect</p>
14+
<q-select v-model="select" :options="selectOptions" />
15+
<q-select stack-label="Stack Label" v-model="select" :options="selectOptions" />
16+
<q-select float-label="Float Label" v-model="select" :options="selectOptions" />
17+
</div>
18+
19+
<div>
20+
<p class="caption">QSearch</p>
21+
<q-search v-model="text" />
22+
<q-search stack-label="Stack Label" v-model="text" />
23+
<q-search float-label="Float Label" v-model="text" />
24+
</div>
25+
26+
<div>
27+
<p class="caption">QDatetime</p>
28+
<q-datetime type="time" v-model="date" />
29+
<q-datetime type="time" stack-label="Stack Label" v-model="date" />
30+
<q-datetime type="time" float-label="Float Label" v-model="date" />
31+
</div>
32+
</div>
33+
34+
<p class="caption">Inverted</p>
35+
<div class="row no-wrap size-test-example">
36+
<div>
37+
<p class="caption">QInput</p>
38+
<q-input inverted v-model="text" />
39+
<q-input inverted stack-label="Stack Label" v-model="text" />
40+
<q-input inverted float-label="Float Label" v-model="text" />
41+
</div>
42+
43+
<div>
44+
<p class="caption">QSelect</p>
45+
<q-select inverted v-model="select" :options="selectOptions" />
46+
<q-select inverted stack-label="Stack Label" v-model="select" :options="selectOptions" />
47+
<q-select inverted float-label="Float Label" v-model="select" :options="selectOptions" />
48+
</div>
49+
50+
<div>
51+
<p class="caption">QSearch</p>
52+
<q-search inverted v-model="text" />
53+
<q-search inverted stack-label="Stack Label" v-model="text" />
54+
<q-search inverted float-label="Float Label" v-model="text" />
55+
</div>
56+
57+
<div>
58+
<p class="caption">QDatetime</p>
59+
<q-datetime inverted type="time" v-model="date" />
60+
<q-datetime inverted type="time" stack-label="Stack Label" v-model="date" />
61+
<q-datetime inverted type="time" float-label="Float Label" v-model="date" />
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
</template>
67+
68+
<script>
69+
export default {
70+
data () {
71+
return {
72+
text: 'Some text',
73+
date: '2016-09-18T10:45:00.000Z',
74+
select: '',
75+
selectOptions: [
76+
{
77+
label: 'Google',
78+
value: 'goog'
79+
},
80+
{
81+
label: 'Facebook',
82+
value: 'fb'
83+
},
84+
{
85+
label: 'Twitter',
86+
value: 'twtr'
87+
},
88+
{
89+
label: 'Apple Inc.',
90+
value: 'appl'
91+
},
92+
{
93+
label: 'Oracle',
94+
value: 'ora'
95+
}
96+
]
97+
}
98+
}
99+
}
100+
</script>
101+
102+
<style lang="stylus">
103+
.size-test-example > div
104+
.q-if
105+
// border 1px solid black
106+
margin-right 8px
107+
</style>

‎src/components/chips-input/QChipsInput.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,13 @@
6565
import FrameMixin from '../input-frame/input-frame-mixin'
6666
import InputMixin from '../input/input-mixin'
6767
import { QInputFrame } from '../input-frame'
68-
import { QIcon } from '../icon'
6968
import { QChip } from '../chip'
7069
7170
export default {
7271
name: 'q-chips-input',
7372
mixins: [FrameMixin, InputMixin],
7473
components: {
7574
QInputFrame,
76-
QIcon,
7775
QChip
7876
},
7977
props: {

‎src/components/datetime/QDatetime.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@ import FrameMixin from '../input-frame/input-frame-mixin'
9797
import extend from '../../utils/extend'
9898
import { current as theme } from '../../features/theme'
9999
import { input, inline } from './datetime-props'
100-
import { QIcon } from '../icon'
101100
import { QInputFrame } from '../input-frame'
102101
import { QPopover } from '../popover'
103102
import QInlineDatetime from './QInlineDatetime'
@@ -122,7 +121,6 @@ export default {
122121
name: 'q-datetime',
123122
mixins: [FrameMixin],
124123
components: {
125-
QIcon,
126124
QInputFrame,
127125
QPopover,
128126
QModal,

‎src/components/input-frame/input-frame-mixin.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
import { QIcon } from '../icon'
2+
13
const marginal = {
24
type: Array,
35
validator: v => v.every(i => 'icon' in i && 'handler' in i)
46
}
57

68
export default {
9+
components: {
10+
QIcon
11+
},
712
props: {
813
prefix: String,
914
suffix: String,

‎src/components/input-frame/input-frame.ios.styl‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,25 +45,25 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
4545
cursor pointer
4646

4747
.q-if-inner
48-
min-height 19px !important
48+
min-height 24px !important
4949

5050
.q-if-has-label
51-
min-height 44px
51+
min-height 41px
5252
.q-if-inner
53-
min-height 39px !important
54-
padding-top 20px
53+
min-height 34px !important
54+
padding-top 15px
5555

5656
.q-if-label
5757
color rgba(0, 0, 0, .46)
5858
pointer-events none
5959
user-select none
60-
top 20px
60+
top 15px
6161
left 0
6262
right 0
6363
transform-origin left top 0
6464
transform scale(1) translate(0, 0)
6565
.q-if-label-above
66-
transform scale(.75) translate(0, -27px)
66+
transform scale(.75) translate(0, -22px)
6767

6868
.q-if-addon
6969
pointer-events none
@@ -80,7 +80,7 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
8080
cursor pointer
8181
margin-left 8px
8282
color rgba(0, 0, 0, .54)
83-
font-size 22px
83+
font-size 24px
8484
&:hover
8585
opacity .7
8686
.q-if-control-before

‎src/components/input-frame/input-frame.mat.styl‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,25 +45,25 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
4545
cursor pointer
4646

4747
.q-if-inner
48-
min-height 19px !important
48+
min-height 24px !important
4949

5050
.q-if-has-label
51-
min-height 44px
51+
min-height 41px
5252
.q-if-inner
53-
min-height 39px !important
54-
padding-top 20px
53+
min-height 34px !important
54+
padding-top 15px
5555

5656
.q-if-label
5757
color rgba(0, 0, 0, .46)
5858
pointer-events none
5959
user-select none
60-
top 20px
60+
top 15px
6161
left 0
6262
right 0
6363
transform-origin left top 0
6464
transform scale(1) translate(0, 0)
6565
.q-if-label-above
66-
transform scale(.75) translate(0, -27px)
66+
transform scale(.75) translate(0, -22px)
6767

6868
.q-if-addon
6969
pointer-events none
@@ -80,7 +80,7 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
8080
cursor pointer
8181
margin-left 8px
8282
color rgba(0, 0, 0, .54)
83-
font-size 22px
83+
font-size 24px
8484
&:hover
8585
opacity .7
8686
.q-if-control-before

‎src/components/input/QInput.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ import inputTypes from './input-types'
108108
import { frameDebounce } from '../../utils/debounce'
109109
import { between } from '../../utils/format'
110110
import { QInputFrame } from '../input-frame'
111-
import { QIcon } from '../icon'
112111
import { QResizeObservable } from '../observables'
113112
import Ripple from '../../directives/ripple'
114113
@@ -117,7 +116,6 @@ export default {
117116
mixins: [FrameMixin, InputMixin],
118117
components: {
119118
QInputFrame,
120-
QIcon,
121119
QResizeObservable
122120
},
123121
directives: {

‎src/components/input/input.ios.styl‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
padding 0
1010
color black
1111
background transparent
12-
font-size inherit
1312
min-width 70px
13+
font-size inherit
14+
line-height 1
1415
overflow hidden
1516
resize none
1617

‎src/components/input/input.mat.styl‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
padding 0
1010
color black
1111
background transparent
12-
font-size inherit
1312
min-width 70px
13+
font-size inherit
14+
line-height 1
1415
overflow hidden
1516
resize none
1617

‎src/components/select/QSelect.vue‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,22 @@
2424
@focus.native="__onOpen"
2525
@blur.native="__onBlur"
2626
>
27-
<div class="col row group">
28-
<template v-if="hasChips">
29-
<q-chip
30-
v-for="{label, value} in selectedOptions"
31-
:key="label"
32-
small
33-
:closable="!disable"
34-
:color="color"
35-
@click.native.stop
36-
@close="__toggle(value)"
37-
>
38-
{{ label }}
39-
</q-chip>
40-
</template>
41-
42-
<div v-else class="q-input-target" :class="[`text-${align}`]" v-html="actualValue"></div>
27+
<div v-if="hasChips" class="col row group">
28+
<q-chip
29+
v-for="{label, value} in selectedOptions"
30+
:key="label"
31+
small
32+
:closable="!disable"
33+
:color="color"
34+
@click.native.stop
35+
@close="__toggle(value)"
36+
>
37+
{{ label }}
38+
</q-chip>
4339
</div>
4440

41+
<div v-else class="col row q-input-target" :class="[`text-${align}`]" v-html="actualValue"></div>
42+
4543
<q-icon slot="control" name="arrow_drop_down" class="q-if-control"></q-icon>
4644

4745
<q-popover

0 commit comments

Comments
 (0)