Skip to content

Commit 36ed67e

Browse files
viva-jinyiviva-jinyi
committed
feature: small dialog
1 parent 09c888e commit 36ed67e

File tree

9 files changed

+139
-107
lines changed

9 files changed

+139
-107
lines changed

‎src/components/sidebar/SidebarHelpCenterIcon.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,12 @@ import { storeToRefs } from 'pinia'
6464
import { computed, onMounted, toRefs } from 'vue'
6565
6666
import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
67+
import { useNodeConflictDialog } from '@/composables/useNodeConflictDialog'
6768
import { useSettingStore } from '@/platform/settings/settingStore'
6869
import { useTelemetry } from '@/platform/telemetry'
6970
import { useReleaseStore } from '@/platform/updates/common/releaseStore'
7071
import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
7172
import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
72-
import { useDialogService } from '@/services/dialogService'
7373
import { useHelpCenterStore } from '@/stores/helpCenterStore'
7474
import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
7575
import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
@@ -84,7 +84,7 @@ const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
8484
8585
const conflictDetection = useConflictDetection()
8686
87-
const { showNodeConflictDialog } = useDialogService()
87+
const { show: showNodeConflictDialog } = useNodeConflictDialog()
8888
8989
// Use conflict acknowledgment state from composable - call only once
9090
const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =

‎src/composables/useMissingNodesDialog.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
2+
import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
3+
import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
4+
import { useDialogService } from '@/services/dialogService'
5+
import { useDialogStore } from '@/stores/dialogStore'
6+
import type { ComponentProps } from 'vue-component-type-helpers'
7+
8+
const DIALOG_KEY = 'global-missing-nodes'
9+
10+
export const useMissingNodesDialog = () => {
11+
const dialogService = useDialogService()
12+
const dialogStore = useDialogStore()
13+
14+
function hide() {
15+
dialogStore.closeDialog({ key: DIALOG_KEY })
16+
}
17+
18+
function show(props: ComponentProps<typeof MissingNodesContent>) {
19+
dialogService.showSmallDialog({
20+
key: DIALOG_KEY,
21+
headerComponent: MissingNodesHeader,
22+
footerComponent: MissingNodesFooter,
23+
component: MissingNodesContent,
24+
props
25+
})
26+
}
27+
28+
return { show, hide }
29+
}

‎src/composables/useNodeConflictDialog.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
2+
import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
3+
import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
4+
import { useDialogService } from '@/services/dialogService'
5+
import { useDialogStore } from '@/stores/dialogStore'
6+
import type { DialogComponentProps } from '@/stores/dialogStore'
7+
import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
8+
9+
const DIALOG_KEY = 'global-node-conflict'
10+
11+
export const useNodeConflictDialog = () => {
12+
const dialogService = useDialogService()
13+
const dialogStore = useDialogStore()
14+
15+
function hide() {
16+
dialogStore.closeDialog({ key: DIALOG_KEY })
17+
}
18+
19+
function show(
20+
options: {
21+
showAfterWhatsNew?: boolean
22+
conflictedPackages?: ConflictDetectionResult[]
23+
dialogComponentProps?: DialogComponentProps
24+
buttonText?: string
25+
onButtonClick?: () => void
26+
} = {}
27+
) {
28+
const { buttonText, onButtonClick, showAfterWhatsNew, conflictedPackages } =
29+
options
30+
31+
return dialogService.showSmallDialog({
32+
key: DIALOG_KEY,
33+
headerComponent: NodeConflictHeader,
34+
footerComponent: NodeConflictFooter,
35+
component: NodeConflictDialogContent,
36+
props: {
37+
showAfterWhatsNew,
38+
conflictedPackages
39+
},
40+
footerProps: {
41+
buttonText,
42+
onButtonClick
43+
}
44+
})
45+
}
46+
47+
return { show, hide }
48+
}

‎src/scripts/app.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
isComboInputSpecV2
4343
} from '@/schemas/nodeDefSchema'
4444
import { type BaseDOMWidget, DOMWidgetImpl } from '@/scripts/domWidget'
45+
import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
4546
import { useDialogService } from '@/services/dialogService'
4647
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
4748
import { useExtensionService } from '@/services/extensionService'
@@ -1018,7 +1019,7 @@ export class ComfyApp {
10181019

10191020
private showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
10201021
if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
1021-
useDialogService().showLoadWorkflowWarning({ missingNodeTypes })
1022+
useMissingNodesDialog().show({ missingNodeTypes })
10221023
}
10231024
}
10241025

‎src/services/dialogService.ts‎

Lines changed: 40 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@ import { merge } from 'es-toolkit/compat'
22
import type { Component } from 'vue'
33

