juli/OrcaSlicer
1
1
Fork 0
mirror of https://github.com/OrcaSlicer/OrcaSlicer.git synced 2026-07-10 04:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move plugin sort from dropdown to clickable column headers

Browse Source 
Replace the toolbar sort dropdown with sortable Name/Source/Status column
headers that cycle ascending, descending, then clear. Add a Source column
and a PluginSortKey::None baseline for the cleared state. The whole header
cell is the click target and the sort triangle snaps in without a fade.
This commit is contained in:
Andrew
2026-07-06 14:46:31 +08:00
parent b724cb6631
commit 714fe54f77
8 changed files with 150 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
resources/web/dialog/PluginsDialog/index.html
View File

@@ -23,45 +23,6 @@
<!-- <button id="open_terminal" class="ButtonStyleRegular ButtonTypeChoice left-btn">-->
<!-- Open Terminal-->
<!-- </button>-->
<div id="sortDropdown" class="sort-dropdown">
<button id="sort_menu_btn" class="ButtonStyleRegular ButtonTypeChoice sort-menu-btn" type="button"
aria-haspopup="true" aria-expanded="false" aria-controls="sortMenu" title="Sort plugins">
<svg class="sort-order-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2.5 4.5h3.5M2.5 8h5.5M2.5 11.5h7.5" />
<path d="M12.5 11.5V4.5M10 7l2.5-2.5L15 7" />
</svg>
<span id="sort_current_label"></span>
<span class="sort-caret" aria-hidden="true"></span>
</button>
<div id="sortMenu" class="sort-menu" role="menu" hidden>
<div class="sort-group-label" id="sortByLabel">Sort by</div>
<div role="group" aria-labelledby="sortByLabel">
<button type="button" class="sort-menu-item" role="menuitemradio" data-sort-field="status">Status</button>
<button type="button" class="sort-menu-item" role="menuitemradio" data-sort-field="name">Name</button>
<button type="button" class="sort-menu-item" role="menuitemradio" data-sort-field="source">Source</button>
</div>
<div class="sort-group-label" id="sortOrderLabel">Order</div>
<div role="group" aria-labelledby="sortOrderLabel">
<button type="button" class="sort-menu-item" role="menuitemradio" data-sort-order="asc">
<svg class="sort-order-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2.5 4.5h3.5M2.5 8h5.5M2.5 11.5h7.5" />
<path d="M12.5 11.5V4.5M10 7l2.5-2.5L15 7" />
</svg>
Ascending
</button>
<button type="button" class="sort-menu-item" role="menuitemradio" data-sort-order="desc">
<svg class="sort-order-icon desc" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M2.5 4.5h3.5M2.5 8h5.5M2.5 11.5h7.5" />
<path d="M12.5 11.5V4.5M10 7l2.5-2.5L15 7" />
</svg>
Descending
</button>
</div>
</div>
</div>
<button id="refresh_btn" class="ButtonStyleRegular ButtonTypeChoice">
Refresh
</button>
@@ -84,9 +45,13 @@
<section class="pane plugin-list-pane">
<div class="hdr plugin-cols">
<span>Activate</span>
<span>Name</span>
<span class="sort-th" data-sort-field="name" role="button" tabindex="0"
title="Sort by name">Name<span class="sort-tri" aria-hidden="true"></span></span>
<span>Plugin Version</span>
<span>Status</span>
<span class="sort-th" data-sort-field="source" role="button" tabindex="0"
title="Sort by source">Source<span class="sort-tri" aria-hidden="true"></span></span>
<span class="sort-th" data-sort-field="status" role="button" tabindex="0"
title="Sort by status">Status<span class="sort-tri" aria-hidden="true"></span></span>
</div>
<div id="pluginList" class="body thin-scroll"></div>
</section>

27
resources/web/dialog/PluginsDialog/index.js
View File

