From 87517daf1fca702cad231879e8bc7676292d610a Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 29 Oct 2024 09:26:02 -0400
Subject: [PATCH] Restyle missing model warning dialog (#1354)

* Restyle missing model dialog

* nit

* nit

* nit

* nit
---
 src/components/dialog/GlobalDialog.vue        |  12 +-
 .../dialog/content/MissingModelsWarning.vue   | 191 ++++++++----------
 src/services/dialogService.ts                 |   5 +-
 3 files changed, 88 insertions(+), 120 deletions(-)

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index 3bfaafb722..df9c7bb9d1 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -46,10 +46,14 @@ const onUnmaximize = () => {
   maximized.value = false
 }
 
-const contentProps = computed(() => ({
-  ...dialogStore.props,
-  maximized: maximized.value
-}))
+const contentProps = computed(() =>
+  maximizable.value
+    ? {
+        ...dialogStore.props,
+        maximized: maximized.value
+      }
+    : dialogStore.props
+)
 
 const headerId = `dialog-${Math.random().toString(36).substr(2, 9)}`
 </script>
diff --git a/src/components/dialog/content/MissingModelsWarning.vue b/src/components/dialog/content/MissingModelsWarning.vue
index cf9ac447fc..518af79019 100644
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -1,83 +1,83 @@
 <template>
-  <div class="comfy-missing-models">
-    <h4 class="warning-title">Warning: Missing Models</h4>
-    <p class="warning-description">
-      When loading the graph, the following models were not found:
-    </p>
-    <p class="warning-options">
-      <Checkbox
-        class="model-path-select-checkbox"
-        v-model="showFolderSelect"
-        label="Show folder selector"
-        :binary="true"
-      />
-      Show folder selector
-    </p>
-    <ListBox
-      :options="missingModels"
-      optionLabel="label"
-      scrollHeight="100%"
-      :class="'missing-models-list' + (props.maximized ? ' maximized' : '')"
-      :pt="{
-        list: { class: 'border-none' }
-      }"
-    >
-      <template #option="slotProps">
-        <div
-          class="missing-model-item"
-          :style="{ '--progress': `${slotProps.option.progress}%` }"
-        >
-          <div class="model-info">
-            <div class="model-details">
-              <span class="model-type" :title="slotProps.option.hint">{{
-                slotProps.option.label
-              }}</span>
-            </div>
-            <div v-if="slotProps.option.error" class="model-error">
-              {{ slotProps.option.error }}
-            </div>
+  <NoResultsPlaceholder
+    class="pb-0"
+    icon="pi pi-exclamation-circle"
+    title="Missing Models"
+    message="When loading the graph, the following models were not found"
+  />
+  <div class="flex flex-row">
+    <Checkbox
+      class="model-path-select-checkbox"
+      v-model="showFolderSelect"
+      label="Show folder selector"
+      :binary="true"
+    />
+    <p class="ml-2">Show folder selector</p>
+  </div>
+  <ListBox
+    :options="missingModels"
+    optionLabel="label"
+    scrollHeight="100%"
+    class="comfy-missing-models"
+    :pt="{
+      list: { class: 'border-none' }
+    }"
+  >
+    <template #option="slotProps">
+      <div
+        class="missing-model-item"
+        :style="{ '--progress': `${slotProps.option.progress}%` }"
+      >
+        <div class="model-info">
+          <div class="model-details">
+            <span class="model-type" :title="slotProps.option.hint">{{
+              slotProps.option.label
+            }}</span>
           </div>
-          <div class="model-action">
-            <Select
-              class="model-path-select"
-              v-if="
-                slotProps.option.action &&
-                !slotProps.option.downloading &&
-                !slotProps.option.completed &&
-                !slotProps.option.error &&
-                showFolderSelect
-              "
-              v-model="slotProps.option.folderPath"
-              :options="slotProps.option.paths"
-              @change="updateFolderPath(slotProps.option, $event)"
-            />
-            <Button
-              v-if="
-                slotProps.option.action &&
-                !slotProps.option.downloading &&
-                !slotProps.option.completed &&
-                !slotProps.option.error
-              "
-              @click="slotProps.option.action.callback"
-              :label="slotProps.option.action.text"
-              class="p-button-sm p-button-outlined model-action-button"
-            />
-            <div v-if="slotProps.option.downloading" class="download-progress">
-              <span class="progress-text"
-                >{{ slotProps.option.progress.toFixed(2) }}%</span
-              >
-            </div>
-            <div v-if="slotProps.option.completed" class="download-complete">
-              <i class="pi pi-check" style="color: var(--green-500)"></i>
-            </div>
-            <div v-if="slotProps.option.error" class="download-error">
-              <i class="pi pi-times" style="color: var(--red-600)"></i>
-            </div>
+          <div v-if="slotProps.option.error" class="model-error">
+            {{ slotProps.option.error }}
           </div>
         </div>
