diff --git a/resources/web/dialog/PluginsDialog/index.html b/resources/web/dialog/PluginsDialog/index.html index a63f880044..438f6eb4e9 100644 --- a/resources/web/dialog/PluginsDialog/index.html +++ b/resources/web/dialog/PluginsDialog/index.html @@ -23,45 +23,6 @@ -
- - -
@@ -84,9 +45,13 @@
Activate - Name + Name Plugin Version - Status + Source + Status
diff --git a/resources/web/dialog/PluginsDialog/index.js b/resources/web/dialog/PluginsDialog/index.js index 1a82c9774c..b2e7b235ea 100644 --- a/resources/web/dialog/PluginsDialog/index.js +++ b/resources/web/dialog/PluginsDialog/index.js @@ -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 || ""); diff --git a/resources/web/dialog/PluginsDialog/plugin-sort.css b/resources/web/dialog/PluginsDialog/plugin-sort.css index 2dc94502ba..31c5ec627c 100644 --- a/resources/web/dialog/PluginsDialog/plugin-sort.css +++ b/resources/web/dialog/PluginsDialog/plugin-sort.css @@ -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); } diff --git a/resources/web/dialog/PluginsDialog/plugin-sort.js b/resources/web/dialog/PluginsDialog/plugin-sort.js index f83ba2f767..f35968d1ec 100644 --- a/resources/web/dialog/PluginsDialog/plugin-sort.js +++ b/resources/web/dialog/PluginsDialog/plugin-sort.js @@ -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); diff --git a/resources/web/dialog/PluginsDialog/styles.css b/resources/web/dialog/PluginsDialog/styles.css index ce9d4f3a3d..ef1c3b4d92 100644 --- a/resources/web/dialog/PluginsDialog/styles.css +++ b/resources/web/dialog/PluginsDialog/styles.css @@ -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); diff --git a/src/slic3r/GUI/PluginSort.hpp b/src/slic3r/GUI/PluginSort.hpp index 5808f693b4..608c2888ef 100644 --- a/src/slic3r/GUI/PluginSort.hpp +++ b/src/slic3r/GUI/PluginSort.hpp @@ -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(lhs.source) - static_cast(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; diff --git a/src/slic3r/GUI/PluginsDialog.hpp b/src/slic3r/GUI/PluginsDialog.hpp index 4115776e71..55885262a5 100644 --- a/src/slic3r/GUI/PluginsDialog.hpp +++ b/src/slic3r/GUI/PluginsDialog.hpp @@ -210,7 +210,7 @@ private: } std::function 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 diff --git a/tests/slic3rutils/test_plugin_sort.cpp b/tests/slic3rutils/test_plugin_sort.cpp index 83889bf4f8..98ac71c656 100644 --- a/tests/slic3rutils/test_plugin_sort.cpp +++ b/tests/slic3rutils/test_plugin_sort.cpp @@ -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 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 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);