@@ -118,10 +118,6 @@ function ShowExploreMenu() {
if (!exploreMenu || !exploreMenuButton)
return;
// why: our stopPropagation blocks the outside-click handler, so close the sibling sort menu ourselves (mirror of ToggleSortMenu).
if (typeof HideSortMenu === "function")
HideSortMenu();
exploreMenu.hidden = false;
exploreMenuButton.setAttribute("aria-expanded", "true");
}
@@ -220,7 +216,7 @@ function HandleStudio(value) {
SetSelectedInstallAction(payload.install_action, false);
if (typeof NormalizePluginSort === "function") {
pluginSort = NormalizePluginSort(payload.sort_key, payload.sort_order);
RenderSortMenuState();
RenderSortHeaders();
}
ApplyPlugins(payload.data || []);
} else if (payload.command === "status_message") {
@@ -337,6 +333,7 @@ function RenderPlugins() {
row.appendChild(CheckCell(row, plugin));
row.appendChild(LabelCell(plugin, isExpanded, capabilities.length));
row.appendChild(VersionCell(plugin));
row.appendChild(SourceCell(plugin));
row.appendChild(StatusCell(plugin));
block.appendChild(row);
@@ -531,11 +528,24 @@ function LabelCell(plugin, isExpanded = false, capabilityCount = 0) {
nameWrap.appendChild(countBadge);
}
labelCell.appendChild(nameWrap);
labelCell.appendChild(SourceBadge(plugin.source));
return labelCell;
}
function SourceCell(plugin) {
const cell = document.createElement("span");
const normalized = String(plugin.source || "").toLowerCase();
const variant = (normalized === "mine" || normalized === "subscribed") ? normalized : "local";
cell.className = `source-cell source-${variant}`;
const sourceLabel = document.createElement("span");
sourceLabel.className = "source-label";
sourceLabel.textContent = SourceLabel(plugin.source);
cell.appendChild(sourceLabel);
return cell;
}
function RenderCapabilityTree(plugin, capabilities) {
const tree = document.createElement("div");
tree.className = "capabilities-tree";
@@ -574,6 +584,11 @@ function RenderCapabilityRow(plugin, capability, isLast) {
typeCell.textContent = String(capability?.type || "-");
row.appendChild(typeCell);
// why: empty placeholder for the new Source column so the run-action cell stays under Status.
const sourceSpacer = document.createElement("span");
sourceSpacer.className = "capability-source-cell";
row.appendChild(sourceSpacer);
const actionsCell = document.createElement("span");
actionsCell.className = "capability-actions-cell";
const capabilityName = String(capability?.name || "");

113
resources/web/dialog/PluginsDialog/plugin-sort.css
View File

@@ -1,89 +1,42 @@
/* why: isolate dropdown styling from the existing plugin dialog styles. */
/* why: sort affordance lives on the list column headers, not a toolbar dropdown. */
.sort-dropdown {
position: relative;
display: inline-flex;
margin-right: auto;
}
.sort-menu-btn {
height: 32px !important;
display: inline-flex;
align-items: center;
gap: 6px;
/* why: global .ButtonTypeChoice adds margin-left:15px (dialog button rows); as the leftmost
toolbar item that stacks on .app's 8px padding - kill it like .explore-dropdown does. */
margin-left: 0 !important;
}
/* note: asc is bars growing downward + up arrow; a vertical flip yields the desc icon. */
.sort-order-icon {
display: block;
flex: none;
}
.sort-menu-btn.order-desc .sort-order-icon,
.sort-order-icon.desc {
transform: scaleY(-1);
}
.sort-caret {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
.sort-menu {
position: absolute;
left: 0;
top: calc(100% + 2px);
z-index: 20;
min-width: 200px;
padding: 4px 0;
background: var(--main-color);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.sort-menu[hidden] {
display: none !important;
}
.sort-group-label {
padding: 8px 10px 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.55);
}
.sort-menu-item {
.hdr .sort-th {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px 8px 28px; /* why: reserve space for the active-row checkmark. */
border: 0;
background: transparent;
color: #ffffff;
box-sizing: border-box;
text-align: left;
font: inherit;
gap: 6px;
cursor: pointer;
position: relative;
user-select: none;
}
/* note: same tint as .explore-menu-item hover/.selected, so the two menus match */
.sort-menu-item:hover,
.sort-menu-item:focus-visible,
.sort-menu-item[aria-checked="true"] {
outline: none;
background: rgba(255, 255, 255, 0.14);
.hdr .sort-th .sort-tri {
width: 0;
height: 0;
flex: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
display: none;
}
.sort-menu-item[aria-checked="true"]::before {
content: "\2713"; /* note: checkmark on the active field/order. */
position: absolute;
left: 10px;
/* faint up-triangle hint on hover, only while the column is not the active sort */
.hdr .sort-th:hover .sort-tri {
display: block;
border-bottom: 5px solid var(--muted);
}
/* active column wins over the hover hint (same specificity, declared later) */
.hdr .sort-th[data-sort="asc"] .sort-tri {
display: block;
border-bottom: 5px solid var(--text);
border-top: 0;
}
.hdr .sort-th[data-sort="desc"] .sort-tri {
display: block;
border-top: 5px solid var(--text);
border-bottom: 0;
}
.hdr .sort-th[data-sort="asc"],
.hdr .sort-th[data-sort="desc"] {
color: var(--text);
}

95
resources/web/dialog/PluginsDialog/plugin-sort.js
View File

@@ -1,6 +1,8 @@
// why: C++ owns ordering; this file only sends and reflects sort state.
const DEFAULT_PLUGIN_SORT = { key: "status", order: "asc" };
const DEFAULT_PLUGIN_SORT = { key: "none", order: "asc" };
// note: SORT_FIELDS are the clickable columns. "none" is the baseline/cleared state, not a field -
// it is special-cased in NormalizePluginSort and produced by CyclePluginSort's third click.
const SORT_FIELDS = new Set(["status", "name", "source"]);
let pluginSort = { ...DEFAULT_PLUGIN_SORT };
@@ -8,14 +10,14 @@ let pluginSort = { ...DEFAULT_PLUGIN_SORT };
function NormalizePluginSort(sortKey, sortOrder) {
const key = String(sortKey || "");
return {
key: SORT_FIELDS.has(key) ? key : DEFAULT_PLUGIN_SORT.key,
key: key === "none" ? "none" : (SORT_FIELDS.has(key) ? key : DEFAULT_PLUGIN_SORT.key),
order: sortOrder === "desc" ? "desc" : DEFAULT_PLUGIN_SORT.order,
};
}
function RequestPluginSort(sortKey, sortOrder) {
pluginSort = NormalizePluginSort(sortKey, sortOrder);
RenderSortMenuState();
RenderSortHeaders();
if (typeof SendMessage === "function")
SendMessage("set_plugin_sort", {
@@ -24,67 +26,42 @@ function RequestPluginSort(sortKey, sortOrder) {
});
}
let sortMenuEl = null;
let sortMenuButton = null;
let sortCurrentLabel = null;
function InitSortDropdown() {
sortMenuEl = document.getElementById("sortMenu");
sortMenuButton = document.getElementById("sort_menu_btn");
sortCurrentLabel = document.getElementById("sort_current_label");
if (!sortMenuButton || !sortMenuEl)
// why: one click per column cycles asc -> desc -> clear; setting any column clears the previous
// one for free because C++ (and pluginSort) only ever hold a single key.
function CyclePluginSort(field) {
if (!SORT_FIELDS.has(field))
return;
sortMenuButton.addEventListener("click", ToggleSortMenu);
sortMenuEl.addEventListener("click", OnSortMenuClick);
RenderSortMenuState();
if (pluginSort.key !== field)
RequestPluginSort(field, "asc");
else if (pluginSort.order === "asc")
RequestPluginSort(field, "desc");
else
RequestPluginSort("none", "asc"); // third click: back to baseline
}
function ToggleSortMenu(event) {
event.preventDefault();
event.stopPropagation();
if (!sortMenuEl)
return;
const willShow = sortMenuEl.hidden;
// why: our stopPropagation blocks index.js's outside-click handler, so close the sibling explore menu ourselves.
if (willShow && typeof HideExploreMenu === "function")
HideExploreMenu();
sortMenuEl.hidden = !willShow;
sortMenuButton.setAttribute("aria-expanded", willShow ? "true" : "false");
// why: paints the sort indicator for headers
// e.g., when user clicks triangle to change sort order, or change to sort by a new different field
function RenderSortHeaders() {
document.querySelectorAll(".hdr .sort-th").forEach((th) => {
// "" | "asc" | "desc" - renders the triangle via plugin-sort.css [data-sort=...].
th.dataset.sort = th.dataset.sortField === pluginSort.key ? pluginSort.order : "";
});
}
function HideSortMenu() {
if (!sortMenuEl || sortMenuEl.hidden)
return;
sortMenuEl.hidden = true;
sortMenuButton.setAttribute("aria-expanded", "false");
}
function OnSortMenuClick(event) {
const item = event.target.closest("[data-sort-field],[data-sort-order]");
if (!item)
return;
event.preventDefault();
const sortKey = item.dataset.sortField || pluginSort.key;
const sortOrder = item.dataset.sortOrder || pluginSort.order;
// why: leave the menu open so the user can set field then order in one visit; outside-click/Escape close it.
RequestPluginSort(sortKey, sortOrder);
}
function RenderSortMenuState() {
const field = sortMenuEl?.querySelector(`[data-sort-field="${pluginSort.key}"]`);
if (sortCurrentLabel)
sortCurrentLabel.textContent = field?.textContent.trim() || "Status";
sortMenuButton?.classList.toggle("order-desc", pluginSort.order === "desc");
sortMenuEl?.querySelectorAll("[data-sort-field]").forEach((el) =>
el.setAttribute("aria-checked", el.dataset.sortField === pluginSort.key ? "true" : "false"));
sortMenuEl?.querySelectorAll("[data-sort-order]").forEach((el) =>
el.setAttribute("aria-checked", el.dataset.sortOrder === pluginSort.order ? "true" : "false"));
function InitSortHeaders() {
document.querySelectorAll(".hdr .sort-th").forEach((th) => {
th.addEventListener("click", () => CyclePluginSort(th.dataset.sortField));
// note: role="button" cells need Enter/Space to match the old dropdown's keyboard access.
th.addEventListener("keydown", (event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
CyclePluginSort(th.dataset.sortField);
}
});
});
RenderSortHeaders(); // paint the initial state (baseline = no triangle)
}
// why: guarded so the module can be loaded in headless syntax checks.
// note: owns its own lifecycle + outside-click/Escape, so index.js's OnInit needs no edit.
if (typeof document !== "undefined") {
document.addEventListener("DOMContentLoaded", InitSortDropdown);
document.addEventListener("click", (event) => { if (!event.target.closest(".sort-dropdown")) HideSortMenu(); });
document.addEventListener("keydown", (event) => { if (event.key === "Escape") HideSortMenu(); });
}
if (typeof document !== "undefined")
document.addEventListener("DOMContentLoaded", InitSortHeaders);

27
resources/web/dialog/PluginsDialog/styles.css
View File

@@ -187,7 +187,27 @@ body {
}
.plugin-cols {
grid-template-columns: 70px minmax(0, 2.8fr) minmax(120px, 0.9fr) minmax(140px, 1fr);
grid-template-columns: 70px minmax(0, 2.4fr) minmax(110px, 0.85fr) minmax(96px, 0.7fr) minmax(130px, 0.95fr);
}
/* Source is its own (sortable) column, shown as colored text (mirrors .status-cell), not a chip. */
.source-cell {
display: flex;
align-items: center;
}
.source-cell.source-mine {
color: var(--plugin-source-mine-text);
font-weight: 600;
}
.source-cell.source-subscribed {
color: var(--plugin-source-subscribed-text);
font-weight: 600;
}
.source-cell.source-local {
color: var(--plugin-source-neutral-text);
}
/* Center the "Activate" header over the centered checkbox in each row. */
@@ -835,11 +855,6 @@ body {
white-space: nowrap;
}
/* In a list row, sit at the right edge of the Name column (the name fills the rest). */
.label-cell .plugin-source-badge {
margin-right: 4px;
}
.plugin-source-badge.source-local {
background: var(--plugin-source-neutral-bg);
color: var(--plugin-source-neutral-text);

12
src/slic3r/GUI/PluginSort.hpp
View File

@@ -15,7 +15,10 @@ namespace Slic3r::GUI
{
Status,
Name,
Source
Source,
// why: neutral "no column selected" state - clearing a header sort returns here and the
// list falls to compare_plugin_base_order only. Header UI reaches it via the asc/desc/clear cycle.
None
};
enum class PluginSortOrder
@@ -31,6 +34,7 @@ namespace Slic3r::GUI
case PluginSortKey::Status: return "status";
case PluginSortKey::Name: return "name";
case PluginSortKey::Source: return "source";
case PluginSortKey::None: return "none";
}
return "status";
@@ -49,6 +53,8 @@ namespace Slic3r::GUI
return PluginSortKey::Name;
if (sort_key == "source")
return PluginSortKey::Source;
if (sort_key == "none")
return PluginSortKey::None;
return fallback;
}
@@ -151,6 +157,10 @@ namespace Slic3r::GUI
return compare_ascii_case_insensitive_natural(lhs.display_name, rhs.display_name);
case PluginSortKey::Source:
return static_cast<int>(lhs.source) - static_cast<int>(rhs.source);
case PluginSortKey::None:
// why: no primary key - every pair ties here so sort_plugin_items_for_dialog falls
// straight to the ascending base order (direction is irrelevant for the baseline).
return 0;
}
return 0;

2
src/slic3r/GUI/PluginsDialog.hpp
View File

@@ -210,7 +210,7 @@ private:
}
std::function<void()> m_open_terminal_dlg_fn;
PluginSortKey m_plugin_sort_key = PluginSortKey::Status;
PluginSortKey m_plugin_sort_key = PluginSortKey::None;
PluginSortOrder m_plugin_sort_order = PluginSortOrder::Asc;
// Serializes run_script_plugin. With main-thread execution a plugin's orca.host.ui modal

21
tests/slic3rutils/test_plugin_sort.cpp
View File

@@ -136,9 +136,30 @@ TEST_CASE("natural compare handles digits, case, prefixes and leading zeros", "[
CHECK(compare_ascii_case_insensitive_natural("", "a") < 0);
}
TEST_CASE("plugin dialog None sort key falls to ascending base order in both directions", "[plugin][sort]")
{
std::vector<SortFixtureItem> items = {
{"local_z", PluginSource::Local, PluginStatus::Activated, "script", "Zeta"},
{"mine_a", PluginSource::Mine, PluginStatus::Inactive, "script", "Alpha"},
{"sub_m", PluginSource::Subscribed, PluginStatus::Error, "script", "Mu"},
};
// why: base order is source priority (Mine, Subscribed, Local) then name - and it ignores the
// requested status/order entirely, so the neutral baseline is deterministic.
const std::vector<std::string> base_expected = {"mine_a", "sub_m", "local_z"};
sort_plugin_items_for_dialog(items, PluginSortKey::None, PluginSortOrder::Asc);
CHECK(keys(items) == base_expected);
// why: None has no direction - Desc must not reverse the baseline.
sort_plugin_items_for_dialog(items, PluginSortKey::None, PluginSortOrder::Desc);
CHECK(keys(items) == base_expected);
}
TEST_CASE("plugin dialog sort request parsing keeps previous state on invalid values", "[plugin][sort]")
{
CHECK(plugin_sort_key_from_string("source", PluginSortKey::Status) == PluginSortKey::Source);
CHECK(plugin_sort_key_from_string("none", PluginSortKey::Status) == PluginSortKey::None);
CHECK(plugin_sort_key_from_string("missing", PluginSortKey::Name) == PluginSortKey::Name);
CHECK(plugin_sort_order_from_string("desc", PluginSortOrder::Asc) == PluginSortOrder::Desc);