intelligrow/star-chart-search-enhancer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compact spread filter toolbar layout

Browse Source
This commit is contained in:
wxs
2026-06-29 17:18:31 +08:00
parent 0122e63872
commit ccfb8f14fe
2 changed files with 82 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/content/market/plugin-toolbar.ts
+25 -12
View File
@@ -730,42 +730,53 @@ function findNativeActionButton(
function applyToolbarRootStyles(root: HTMLElement): void {
root.style.display = "inline-flex";
root.style.alignItems = "center";
root.style.columnGap = "8px";
root.style.flexWrap = "wrap";
root.style.columnGap = "10px";
root.style.flex = "1 1 auto";
root.style.minWidth = "0";
root.style.flexWrap = "nowrap";
}
function applyToolbarPanelStyles(panel: HTMLElement): void {
panel.style.display = "flex";
panel.style.flexDirection = "column";
panel.style.gap = "8px";
panel.style.alignItems = "stretch";
panel.style.gap = "6px";
panel.style.flex = "1 1 auto";
panel.style.minWidth = "0";
panel.style.padding = "4px 0";
panel.style.padding = "2px 0";
panel.style.overflowX = "visible";
panel.style.overflowY = "hidden";
}
function applyToolbarRowStyles(row: HTMLElement): void {
row.style.display = "flex";
row.style.alignItems = "center";
row.style.gap = "10px";
row.style.justifyContent = "flex-start";
row.style.gap = "6px";
row.style.minHeight = "32px";
row.style.minWidth = "0";
row.style.flexWrap = "wrap";
row.style.width = "100%";
row.style.flexWrap = "nowrap";
}
function applyToolbarGroupStyles(group: HTMLElement): void {
group.style.display = "flex";
group.style.alignItems = "center";
group.style.gap = "8px";
group.style.gap = "6px";
group.style.minWidth = "0";
group.style.flexWrap = "wrap";
group.style.flex = "0 0 auto";
group.style.flexWrap = "nowrap";
}
function createToolbarGroupTitle(document: Document, label: string): HTMLElement {
const title = document.createElement("span");
title.dataset.pluginToolbarTitle = label;
title.textContent = label;
title.style.color = "#64748b";
title.style.fontSize = "12px";
title.style.fontWeight = "700";
title.style.lineHeight = "32px";
title.style.flex = "0 0 auto";
title.style.whiteSpace = "nowrap";
return title;
}
@@ -781,7 +792,8 @@ function applyToolbarActionStyles(actions: HTMLElement): void {
actions.style.display = "flex";
actions.style.alignItems = "center";
actions.style.gap = "8px";
actions.style.paddingLeft = "12px";
actions.style.flex = "0 0 auto";
actions.style.paddingLeft = "10px";
actions.style.borderLeft = "1px solid #e5e7eb";
}
@@ -839,10 +851,11 @@ function applyNativeControlStyles(
element.style.height = "32px";
element.style.border = "1px solid #d0d7de";
element.style.borderRadius = "6px";
element.style.padding = "0 10px";
element.style.padding = "0 8px";
element.style.background = "#fff";
element.style.color = "#1f2329";
element.style.boxSizing = "border-box";
element.style.flex = "0 0 auto";
});
controls.exportRangeSelect.style.minWidth = "104px";
@@ -854,7 +867,7 @@ function applyNativeControlStyles(
controls.spreadFilterFlowTypeSelect,
controls.spreadFilterRangeSelect
].forEach((select) => {
select.style.minWidth = "92px";
select.style.minWidth = "84px";
});
Object.values(controls).forEach((element) => {
@@ -863,7 +876,7 @@ function applyNativeControlStyles(
element.dataset.pluginSpreadThreshold
) {
element.style.width =
element.dataset.pluginSpreadThreshold === "playMedian" ? "112px" : "86px";
element.dataset.pluginSpreadThreshold === "playMedian" ? "104px" : "78px";
}
});
}