feat(ui): refine save button style and add ESC key listener to close manager

Motivation:
The save button's style was originally an overly bright gradient, making it feel out of place compared to the frosted glass aesthetics. Additionally, the user requested the ability to close the modal using the Escape key.

Implementation:
1. Updated '.llm-pm-actions-right button:last-child' CSS to use a restrained translucent background similar to the sidebar items, keeping it cohesive with the glassmorphism design.
2. Added a global 'keydown' listener on 'Escape' inside 'ProviderManager.show()' which correctly triggers 'closeModal()' (also checking for unsaved changes) and automatically removes itself when closed.
This commit is contained in:
科林_Cyril Pilgrim
2026-03-05 09:34:16 +08:00
parent 6f597d75f1
commit f6d72ef002
2 changed files with 34 additions and 16 deletions
+7 -6
View File
@@ -458,16 +458,17 @@
box-shadow: 0 0 16px var(--glass-accent-glow);
}
/* Primary save button (last child) */
.llm-pm-actions-right button:last-child {
background: linear-gradient(135deg, var(--glass-accent), #8b5cf6) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 14px var(--glass-accent-glow);
background: rgba(255, 255, 255, 0.08) !important;
color: var(--glass-text-primary) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.llm-pm-actions-right button:last-child:hover {
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
+27 -10
View File
@@ -412,20 +412,37 @@ class ProviderManager {
this.contentContainer = $el("div.llm-pm-content");
this.sidebarListContainer = $el("div.llm-pm-list");
const closeModal = () => {
this.checkUnsaved(() => {
this.modal.style.display = "none";
this.currentDraft = null;
if (this._escListener) {
window.removeEventListener("keydown", this._escListener);
this._escListener = null;
}
// Trigger full redraw of graph to apply changes
if (app.graph) {
app.graph.setDirtyCanvas(true);
}
});
};
const closeBtn = $el("span.llm-pm-close", {
innerHTML: "×",
onclick: () => {
this.checkUnsaved(() => {
this.modal.style.display = "none";
this.currentDraft = null;
// Trigger full redraw of graph to apply changes
if (app.graph) {
app.graph.setDirtyCanvas(true);
}
});
}
onclick: closeModal
});
// Add ESC listener
this._escListener = (e) => {
if (e.key === "Escape" && this.modal && this.modal.style.display !== "none") {
// Ignore if there is another dialog overlay active (like unsaved changes prompt)
if (!document.querySelector(".llm-pm-prompt-overlay")) {
closeModal();
}
}
};
window.addEventListener("keydown", this._escListener);
const searchInput = $el("input", {
type: "text",
placeholder: t("search_placeholder"),