Implemented workspace orders, graphic groups, orders and names #863
Conversation
…s in the dashboard
…y sorting is always the same
| // Sort workspaces by order first, then alphabetically | ||
| workspaces.sort((a, b) => { | ||
| const orderA = workspaceOrders.get(a.name); | ||
| const orderB = workspaceOrders.get(b.name); | ||
|
|
||
| // Both have orders: sort by order, then alphabetically if same order | ||
| if (orderA !== undefined && orderB !== undefined) { | ||
| if (orderA !== orderB) { | ||
| return orderA - orderB; | ||
| } | ||
| // Same order: fall through to alphabetical sorting | ||
| } | ||
| // Only A has order: A comes first | ||
| else if (orderA !== undefined) { | ||
| return -1; | ||
| } | ||
| // Only B has order: B comes first | ||
| else if (orderB !== undefined) { | ||
| return 1; | ||
| } | ||
|
|
||
| // Both have same order or neither has order: sort alphabetically | ||
| return a.label.localeCompare(b.label); | ||
| }); |
There was a problem hiding this comment.
sometimes there are use cases where you want to put a certain workspace or fullbleed panel to the last. we can do that by naming it like X-Misc-DoNotTouch or something and be sorted alphabetically. I wonder if it can be more explicitly configurable with this order system. It doesn't have to be implemented in this PR but would be nice to have the design that is extendable.
There was a problem hiding this comment.
I was thinking the other day that we can use negative number to put certain panel in the back, same way how arrays are referenced with negative index in many languages (except JavaScript 😛, but now we have arr.at(-1) at least)
There was a problem hiding this comment.
this should be just a bit more logic to sort correctly
|
Would it also be possible to make a separate PR on https://github.com/nodecg/docs to write the new options? |
|
I believe I covered the new additions, feel free to double check though! |
What's Changed
New Features:
Configuration Examples
Workspace Ordering:
"dashboardPanels": [{
"name": "myPanel",
"workspace": "setup",
"workspaceOrder": 1 // Lower numbers appear first
}]
Graphics Organization:
"graphics": [{
"file": "overlay.html",
"width": 1920,
"height": 1080,
"name": "Main Overlay", // Custom display name
"description": "Primary stream overlay", // Shows in collapsible section
"group": "Stream Assets", // Groups graphics together
"order": 1 // Sort within group
}]
Behavior
Workspaces
Graphics
Screenshots
Image showing the new ordering
Image showing the new graphics options