-
Notifications
You must be signed in to change notification settings - Fork 43
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
feature(web): make the product selection more appealing and accessible #1550
Commits on Aug 21, 2024
-
Decorated product selection without radio btn
* Resolves Issue agama-project#1415 * Entire card is clickable, selection of card is still marked by blue boarder * Add icon to structures, pass it to dbus, etc (please do not mix product icon with pattern icon) fallback to default.svg in case that no icon is set * Rework button layout to clickable layout * We might need to use table or similar in case that description is longer than the * Supply icon for all products including default icon
Configuration menu - View commit details
-
Copy full SHA for d43bcc2 - Browse repository at this point
Copy the full SHA d43bcc2View commit details -
Configuration menu - View commit details
-
Copy full SHA for 562fa73 - Browse repository at this point
Copy the full SHA 562fa73View commit details -
Add padding 20px from right as well as 20px from bottom to allow long…
…er text without wrap
Configuration menu - View commit details
-
Copy full SHA for 51b84d7 - Browse repository at this point
Copy the full SHA 51b84d7View commit details -
Configuration menu - View commit details
-
Copy full SHA for 632a652 - Browse repository at this point
Copy the full SHA 632a652View commit details -
Configuration menu - View commit details
-
Copy full SHA for 243d344 - Browse repository at this point
Copy the full SHA 243d344View commit details -
Configuration menu - View commit details
-
Copy full SHA for 43604fa - Browse repository at this point
Copy the full SHA 43604faView commit details
Commits on Aug 22, 2024
-
Update web/src/components/product/ProductSelectionPage.jsx
Co-authored-by: José Iván López <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for e7e7b9d - Browse repository at this point
Copy the full SHA e7e7b9dView commit details -
Update service/lib/agama/software/product.rb
Co-authored-by: Josef Reidinger <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for e06eb2c - Browse repository at this point
Copy the full SHA e06eb2cView commit details -
Update service/lib/agama/software/product_builder.rb
Co-authored-by: Josef Reidinger <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for ca59133 - Browse repository at this point
Copy the full SHA ca59133View commit details -
Update service/lib/agama/software/product.rb
Co-authored-by: Josef Reidinger <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 3c92e8d - Browse repository at this point
Copy the full SHA 3c92e8dView commit details -
Revert "Update web/src/components/product/ProductSelectionPage.jsx"
Breaks build ERROR in ./src/components/product/ProductSelectionPage.jsx 107:22-63 Module not found: Error: Can't resolve '~/assets/products' in '/home/runn This reverts commit e7e7b9d.
Configuration menu - View commit details
-
Copy full SHA for f8ae4e7 - Browse repository at this point
Copy the full SHA f8ae4e7View commit details
Commits on Sep 4, 2024
-
Configuration menu - View commit details
-
Copy full SHA for 8ad16c2 - Browse repository at this point
Copy the full SHA 8ad16c2View commit details -
fix(web): restore radio inputs in product selection
Since it's arguably that they might confuse users and also because of consistent with the rest of the UI. They could be drop or hidden later, but thinking globally in all selectors and implications of doing so. Also, this commit improves a little the proposed layout by making use of the label for "increasing" the clickable area instead of adding a handler for the PF/Card component itself. Again, this can be refactored later if really needed. Read the reasoning at agama-project#1550 (review) and/or agama-project#1550 (comment).
Configuration menu - View commit details
-
Copy full SHA for ce403e0 - Browse repository at this point
Copy the full SHA ce403e0View commit details -
fix(web): do not lost focus when selecting a product
As a result of an internal component defined in the body of the main component (aka "render function"), the focus was lost each time the main component got re-rendered because of a "selected product" changed. This happens because these internal components are actually not re-rendered but remounting since they were re-defined :/ A bit messy, but there is a lot of documentation about it. To link a few, * https://react.dev/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state - Which contains a "Pitfall" warning that says: **This is why you should not nest component function definitions.** * https://www.developerway.com/posts/react-re-renders-guide#part3.1
Configuration menu - View commit details
-
Copy full SHA for 3cb7ebf - Browse repository at this point
Copy the full SHA 3cb7ebfView commit details -
feat(web): copy product logos to public dist directory
To make them accessible.
Configuration menu - View commit details
-
Copy full SHA for e85aef0 - Browse repository at this point
Copy the full SHA e85aef0View commit details -
refactor(web): rework product selector
For improving its a11y when using an screen reader. Also makes the PF/Card element clickable as proposed by @lkocman initially ease the selection for mouse users, but keeping the radio inputs as both, visual and keyboard aid.
Configuration menu - View commit details
-
Copy full SHA for ec57cc1 - Browse repository at this point
Copy the full SHA ec57cc1View commit details
Commits on Sep 5, 2024
-
fix(web): improve a11y of product selector
Kind of undoing some changes made at ec57cc1 related to the clickable card. It made a11y tools complain about "Clickable elements must be focusable and should have interactive semantics" which makes sense. Instead of start adding keyboard handlers to the PF/Card component too this commit uses a CSS technique for "expanding" the area of the label to the whole card and using the pointer cursor, while keeping the details out of the label but the cursor: pointer. That way, the component still accessible for keyboard and screen reader while improve the mouse users experience too.
Configuration menu - View commit details
-
Copy full SHA for f22d679 - Browse repository at this point
Copy the full SHA f22d679View commit details -
refactor(web): migrate product selector to TypeScript
Which revealed that `pattern` property of `SoftwareConfig` type is actually optional.
Configuration menu - View commit details
-
Copy full SHA for 1d823e9 - Browse repository at this point
Copy the full SHA 1d823e9View commit details -
Configuration menu - View commit details
-
Copy full SHA for aefdd5f - Browse repository at this point
Copy the full SHA aefdd5fView commit details -
Configuration menu - View commit details
-
Copy full SHA for ac7f797 - Browse repository at this point
Copy the full SHA ac7f797View commit details -
Configuration menu - View commit details
-
Copy full SHA for ed0025a - Browse repository at this point
Copy the full SHA ed0025aView commit details -
Configuration menu - View commit details
-
Copy full SHA for 18b48cc - Browse repository at this point
Copy the full SHA 18b48ccView commit details