Merge pull request #22 from EtSL33py/sidebar

Add default manager position in settings menu

__init__.py

@@ -200,6 +200,7 @@ def ui_rules():
         Rule("sidebar-control-always-compact", False, bool),
         Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
         Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
+        Rule("sidebar-default-state", "None", str),
         Rule("text-input-always-hide-search-button", False, bool),
         Rule("text-input-always-hide-clear-button", False, bool),
         

web/model-manager.css

@@ -10,7 +10,7 @@
     position: fixed;
     overflow: hidden;
     width: 100%;
-    z-index: 2000;
+    z-index: 1100;
     
     /*override comfy-modal settings*/
     border-radius: 0;
@@ -87,6 +87,7 @@
     overflow: hidden;
     color: var(--input-text);
     display: flex;
+    gap: 2px;
     flex-direction: row-reverse;
     flex-wrap: wrap;
 }
@@ -148,7 +149,7 @@
     width: 100%;
 }
 
-.model-manager button {
+.model-manager button, .model-manager .model-manager-head .topbar-right select {
     margin: 0;
 	border: 2px solid var(--border-color);
 }
@@ -168,6 +169,11 @@
     cursor: not-allowed;
 }
 
+.model-manager select:hover{
+    filter: brightness(1.2);
+    cursor: pointer;
+}
+
 .model-manager button.block {
     width: 100%;
 }
