feat: enhance UX with improved icon transitions and button interactions#5344
Open
feat: enhance UX with improved icon transitions and button interactions#5344
Conversation
Contributor
Author
2ad730d to
b871cb5
Compare
Contributor
|
What's the job of that hamburger icon on the top right? Does it give access to the language switch and the help/about button? |
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.


After having talked to our UX experts, we introduce this first batch of small UX and UI enhancements. This pull request is focusing on button consistency, layout adjustments, icon updates, and improved accessibility. The changes enhance the visual appearance and usability of buttons and input fields, streamline the grouping of actions, and update iconography for better clarity.
Component Refactor and Feature Enhancements:
sba-button.vue: Refactored to allow theasprop to accept strings, objects, or functions, enabling rendering as custom components or anchors, not just<button>or<a>. The click event is now only emitted for button-like elements, and additional classes and attributes are passed correctly. Improved accessibility and styling by addingcursor-pointerand adjusting padding for the smallest size. [1] [2] [3] [4]sba-button.spec.ts: Added comprehensive tests for the newsba-buttonbehavior, covering rendering, slot content,asprop variations, attribute forwarding, class application, and event emission.UI/UX and Styling Improvements:
ApplicationListItemAction.vue: Actions now pass asizeprop for smaller buttons in compact views and use the correct icon and title translation. The journal action usesfaScrollinstead offaHistory, and all actions consistently pass icon size. [1] [2] [3]InstancesList.vue: List items now show a pointer cursor on hover for better affordance.sba-accordion.vueandindex.css: Fixed CSS class for transitions and removed unused rotate utility classes. Added deep styling for header buttons to ensure pointer cursor. [1] [2] [3]Internationalization:
instances.open_details) to all supported languages for improved accessibility and localization. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Layout and Structure:
index.vue: Improved layout structure in the applications view for better alignment and responsiveness, separating the filter input from the stats and action buttons. [1] [2] [3] [4]These changes collectively make the UI components more flexible, maintainable, and accessible, while also improving the overall user experience.