Skip to content

Commit 5404abd

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
close quasarframework#1631, close quasarframework#1776: Adjust inputs to align to 8px to line (quasarframework#1632)
* Implement full material (box, full-width, dense) - add props: box, fullWidth, dense close quasarframework#1631, close quasarframework#1776 * Fix size test * Move some values to variables * More adjustments
1 parent 6d76338 commit 5404abd

34 files changed

+672
-249
lines changed

‎dev/components/form/all.vue‎

Lines changed: 151 additions & 105 deletions
Large diffs are not rendered by default.

‎dev/components/form/all2.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div>
33
<div class="layout-padding">
44
<div class="q-pa-md" :class="dark ? 'bg-black' : null">
5+
<q-input :readonly="readonly" :disable="disable" :dark="dark" color="warning" class="q-my-sm" v-model="text" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
56
<q-input :readonly="readonly" :disable="disable" :dark="dark" color="warning" class="q-my-sm" v-model="text" placeholder="Placeholder" float-label="With placeholder" clearable suffix="SUF" prefix="PRE" />
67
<q-input :readonly="readonly" :disable="disable" :dark="dark" inverted-light color="warning" class="q-my-sm" v-model="text" placeholder="Placeholder" float-label="With placeholder" clearable suffix="SUF" prefix="PRE" />
78
<q-input :readonly="readonly" :disable="disable" :dark="dark" warning class="q-my-sm" v-model="text" placeholder="Placeholder" float-label="With placeholder" clearable suffix="SUF" prefix="PRE" />

‎dev/components/form/search.vue‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,28 @@
66
</div>
77

88
<div style="margin-top: 15px">
9-
<q-search @change="onChange" @input="onInput" @clear="onClear" v-model="search" align="right" suffix="Quasar" style="width: 300px"></q-search>
10-
<q-search @change="onChange" @input="onInput" @clear="onClear" clear-value="" v-model="search" color="orange" placeholder="Search"></q-search>
11-
<q-search @change="val => { search = val; onChange(val); }" @input="onInput" @clear="onClear" :value="search" color="orange" placeholder="Search (onChange)"></q-search>
12-
<q-search v-model="search" color="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
13-
<q-search v-model="search" color="primary" icon="local_airport" placeholder="Airports"></q-search>
14-
<q-search v-model="search" color="dark" icon="local_hotel" placeholder="Hotels"></q-search>
15-
<q-search stack-label="Stack Label" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
16-
<q-search hide-underline stack-label="Stack Label (hide underline)" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
9+
<q-search prefix="PRE" suffix="SUF" @change="onChange" @input="onInput" @clear="onClear" v-model="search" align="right" style="width: 300px"></q-search>
10+
<q-search prefix="PRE" suffix="SUF" @change="onChange" @input="onInput" @clear="onClear" clear-value="" v-model="search" color="orange" placeholder="Search"></q-search>
11+
<q-search prefix="PRE" suffix="SUF" @change="val => { search = val; onChange(val); }" @input="onInput" @clear="onClear" :value="search" color="orange" placeholder="Search (onChange)"></q-search>
12+
<q-search prefix="PRE" suffix="SUF" v-model="search" color="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
13+
<q-search prefix="PRE" suffix="SUF" v-model="search" color="primary" icon="local_airport" placeholder="Airports"></q-search>
14+
<q-search prefix="PRE" suffix="SUF" v-model="search" color="dark" icon="local_hotel" placeholder="Hotels"></q-search>
15+
<q-search prefix="PRE" suffix="SUF" stack-label="Stack Label" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
16+
<q-search prefix="PRE" suffix="SUF" float-label="Float Label" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
17+
<q-search prefix="PRE" suffix="SUF" hide-underline stack-label="Stack Label (hide underline)" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
18+
<q-search prefix="PRE" suffix="SUF" hide-underline float-label="Float Label (hide underline)" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
1719
</div>
1820

1921
<div style="margin-top: 15px">
20-
<q-search inverted v-model="search" align="right" suffix="Quasar" style="width: 300px"></q-search>
21-
<q-search inverted v-model="search" color="orange"></q-search>
22-
<q-search inverted v-model="search" color="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
23-
<q-search inverted v-model="search" color="primary" icon="local_airport" placeholder="Airports"></q-search>
24-
<q-search inverted v-model="search" color="dark" icon="local_hotel" placeholder="Hotels"></q-search>
25-
<q-search inverted v-model="search" color="amber" icon="local_hotel" placeholder="Hotels" stack-label="Stack Label"></q-search>
26-
<q-search inverted v-model="search" color="white" :dark="false" icon="local_hotel" placeholder="Hotels"></q-search>
27-
<q-search inverted v-model="search" color="white" :dark="false" icon="local_hotel" placeholder="Hotels" stack-label="Stack Label"></q-search>
22+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" align="right" style="width: 300px"></q-search>
23+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="orange"></q-search>
24+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
25+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="primary" icon="local_airport" placeholder="Airports"></q-search>
26+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="dark" icon="local_hotel" placeholder="Hotels"></q-search>
27+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="amber" icon="local_hotel" placeholder="Hotels" stack-label="Stack Label"></q-search>
28+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="white" :dark="false" icon="local_hotel" placeholder="Hotels"></q-search>
29+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="primary" :dark="false" icon="local_hotel" placeholder="Hotels" stack-label="Stack Label"></q-search>
30+
<q-search inverted v-model="search" prefix="PRE" suffix="SUF" color="primary" :dark="false" icon="local_hotel" placeholder="Hotels" float-label="Float Label"></q-search>
2831
</div>
2932

