From cfcc954ffe862ce72b3d7314872f8425a2d13aa6 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Thu, 6 Mar 2025 18:17:24 +0800
Subject: [PATCH] Add Civitai link and icon styles, enhance modal management
---
static/css/components/modal.css | 17 +++++++++++
static/js/managers/ModalManager.js | 48 ++++++++++++++++--------------
supportModal.html | 0
templates/components/modals.html | 18 +++++++++--
4 files changed, 58 insertions(+), 25 deletions(-)
create mode 100644 supportModal.html
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 979cf2cc..6d9930ef 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -1342,4 +1342,21 @@ input:checked + .toggle-slider:before {
color: var(--text-color);
}
+/* Civitai link styles */
+.civitai-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.civitai-icon {
+ width: 20px;
+ height: 20px;
+ color: #1b98e4; /* Civitai brand blue color */
+}
+
+.social-link:hover .civitai-icon {
+ color: white; /* Icon color changes to white on hover */
+}
+
/* ...existing code... */
\ No newline at end of file
diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js
index a513ef98..d92a495f 100644
--- a/static/js/managers/ModalManager.js
+++ b/static/js/managers/ModalManager.js
@@ -2,6 +2,7 @@ export class ModalManager {
constructor() {
this.modals = new Map();
this.scrollPosition = 0;
+ this.currentOpenModal = null; // Track currently open modal
}
initialize() {
@@ -73,9 +74,6 @@ export class ModalManager {
document.addEventListener('keydown', this.boundHandleEscape);
this.initialized = true;
-
- // Initialize corner controls
- this.initCornerControls();
}
registerModal(id, config) {
@@ -99,10 +97,26 @@ export class ModalManager {
return this.modals.get(id);
}
+ // Check if any modal is currently open
+ isAnyModalOpen() {
+ for (const [id, modal] of this.modals) {
+ if (modal.isOpen) {
+ return id;
+ }
+ }
+ return null;
+ }
+
showModal(id, content = null, onCloseCallback = null) {
const modal = this.getModal(id);
if (!modal) return;
+ // Close any open modal before showing the new one
+ const openModalId = this.isAnyModalOpen();
+ if (openModalId && openModalId !== id) {
+ this.closeModal(openModalId);
+ }
+
if (content) {
modal.element.innerHTML = content;
}
@@ -122,6 +136,7 @@ export class ModalManager {
}
modal.isOpen = true;
+ this.currentOpenModal = id; // Update currently open modal
document.body.style.top = `-${this.scrollPosition}px`;
document.body.classList.add('modal-open');
}
@@ -133,6 +148,11 @@ export class ModalManager {
modal.onClose();
modal.isOpen = false;
+ // Clear current open modal if this is the one being closed
+ if (this.currentOpenModal === id) {
+ this.currentOpenModal = null;
+ }
+
// Remove fixed positioning and restore scroll position
document.body.classList.remove('modal-open');
document.body.style.top = '';
@@ -147,28 +167,12 @@ export class ModalManager {
handleEscape(e) {
if (e.key === 'Escape') {
- // Close the last opened modal
- for (const [id, modal] of this.modals) {
- if (modal.isOpen) {
- this.closeModal(id);
- break;
- }
+ // Close the current open modal if it exists
+ if (this.currentOpenModal) {
+ this.closeModal(this.currentOpenModal);
}
}
}
-
- // Keep only the corner controls initialization
- initCornerControls() {
- const cornerControls = document.querySelector('.corner-controls');
- const cornerControlsToggle = document.querySelector('.corner-controls-toggle');
-
- if(cornerControls && cornerControlsToggle) {
- // Toggle corner controls visibility
- cornerControlsToggle.addEventListener('click', () => {
- cornerControls.classList.toggle('expanded');
- });
- }
- }
}
// Create and export a singleton instance
diff --git a/supportModal.html b/supportModal.html
new file mode 100644
index 00000000..e69de29b
diff --git a/templates/components/modals.html b/templates/components/modals.html
index d176b9a7..0905e2d1 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -194,9 +194,21 @@
YouTube Channel
-
-
- Discord Community
+
+
+ Civitai Profile