Skip to content

Commit 9d50bf6

Browse files
rstoenescurstoenescu
committed
feat: QChatMessage coloring
1 parent 7a9a06b commit 9d50bf6

File tree

5 files changed

+116
-112
lines changed

5 files changed

+116
-112
lines changed

‎dev/components/components/chat.vue‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,18 @@
66
:key="msg"
77
:label="msg.label"
88
:sent="msg.sent"
9+
:text-color="msg.textColor"
10+
:bg-color="msg.bgColor"
911
:name="msg.name"
1012
:avatar="msg.avatar"
1113
:text="msg.text"
1214
:stamp="msg.stamp"
1315
/>
14-
<div class="row">
15-
<q-input v-model="message" />
16-
<q-btn color="primary" @click="send">Send</q-btn>
17-
</div>
1816
</div>
1917
</div>
2018
</template>
2119

2220
<script>
23-
import { date } from 'quasar'
24-
const { format } = date
25-
2621
export default {
2722
data () {
2823
return {
@@ -41,6 +36,8 @@ export default {
4136
name: 'Jane',
4237
text: ['I\'m good, thank you!', 'And you?'],
4338
sent: true,
39+
textColor: 'white',
40+
bgColor: 'black',
4441
avatar: '/statics/linux-avatar.png',
4542
stamp: 'Yesterday at 13:50'
4643
},
@@ -56,6 +53,8 @@ export default {
5653
},
5754
{
5855
name: 'Vladimir',
56+
bgColor: 'amber',
57+
textColor: 'white',
5958
text: ['Fine. Nice weather today, right?', 'Hmm...'],
6059
avatar: '/statics/boy-avatar.png',
6160
stamp: '13:55'
@@ -161,19 +160,6 @@ export default {
161160
}
162161
]
163162
}
164-
},
165-
methods: {
166-
send () {
167-
if (this.message.length) {
168-
this.messages.push({
169-
name: 'Jane',
170-
text: [this.message],
171-
sent: true,
172-
avatar: '/statics/linux-avatar.png',
173-
stamp: format(new Date(), 'HH:mm')
174-
})
175-
}
176-
}
177163
}
178164
}
179165
</script>

‎dev/components/web-tests/fast-test.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,13 @@
88
For some test that you think it should be persistent,
99
make a new *.vue file here or in another folder under /dev/components.
1010
-->
11-
<q-checkbox v-model="enable" />
12-
<div class="bg-grey-9 relative-position" style="width: 200px; height: 200px" v-ripple></div>
1311
</div>
1412
</template>
1513

1614
<script>
1715
export default {
1816
data () {
1917
return {
20-
enable: false
2118
}
2219
},
2320
methods: {

‎src/components/chat/QChatMessage.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div
33
class="q-message"
44
:class="{
5-
'message-sent': sent,
6-
'message-received': !sent
5+
'q-message-sent': sent,
6+
'q-message-received': !sent
77
}"
88
>
99
<p v-if="label" class="q-message-label text-center" v-html="label"></p>
@@ -18,9 +18,12 @@
1818
v-for="(msg, index) in text"
1919
:key="msg"
2020
class="q-message-text"
21+
:class="messageClass"
2122
>
22-
<div v-html="msg"></div>
23-
<div class="q-message-stamp" v-html="stamp"></div>
23+
<span class="q-message-text-content" :class="textClass">
24+
<div v-html="msg"></div>
25+
<div class="q-message-stamp" v-html="stamp"></div>
26+
</span>
2427
</div>
2528
<div v-if="$slots.default" class="q-message-text">
2629
<slot></slot>
@@ -37,10 +40,26 @@ export default {
3740
sent: Boolean,
3841
label: String,
3942
43+
bgColor: String,
44+
textColor: String,
45+
4046
name: String,
4147
avatar: String,
4248
text: Array,
4349
stamp: String
50+
},
51+
inject: ['__chat'],
52+
computed: {
53+
textClass () {
54+
if (this.textColor) {
55+
return `text-${this.textColor}`
56+
}
57+
},
58+
messageClass () {
59+
if (this.bgColor) {
60+
return `text-${this.bgColor}`
61+
}
62+
}
4463
}
4564
}
4665
</script>

