bluerobotics / bluerobotics/cockpit

widget configuration suggestions

Open
#448 1 comment 0 reactions 0 assignees View on GitHub
accessibility enhancement ui
Dominant language
TypeScript
Stars
198
Forks
63
Avg merge
2d 7h
Merged PRs (30d)
57

Description

- add key-bindings for convenience
- [ ] [Inkscape's scaling shortcuts](https://inkscape.org/doc/keys.html#idm1721) would be very appreciated
- hold `CTRL` to preserve aspect ratio
- hold `SHIFT` to transform symmetrically (about the object center, instead of about the opposite point)
- hold `ALT` to scale by integer ratios (e.g. 2x, 3x, 1/2x, 1/3x, etc)
- something for "fit to contents" would be handy (e.g. so you can make a video/image widget show the full frame without padding/cropping)
- [ ] some of [Inkscape's movement shortcuts](https://inkscape.org/doc/keys.html#idm1626) would also be useful
- hold `CTRL` to restrict movement to horizontal or vertical
- hold `SHIFT` to temporarily disable snapping (once snapping is re-introduced)
- press `c` to drop a copy of the thing being moved
- these could potentially be handled via cockpit actions
- [ ] backspace/delete while a widget is selected to delete it
- [ ] `h`/`v` for vertical/horizontal flip
- useful at least for the video widget
- [ ] `ESC` to exit edit mode (when not configuring a widget)
- [ ] `e` to enter edit mode
- [x] change configuration icon from vertical dots to a cog (`mdi-settings`)
- I knew that I was looking for an icon in the top right corner, and the current one still took me multiple attempts to find, it's almost invisible and isn't obvious what it's for
- colour pickers
- [ ] widgets with a colour selector should ideally offer an on-screen colour picker as a colour selection option
- this would help people trying to copy a particular theme/setup from another software / from an image
- [ ] support [more intuitive colour pickers](https://bottosson.github.io/posts/colorpicker/#introducing-two-new-color-spaces%3A-okhsv-and-okhsl)
- standard widget selection
- [ ] highlight the selected widget in the 'current widgets' list, and allow selections to persist if you click on a widget (or click it in the current widgets list)
- #844
- [ ] ideally the widget selector should show previews of the widgets, like the mini-widget selector does, or at least some relevant icon so they're easier to tell apart without reading the names
- [x] Add ⠿symbols to the left of each widget in the "Current widgets" when hovering over the name, and a margin when not hovering
- it's currently not obvious that it's possible to reorder them by dragging, and that symbol is pretty standard (it's used by at least GitHub and Notion)
- it's probably also worth adding a ↕ symbol to the left of the "current widgets" heading, to make that extra obvious
- I think hovering over a widget name in the list should also highlight it in the interface, and clicking on the name should open the configuration options (instead of doing nothing unless you drag)
- [x] stop treating the mini-widget trash as a persistent collection
- I don't want or need to be able to re-order the mini-widgets that I've already deleted, and I can't get widgets back out of that box so it's not helpful to show them there
- [x] allow mini-widgets to be configured from edit mode
- a click is not the same as a drag, and normal widgets are configured through edit mode so it's weird that mini-widgets are only configurable when _not_ in edit mode
- if that's not possible, at least grey them out / do something to make it obvious that they're not configurable when that's the case
- [ ] improve regular vs mini-widget display switching
- having separate buttons/cards is confusing, and makes it seem like they're items that can be dragged or something
- we could have something that looks more like tabs
- e.g. a card with a background only around the currently active tab

- or a diagonal, with the inactive one darker and in the bottom left

- we could combine them to a single button that changes text depending on what's currently active
- e.g. "Configure regular widgets" ↔ "Configure mini widgets"
- other "action" buttons (e.g. for configuring individual widgets or views) seem to have much smaller corner radii, so perhaps that's styling we want to maintain as a visual aid for what is an "item" vs a "button"
- perhaps the whole bottom left corner could be turned into a big button
- [ ] improve edit mode side-bar to focus on active/useful components
- relevant discussion in #699

Contributor guide

No contributing guide indexed for this repository

Research direction

No files, tests, or entry points are named. Begin by separating the requested widget configuration, keyboard shortcut, color picker, selection, and edit-mode changes, then locate the existing widget and edit-mode UI before choosing one scoped item; done should be defined by that item's specific interaction and its related UI behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
18/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.