Skip to content

Commit aafa3ed

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
feat: color and inverted for QItemSide/QItemTile letter and icon (quasarframework#1284)
* feat: color and inverted for QItemSide/QItemTile letter and icon * Update list.mat.styl * Update list.ios.styl * Update list.mat.styl * Update QItemTile.js
1 parent 53ab7c5 commit aafa3ed

File tree

5 files changed

+111
-16
lines changed

5 files changed

+111
-16
lines changed

‎dev/components/css/list.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -428,6 +428,78 @@
428428
<q-item-main label="John Joe" />
429429
<q-item-side right avatar="/statics/boy-avatar.png" />
430430
</q-item>
431+
<q-list-header inset>Normal - default color</q-list-header>
432+
<q-item v-for="n in 3" :key="n" link>
433+
<q-item-side letter="A" />
434+
<q-item-main label="John Joe" />
435+
<q-item-side right icon="alarm" />
436+
<q-item-side right stamp="Stamp" />
437+
</q-item>
438+
<q-list-header inset>Normal - with color</q-list-header>
439+
<q-item v-for="n in 3" :key="n" link>
440+
<q-item-side letter="A" :color="`red-${n + 2}`" />
441+
<q-item-main label="John Joe" />
442+
<q-item-side right icon="alarm" :color="`red-${n + 2}`" />
443+
<q-item-side right stamp="Stamp" :color="`red-${n + 2}`" />
444+
</q-item>
445+
<q-list-header inset>Inverted - default color</q-list-header>
446+
<q-item v-for="n in 3" :key="n" link>
447+
<q-item-side letter="A" inverted />
448+
<q-item-main label="John Joe" />
449+
<q-item-side right icon="alarm" inverted />
450+
</q-item>
451+
<q-list-header inset>Inverted - with color</q-list-header>
452+
<q-item v-for="n in 3" :key="n" link>
453+
<q-item-side letter="A" inverted :color="`red-${n + 2}`" />
454+
<q-item-main label="John Joe" />
455+
<q-item-side right icon="alarm" inverted :color="`red-${n + 2}`" />
456+
</q-item>
457+
<q-list-header inset>Normal - Tile - default color</q-list-header>
458+
<q-item v-for="n in 3" :key="n" link>
459+
<q-item-side>
460+
<q-item-tile letter>A</q-item-tile>
461+
</q-item-side>
462+
<q-item-main label="John Joe" />
463+
<q-item-side right>
464+
<q-item-tile icon="alarm" />
465+
</q-item-side>
466+
<q-item-side right>
467+
<q-item-tile stamp>Stamp</q-item-tile>
468+
</q-item-side>
469+
</q-item>
470+
<q-list-header inset>Normal - Tile - with color</q-list-header>
471+
<q-item v-for="n in 3" :key="n" link>
472+
<q-item-side>
473+
<q-item-tile letter :color="`red-${n + 2}`">A</q-item-tile>
474+
</q-item-side>
475+
<q-item-main label="John Joe" />
476+
<q-item-side right>
477+
<q-item-tile icon="alarm" :color="`red-${n + 2}`" />
478+
</q-item-side>
479+
<q-item-side right>
480+
<q-item-tile stamp :color="`red-${n + 2}`">Stamp</q-item-tile>
481+
</q-item-side>
482+
</q-item>
483+
<q-list-header inset>Inverted - Tile - default color</q-list-header>
484+
<q-item v-for="n in 3" :key="n" link>
485+
<q-item-side>
486+
<q-item-tile letter inverted>A</q-item-tile>
487+
</q-item-side>
488+
<q-item-main label="John Joe" />
489+
<q-item-side right>
490+
<q-item-tile icon="alarm" inverted />
491+
</q-item-side>
492+
</q-item>
493+
<q-list-header inset>Inverted - Tile - with color</q-list-header>
494+
<q-item v-for="n in 3" :key="n" link>
495+
<q-item-side>
496+
<q-item-tile letter inverted :color="`red-${n + 2}`">A</q-item-tile>
497+
</q-item-side>
498+
<q-item-main label="John Joe" />
499+
<q-item-side right>
500+
<q-item-tile icon="alarm" inverted :color="`red-${n + 2}`" />
501+
</q-item-side>
502+
</q-item>
431503
</q-list>
432504

433505
<q-list>

‎src/components/list/QItemSide.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,10 @@ export default {
5454
child.push(h(QIcon, {
5555
props: { name: prop.icon },
5656
staticClass: 'q-item-icon',
57-
class: { 'q-item-icon-inverted': prop.inverted }
57+
class: {
58+
'q-item-icon-inverted': prop.inverted,
59+
[`bg-${prop.color}`]: prop.color && prop.inverted
60+
}
5861
}))
5962
}
6063
if (prop.avatar) {
@@ -64,10 +67,13 @@ export default {
6467
}))
6568
}
6669
if (prop.letter) {
67-
child.push(h(
68-
'div',
69-
{ staticClass: 'q-item-letter' },
70-
prop.letter
70+
child.push(h('div', {
71+
staticClass: 'q-item-letter',
72+
class: {
73+
'q-item-letter-inverted': prop.inverted,
74+
[`bg-${prop.color}`]: prop.color && prop.inverted
75+
}
76+
}, prop.letter
7177
))
7278
}
7379

‎src/components/list/QItemTile.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,24 @@ export default {
2929
prop = ctx.props,
3030
cls = data.staticClass,
3131
type = getType(prop),
32-
icon = prop.icon || prop.invertedIcon
32+
textColor = prop.color ? ` text-${prop.color}` : '',
33+
bgColor = prop.color ? ` bg-${prop.color}` : ''
3334

34-
data.staticClass = `q-item-${type}${prop.color ? ` text-${prop.color}` : ''}${cls ? ` ${cls}` : ''}`
35+
data.staticClass = `q-item-${type}${cls ? ` ${cls}` : ''}`
36+
37+
if (prop.icon) {
38+
data.props = { name: prop.icon }
39+
data.staticClass += prop.inverted
40+
? ` q-item-icon-inverted${bgColor}`
41+
: textColor
3542

36-
if (icon) {
37-
data.props = { name: icon }
38-
if (prop.inverted) {
39-
data.staticClass += ' q-item-icon-inverted'
40-
}
4143
return h(QIcon, data, ctx.children)
4244
}
45+
46+
data.staticClass += prop.letter && prop.inverted
47+
? ` q-item-letter-inverted${bgColor}`
48+
: textColor
49+
4350
if ((prop.label || prop.sublabel) && prop.lines) {
4451
if (prop.lines === '1' || prop.lines === 1) {
4552
data.staticClass += ' ellipsis'

‎src/components/list/list.ios.styl‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,16 @@
2121

2222
.q-item-letter, .q-item-icon
2323
font-size $item-icon-size
24-
.q-item-icon-inverted
24+
width 100%
25+
text-align center
26+
.q-item-letter-inverted, .q-item-icon-inverted
2527
border-radius 50%
26-
font-size $item-inverted-icon-size
2728
color white
2829
background $primary
30+
.q-item-letter-inverted
31+
padding 4px 0 5px
32+
.q-item-icon-inverted
33+
font-size $item-inverted-icon-size
2934
padding 9px
3035

3136
.q-item-main

‎src/components/list/list.mat.styl‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,16 @@
2121

2222
.q-item-letter, .q-item-icon
2323
font-size $item-icon-size
24-
.q-item-icon-inverted
24+
width 100%
25+
text-align center
26+
.q-item-letter-inverted, .q-item-icon-inverted
2527
border-radius 50%
26-
font-size $item-inverted-icon-size
2728
color white
2829
background $primary
30+
.q-item-letter-inverted
31+
padding 4px 0 5px
32+
.q-item-icon-inverted
33+
font-size $item-inverted-icon-size
2934
padding 9px
3035

3136
.q-item-main

0 commit comments

Comments
 (0)