From 5ced4eaf04c922aae6026d750beff02515d036ff Mon Sep 17 00:00:00 2001 From: bmcomfy Date: Wed, 9 Jul 2025 16:17:50 -0700 Subject: [PATCH] [System Pop Up] Improve help center and what's new popup UI (#4395) Co-authored-by: github-actions --- .../helpcenter/HelpCenterMenuContent.vue | 2 +- src/components/helpcenter/WhatsNewPopup.vue | 191 ++++++++++-------- .../sidebar/SidebarHelpCenterIcon.vue | 6 +- src/locales/en/main.json | 3 +- src/locales/es/main.json | 3 +- src/locales/fr/main.json | 3 +- src/locales/ja/main.json | 3 +- src/locales/ko/main.json | 3 +- src/locales/ru/main.json | 3 +- src/locales/zh/main.json | 3 +- 10 files changed, 125 insertions(+), 95 deletions(-) diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue index f5dad4df1..45a6da119 100644 --- a/src/components/helpcenter/HelpCenterMenuContent.vue +++ b/src/components/helpcenter/HelpCenterMenuContent.vue @@ -162,7 +162,7 @@ const TIME_UNITS = { const SUBMENU_CONFIG = { DELAY_MS: 100, OFFSET_PX: 8, - Z_INDEX: 1002 + Z_INDEX: 10001 } as const // Composables diff --git a/src/components/helpcenter/WhatsNewPopup.vue b/src/components/helpcenter/WhatsNewPopup.vue index e8c4c9d1b..b7d3000ae 100644 --- a/src/components/helpcenter/WhatsNewPopup.vue +++ b/src/components/helpcenter/WhatsNewPopup.vue @@ -32,28 +32,32 @@
-
-
- -
- - {{ $t('whatsNewPopup.learnMore') }} - - - + +
+ + {{ $t('whatsNewPopup.learnMore') }} + + + +
@@ -68,7 +72,7 @@ import type { ReleaseNote } from '@/services/releaseService' import { useReleaseStore } from '@/stores/releaseStore' import { formatVersionAnchor } from '@/utils/formatUtil' -const { locale } = useI18n() +const { locale, t } = useI18n() const releaseStore = useReleaseStore() // Local state for dismissed status @@ -101,13 +105,12 @@ const changelogUrl = computed(() => { // Format release content for display using marked const formattedContent = computed(() => { if (!latestRelease.value?.content) { - return '

No release notes available.

' + return `

${t('whatsNewPopup.noReleaseNotes')}