3033
<p class="caption">Numeric Format</p>

‎src/components/btn/btn-mixin.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ const sizes = {
88
md: 14,
99
lg: 20,
1010
xl: 24,
11-
form: 12.446,
12-
'form-label': 17.11,
13-
'form-hide-underline': 9.335,
14-
'form-label-hide-underline': 14,
11+
form: 12.444,
12+
'form-label': 17.42,
13+
'form-hide-underline': 9.332,
14+
'form-label-hide-underline': 14.31,
1515
'form-inverted': 15.555,
16-
'form-label-inverted': 20.22
16+
'form-label-inverted': 20.53
1717
}
1818

1919
export default {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
:inverted="inverted"
1313
:invertedLight="invertedLight"
1414
:dark="dark"
15+
:dense="dense"
16+
:box="box"
17+
:full-width="fullWidth"
1518
:hide-underline="hideUnderline"
1619
:before="before"
1720
:after="after"
@@ -27,6 +30,7 @@
2730
<div class="col row items-center group q-input-chips">
2831
<q-chip
2932
small
33+
:dense="dense"
3034
:closable="editable"
3135
v-for="(label, index) in model"
3236
:key="`${label}#${index}`"

‎src/components/color/QColor.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export default {
4242
validator: v => ['auto', 'hex', 'rgb', 'hexa', 'rgba'].includes(v)
4343
},
4444
displayValue: String,
45-
placeholder: String,
4645
okLabel: String,
4746
cancelLabel: String
4847
},
@@ -230,6 +229,9 @@ export default {
230229
inverted: this.inverted,
231230
invertedLight: this.invertedLight,
232231
dark: this.dark,
232+
dense: this.dense,
233+
box: this.box,
234+
fullWidth: this.fullWidth,
233235
hideUnderline: this.hideUnderline,
234236
before: this.before,
235237
after: this.after,

‎src/components/datetime/QDatetime.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,9 @@ export default {
265265
inverted: this.inverted,
266266
invertedLight: this.invertedLight,
267267
dark: this.dark,
268+
dense: this.dense,
269+
box: this.box,
270+
fullWidth: this.fullWidth,
268271
hideUnderline: this.hideUnderline,
269272
before: this.before,
270273
after: this.after,

‎src/components/datetime/datetime-props.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ export const inline = {
5656

5757
export const input = {
5858
format: String,
59-
placeholder: String,
6059
okLabel: String,
6160
cancelLabel: String,
6261
displayValue: String

‎src/components/editor/editor-utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export function getLinkEditor (h, vm) {
221221
h('div', { staticClass: 'q-mx-xs', 'class': `text-${color}` }, [`${vm.$q.i18n.editor.url}: `]),
222222
h(QInput, {
223223
key: 'qedt_btm_input',
224-
staticClass: 'q-ma-none q-pa-none col q-editor-input',
224+
staticClass: 'q-ma-none q-py-xs col q-editor-input',
225225
props: {
226226
value: link,
227227
color,

‎src/components/field/field.ios.styl‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,18 @@
1414
.q-field-label-hint
1515
padding-left 8px
1616

17+
.q-field-content
18+
.q-if-has-label
19+
margin-top 3px
20+
.q-if-inverted
21+
margin-top 5px
22+
1723
.q-field-bottom
1824
font-size 12px
1925
padding-top 8px
2026
color $form-dark
27+
.q-if-dense + &
28+
padding-top 4px
2129
.q-field-no-input
2230
margin-top 8px
2331
border-top 1px solid rgba(0, 0, 0, .12)
@@ -52,14 +60,16 @@ qfield-vertical()
5260
padding-top 8px
5361
&.q-field-floating.q-field-no-label
5462
.q-field-margin
55-
margin-top 12px
63+
margin-top calc(.75em - 5px)
5664
&.q-field-no-label .q-field-label
5765
display none
5866

5967
qfield-horizontal()
6068
&.q-field-floating
6169
.q-field-margin
62-
margin-top 12px
70+
margin-top calc(.75em - 5px)
71+
.q-field-label
72+
padding-top 10px
6373
.q-field-label + .q-field-content
6474
padding-top 0
6575

0 commit comments

Comments
 (0)