Style plugin actions and clean local artifacts
This commit is contained in:
@@ -17,6 +17,8 @@ export interface PluginToolbarDom {
|
||||
root: HTMLElement;
|
||||
}
|
||||
|
||||
const PLUGIN_ACTION_BUTTON_STYLE_ID = "sces-plugin-action-button-style";
|
||||
|
||||
export function isPluginToolbarMounted(
|
||||
root: HTMLElement,
|
||||
document: Document
|
||||
@@ -29,6 +31,8 @@ export function ensurePluginToolbar(
|
||||
document: Document,
|
||||
handlers: PluginToolbarHandlers
|
||||
): PluginToolbarDom {
|
||||
ensurePluginActionButtonTheme(document);
|
||||
|
||||
const existingRoot = document.querySelector(
|
||||
"[data-plugin-toolbar='root']"
|
||||
) as HTMLElement | null;
|
||||
@@ -430,7 +434,7 @@ function applyNativeControlStyles(
|
||||
}
|
||||
|
||||
[controls.exportButton, controls.batchSubmitButton].forEach((button) => {
|
||||
applyPrimaryButtonStyles(button, Boolean(primaryButton));
|
||||
applyPrimaryButtonStyles(button);
|
||||
button.style.whiteSpace = "nowrap";
|
||||
});
|
||||
|
||||
@@ -449,21 +453,18 @@ function applyNativeControlStyles(
|
||||
}
|
||||
|
||||
function applyPrimaryButtonStyles(
|
||||
button: HTMLButtonElement,
|
||||
isUsingNativePrimaryButtonClass: boolean
|
||||
button: HTMLButtonElement
|
||||
): void {
|
||||
if (!isUsingNativePrimaryButtonClass) {
|
||||
button.style.backgroundColor = "#fe346e";
|
||||
button.style.border = "1px solid #fe346e";
|
||||
button.style.borderRadius = "8px";
|
||||
button.style.color = "#ffffff";
|
||||
button.style.height = "32px";
|
||||
button.style.padding = "0 15px";
|
||||
} else {
|
||||
button.style.color = "#ffffff";
|
||||
}
|
||||
|
||||
button.style.backgroundColor = "#7f1d2d";
|
||||
button.style.border = "1px solid #7f1d2d";
|
||||
button.style.borderRadius = "8px";
|
||||
button.style.color = "#ffffff";
|
||||
button.style.height = "32px";
|
||||
button.style.padding = "0 15px";
|
||||
button.style.boxSizing = "border-box";
|
||||
button.style.fontWeight = "600";
|
||||
button.style.transition =
|
||||
"background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease";
|
||||
}
|
||||
|
||||
function applyStatusStyles(statusText: HTMLElement): void {
|
||||
@@ -474,6 +475,47 @@ function applyStatusStyles(statusText: HTMLElement): void {
|
||||
statusText.style.whiteSpace = "nowrap";
|
||||
}
|
||||
|
||||
function ensurePluginActionButtonTheme(document: Document): void {
|
||||
if (document.getElementById(PLUGIN_ACTION_BUTTON_STYLE_ID)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.id = PLUGIN_ACTION_BUTTON_STYLE_ID;
|
||||
style.textContent = `
|
||||
[data-plugin-export="button"]:hover:not(:disabled),
|
||||
[data-plugin-batch-submit="button"]:hover:not(:disabled) {
|
||||
background-color: #6d1627 !important;
|
||||
border-color: #6d1627 !important;
|
||||
}
|
||||
|
||||
[data-plugin-export="button"]:active:not(:disabled),
|
||||
[data-plugin-batch-submit="button"]:active:not(:disabled) {
|
||||
background-color: #58111f !important;
|
||||
border-color: #58111f !important;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
[data-plugin-export="button"]:focus-visible,
|
||||
[data-plugin-batch-submit="button"]:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 3px rgba(127, 29, 45, 0.2) !important;
|
||||
}
|
||||
|
||||
[data-plugin-export="button"]:disabled,
|
||||
[data-plugin-batch-submit="button"]:disabled {
|
||||
background-color: #c89ca4 !important;
|
||||
border-color: #c89ca4 !important;
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
cursor: not-allowed !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function normalizeText(value: string | null | undefined): string {
|
||||
return value?.replace(/\s+/g, " ").trim() ?? "";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user