Repository navigation
Allow drag-and-drop reordering of dashboard widgets - #270
Open
moderathor12 wants to merge 3 commits into
Open
moderathor12 wants to merge 3 commits into
moderathor12 wants to merge 3 commits into
Conversation
|
inkly
added a commit
to ReCasaOS/CasaOS-UI
that referenced
this pull request
Sep 15, 2026
…as shell Each widget in Widgets Settings has a handle to drag, or to focus and move with the arrow keys. The sidebar rebuilt the saved list in the order the dashboard ships its widgets and wrote that back over it, so an order could not have survived a reload; combineWidgetSettings keeps the saved order and appends a widget a newer version adds. From IceWhaleTech/CasaOS-UI#270, which as submitted lost the order on the next load. A .env file opens as shell in the file editor rather than JavaScript (IceWhaleTech/CasaOS-UI#269; its hidden-files half was already here). The resize listener of the settings panel is removed on unmount, not added twice.
|
Nice one, this is something people ask for. When I took it into ReCasaOS I noticed the order does not survive a reload as it stands: on load, diffAndCombineData in SideBar.vue rebuilds the list in the order the widgets ship in, keeps only |
ppenguin
pushed a commit
to ppenguin/CasaOS-UI-RCOS
that referenced
this pull request
Nov 12, 2026
…he keyboard move Widgets Settings gets a "Reset to the default order" link: the widgets go back to the order the dashboard ships them, each keeping whether it is hidden. It is disabled while the order already is the shipped one. The shipped-widgets list moves out of Settings.vue into shippedWidgets.js so a component spec can replace webpack's require.context. New specs cover the arrow key move (down, up, ends, focus following the widget), the reset button, and resetWidgetOrder with a name the dashboard no longer ships. The drag handles and the arrow keys this completes come from IceWhaleTech/CasaOS-UI#270 by moderathor12 (Apache-2.0).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this does
Adds drag-and-drop reordering to the Widgets Settings panel, so users can customize the order of widgets (System status, Storage, etc.) on their dashboard.
How it works
<draggable>fromvuedraggable, which is already a project dependency (used in AppSection.vue for app icon reordering — this follows the same pattern).handleInput()method fires, which already persists the new order throughSideBar.vue'ssaveData()— no backend or storage schema changes needed, since widget order was already driven by the array order inwidgets_config.Related discussions
This addresses long-standing community requests for customizable dashboard widgets:
Testing
Tested locally against a live CasaOS instance — widgets can be reordered via the Widgets Settings dropdown, and the new order is reflected immediately on the dashboard and persists after refresh.