Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: number input #7143

Merged
merged 4 commits into from
May 10, 2024
Merged

chore: number input #7143

merged 4 commits into from
May 10, 2024

Conversation

deboer-tim
Copy link
Collaborator

What does this PR do?

The current number editor in Settings > Preferences works, but it has a few drawbacks:

  • doesn't match current design, and would need updating to light mode.
  • periodically has some odd 'resets' to a previous number. (this isn't just the input - figured out later and opened Unable to change configuration (phantom resets) #7142)
  • has two error modes - underline for below minimum, icon to the left for invalid value.
  • after invalid entry (e.g. below minimum), incrementing does a string add vs numerical.
  • not easily reusable for editing numbers in other places.

This PR creates a NumberInput component that is just an Input with +/- buttons. Key input is restricted to numbers, and increment/decrement are used to disable +/- appropriately. If the user manually enters a number out of bounds, the Input's error is used to display a short warning.

Input required some minor changes to support this:

  • allow inputClass in order to center numbers in the textbox.
  • passthrough of key events, in order to block non-numerical entry.
  • boolean to block showing the error in a separate span. Although this is the design for inputs, it felt really out of place in preferences.
  • reduce padding slightly - it didn't matter in large Inputs, but number inputs tend to be smaller and extraneous padding was obvious.

New component is used in Settings > Preferences and max retry count for running an image.

Screenshot / video of UI

Before:

Screen.Recording.2024-05-08.at.2.33.43.PM.mov

After:

Screen.Recording.2024-05-08.at.4.57.59.PM.mov

What issues does this PR fix or reference?

Another part of #3234.

How to test this PR?

Tests added. NumberItem test had to be changed since only numerical inputs work now.

Try changing some preferences. Be aware of #7142 (separate issue) if the value resets.

  • Tests are covering the bug fix or the new feature

@deboer-tim deboer-tim requested review from benoitf and a team as code owners May 8, 2024 21:01
@deboer-tim deboer-tim requested review from cdrage and lstocchi and removed request for a team May 8, 2024 21:01
The current number editor in Settings > Preferences works, but it has a
few drawbacks:
 - doesn't match current design, and would need updating to light mode.
 - periodically has some odd 'resets' to a previous number. (this isn't
   just the input - figured out later this is #7142)
 - has two error modes - underline for below minimum, icon to the left
   for invalid value.
 - after invalid entry (e.g. below minimum), incrementing does a string
   add vs numerical.
 - not easily reusable for editing numbers in other places.

This creates a NumberInput component that is just an Input with +/- buttons.
Key input is restricted to numbers, and increment/decrement are used to
disable +/- appropriately. If the user manually enters a number out of
bounds, the Input's error is used to display a short warning.

Input required some minor changes to support this:
 - allow inputClass in order to center numbers in the textbox.
 - passthrough of key events, in order to block non-numerical entry.
 - boolean to block showing the error in a separate span. Although this is
   the design for inputs, it felt really out of place in preferences.
 - reduce padding slightly - it didn't matter in large Inputs, but
   number inputs tend to be smaller and extraneous padding was obvious.

New component is used in Settings > Preferences and max retry count for
running an image.

Tests added. NumberItem test had to be changed since only numerical inputs
work now.

Another part of #3234.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Fixed a couple edge cases (min/max of 0, switching in/out of disabled state)
and a minor formatting improvement in running containers.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
Copy link
Contributor

@lstocchi lstocchi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Played a bit with it and looks good. Once it didn't save my value correctly but i was not able to replicate it again. I was typing random stuff so it is not a normal use case.

LGTM, nice improvement 🚀

@deboer-tim deboer-tim merged commit 3f26414 into main May 10, 2024
8 checks passed
@deboer-tim deboer-tim deleted the input-number branch May 10, 2024 11:42
@podman-desktop-bot podman-desktop-bot added this to the 1.11.0 milestone May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants