Convert ribbon-button to about panel badge

Comfy-Org · Jan 17, 2025 · 7a113b6 · 7a113b6
1 parent 70f5b84
commit 7a113b6
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 33 deletions.
diff --git a/browser_tests/dialog.spec.ts b/browser_tests/dialog.spec.ts
@@ -172,8 +172,8 @@ test.describe('Feedback dialog', () => {
   }) => {
     await comfyPage.settingDialog.open()
     await comfyPage.settingDialog.goToAboutPanel()
-    const feedbackButton = comfyPage.page.getByRole('button', {
-      name: 'Feedback'
+    const feedbackButton = comfyPage.page.getByRole('link', {
+      name: /Feedback/
     })
     await feedbackButton.click()
     const feedbackHeader = comfyPage.page.getByRole('heading', {

diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
@@ -62,22 +62,12 @@
             <div>Loading server config panel...</div>
           </template>
         </Suspense>
-        <Button
-          v-if="tabValue === 'About'"
-          class="absolute top-3/4 right-0 w-min p-2 rounded-e-none z-30 feedback-button"
-          icon="pi pi-refresh"
-          severity="primary"
-          @click="useDialogService().showFeedbackDialog()"
-        >
-          <span class="vertical-text">{{ $t('menuLabels.Feedback') }}</span>
-        </Button>
       </TabPanels>
     </Tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
@@ -88,7 +78,6 @@ import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { st } from '@/i18n'
-import { useDialogService } from '@/services/dialogService'
 import {
   SettingTreeNode,
   getSettingInfo,
@@ -304,11 +293,6 @@ watch(activeCategory, (_, oldValue) => {
   overflow: hidden;
 }
 
-.vertical-text {
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-}
-
 @media (max-width: 768px) {
   .settings-container {
     flex-direction: column;
@@ -323,10 +307,6 @@ watch(activeCategory, (_, oldValue) => {
   .settings-content {
     height: 350px;
   }
-
-  .feedback-button {
-    display: none;
-  }
 }
 
 /* Show a separator line above the Keybinding tab */

diff --git a/src/components/dialog/content/setting/AboutPanel.vue b/src/components/dialog/content/setting/AboutPanel.vue
@@ -4,12 +4,11 @@
     <div class="space-y-2">
       <a
         v-for="badge in aboutPanelStore.badges"
-        :key="badge.url"
-        :href="badge.url"
-        target="_blank"
+        :key="badge.label"
+        @click="handleBadgeClick(badge, $event)"
         rel="noopener noreferrer"
         class="about-badge inline-flex items-center no-underline"
-        :title="badge.url"
+        :title="badge.type === 'url' ? badge.url : null"
       >
         <Tag class="mr-2">
           <template #icon>
@@ -36,13 +35,24 @@ import { onMounted } from 'vue'
 
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { AboutPageBadge } from '@/types/comfy'
 
 import PanelTemplate from './PanelTemplate.vue'
 
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
 
+const handleBadgeClick = (badge: AboutPageBadge, event: MouseEvent) => {
+  if (badge.type === 'command') {
+    event.preventDefault()
+    useCommandStore().execute(badge.command)
+  } else {
+    window.open(badge.url, '_blank')
+  }
+}
+
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {
     await systemStatsStore.fetchSystemStats()

diff --git a/src/extensions/core/electronAdapter.ts b/src/extensions/core/electronAdapter.ts
@@ -185,7 +185,8 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
       {
         label: 'ComfyUI_desktop v' + desktopAppVersion,
         url: 'https://github.com/Comfy-Org/electron',
-        icon: 'pi pi-github'
+        icon: 'pi pi-github',
+        type: 'url'
       }
     ]
   })

diff --git a/src/stores/aboutPanelStore.ts b/src/stores/aboutPanelStore.ts
@@ -25,19 +25,33 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
           : coreVersion.value
       }`,
       url: 'https://github.com/comfyanonymous/ComfyUI',
-      icon: 'pi pi-github'
+      icon: 'pi pi-github',
+      type: 'url'
     },
     {
       label: `ComfyUI_frontend v${frontendVersion}`,
       url: 'https://github.com/Comfy-Org/ComfyUI_frontend',
-      icon: 'pi pi-github'
+      icon: 'pi pi-github',
+      type: 'url'
     },
     {
       label: 'Discord',
       url: 'https://www.comfy.org/discord',
-      icon: 'pi pi-discord'
+      icon: 'pi pi-discord',
+      type: 'url'
     },
-    { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
+    {
+      label: 'ComfyOrg',
+      url: 'https://www.comfy.org/',
+      icon: 'pi pi-globe',
+      type: 'url'
+    },
+    {
+      label: 'Feedback',
+      command: 'Comfy.Feedback',
+      icon: 'pi pi-comment',
+      type: 'command'
+    }
   ])
 
   const allBadges = computed<AboutPageBadge[]>(() => [

diff --git a/src/types/comfy.ts b/src/types/comfy.ts
@@ -11,12 +11,15 @@ import type { SettingParams } from '@/types/settingTypes'
 
 export type Widgets = Record<string, ComfyWidgetConstructor>
 
-export interface AboutPageBadge {
+export interface BaseAboutPageBadge {
   label: string
-  url: string
   icon: string
 }
 
+export type AboutPageBadge =
+  | (BaseAboutPageBadge & { type: 'url'; url: string })
+  | (BaseAboutPageBadge & { type: 'command'; command: string })
+
 export type MenuCommandGroup = {
   /**
    * The path to the menu group.