UI refactoring (WIP)

Comfy-Org · Sep 29, 2024 · 3af8daa · 3af8daa
1 parent 0117964
commit 3af8daa
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 185 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="font-size:0.85rem">
   <head>
     <meta charset="UTF-8">
     <title>ComfyUI</title>
@@ -9,6 +9,7 @@
   </head>
   <body class="litegraph grid">
     <div id="vue-app"></div>
+    <div id="modals"></div>
     <div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
       <main class="comfy-user-selection-inner">
         <h1>ComfyUI</h1>

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -76,38 +76,6 @@ body {
   +------------------+------------------+------------------+
 */
 
-.comfyui-body-top {
-  order: -5;
-  /* Span across all columns */
-  grid-column: 1/-1;
-  /* Position at the first row */
-  grid-row: 1;
-  /* Top menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
-.comfyui-body-left {
-  order: -4;
-  /* Position in the first column */
-  grid-column: 1;
-  /* Position below the top element */
-  grid-row: 2;
-  z-index: 10;
-  display: flex;
-}
-
-.graph-canvas-container {
-  width: 100%;
-  height: 100%;
-  order: -3;
-  grid-column: 2;
-  grid-row: 2;
-  position: relative;
-  overflow: hidden;
-}
-
 #graph-canvas {
   width: 100%;
   height: 100%;
@@ -702,7 +670,6 @@ audio.comfy-audio.empty-audio-widget {
   left: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none;
 }
 
 /* Set auto complete panel's width as it is not accessible within vue-root */

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import Panel from 'primevue/panel'
 import Divider from 'primevue/divider'
 import SplitButton from 'primevue/splitbutton'
@@ -192,10 +192,12 @@ const setInitialPosition = () => {
     y.value = screenHeight - menuHeight - 10 // 10px margin from bottom
   }
 }
-onMounted(setInitialPosition)
+
 watch(visible, (newVisible) => {
   if (newVisible) {
-    nextTick(setInitialPosition)
+    nextTick(() => {
+      setInitialPosition()
+    })
   }
 })
 
@@ -214,7 +216,14 @@ const adjustMenuPosition = () => {
   }
 }
 
-useEventListener(window, 'resize', adjustMenuPosition)
+onMounted(() => {
+  setInitialPosition()
+  window.addEventListener('resize', adjustMenuPosition)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', adjustMenuPosition)
+})
 </script>
 
 <style scoped>

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
@@ -1,21 +1,22 @@
 <template>
-  <teleport to=".graph-canvas-container">
-    <LiteGraphCanvasSplitterOverlay v-if="betaMenuEnabled">
-      <template #side-bar-panel>
-        <SideToolbar />
-      </template>
-    </LiteGraphCanvasSplitterOverlay>
+  <div
+    :class="[
+      betaMenuEnabled
+        ? 'left-12 top-10 w-[calc(100vw-3.0rem)] h-[calc(100vh-2.5rem)]'
+        : 'left-0 top-0 w-full h-full'
+    ]"
+    class="graph-canvas-container absolute overflow-hidden"
+  >
     <TitleEditor />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
-  </teleport>
+  </div>
+
   <NodeSearchboxPopover />
   <NodeTooltip />
 </template>
 
 <script setup lang="ts">
 import TitleEditor from '@/components/graph/TitleEditor.vue'
-import SideToolbar from '@/components/sidebar/SideToolbar.vue'
-import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import { ref, computed, onUnmounted, onMounted, watchEffect } from 'vue'
@@ -46,12 +47,14 @@ import { ComfyModelDef } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
 const emit = defineEmits(['ready'])
