Skip to content

Commit 1632798

Browse files
bmcomfygithub-actions
bmcomfy
and
github-actions
authored
[System Pop Up] Improve help center and what's new popup UI (#4395)
Co-authored-by: github-actions <[email protected]>
1 parent 103139f commit 1632798

File tree

10 files changed

+120
-90
lines changed

10 files changed

+120
-90
lines changed

‎src/components/helpcenter/HelpCenterMenuContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ const TIME_UNITS = {
162162
const SUBMENU_CONFIG = {
163163
DELAY_MS: 100,
164164
OFFSET_PX: 8,
165-
Z_INDEX: 1002
165+
Z_INDEX: 10001
166166
} as const
167167
168168
// Composables

‎src/components/helpcenter/WhatsNewPopup.vue‎

Lines changed: 102 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,32 @@
3232

3333
<div class="whats-new-popup" @click.stop>
3434
<!-- Close Button -->
35-
<button class="close-button" aria-label="Close" @click="closePopup">
35+
<button
36+
class="close-button"
37+
:aria-label="$t('g.close')"
38+
@click="closePopup"
39+
>
3640
<div class="close-icon"></div>
3741
</button>
3842

3943
<!-- Release Content -->
4044
<div class="popup-content">
4145
<div class="content-text" v-html="formattedContent"></div>
42-
</div>
4346

44-
<!-- Actions Section -->
45-
<div class="popup-actions">
46-
<a
47-
class="learn-more-link"
48-
:href="changelogUrl"
49-
target="_blank"
50-
rel="noopener,noreferrer"
51-
@click="closePopup"
52-
>
53-
{{ $t('whatsNewPopup.learnMore') }}
54-
</a>
55-
<!-- TODO: CTA button -->
56-
<!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
47+
<!-- Actions Section -->
48+
<div class="popup-actions">
49+
<a
50+
class="learn-more-link"
51+
:href="changelogUrl"
52+
target="_blank"
53+
rel="noopener,noreferrer"
54+
@click="closePopup"
55+
>
56+
{{ $t('whatsNewPopup.learnMore') }}
57+
</a>
58+
<!-- TODO: CTA button -->
59+
<!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
60+
</div>
5761
</div>
5862
</div>
5963
</div>
@@ -68,7 +72,7 @@ import type { ReleaseNote } from '@/services/releaseService'
6872
import { useReleaseStore } from '@/stores/releaseStore'
6973
import { formatVersionAnchor } from '@/utils/formatUtil'
7074
71-
const { locale } = useI18n()
75+
const { locale, t } = useI18n()
7276
const releaseStore = useReleaseStore()
7377
7478
// Local state for dismissed status
@@ -101,13 +105,12 @@ const changelogUrl = computed(() => {
101105
// Format release content for display using marked
102106
const formattedContent = computed(() => {
103107
if (!latestRelease.value?.content) {
104-
return '<p>No release notes available.</p>'
108+
return `<p>${t('whatsNewPopup.noReleaseNotes')}</p>`
105109
}
106110
107111
try {
108112
// Use marked to parse markdown to HTML
109113
return marked(latestRelease.value.content, {
110-
breaks: true, // Convert line breaks to <br>
111114
gfm: true // Enable GitHub Flavored Markdown
112115
})
113116
} catch (error) {
@@ -199,14 +202,10 @@ defineExpose({
199202
}
200203
201204
.whats-new-popup {
202-
padding: 32px 32px 24px;
203205
background: #353535;
204206
border-radius: 12px;
205207
max-width: 400px;
206208
width: 400px;
207-
display: flex;
208-
flex-direction: column;
209-
gap: 32px;
210209
outline: 1px solid #4e4e4e;
211210
outline-offset: -1px;
212211
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3);
@@ -217,24 +216,28 @@ defineExpose({
217216
.popup-content {
218217
display: flex;
219218
flex-direction: column;
219+
gap: 24px;
220+
overflow: hidden;
221+
padding: 32px 32px 24px;
222+
border-radius: 12px;
220223
}
221224
222225
/* Close button */
223226
.close-button {
224227
position: absolute;
225228
top: 0;
226229
right: 0;
227-
width: 31px;
228-
height: 31px;
229-
padding: 6px 7px;
230+
width: 32px;
231+
height: 32px;
232+
padding: 6px;
230233
background: #7c7c7c;
231-
border-radius: 15.5px;
234+
border-radius: 16px;
232235
border: none;
233236
cursor: pointer;
234237
display: flex;
235238
justify-content: center;
236239
align-items: center;
237-
transform: translate(50%, -50%);
240+
transform: translate(30%, -30%);
238241
transition:
239242
background-color 0.2s ease,
240243
transform 0.1s ease;
@@ -247,7 +250,7 @@ defineExpose({
247250
248251
.close-button:active {
249252
background: #6a6a6a;
250-
transform: translate(50%, -50%) scale(0.95);
253+
transform: translate(30%, -30%) scale(0.95);
251254
}
252255
253256
.close-icon {
@@ -288,91 +291,114 @@ defineExpose({
288291
.content-text {
289292
color: white;
290293
font-size: 14px;
291-
font-family: 'Inter', sans-serif;
292-
font-weight: 400;
293294
line-height: 1.5;
294295
word-wrap: break-word;
295296
}
296297
297298
/* Style the markdown content */
298-
.content-text :deep(h1) {
299-
color: white;
300-
font-size: 20px;
301-
font-weight: 700;
302-
margin: 0 0 16px 0;
303-
line-height: 1.3;
304-
}
305-
306-
.content-text :deep(h2) {
307-
color: white;
308-
font-size: 18px;
309-
font-weight: 600;
310-
margin: 16px 0 12px 0;
311-
line-height: 1.3;
299+
/* Title */
300+
.content-text :deep(*) {
301+
box-sizing: border-box;
302+
margin: 0;
303+
padding: 0;
312304
}
313305
314-
.content-text :deep(h2:first-child) {
315-
margin-top: 0;
306+
.content-text :deep(h1) {
307+
font-size: 16px;
308+
font-weight: 700;
309+
margin-bottom: 8px;
316310
}
317311
318-
.content-text :deep(h3) {
319-
color: white;
312+
/* Version subtitle - targets the first p tag after h1 */
313+
.content-text :deep(h1 + p) {
314+
color: #c0c0c0;
320315
font-size: 16px;
321-
font-weight: 600;
322-
margin: 12px 0 8px 0;
323-
line-height: 1.3;
316+
font-weight: 500;
317+
margin-bottom: 16px;
318+
opacity: 0.8;
324319
}
325320
326-
.content-text :deep(h3:first-child) {
327-
margin-top: 0;
321+
/* Regular paragraphs - short description */
322+
.content-text :deep(p) {
323+
margin-bottom: 16px;
324+
color: #e0e0e0;
328325
}
329326
330-
.content-text :deep(h4) {
331-
color: white;
332-
font-size: 14px;
333-
font-weight: 600;
334-
margin: 8px 0 6px 0;
327+
/* List */
328+
.content-text :deep(ul),
329+
.content-text :deep(ol) {
330+
margin-bottom: 16px;
331+
padding-left: 0;
332+
list-style: none;
335333
}
336334
337-
.content-text :deep(h4:first-child) {
335+
.content-text :deep(ul:first-child),
336+
.content-text :deep(ol:first-child) {
338337
margin-top: 0;
339338
}
340339
341-
.content-text :deep(p) {
342-
margin: 0 0 12px 0;
343-
line-height: 1.6;
340+
.content-text :deep(ul:last-child),
341+
.content-text :deep(ol:last-child) {
342+
margin-bottom: 0;
344343
}
345344
346-
.content-text :deep(p:first-child) {
347-
margin-top: 0;
345+
/* List items */
346+
.content-text :deep(li) {
347+
margin-bottom: 8px;
348+
position: relative;
349+
padding-left: 20px;
348350
}
349351
350-
.content-text :deep(p:last-child) {
352+
.content-text :deep(li:last-child) {
351353
margin-bottom: 0;
352354
}
353355
354-
.content-text :deep(ul),
355-
.content-text :deep(ol) {
356-
margin: 0 0 12px 0;
357-
padding-left: 24px;
356+
/* Custom bullet points */
357+
.content-text :deep(li::before) {
358+
content: '';
359+
position: absolute;
360+
left: 0;
361+
top: 10px;
362+
display: flex;
363+
width: 8px;
364+
height: 8px;
365+
justify-content: center;
366+
align-items: center;
367+
aspect-ratio: 1/1;
368+
border-radius: 100px;
369+
background: #60a5fa;
358370
}
359371
360-
.content-text :deep(ul:first-child),
361-
.content-text :deep(ol:first-child) {
362-
margin-top: 0;
372+
/* List item strong text */
373+
.content-text :deep(li strong) {
374+
color: #fff;
375+
font-size: 14px;
376+
display: block;
377+
margin-bottom: 4px;
363378
}
364379
365-
.content-text :deep(ul:last-child),
366-
.content-text :deep(ol:last-child) {
380+
.content-text :deep(li p) {
381+
font-size: 12px;
367382
margin-bottom: 0;
383+
line-height: 2;
384+
}
385+
386+
/* Code styling */
387+
.content-text :deep(code) {
388+
background-color: #2a2a2a;
389+
border: 1px solid #4a4a4a;
390+
border-radius: 4px;
391+
padding: 2px 6px;
392+
color: #f8f8f2;
393+
white-space: nowrap;
368394
}
369395
370396
/* Remove top margin for first media element */
371397
.content-text :deep(img:first-child),
372398
.content-text :deep(video:first-child),
373399
.content-text :deep(iframe:first-child) {
374400
margin-top: -32px; /* Align with the top edge of the popup content */
375-
margin-bottom: 12px;
401+
margin-bottom: 24px;
376402
}
377403
378404
/* Media elements */
@@ -381,8 +407,7 @@ defineExpose({
381407
.content-text :deep(iframe) {
382408
width: calc(100% + 64px);
383409
height: auto;
384-
border-radius: 6px;
385-
margin: 12px -32px;
410+
margin: 24px -32px;
386411
display: block;
387412
}
388413
@@ -397,7 +422,6 @@ defineExpose({
397422
.learn-more-link {
398423
color: #60a5fa;
399424
font-size: 14px;
400-
font-family: 'Inter', sans-serif;
401425
font-weight: 500;
402426
line-height: 18.2px;
403427
text-decoration: none;
@@ -417,7 +441,6 @@ defineExpose({
417441
border: none;
418442
color: #121212;
419443
font-size: 14px;
420-
font-family: 'Inter', sans-serif;
421444
font-weight: 500;
422445
cursor: pointer;
423446
}

‎src/components/sidebar/SidebarHelpCenterIcon.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</Teleport>
4747

4848
<!-- Backdrop to close popup when clicking outside -->
49-
<Teleport to="#graph-canvas-container">
49+
<Teleport to="body">
5050
<div
5151
v-if="isHelpCenterVisible"
5252
class="help-center-backdrop"
@@ -101,14 +101,14 @@ onMounted(async () => {
101101
left: 0;
102102
right: 0;
103103
bottom: 0;
104-
z-index: 999;
104+
z-index: 9999;
105105
background: transparent;
106106
}
107107
108108
.help-center-popup {
109109
position: absolute;
110110
bottom: 1rem;
111-
z-index: 1000;
111+
z-index: 10000;
112112
animation: slideInUp 0.2s ease-out;
113113
pointer-events: auto;
114114
}

‎src/locales/en/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1489,6 +1489,7 @@
14891489
"loadError": "Failed to load help: {error}"
14901490
},
14911491
"whatsNewPopup": {
1492-
"learnMore": "Learn more"
1492+
"learnMore": "Learn more",
1493+
"noReleaseNotes": "No release notes available."
14931494
}
14941495
}

‎src/locales/es/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1484,7 +1484,8 @@
14841484
"title": "Bienvenido a ComfyUI"
14851485
},
14861486
"whatsNewPopup": {
1487-
"learnMore": "Aprende más"
1487+
"learnMore": "Aprende más",
1488+
"noReleaseNotes": "No hay notas de la versión disponibles."
14881489
},
14891490
"workflowService": {
14901491
"enterFilename": "Introduzca el nombre del archivo",

‎src/locales/fr/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1484,7 +1484,8 @@
14841484
"title": "Bienvenue sur ComfyUI"
14851485
},
14861486
"whatsNewPopup": {
1487-
"learnMore": "En savoir plus"
1487+
"learnMore": "En savoir plus",
1488+
"noReleaseNotes": "Aucune note de version disponible."
14881489
},
14891490
"workflowService": {
14901491
"enterFilename": "Entrez le nom du fichier",

‎src/locales/ja/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1484,7 +1484,8 @@
14841484
"title": "ComfyUIへようこそ"
14851485
},
14861486
"whatsNewPopup": {
1487-
"learnMore": "詳細はこちら"
1487+
"learnMore": "詳細はこちら",
1488+
"noReleaseNotes": "リリースノートはありません。"
14881489
},
14891490
"workflowService": {
14901491
"enterFilename": "ファイル名を入力",

0 commit comments

Comments
 (0)