-      </template>
-    </ListBox>
-  </div>
+        <div class="model-action">
+          <Select
+            class="model-path-select"
+            v-if="
+              slotProps.option.action &&
+              !slotProps.option.downloading &&
+              !slotProps.option.completed &&
+              !slotProps.option.error &&
+              showFolderSelect
+            "
+            v-model="slotProps.option.folderPath"
+            :options="slotProps.option.paths"
+            @change="updateFolderPath(slotProps.option, $event)"
+          />
+          <Button
+            v-if="
+              slotProps.option.action &&
+              !slotProps.option.downloading &&
+              !slotProps.option.completed &&
+              !slotProps.option.error
+            "
+            @click="slotProps.option.action.callback"
+            :label="slotProps.option.action.text"
+            class="p-button-sm p-button-outlined model-action-button"
+          />
+          <div v-if="slotProps.option.downloading" class="download-progress">
+            <span class="progress-text"
+              >{{ slotProps.option.progress.toFixed(2) }}%</span
+            >
+          </div>
+          <div v-if="slotProps.option.completed" class="download-complete">
+            <i class="pi pi-check" style="color: var(--p-green-500)"></i>
+          </div>
+          <div v-if="slotProps.option.error" class="download-error">
+            <i class="pi pi-times" style="color: var(--p-red-600)"></i>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ListBox>
 </template>
 
 <script setup lang="ts">
@@ -85,6 +85,7 @@ import { ref, computed } from 'vue'
 import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
 import Select from 'primevue/select'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { SelectChangeEvent } from 'primevue/select'
 import Button from 'primevue/button'
 import { api } from '@/scripts/api'
@@ -116,7 +117,6 @@ interface ModelInfo {
 const props = defineProps<{
   missingModels: ModelInfo[]
   paths: Record<string, string[]>
-  maximized: boolean
 }>()
 
 const modelDownloads = ref<Record<string, ModelInfo>>({})
@@ -253,45 +253,12 @@ const missingModels = computed(() => {
 })
 </script>
 
-<style>
-:root {
-  --red-600: #dc3545;
-  --green-500: #28a745;
-}
-</style>
-
 <style scoped>
 .comfy-missing-models {
-  font-family: monospace;
-  color: var(--red-600);
-  padding: 1.5rem;
-  background-color: var(--surface-ground);
-  border-radius: var(--border-radius);
-  box-shadow: var(--card-shadow);
-}
-
-.warning-title {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-.warning-description {
-  margin-bottom: 1rem;
-}
-
-.warning-options {
-  color: var(--fg-color);
-}
-
-.missing-models-list {
   max-height: 300px;
   overflow-y: auto;
 }
 
-.missing-models-list.maximized {
-  max-height: unset;
-}
-
 .missing-model-item {
   display: flex;
   align-items: flex-start;
@@ -308,7 +275,7 @@ const missingModels = computed(() => {
   left: 0;
   height: 100%;
   width: var(--progress);
-  background-color: var(--green-500);
+  background-color: var(--p-green-500);
   opacity: 0.2;
   transition: width 0.3s ease;
 }
@@ -347,7 +314,7 @@ const missingModels = computed(() => {
 }
 
 .model-error {
-  color: var(--red-600);
+  color: var(--p-red-600);
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index bf3ad35dfb..1021f30e9d 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -32,10 +32,7 @@ export function showMissingModelsWarning(props: {
   const dialogStore = useDialogStore()
   dialogStore.showDialog({
     component: MissingModelsWarning,
-    props,
-    dialogComponentProps: {
-      maximizable: true
-    }
+    props
   })
 }