Skip to content

Commit 3ad1daa

Browse files
NGPixelNGPixel
authored
fix: improve chat log rendering (ietf-tools#4686)
1 parent a3fc57b commit 3ad1daa

7 files changed

Lines changed: 226 additions & 4 deletions

File tree

‎.pnp.cjs‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.yarn/cache/@twuni-emojify-npm-1.0.2-a45d6eb0a7-0044c83b05.zip‎

17.4 KB
Binary file not shown.

‎client/components/ChatLog.vue‎

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
<script setup>
2323
import { onMounted, reactive } from 'vue'
2424
import { DateTime } from 'luxon'
25+
import { emojify } from '@twuni/emojify'
26+
import uniq from 'lodash-es/uniq'
2527
import {
2628
NTimeline,
2729
NTimelineItem
@@ -61,9 +63,12 @@ const colors = [
6163
6264
onMounted(() => {
6365
const authorColors = {}
66+
6467
// Get chat log data from embedded json tag
6568
const chatLog = JSON.parse(document.getElementById(`${props.componentId}-data`).textContent || '[]')
6669
if (chatLog.length > 0) {
70+
const authorNames = uniq(chatLog.map(l => l.author))
71+
6772
let idx = 1
6873
let colorIdx = 0
6974
for (const logItem of chatLog) {
@@ -75,12 +80,22 @@ onMounted(() => {
7580
colorIdx = 0
7681
}
7782
}
83+
84+
// -> Format text
85+
let txt = emojify(logItem.text)
86+
if (txt.indexOf('@') >= 0) {
87+
for (const authorName of authorNames) {
88+
txt = txt.replaceAll(`@${authorName}`, `<span class="user-mention">${authorName}</span>`)
89+
}
90+
}
91+
txt = txt.replaceAll('href="/user_uploads/', 'href="https://zulip.ietf.org/user_uploads/')
92+
7893
// -> Generate log item
7994
state.items.push({
8095
id: `logitem-${idx}`,
8196
color: authorColors[logItem.author],
8297
author: logItem.author,
83-
text: logItem.text,
98+
text: txt,
8499
time: DateTime.fromISO(logItem.time).toFormat('dd LLLL yyyy \'at\' HH:mm:ss a ZZZZ')
85100
})
86101
idx++
@@ -90,9 +105,58 @@ onMounted(() => {
90105
</script>
91106

92107
<style lang="scss">
108+
@import '../shared/colors.scss';
109+
93110
.chatlog {
94-
.n-timeline-item-content__content > div > p {
95-
margin-bottom: 0;
111+
.n-timeline-item-content__content {
112+
> div > p:last-child {
113+
margin-bottom: 0;
114+
}
115+
116+
blockquote {
117+
background-color: $gray-100;
118+
border-radius: 5px;
119+
padding: 8px;
120+
margin-top: -8px;
121+
122+
> p:last-child {
123+
margin-bottom: 0;
124+
}
125+
}
126+
127+
.message_inline_image {
128+
display: none;
129+
}
130+
131+
// Manual user mention
132+
.user-mention {
133+
display: inline-block;
134+
padding: 1px 5px;
135+
background-color: rgba($purple, .05);
136+
color: $purple;
137+
font-weight: 500;
138+
border-radius: 4px;
139+
140+
> .user-mention {
141+
padding: 0;
142+
143+
&::before {
144+
display: none;
145+
}
146+
}
147+
148+
&::before {
149+
content: '@';
150+
}
151+
}
152+
153+
// User reply mention
154+
.user-mention + a {
155+
text-decoration: none;
156+
color: $purple;
157+
font-style: italic;
158+
cursor: default;
159+
}
96160
}
97161
}
98162
</style>

‎client/shared/colors.scss‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
// Bootstrap 5 Color Variables
2+
// Extracted from https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
3+
// Copyright (c) 2011-2022 Twitter, Inc.
4+
// Copyright (c) 2011-2022 The Bootstrap Authors
5+
6+
// Tint a color: mix a color with white
7+
@function tint-color($color, $weight) {
8+
@return mix(white, $color, $weight);
9+
}
10+
11+
// Shade a color: mix a color with black
12+
@function shade-color($color, $weight) {
13+
@return mix(black, $color, $weight);
14+
}
15+
16+
// Color system
17+
18+
$white: #fff !default;
19+
$gray-100: #f8f9fa !default;
20+
$gray-200: #e9ecef !default;
21+
$gray-300: #dee2e6 !default;
22+
$gray-400: #ced4da !default;
23+
$gray-500: #adb5bd !default;
24+
$gray-600: #6c757d !default;
25+
$gray-700: #495057 !default;
26+
$gray-800: #343a40 !default;
27+
$gray-900: #212529 !default;
28+
$black: #000 !default;
29+
30+
$blue: #0d6efd !default;
31+
$indigo: #6610f2 !default;
32+
$purple: #6f42c1 !default;
33+
$pink: #d63384 !default;
34+
$red: #dc3545 !default;
35+
$orange: #fd7e14 !default;
36+
$yellow: #ffc107 !default;
37+
$green: #198754 !default;
38+
$teal: #20c997 !default;
39+
$cyan: #0dcaf0 !default;
40+
41+
$blue-100: tint-color($blue, 80%) !default;
42+
$blue-200: tint-color($blue, 60%) !default;
43+
$blue-300: tint-color($blue, 40%) !default;
44+
$blue-400: tint-color($blue, 20%) !default;
45+
$blue-500: $blue !default;
46+
$blue-600: shade-color($blue, 20%) !default;
47+
$blue-700: shade-color($blue, 40%) !default;
48+
$blue-800: shade-color($blue, 60%) !default;
49+
$blue-900: shade-color($blue, 80%) !default;
50+
51+
$indigo-100: tint-color($indigo, 80%) !default;
52+
$indigo-200: tint-color($indigo, 60%) !default;
53+
$indigo-300: tint-color($indigo, 40%) !default;
54+
$indigo-400: tint-color($indigo, 20%) !default;
55+
$indigo-500: $indigo !default;
56+
$indigo-600: shade-color($indigo, 20%) !default;
57+
$indigo-700: shade-color($indigo, 40%) !default;
58+
$indigo-800: shade-color($indigo, 60%) !default;
59+
$indigo-900: shade-color($indigo, 80%) !default;
60+
61+
$purple-100: tint-color($purple, 80%) !default;
62+
$purple-200: tint-color($purple, 60%) !default;
63+
$purple-300: tint-color($purple, 40%) !default;
64+
$purple-400: tint-color($purple, 20%) !default;
65+
$purple-500: $purple !default;
66+
$purple-600: shade-color($purple, 20%) !default;
67+
$purple-700: shade-color($purple, 40%) !default;
68+
$purple-800: shade-color($purple, 60%) !default;
69+
$purple-900: shade-color($purple, 80%) !default;
70+
71+
$pink-100: tint-color($pink, 80%) !default;
72+
$pink-200: tint-color($pink, 60%) !default;
73+
$pink-300: tint-color($pink, 40%) !default;
74+
$pink-400: tint-color($pink, 20%) !default;
75+
$pink-500: $pink !default;
76+
$pink-600: shade-color($pink, 20%) !default;
77+
$pink-700: shade-color($pink, 40%) !default;
78+
$pink-800: shade-color($pink, 60%) !default;
79+
$pink-900: shade-color($pink, 80%) !default;
80+
81+
$red-100: tint-color($red, 80%) !default;
82+
$red-200: tint-color($red, 60%) !default;
83+
$red-300: tint-color($red, 40%) !default;
84+
$red-400: tint-color($red, 20%) !default;
85+
$red-500: $red !default;
86+
$red-600: shade-color($red, 20%) !default;
87+
$red-700: shade-color($red, 40%) !default;
88+
$red-800: shade-color($red, 60%) !default;
89+
$red-900: shade-color($red, 80%) !default;
90+
91+
$orange-100: tint-color($orange, 80%) !default;
92+
$orange-200: tint-color($orange, 60%) !default;
93+
$orange-300: tint-color($orange, 40%) !default;
94+
$orange-400: tint-color($orange, 20%) !default;
95+
$orange-500: $orange !default;
96+
$orange-600: shade-color($orange, 20%) !default;
97+
$orange-700: shade-color($orange, 40%) !default;
98+
$orange-800: shade-color($orange, 60%) !default;
99+
$orange-900: shade-color($orange, 80%) !default;
100+
101+
$yellow-100: tint-color($yellow, 80%) !default;
102+
$yellow-200: tint-color($yellow, 60%) !default;
103+
$yellow-300: tint-color($yellow, 40%) !default;
104+
$yellow-400: tint-color($yellow, 20%) !default;
105+
$yellow-500: $yellow !default;
106+
$yellow-600: shade-color($yellow, 20%) !default;
107+
$yellow-700: shade-color($yellow, 40%) !default;
108+
$yellow-800: shade-color($yellow, 60%) !default;
109+
$yellow-900: shade-color($yellow, 80%) !default;
110+
111+
$green-100: tint-color($green, 80%) !default;
112+
$green-200: tint-color($green, 60%) !default;
113+
$green-300: tint-color($green, 40%) !default;
114+
$green-400: tint-color($green, 20%) !default;
115+
$green-500: $green !default;
116+
$green-600: shade-color($green, 20%) !default;
117+
$green-700: shade-color($green, 40%) !default;
118+
$green-800: shade-color($green, 60%) !default;
119+
$green-900: shade-color($green, 80%) !default;
120+
121+
$teal-100: tint-color($teal, 80%) !default;
122+
$teal-200: tint-color($teal, 60%) !default;
123+
$teal-300: tint-color($teal, 40%) !default;
124+
$teal-400: tint-color($teal, 20%) !default;
125+
$teal-500: $teal !default;
126+
$teal-600: shade-color($teal, 20%) !default;
127+
$teal-700: shade-color($teal, 40%) !default;
128+
$teal-800: shade-color($teal, 60%) !default;
129+
$teal-900: shade-color($teal, 80%) !default;
130+
131+
$cyan-100: tint-color($cyan, 80%) !default;
132+
$cyan-200: tint-color($cyan, 60%) !default;
133+
$cyan-300: tint-color($cyan, 40%) !default;
134+
$cyan-400: tint-color($cyan, 20%) !default;
135+
$cyan-500: $cyan !default;
136+
$cyan-600: shade-color($cyan, 20%) !default;
137+
$cyan-700: shade-color($cyan, 40%) !default;
138+
$cyan-800: shade-color($cyan, 60%) !default;
139+
$cyan-900: shade-color($cyan, 80%) !default;

‎docker/scripts/app-rsync-extras.sh‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ cat << EOF > "$EXCLUDE"
4343
*.doc
4444
*.exe
4545
*.html
46-
*.json
4746
*.mib
4847
*.new
4948
*.p7s

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@fullcalendar/timegrid": "5.11.3",
2323
"@fullcalendar/vue3": "5.11.2",
2424
"@popperjs/core": "2.11.6",
25+
"@twuni/emojify": "1.0.2",
2526
"bootstrap": "5.2.2",
2627
"bootstrap-icons": "1.9.1",
2728
"browser-fs-access": "0.31.1",

‎yarn.lock‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1719,6 +1719,13 @@ __metadata:
17191719
languageName: node
17201720
linkType: hard
17211721

1722+
"@twuni/emojify@npm:1.0.2":
1723+
version: 1.0.2
1724+
resolution: "@twuni/emojify@npm:1.0.2"
1725+
checksum: 0044c83b0589767dae1c1bb933cd56f2e5031a438f0fc993413e4cc229080e29c275cdd836be33ee02ddd59a5d1d6223a718685650f11ecfffc69c881c072152
1726+
languageName: node
1727+
linkType: hard
1728+
17221729
"@types/estree@npm:^1.0.0":
17231730
version: 1.0.0
17241731
resolution: "@types/estree@npm:1.0.0"
@@ -7138,6 +7145,7 @@ browserlist@latest:
71387145
"@percy/cypress": 3.1.2
71397146
"@popperjs/core": 2.11.6
71407147
"@rollup/pluginutils": 5.0.2
7148+
"@twuni/emojify": 1.0.2
71417149
"@vitejs/plugin-vue": 3.1.2
71427150
"@vue/test-utils": 2.1.0
71437151
bootstrap: 5.2.2

0 commit comments

Comments
 (0)