‎src/components/chat/chat.ios.styl‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
$chat-message-faded-color ?= rgba(0, 0, 0, .51)
2-
$chat-message-sent-background ?= $green-3
3-
$chat-message-sent-color ?= opposite-non-color($chat-message-sent-background)
4-
$chat-message-received-background ?= $grey-3
5-
$chat-message-received-color ?= opposite-non-color($chat-message-received-background)
6-
$chat-message-avatar-size ?= 48px
7-
$chat-message-border-radius ?= 20px
8-
$chat-message-distance ?= 8px
9-
$chat-message-text-padding-vert ?= 9px
1+
$chat-message-received-color ?= black
2+
$chat-message-received-bg ?= $green-4
3+
$chat-message-sent-color ?= black
4+
$chat-message-sent-bg ?= $grey-4
5+
6+
$chat-message-avatar-size ?= 48px
7+
$chat-message-border-radius ?= 20px
8+
$chat-message-distance ?= 8px
9+
$chat-message-text-padding-vert ?= 9px
1010
$chat-message-text-padding-horiz ?= 11px
1111

1212
.q-message-name, .q-message-stamp, .q-message-label
1313
font-size small
14-
color $chat-message-faded-color
1514

1615
.q-message-name
1716
padding-left $chat-message-text-padding-horiz
@@ -32,48 +31,50 @@ $chat-message-text-padding-horiz ?= 11px
3231

3332
.q-message
3433
margin-bottom $chat-message-distance
35-
3634
&:first-child .q-message-label
3735
margin-top 0
3836

39-
&.message-received
40-
.q-message-avatar
41-
margin-right 8px
42-
.q-message-text
43-
color $chat-message-received-color
44-
background $chat-message-received-background
45-
border-radius $chat-message-border-radius
46-
&:last-child
47-
&:before
48-
left -7px
49-
border-left 20px solid $chat-message-received-background
50-
border-bottom-right-radius 16px 14px
51-
&:after
52-
left 23px
53-
border-bottom-right-radius 10px
37+
.q-message-received
38+
.q-message-avatar
39+
margin-right 8px
40+
.q-message-text
41+
color $chat-message-received-bg
42+
border-radius $chat-message-border-radius
43+
&:last-child
44+
&:before
45+
left -7px
46+
border-left 20px solid currentColor
47+
border-bottom-right-radius 16px 14px
48+
&:after
49+
left 23px
50+
border-bottom-right-radius 10px
51+
.q-message-text-content
52+
color $chat-message-received-color
5453

55-
&.message-sent
56-
.q-message-name
57-
text-align right
58-
padding-right $chat-message-text-padding-horiz
59-
.q-message-avatar
60-
margin-left 8px
61-
.q-message-container
62-
flex-direction row-reverse
63-
.q-message-text
64-
color $chat-message-sent-color
65-
background $chat-message-sent-background
66-
border-radius $chat-message-border-radius
67-
&:last-child
68-
&:before
69-
right -7px
70-
border-right 20px solid $chat-message-sent-background
71-
border-bottom-left-radius 16px 14px
72-
&:after
73-
right -37px
74-
border-bottom-left-radius 10px
54+
.q-message-sent
55+
.q-message-name
56+
text-align right
57+
padding-right $chat-message-text-padding-horiz
58+
.q-message-avatar
59+
margin-left 8px
60+
.q-message-container
61+
flex-direction row-reverse
62+
.q-message-text
63+
color $chat-message-sent-bg
64+
border-radius $chat-message-border-radius
65+
&:last-child
66+
&:before
67+
right -7px
68+
border-right 20px solid currentColor
69+
border-bottom-left-radius 16px 14px
70+
&:after
71+
right -37px
72+
border-bottom-left-radius 10px
73+
.q-message-text-content
74+
color $chat-message-sent-color
7575

