feat: enhance UX with improved icon transitions and button interactions#5344
feat: enhance UX with improved icon transitions and button interactions#5344SteKoe wants to merge 6 commits into
Conversation
|
SteKoe
force-pushed
the
chore/ux-enhancements
branch
from
2ad730d to
b871cb5
Compare
|
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? |
| @@ -79,17 +76,16 @@ const componentAttrs = computed(() => { | |||
| type: props.type, | |||
There was a problem hiding this comment.
type seems not to be defined in defineProps
| faScroll() { | ||
| return faScroll; | ||
| }, | ||
| faHistory() { |
| <font-awesome-icon | ||
| v-if="isHealthGroupCollapsible(healthGroup.name)" | ||
| icon="chevron-down" | ||
| class="transition-[transform] mr-2 h-4" |
There was a problem hiding this comment.
Other components switched to chevron-right with rotate-90. Maybe this is the reason why I cannot see the chevron in health groups anymore.
@cdprete, |
Understood. Thanks. |
3 participants
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.