Implement plugin sorting functionality

Add support for sorting plugins by status, name,
or source in both ascending and descending order.
This commit is contained in:
Andrew
2026-07-02 17:29:54 +08:00
parent 5d8aa9610a
commit b724cb6631
12 changed files with 696 additions and 107 deletions

View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Plugins</title>
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="./plugin-sort.css" />
<link rel="stylesheet" type="text/css" href="../../include/global.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/theme.css" />
@@ -14,6 +15,7 @@
<script type="text/javascript" src="../js/globalapi.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="./index.js"></script>
<script src="./plugin-sort.js"></script>
</head>
<body onLoad="OnInit()">
<div class="app">
@@ -21,6 +23,45 @@
<!-- <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>