7676
.q-message-text
77+
background currentColor
7778
padding $chat-message-text-padding-vert $chat-message-text-padding-horiz
7879
line-height 1.2
7980
word-break break-word

‎src/components/chat/chat.mat.styl‎

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
$chat-message-faded-color ?= rgba(0, 0, 0, .51)
2-
$chat-message-sent-background ?= $green-3
3-
$chat-message-sent-color ?= opposite-non-color($chat-message-sent-background)
4-
$chat-message-received-background ?= $grey-3
5-
$chat-message-received-color ?= opposite-non-color($chat-message-received-background)
6-
$chat-message-avatar-size ?= 48px
7-
$chat-message-border-radius ?= $generic-border-radius
8-
$chat-message-distance ?= 8px
9-
$chat-message-text-padding ?= 8px
1+
$chat-message-received-color ?= black
2+
$chat-message-received-bg ?= $green-4
3+
$chat-message-sent-color ?= black
4+
$chat-message-sent-bg ?= $grey-4
5+
6+
$chat-message-avatar-size ?= 48px
7+
$chat-message-border-radius ?= $generic-border-radius
8+
$chat-message-distance ?= 8px
9+
$chat-message-text-padding ?= 8px
1010

1111
.q-message-name, .q-message-stamp, .q-message-label
1212
font-size small
13-
color $chat-message-faded-color
1413

1514
.q-message-label
1615
margin (3 * $chat-message-distance) 0
@@ -28,41 +27,43 @@ $chat-message-text-padding ?= 8px
2827

2928
.q-message
3029
margin-bottom $chat-message-distance
31-
3230
&:first-child .q-message-label
3331
margin-top 0
3432

35-
&.message-received
36-
.q-message-avatar
37-
margin-right 8px
38-
.q-message-text
39-
color $chat-message-received-color
40-
background $chat-message-received-background
41-
border-radius $chat-message-border-radius $chat-message-border-radius $chat-message-border-radius 0
42-
&:last-child:before
43-
right 100%
44-
border-right 0 solid transparent
45-
border-left 8px solid transparent
46-
border-bottom 8px solid $chat-message-received-background
33+
.q-message-received
34+
.q-message-avatar
35+
margin-right 8px
36+
.q-message-text
37+
color $chat-message-received-bg
38+
border-radius $chat-message-border-radius $chat-message-border-radius $chat-message-border-radius 0
39+
&:last-child:before
40+
right 100%
41+
border-right 0 solid transparent
42+
border-left 8px solid transparent
43+
border-bottom 8px solid currentColor
44+
.q-message-text-content
45+
color $chat-message-received-color
4746

48-
&.message-sent
49-
.q-message-name
50-
text-align right
51-
.q-message-avatar
52-
margin-left 8px
53-
.q-message-container
54-
flex-direction row-reverse
55-
.q-message-text
56-
color $chat-message-sent-color
57-
background $chat-message-sent-background
58-
border-radius $chat-message-border-radius $chat-message-border-radius 0 $chat-message-border-radius
59-
&:last-child:before
60-
left 100%
61-
border-left 0 solid transparent
62-
border-right 8px solid transparent
63-
border-bottom 8px solid $chat-message-sent-background
47+
.q-message-sent
48+
.q-message-name
49+
text-align right
50+
.q-message-avatar
51+
margin-left 8px
52+
.q-message-container
53+
flex-direction row-reverse
54+
.q-message-text
55+
color $chat-message-sent-bg
56+
border-radius $chat-message-border-radius $chat-message-border-radius 0 $chat-message-border-radius
57+
&:last-child:before
58+
left 100%
59+
border-left 0 solid transparent
60+
border-right 8px solid transparent
61+
border-bottom 8px solid currentColor
62+
.q-message-text-content
63+
color $chat-message-sent-color
6464

6565
.q-message-text
66+
background currentColor
6667
padding $chat-message-text-padding
6768
line-height 1.2
6869
word-break break-word

0 commit comments

Comments
 (0)