style: match market actions to native primary buttons
This commit is contained in:
parent
bee8cb0207
commit
fb45f0cea8
@ -416,7 +416,11 @@ function applyNativeControlStyles(
|
||||
exportRangeSelect: HTMLSelectElement;
|
||||
}
|
||||
): void {
|
||||
const primaryButton =
|
||||
findButtonContainingText(document, "发布任务") ??
|
||||
findButtonContainingText(document, "+发布任务");
|
||||
const nativeButton =
|
||||
primaryButton ??
|
||||
findNativeActionButton(document, "自定义指标") ??
|
||||
findNativeActionButton(document, "导出");
|
||||
|
||||
@ -426,6 +430,7 @@ function applyNativeControlStyles(
|
||||
}
|
||||
|
||||
[controls.exportButton, controls.batchSubmitButton].forEach((button) => {
|
||||
applyPrimaryButtonStyles(button, Boolean(primaryButton));
|
||||
button.style.whiteSpace = "nowrap";
|
||||
});
|
||||
|
||||
@ -443,6 +448,24 @@ function applyNativeControlStyles(
|
||||
controls.exportCustomPagesInput.style.width = "72px";
|
||||
}
|
||||
|
||||
function applyPrimaryButtonStyles(
|
||||
button: HTMLButtonElement,
|
||||
isUsingNativePrimaryButtonClass: boolean
|
||||
): 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.boxSizing = "border-box";
|
||||
}
|
||||
|
||||
function applyStatusStyles(statusText: HTMLElement): void {
|
||||
statusText.style.color = "#64748b";
|
||||
statusText.style.fontSize = "12px";
|
||||
@ -455,6 +478,23 @@ function normalizeText(value: string | null | undefined): string {
|
||||
return value?.replace(/\s+/g, " ").trim() ?? "";
|
||||
}
|
||||
|
||||
function findButtonContainingText(
|
||||
root: ParentNode,
|
||||
text: string
|
||||
): HTMLElement | null {
|
||||
const document = root instanceof Document ? root : root.ownerDocument;
|
||||
if (!document) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const candidates = Array.from(root.querySelectorAll("button")).filter(
|
||||
(element): element is HTMLElement =>
|
||||
element instanceof document.defaultView!.HTMLElement
|
||||
);
|
||||
|
||||
return candidates.find((element) => normalizeText(element.textContent).includes(text)) ?? null;
|
||||
}
|
||||
|
||||
function findDirectChildAnchor(
|
||||
ancestor: HTMLElement,
|
||||
descendant: HTMLElement
|
||||
|
||||
@ -245,6 +245,17 @@ describe("market-content-entry", () => {
|
||||
expect(document.querySelector('[data-plugin-export="button"]')).not.toBeNull();
|
||||
expect(document.querySelector('[data-plugin-batch-submit="button"]')).not.toBeNull();
|
||||
expect(document.querySelector('[data-plugin-export-status="text"]')).not.toBeNull();
|
||||
|
||||
const exportButton = document.querySelector(
|
||||
'[data-plugin-export="button"]'
|
||||
) as HTMLButtonElement | null;
|
||||
const batchSubmitButton = document.querySelector(
|
||||
'[data-plugin-batch-submit="button"]'
|
||||
) as HTMLButtonElement | null;
|
||||
expect(exportButton?.style.backgroundColor).toBe("rgb(254, 52, 110)");
|
||||
expect(batchSubmitButton?.style.backgroundColor).toBe("rgb(254, 52, 110)");
|
||||
expect(exportButton?.style.color).toBe("rgb(255, 255, 255)");
|
||||
expect(batchSubmitButton?.style.color).toBe("rgb(255, 255, 255)");
|
||||
});
|
||||
|
||||
test("remounts the plugin action bar when the native market action row appears later", async () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user