44
import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
5-
import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
6-
import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
7-
import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
85
import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
96
import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
107
import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
@@ -30,10 +27,6 @@ import ManagerProgressFooter from '@/workbench/extensions/manager/components/Man
3027
import ManagerProgressHeader from '@/workbench/extensions/manager/components/ManagerProgressHeader.vue'
3128
import ManagerDialogContent from '@/workbench/extensions/manager/components/manager/ManagerDialogContent.vue'
3229
import ManagerHeader from '@/workbench/extensions/manager/components/manager/ManagerHeader.vue'
33-
import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
34-
import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
35-
import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
36-
import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
3730
import type { ComponentProps } from 'vue-component-type-helpers'
3831

3932
export type ConfirmationDialogType =
@@ -47,32 +40,6 @@ export type ConfirmationDialogType =
4740
export const useDialogService = () => {
4841
const dialogStore = useDialogStore()
4942

50-
function showLoadWorkflowWarning(
51-
props: ComponentProps<typeof MissingNodesContent>
52-
) {
53-
dialogStore.showDialog({
54-
key: 'global-missing-nodes',
55-
headerComponent: MissingNodesHeader,
56-
footerComponent: MissingNodesFooter,
57-
component: MissingNodesContent,
58-
dialogComponentProps: {
59-
closable: true,
60-
pt: {
61-
root: { class: 'bg-base-background border-border-default' },
62-
header: { class: '!p-0 !m-0' },
63-
content: { class: '!p-0 overflow-y-hidden' },
64-
footer: { class: '!p-0' },
65-
pcCloseButton: {
66-
root: {
67-
class: '!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5'
68-
}
69-
}
70-
}
71-
},
72-
props
73-
})
74-
}
75-
7643
function showMissingModelsWarning(
7744
props: InstanceType<typeof MissingModelsWarning>['$props']
7845
) {
@@ -449,6 +416,44 @@ export const useDialogService = () => {
449416
}
450417
}
451418

419+
function showSmallDialog<T extends Component>(options: {
420+
key: string
421+
component: T
422+
headerComponent?: Component
423+
footerComponent?: Component
424+
props?: ComponentProps<T>
425+
footerProps?: Record<string, unknown>
426+
dialogComponentProps?: DialogComponentProps
427+
}) {
428+
const smallDialogDefaultProps: DialogComponentProps = {
429+
closable: true,
430+
pt: {
431+
root: { class: 'bg-base-background border-border-default' },
432+
header: { class: '!p-0 !m-0' },
433+
content: { class: '!p-0 overflow-y-hidden' },
434+
footer: { class: '!p-0' },
435+
pcCloseButton: {
436+
root: {
437+
class: '!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5'
438+
}
439+
}
440+
}
441+
}
442+
443+
return dialogStore.showDialog({
444+
key: options.key,
445+
component: options.component,
446+
headerComponent: options.headerComponent,
447+
footerComponent: options.footerComponent,
448+
props: options.props,
449+
footerProps: options.footerProps,
450+
dialogComponentProps: merge(
451+
smallDialogDefaultProps,
452+
options.dialogComponentProps || {}
453+
)
454+
})
455+
}
456+
452457
function showLayoutDialog(options: {
453458
key: string
454459
component: Component
@@ -481,54 +486,6 @@ export const useDialogService = () => {
481486
})
482487
}
483488

484-
function showNodeConflictDialog(
485-
options: {
486-
showAfterWhatsNew?: boolean
487-
conflictedPackages?: ConflictDetectionResult[]
488-
dialogComponentProps?: DialogComponentProps
489-
buttonText?: string
490-
onButtonClick?: () => void
491-
} = {}
492-
) {
493-
const {
494-
dialogComponentProps,
495-
buttonText,
496-
onButtonClick,
497-
showAfterWhatsNew,
498-
conflictedPackages
499-
} = options
500-
501-
return dialogStore.showDialog({
502-
key: 'global-node-conflict',
503-
headerComponent: NodeConflictHeader,
504-
footerComponent: NodeConflictFooter,
505-
component: NodeConflictDialogContent,
506-
dialogComponentProps: {
507-
closable: true,
508-
pt: {
509-
header: { class: '!p-0 !m-0' },
510-
content: { class: '!p-0 overflow-y-hidden' },
511-
footer: { class: '!p-0' },
512-
pcCloseButton: {
513-
root: {
514-
class:
515-
'!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5 bg-dialog-surface text-white'
516-
}
517-
}
518-
},
519-
...dialogComponentProps
520-
},
521-
props: {
522-
showAfterWhatsNew,
523-
conflictedPackages
524-
},
525-
footerProps: {
526-
buttonText,
527-
onButtonClick
528-
}
529-
})
530-
}
531-
532489
async function showSubscriptionRequiredDialog() {
533490
if (!isCloud || !window.__CONFIG__?.subscription_required) {
534491
return
@@ -542,7 +499,6 @@ export const useDialogService = () => {
542499
}
543500

544501
return {
545-
showLoadWorkflowWarning,
546502
showMissingModelsWarning,
547503
showSettingsDialog,
548504
showAboutDialog,
@@ -560,7 +516,7 @@ export const useDialogService = () => {
560516
confirm,
561517
toggleManagerDialog,
562518
toggleManagerProgressDialog,
563-
showLayoutDialog,
564-
showNodeConflictDialog
519+
showSmallDialog,
520+
showLayoutDialog
565521
}
566522
}

‎src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<!-- Import Failed List Wrapper -->
1515
<div
1616
v-if="importFailedConflicts.length > 0"
17-
class="flex min-h-8 w-full flex-col rounded-lg bg-base-background"
17+
class="flex min-h-8 w-full flex-col rounded-lg bg-secondary-background"
1818
>
1919
<div
2020
data-testid="conflict-dialog-panel-toggle"
@@ -50,7 +50,7 @@
5050
<div
5151
v-for="(packageName, i) in importFailedConflicts"
5252
:key="i"
53-
class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
53+
class="hover:bg-alpha-azure-600-30 flex h-6 flex-shrink-0 items-center justify-between px-4"
5454
>
5555
<span class="text-xs text-muted">
5656
{{ packageName }}
@@ -60,7 +60,10 @@
6060
</div>
6161
</div>
6262
<!-- Conflict List Wrapper -->
63-
<div class="flex min-h-8 w-full flex-col rounded-lg bg-base-background">
63+
<div
64+
v-if="allConflictDetails.length > 0"
65+
class="flex min-h-8 w-full flex-col rounded-lg bg-secondary-background"
66+
>
6467
<div
6568
data-testid="conflict-dialog-panel-toggle"
6669
class="flex h-8 w-full items-center justify-between gap-2 pl-4"
@@ -95,7 +98,7 @@
9598
<div
9699
v-for="(conflict, i) in allConflictDetails"
97100
:key="i"
98-
class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
101+
class="hover:bg-alpha-azure-600-30 flex h-6 flex-shrink-0 items-center justify-between px-4"
99102
>
100103
<span class="text-xs text-muted">{{
101104
getConflictMessage(conflict, t)
@@ -105,7 +108,9 @@
105108
</div>
106109
</div>
107110
<!-- Extension List Wrapper -->
108-
<div class="flex min-h-8 w-full flex-col rounded-lg bg-base-background">
111+
<div
112+
class="flex min-h-8 w-full flex-col rounded-lg bg-secondary-background"
113+
>
109114
<div
110115
data-testid="conflict-dialog-panel-toggle"
111116
class="flex h-8 w-full items-center justify-between gap-2 pl-4"
@@ -140,7 +145,7 @@
140145
<div
141146
v-for="conflictResult in conflictData"
142147
:key="conflictResult.package_id"
143-
class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
148+
class="hover:bg-alpha-azure-600-30 flex h-6 flex-shrink-0 items-center justify-between px-4"
144149
>
145150
<span class="text-xs text-muted">
146151
{{ conflictResult.package_name }}
@@ -230,8 +235,3 @@ const toggleExtensionsPanel = () => {
230235
importFailedExpanded.value = false
231236
}
232237
</script>
233-
<style scoped>
234-
.conflict-list-item:hover {
235-
background-color: rgb(0 122 255 / 0.2);
236-
}
237-
</style>

‎src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<template>
2-
<div class="flex h-12 w-full items-center justify-between pl-6">
2+
<div class="flex w-full items-center justify-between p-4">
33
<div class="flex items-center gap-2">
4-
<!-- Warning Icon -->
5-
<i class="pi pi-exclamation-triangle text-lg"></i>
6-
<!-- Title -->
7-
<p class="text-base font-bold">
4+
<i class="icon-[lucide--triangle-alert] text-gold-600"></i>
5+
<p class="m-0 text-sm">
86
{{ $t('manager.conflicts.title') }}
97
</p>
108
</div>

‎src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
3434
import { computed, ref } from 'vue'
3535
import { useI18n } from 'vue-i18n'
3636
37-
import { useDialogService } from '@/services/dialogService'
37+
import { useNodeConflictDialog } from '@/composables/useNodeConflictDialog'
3838
import type { components } from '@/types/comfyRegistryTypes'
3939
import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
4040
import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
@@ -52,7 +52,7 @@ const { t } = useI18n()
5252
const { isPackEnabled, enablePack, disablePack, installedPacks } =
5353
useComfyManagerStore()
5454
const { getConflictsForPackageByID } = useConflictDetectionStore()
55-
const { showNodeConflictDialog } = useDialogService()
55+
const { show: showNodeConflictDialog } = useNodeConflictDialog()
5656
const { acknowledgmentState, markConflictsAsSeen } = useConflictAcknowledgment()
5757
5858
const isLoading = ref(false)

0 commit comments

Comments
 (0)