diff --git a/pages/checkpoints.html b/pages/checkpoints.html new file mode 100644 index 00000000..4a8ec53e --- /dev/null +++ b/pages/checkpoints.html @@ -0,0 +1,11 @@ + + + + + + + + {% include 'components/header.html' %} + + + \ No newline at end of file diff --git a/pages/loras.html b/pages/loras.html new file mode 100644 index 00000000..55da26e9 --- /dev/null +++ b/pages/loras.html @@ -0,0 +1,10 @@ + + + + + + + {% include 'components/header.html' %} + + + diff --git a/pages/recipes.html b/pages/recipes.html new file mode 100644 index 00000000..55da26e9 --- /dev/null +++ b/pages/recipes.html @@ -0,0 +1,10 @@ + + + + + + + {% include 'components/header.html' %} + + + diff --git a/static/css/components/header.css b/static/css/components/header.css new file mode 100644 index 00000000..9cb4e51e --- /dev/null +++ b/static/css/components/header.css @@ -0,0 +1,63 @@ +.app-header { + background: var(--card-bg); + border-bottom: 1px solid var(--border-color); + position: sticky; + top: 0; + z-index: var(--z-header); + height: 60px; + width: 100%; +} + +.header-container { + max-width: 1400px; + margin: 0 auto; + padding: 0 15px; + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} + +.main-nav { + display: flex; + gap: 1rem; +} + +.nav-item { + padding: 0.5rem 1rem; + border-radius: var(--border-radius-base); + color: var(--text-color); + text-decoration: none; + display: flex; + align-items: center; + gap: 0.5rem; + transition: all 0.2s ease; +} + +.nav-item:hover { + background: var(--lora-surface-hover); +} + +.nav-item.active { + background: var(--lora-primary); + color: var(--lora-text-on-primary); +} + +/* Mobile adjustments */ +@media (max-width: 768px) { + .header-container { + flex-direction: column; + padding-top: 0.5rem; + height: auto; + } + + .app-header { + height: auto; + } + + .main-nav { + width: 100%; + justify-content: center; + margin-top: 0.5rem; + } +} diff --git a/static/css/style.css b/static/css/style.css index fd27e5ba..6bf0f64f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5,6 +5,7 @@ @import 'layout.css'; /* Import Components */ +@import 'components/header.css'; @import 'components/card.css'; @import 'components/modal.css'; @import 'components/download-modal.css'; diff --git a/static/js/common.js b/static/js/common.js new file mode 100644 index 00000000..f0202b73 --- /dev/null +++ b/static/js/common.js @@ -0,0 +1,16 @@ +import { toggleTheme, initTheme } from './utils/uiHelpers.js'; +import { modalManager } from './managers/ModalManager.js'; +import { updateService } from './managers/UpdateService.js'; +import { SettingsManager } from './managers/SettingsManager.js'; + +// Export common functions +export function initializeCommonComponents() { + modalManager.initialize(); + updateService.initialize(); + initTheme(); + + // Initialize common controls + window.toggleTheme = toggleTheme; + window.modalManager = modalManager; + window.settingsManager = new SettingsManager(); +} diff --git a/static/js/recipes.js b/static/js/recipes.js index 11a0badc..d1c15391 100644 --- a/static/js/recipes.js +++ b/static/js/recipes.js @@ -1,6 +1,7 @@ // Recipe manager module import { showToast } from './utils/uiHelpers.js'; import { state } from './state/index.js'; +import { initializeCommonComponents } from './common.js'; class RecipeManager { constructor() { @@ -199,10 +200,11 @@ class RecipeManager { // - Recipe search and filters } -// Initialize recipe manager when DOM is loaded +// Initialize components document.addEventListener('DOMContentLoaded', () => { + initializeCommonComponents(); window.recipeManager = new RecipeManager(); }); // Export for use in other modules -export { RecipeManager }; \ No newline at end of file +export { RecipeManager }; \ No newline at end of file diff --git a/templates/components/corner_controls.html b/templates/components/corner_controls.html new file mode 100644 index 00000000..c6be6a1c --- /dev/null +++ b/templates/components/corner_controls.html @@ -0,0 +1,22 @@ +
+
+ + +
+
+
+ Theme + Theme +
+
+ + +
+
+ +
+
+ +
+
+
diff --git a/templates/components/header.html b/templates/components/header.html new file mode 100644 index 00000000..81d4cef2 --- /dev/null +++ b/templates/components/header.html @@ -0,0 +1,21 @@ +
+
+
+

ComfyUI Manager

+
+ +
+ +
+
+
diff --git a/templates/components/search_controls.html b/templates/components/search_controls.html new file mode 100644 index 00000000..9ef97ecc --- /dev/null +++ b/templates/components/search_controls.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/templates/loras.html b/templates/loras.html index 97edfeca..e0334c79 100644 --- a/templates/loras.html +++ b/templates/loras.html @@ -46,6 +46,7 @@ + {% include 'components/header.html' %}
diff --git a/templates/recipes.html b/templates/recipes.html index be6a7959..003c4bf0 100644 --- a/templates/recipes.html +++ b/templates/recipes.html @@ -119,29 +119,11 @@ -
-
- - -
-
-
- Theme - Theme -
-
- - -
-
- -
-
- -
-
-
+ {% include 'components/header.html' %} + + {% include 'components/corner_controls.html' %} + {% include 'components/modals.html' %} {% include 'components/loading.html' %} {% include 'components/context_menu.html' %} @@ -163,8 +145,9 @@
- +
+
{% if recipe_tags %} @@ -180,56 +163,12 @@
-
-
- -
-
- -
-
- - - -
-
+ + {% include 'components/search_controls.html' %}
- - - - -
+ +
{% if recipes and recipes|length > 0 %} {% for recipe in recipes %}
@@ -370,4 +309,4 @@ }; - \ No newline at end of file + \ No newline at end of file