+
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const modelToNodeStore = useModelToNodeStore()
+
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -111,6 +114,7 @@ onMounted(async () => {
 
   workspaceStore.spinner = true
   await comfyApp.setup(canvasRef.value)
+
   canvasStore.canvas = comfyApp.canvas
   workspaceStore.spinner = false
 

diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
@@ -1,6 +1,9 @@
 <template>
-  <teleport :to="teleportTarget">
-    <nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
+  <div
+    class="SideToolbar side-tool-bar-container bg-zinc-950 flex-1 py-1 fixed z-[500] w-12 top-10 h-[calc(100vh-2.5rem)] flex flex-col items-center justify-between"
+    :class="isSmall ? ' small-sidebar' : ''"
+  >
+    <nav class="flex flex-col items-center space-y-1">
       <SidebarIcon
         v-for="tab in tabs"
         :key="tab.id"
@@ -11,27 +14,39 @@
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
       />
-      <div class="side-tool-bar-end">
-        <SidebarThemeToggleIcon />
-        <SidebarSettingsToggleIcon />
-      </div>
     </nav>
-  </teleport>
-  <div v-if="selectedTab" class="sidebar-content-container">
-    <component v-if="selectedTab.type === 'vue'" :is="selectedTab.component" />
-    <div
-      v-else
-      :ref="
-        (el) => {
-          if (el)
-            mountCustomTab(
-              selectedTab as CustomSidebarTabExtension,
-              el as HTMLElement
-            )
-        }
-      "
-    ></div>
+    <div class="flex-1">
+      <!-- dummy -->
+    </div>
+    <nav class="flex-1 flex flex-col items-center justify-end space-y-1">
+      <SidebarThemeToggleIcon />
+      <SidebarSettingsToggleIcon />
+    </nav>
   </div>
+
+  <teleport to="#modals">
+    <div
+      v-if="selectedTab"
+      class="duration-300 fixed z-50 left-11 top-10 w-84 h-[calc(100vh-2.5rem)]"
+    >
+      <component
+        v-if="selectedTab.type === 'vue'"
+        :is="selectedTab.component"
+      />
+      <div
+        v-else
+        :ref="
+          (el) => {
+            if (el)
+              mountCustomTab(
+                selectedTab as CustomSidebarTabExtension,
+                el as HTMLElement
+              )
+          }
+        "
+      ></div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -49,12 +64,6 @@ import {
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 
-const teleportTarget = computed(() =>
-  settingStore.get('Comfy.Sidebar.Location') === 'left'
-    ? '.comfyui-body-left'
-    : '.comfyui-body-right'
-)
-
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
@@ -81,39 +90,18 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style>
-:root {
-  --sidebar-width: 64px;
-  --sidebar-icon-size: 1.5rem;
-}
-:root .small-sidebar {
-  --sidebar-width: 40px;
-  --sidebar-icon-size: 1rem;
-}
-</style>
-
 <style scoped>
 .side-tool-bar-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  pointer-events: auto;
-
-  width: var(--sidebar-width);
-  height: 100%;
-
+  /*
   background-color: var(--comfy-menu-bg);
-  color: var(--fg-color);
-}
-
-.side-tool-bar-end {
-  align-self: flex-end;
-  margin-top: auto;
+  color: var(--comfyui-text-color);
+  */
 }
 
 .sidebar-content-container {
   height: 100%;
   overflow-y: auto;
+  background-color: var(--comfy-menu-bg);
+  color: var(--fg-color);
 }
 </style>
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
@@ -12,6 +12,7 @@
         'aria-label': props.tooltip
       }
     }"
+    class="w-10 h-10 bg-zinc-900/50"
     @click="emit('click', $event)"
     v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
   >
@@ -54,32 +55,3 @@ const overlayValue = computed(() =>
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
 </script>
-
-<style>
-.side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-}
-
-.side-bar-button-selected .side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-  font-weight: bold;
-}
-</style>
-
-<style scoped>
-.side-bar-button {
-  width: var(--sidebar-width);
-  height: var(--sidebar-width);
-  border-radius: 0;
-}
-
-.comfyui-body-left .side-bar-button.side-bar-button-selected,
-.comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
-  border-left: 4px solid var(--p-button-text-primary-color);
-}
-
-.comfyui-body-right .side-bar-button.side-bar-button-selected,
-.comfyui-body-right .side-bar-button.side-bar-button-selected:hover {
-  border-right: 4px solid var(--p-button-text-primary-color);
-}
-</style>
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -74,7 +74,7 @@
           style="width: 50px; left: 50%; transform: translateX(-50%)"
         />
       </div>
-      <div v-else>
+      <div v-else class="bg-zinc-900 h-full">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="$t('noTasksFound')"

diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="comfy-vue-side-bar-container">
-    <Toolbar class="comfy-vue-side-bar-header">
+    <Toolbar class="comfy-vue-side-bar-header h-12">
       <template #start>
         <span class="comfy-vue-side-bar-header-span">{{
           props.title.toUpperCase()
@@ -42,7 +42,6 @@ const props = defineProps({
   border-top: none;
   border-radius: 0;
   padding: 0.25rem 1rem;
-  min-height: 2.5rem;
 }
 
 .comfy-vue-side-bar-header-span {