@@ -248,7 +254,7 @@
 .model-manager .model-tab-group {
     display: flex;
     gap: 4px;
-    height: 40px;
+    height: 44px;
 }
 
 .model-manager .model-tab-group .tab-button {
@@ -264,6 +270,7 @@
 
 .model-manager .model-tab-group .tab-button.active {
     background-color: var(--bg-color);
+    margin-bottom: -2px;
     cursor: default;
     position: relative;
     z-index: 1;
@@ -451,7 +458,7 @@
 }
 
 .model-manager .comfy-grid .model-label {
-	background-color: rgb(from var(--content-hover-bg) r g b / 0.5);
+	background-color: rgb(from var(--content-hover-bg) r g b / 0.6);
 	width: 100%;
 	height: 2.2rem;
 	position: absolute;
@@ -589,7 +596,8 @@
     position: relative;
     top: 0;
     bottom: 0;
-    font-size: 24px;
+    font-size: 20px;
+    text-align-last: center;
     -o-appearance: none;
     -ms-appearance: none;
     -webkit-appearance: none;
@@ -690,7 +698,7 @@
 
 .model-manager .model-manager-settings input[type="number"],
 .model-manager .tag-generator-settings input[type="number"]{
-    width: 50px;
+    width: 60px;
 }
 
 .model-manager .search-settings-text {

web/model-manager.js

@@ -2095,10 +2095,7 @@ class ModelGrid {
           systemSeparator,
         );
         let actionButtons = [];
-        if (
-          showAddButton &&
-          !(modelType === 'embeddings' && !navigator.clipboard)
-        ) {
+        if (showCopyButton) {
           actionButtons.push(
             new ComfyButton({
               icon: 'content-copy',
@@ -2114,7 +2111,7 @@ class ModelGrid {
             }).element,
           );
         }
-        if (showCopyButton) {
+        if (showAddButton && !(modelType === 'embeddings' && !navigator.clipboard)) {
           actionButtons.push(
             new ComfyButton({
               icon: 'plus-box-outline',
@@ -4394,6 +4391,9 @@ class SettingsView {
   /** @return {() => Promise<void>} */
   #updateModels = () => {};
 
+  /** @return {() => void} */
+  #updateSidebarSettings = () => {};
+
   /**
    * @param {Object} settingsData
    * @param {boolean} updateModels
@@ -4427,6 +4427,8 @@ class SettingsView {
       }
     }
 
+    this.#updateSidebarSettings(settings);
+
     if (updateModels) {
       await this.#updateModels(); // Is this slow?
     }
@@ -4491,9 +4493,11 @@ class SettingsView {
   /**
    * @param {() => Promise<void>} updateModels
    * @param {() => void} updateSidebarButtons
+   * @param {(settings: Object) => void} updateSidebarSettings
    */
-  constructor(updateModels, updateSidebarButtons) {
+  constructor(updateModels, updateSidebarButtons, updateSidebarSettings) {
     this.#updateModels = updateModels;
+    this.#updateSidebarSettings = updateSidebarSettings;
     const settings = this.elements.settings;
 
     const sidebarControl = $checkbox({
@@ -4569,6 +4573,7 @@ class SettingsView {
           {
             style: { color: 'var(--fg-color)' },
             href: 'https://github.com/hayden-fr/ComfyUI-Model-Manager/issues/',
+            target: '_blank',
           },
           ['File bugs and issues here.'],
         ),
@@ -4604,6 +4609,11 @@ class SettingsView {
             'vae_approx',
           ],
         }),
+        $select({
+          $: (el) => (settings['sidebar-default-state'] = el),
+          textContent: 'Default model manager position (on start up)',
+          options: ['Left', 'Right', 'Top', 'Bottom', 'None'],
+        }),	  
         $checkbox({
           $: (el) => (settings['model-real-time-search'] = el),
           textContent: 'Real-time search',
@@ -4833,6 +4843,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) {
     'select',
     {
       name: 'sidebar-select',
+      classList: 'icon-button',
       onchange: (event) => {
         const select = event.target;
         const children = select.children;
@@ -4911,9 +4922,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) {
     );
   }
   radioButtonGroup.append.apply(radioButtonGroup, buttons);
-  buttons[0].click();
   buttons[0].style.display = 'none';
-
   return [radioButtonGroup, select];
 }
 
@@ -4970,6 +4979,7 @@ class ModelManager extends ComfyDialog {
 
     this.#settingsView = new SettingsView(this.#refreshModels, () =>
       this.#updateSidebarButtons(),
+      this.#updateSidebarSettings,
     );
 
     this.#modelInfo = new ModelInfo(
@@ -5019,11 +5029,7 @@ class ModelManager extends ComfyDialog {
         ['◼', '◨', '⬒', '⬓', '◧'],
         [
           () => {
-            const element = this.element;
-            if (element) {
-              // callback on initialization as default state
-              element.dataset['sidebarState'] = 'none';
-            }
+            this.element.dataset['sidebarState'] = 'none';
           },
           () => {
             this.element.dataset['sidebarState'] = 'right';
@@ -5354,16 +5360,19 @@ class ModelManager extends ComfyDialog {
     const settings = this.#settingsView.elements.settings;
 
     {
-      // initialize buttons' visibility state
-      const hideSearchButtons =
-        settings['text-input-always-hide-search-button'].checked;
-      const hideClearSearchButtons =
-        settings['text-input-always-hide-clear-button'].checked;
-      this.#downloadView.elements.searchButton.style.display = hideSearchButtons
-        ? 'none'
-        : '';
-      this.#downloadView.elements.clearSearchButton.style.display =
-        hideClearSearchButtons ? 'none' : '';
+      // set initial sidebar state
+      const newSidebarState = settings['sidebar-default-state'].value;
+      let buttonNumb = 0;
+      if (newSidebarState === 'Right') {
+        buttonNumb = 1;
+      } else if (newSidebarState === 'Top') {
+        buttonNumb = 2;
+      } else if (newSidebarState === 'Bottom') {
+        buttonNumb = 3;
+      } else if (newSidebarState === 'Left') {
+        buttonNumb = 4;
+      }
+      this.#sidebarButtonGroup.children[buttonNumb].click();
     }
 
     {
@@ -5408,6 +5417,21 @@ class ModelManager extends ComfyDialog {
     }
   }
 
+  #updateSidebarSettings = (settings) => {
+    {
+      // update buttons' visibility state
+      const hideSearchButtons =
+        settings['text-input-always-hide-search-button'].checked;
+      const hideClearSearchButtons =
+        settings['text-input-always-hide-clear-button'].checked;
+      this.#downloadView.elements.searchButton.style.display = hideSearchButtons
+        ? 'none'
+        : '';
+      this.#downloadView.elements.clearSearchButton.style.display =
+        hideClearSearchButtons ? 'none' : '';
+    }
+  }
+
   #resetManagerContentsScroll = () => {
     this.#tabManagerContents.scrollTop = 0;
   };