Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-01 05:49:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid conflict with N-SideBar (#122)

Browse Source 
* Avoid conflict with N-SideBar

* nit
This commit is contained in:
Chenlei Hu
2024-07-12 17:32:51 -04:00
committed by GitHub
parent dc22765c8f
commit 55431d1e4f
1 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/NodePreview.vue
View File

@@ -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;