From 55431d1e4fa715a89112dfb81067c700d089911f Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Fri, 12 Jul 2024 17:32:51 -0400
Subject: [PATCH] Avoid conflict with N-SideBar (#122)

* Avoid conflict with N-SideBar

* nit
---
 src/components/NodePreview.vue | 60 +++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/NodePreview.vue b/src/components/NodePreview.vue
index b13b27f19..22a6850f2 100644
--- a/src/components/NodePreview.vue
+++ b/src/components/NodePreview.vue
@@ -3,42 +3,42 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 -->
 
 <template>
-  <div id="previewDiv">
-    <div class="sb_table">
+  <div class="_sb_node_preview">
+    <div class="_sb_table">
       <div class="node_header">
-        <div class="sb_dot headdot"></div>
+        <div class="_sb_dot headdot"></div>
         {{ nodeDef.display_name }}
       </div>
-      <div class="sb_preview_badge">PREVIEW</div>
+      <div class="_sb_preview_badge">PREVIEW</div>
 
       <!-- Node slot I/O -->
       <div
         v-for="[slotInput, slotOutput] in _.zip(slotInputDefs, allOutputDefs)"
-        class="sb_row slot_row"
+        class="_sb_row slot_row"
       >
-        <div class="sb_col">
-          <div v-if="slotInput" :class="['sb_dot', slotInput.type]"></div>
+        <div class="_sb_col">
+          <div v-if="slotInput" :class="['_sb_dot', slotInput.type]"></div>
         </div>
-        <div class="sb_col">{{ slotInput ? slotInput.name : "" }}</div>
-        <div class="sb_col middle-column"></div>
-        <div class="sb_col sb_inherit">
+        <div class="_sb_col">{{ slotInput ? slotInput.name : "" }}</div>
+        <div class="_sb_col middle-column"></div>
+        <div class="_sb_col _sb_inherit">
           {{ slotOutput ? slotOutput.name : "" }}
         </div>
-        <div class="sb_col">
-          <div v-if="slotOutput" :class="['sb_dot', slotOutput.type]"></div>
+        <div class="_sb_col">
+          <div v-if="slotOutput" :class="['_sb_dot', slotOutput.type]"></div>
         </div>
       </div>
 
       <!-- Node widget inputs -->
-      <div v-for="widgetInput in widgetInputDefs" class="sb_row long_field">
-        <div class="sb_col sb_arrow">&#x25C0;</div>
-        <div class="sb_col">{{ widgetInput.name }}</div>
-        <div class="sb_col middle-column"></div>
-        <div class="sb_col sb_inherit">{{ widgetInput.defaultValue }}</div>
-        <div class="sb_col sb_arrow">&#x25B6;</div>
+      <div v-for="widgetInput in widgetInputDefs" class="_sb_row _long_field">
+        <div class="_sb_col _sb_arrow">&#x25C0;</div>
+        <div class="_sb_col">{{ widgetInput.name }}</div>
+        <div class="_sb_col middle-column"></div>
+        <div class="_sb_col _sb_inherit">{{ widgetInput.defaultValue }}</div>
+        <div class="_sb_col _sb_arrow">&#x25B6;</div>
       </div>
     </div>
-    <div class="sb_description" v-if="nodeDef.description">
+    <div class="_sb_description" v-if="nodeDef.description">
       {{ nodeDef.description }}
     </div>
   </div>
@@ -119,7 +119,7 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
 }
 
 /* Original N-SideBar styles */
-.sb_dot {
+._sb_dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
@@ -177,7 +177,7 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   background-color: #a5d6a7;
 }
 
-#previewDiv {
+._sb_node_preview {
   background-color: var(--comfy-menu-bg);
   font-family: "Open Sans", sans-serif;
   font-size: small;
@@ -193,7 +193,7 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   padding-bottom: 10px;
 }
 
-#previewDiv .sb_description {
+._sb_node_preview ._sb_description {
   margin: 10px;
   padding: 6px;
   background: var(--border-color);
@@ -203,7 +203,7 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   font-size: 0.9rem;
 }
 
-.sb_table {
+._sb_table {
   display: grid;
 
   grid-column-gap: 10px;
@@ -212,7 +212,7 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   /* Imposta la larghezza della tabella al 100% del contenitore */
 }
 
-.sb_row {
+._sb_row {
   display: grid;
   grid-template-columns: 10px 1fr 1fr 1fr 10px;
   grid-column-gap: 10px;
@@ -221,11 +221,11 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   padding-right: 9px;
 }
 
-.sb_row_string {
+._sb_row_string {
   grid-template-columns: 10px 1fr 1fr 10fr 1fr;
 }
 
-.sb_col {
+._sb_col {
   border: 0px solid #000;
   display: flex;
   align-items: flex-end;
@@ -235,11 +235,11 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   justify-content: flex-end;
 }
 
-.sb_inherit {
+._sb_inherit {
   display: inherit;
 }
 
-.long_field {
+._long_field {
   background: var(--bg-color);
   border: 2px solid var(--border-color);
   margin: 5px 5px 0 5px;
@@ -247,11 +247,11 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
   line-height: 1.7;
 }
 
-.sb_arrow {
+._sb_arrow {
   color: var(--fg-color);
 }
 
-.sb_preview_badge {
+._sb_preview_badge {
   text-align: center;
   background: var(--comfy-input-bg);
   font-weight: bold;