` } try { // Use marked to parse markdown to HTML return marked(latestRelease.value.content, { - breaks: true, // Convert line breaks to
gfm: true // Enable GitHub Flavored Markdown }) } catch (error) { @@ -199,14 +202,10 @@ defineExpose({ } .whats-new-popup { - padding: 32px 32px 24px; background: #353535; border-radius: 12px; max-width: 400px; width: 400px; - display: flex; - flex-direction: column; - gap: 32px; outline: 1px solid #4e4e4e; outline-offset: -1px; box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3); @@ -217,6 +216,10 @@ defineExpose({ .popup-content { display: flex; flex-direction: column; + gap: 24px; + overflow: hidden; + padding: 32px 32px 24px; + border-radius: 12px; } /* Close button */ @@ -224,17 +227,17 @@ defineExpose({ position: absolute; top: 0; right: 0; - width: 31px; - height: 31px; - padding: 6px 7px; + width: 32px; + height: 32px; + padding: 6px; background: #7c7c7c; - border-radius: 15.5px; + border-radius: 16px; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; - transform: translate(50%, -50%); + transform: translate(30%, -30%); transition: background-color 0.2s ease, transform 0.1s ease; @@ -247,7 +250,7 @@ defineExpose({ .close-button:active { background: #6a6a6a; - transform: translate(50%, -50%) scale(0.95); + transform: translate(30%, -30%) scale(0.95); } .close-icon { @@ -288,73 +291,45 @@ defineExpose({ .content-text { color: white; font-size: 14px; - font-family: 'Inter', sans-serif; - font-weight: 400; line-height: 1.5; word-wrap: break-word; } /* Style the markdown content */ +/* Title */ +.content-text :deep(*) { + box-sizing: border-box; + margin: 0; + padding: 0; +} + .content-text :deep(h1) { - color: white; - font-size: 20px; - font-weight: 700; - margin: 0 0 16px 0; - line-height: 1.3; -} - -.content-text :deep(h2) { - color: white; - font-size: 18px; - font-weight: 600; - margin: 16px 0 12px 0; - line-height: 1.3; -} - -.content-text :deep(h2:first-child) { - margin-top: 0; -} - -.content-text :deep(h3) { - color: white; font-size: 16px; - font-weight: 600; - margin: 12px 0 8px 0; - line-height: 1.3; + font-weight: 700; + margin-bottom: 8px; } -.content-text :deep(h3:first-child) { - margin-top: 0; -} - -.content-text :deep(h4) { - color: white; - font-size: 14px; - font-weight: 600; - margin: 8px 0 6px 0; -} - -.content-text :deep(h4:first-child) { - margin-top: 0; +/* Version subtitle - targets the first p tag after h1 */ +.content-text :deep(h1 + p) { + color: #c0c0c0; + font-size: 16px; + font-weight: 500; + margin-bottom: 16px; + opacity: 0.8; } +/* Regular paragraphs - short description */ .content-text :deep(p) { - margin: 0 0 12px 0; - line-height: 1.6; -} - -.content-text :deep(p:first-child) { - margin-top: 0; -} - -.content-text :deep(p:last-child) { - margin-bottom: 0; + margin-bottom: 16px; + color: #e0e0e0; } +/* List */ .content-text :deep(ul), .content-text :deep(ol) { - margin: 0 0 12px 0; - padding-left: 24px; + margin-bottom: 16px; + padding-left: 0; + list-style: none; } .content-text :deep(ul:first-child), @@ -367,12 +342,63 @@ defineExpose({ margin-bottom: 0; } +/* List items */ +.content-text :deep(li) { + margin-bottom: 8px; + position: relative; + padding-left: 20px; +} + +.content-text :deep(li:last-child) { + margin-bottom: 0; +} + +/* Custom bullet points */ +.content-text :deep(li::before) { + content: ''; + position: absolute; + left: 0; + top: 10px; + display: flex; + width: 8px; + height: 8px; + justify-content: center; + align-items: center; + aspect-ratio: 1/1; + border-radius: 100px; + background: #60a5fa; +} + +/* List item strong text */ +.content-text :deep(li strong) { + color: #fff; + font-size: 14px; + display: block; + margin-bottom: 4px; +} + +.content-text :deep(li p) { + font-size: 12px; + margin-bottom: 0; + line-height: 2; +} + +/* Code styling */ +.content-text :deep(code) { + background-color: #2a2a2a; + border: 1px solid #4a4a4a; + border-radius: 4px; + padding: 2px 6px; + color: #f8f8f2; + white-space: nowrap; +} + /* Remove top margin for first media element */ .content-text :deep(img:first-child), .content-text :deep(video:first-child), .content-text :deep(iframe:first-child) { margin-top: -32px; /* Align with the top edge of the popup content */ - margin-bottom: 12px; + margin-bottom: 24px; } /* Media elements */ @@ -381,8 +407,7 @@ defineExpose({ .content-text :deep(iframe) { width: calc(100% + 64px); height: auto; - border-radius: 6px; - margin: 12px -32px; + margin: 24px -32px; display: block; } @@ -397,7 +422,6 @@ defineExpose({ .learn-more-link { color: #60a5fa; font-size: 14px; - font-family: 'Inter', sans-serif; font-weight: 500; line-height: 18.2px; text-decoration: none; @@ -417,7 +441,6 @@ defineExpose({ border: none; color: #121212; font-size: 14px; - font-family: 'Inter', sans-serif; font-weight: 500; cursor: pointer; } diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue index 30537b75a..c37cd973e 100644 --- a/src/components/sidebar/SidebarHelpCenterIcon.vue +++ b/src/components/sidebar/SidebarHelpCenterIcon.vue @@ -46,7 +46,7 @@ - +
{ left: 0; right: 0; bottom: 0; - z-index: 999; + z-index: 9999; background: transparent; } .help-center-popup { position: absolute; bottom: 1rem; - z-index: 1000; + z-index: 10000; animation: slideInUp 0.2s ease-out; pointer-events: auto; } diff --git a/src/locales/en/main.json b/src/locales/en/main.json index f1f33740f..5c2bec8c9 100644 --- a/src/locales/en/main.json +++ b/src/locales/en/main.json @@ -1489,6 +1489,7 @@ "loadError": "Failed to load help: {error}" }, "whatsNewPopup": { - "learnMore": "Learn more" + "learnMore": "Learn more", + "noReleaseNotes": "No release notes available." } } \ No newline at end of file diff --git a/src/locales/es/main.json b/src/locales/es/main.json index f1c05e45a..80feb58a1 100644 --- a/src/locales/es/main.json +++ b/src/locales/es/main.json @@ -1484,7 +1484,8 @@ "title": "Bienvenido a ComfyUI" }, "whatsNewPopup": { - "learnMore": "Aprende más" + "learnMore": "Aprende más", + "noReleaseNotes": "No hay notas de la versión disponibles." }, "workflowService": { "enterFilename": "Introduzca el nombre del archivo", diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json index f4d496f15..f8331005e 100644 --- a/src/locales/fr/main.json +++ b/src/locales/fr/main.json @@ -1484,7 +1484,8 @@ "title": "Bienvenue sur ComfyUI" }, "whatsNewPopup": { - "learnMore": "En savoir plus" + "learnMore": "En savoir plus", + "noReleaseNotes": "Aucune note de version disponible." }, "workflowService": { "enterFilename": "Entrez le nom du fichier", diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json index 8f8b0f074..939bbf982 100644 --- a/src/locales/ja/main.json +++ b/src/locales/ja/main.json @@ -1484,7 +1484,8 @@ "title": "ComfyUIへようこそ" }, "whatsNewPopup": { - "learnMore": "詳細はこちら" + "learnMore": "詳細はこちら", + "noReleaseNotes": "リリースノートはありません。" }, "workflowService": { "enterFilename": "ファイル名を入力", diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json index 53dc65464..592e53ac2 100644 --- a/src/locales/ko/main.json +++ b/src/locales/ko/main.json @@ -1484,7 +1484,8 @@ "title": "ComfyUI에 오신 것을 환영합니다" }, "whatsNewPopup": { - "learnMore": "자세히 알아보기" + "learnMore": "자세히 알아보기", + "noReleaseNotes": "릴리스 노트가 없습니다." }, "workflowService": { "enterFilename": "파일 이름 입력", diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json index a66815a6d..cfb55df7e 100644 --- a/src/locales/ru/main.json +++ b/src/locales/ru/main.json @@ -1484,7 +1484,8 @@ "title": "Добро пожаловать в ComfyUI" }, "whatsNewPopup": { - "learnMore": "Узнать больше" + "learnMore": "Узнать больше", + "noReleaseNotes": "Нет доступных примечаний к выпуску." }, "workflowService": { "enterFilename": "Введите название файла", diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json index ff785c2f3..bce56ff51 100644 --- a/src/locales/zh/main.json +++ b/src/locales/zh/main.json @@ -1484,7 +1484,8 @@ "title": "欢迎使用 ComfyUI" }, "whatsNewPopup": { - "learnMore": "了解更多" + "learnMore": "了解更多", + "noReleaseNotes": "暂无更新说明。" }, "workflowService": { "enterFilename": "输入文件名",