Create a consistent selection/hover/focus styling for files etc
Currently our selection focus for items like files in fileviews can drastically differ between applications and other usecases. This adds cognitive load where user has to re-learn how the selections work. On top of that, it looks bad. We should come up with something that is shared to the best of our abilities between applications, frameworks, etc. For example: | Desktop widget | Dolphin | Open/Save Dialog | | ------ | ------ | ------ | | ![image](/uploads/008e2ee1395d91b3416f5823feaa17ef/image.png){width=377 height=591} | ![image](/uploads/bf4436586ca791aeced81d6c92b280f1/image.png){width=750 height=655} | ![image](/uploads/93674b381fe58f7cae09293c5a67f12e/image.png){width=876 height=717} | They all look a bit different. Desktop widgets do not have keyboard focus indicator at all. On top of that, context menus can differ between QtWidgets and QtQuick: Desktop context menu (QtWidgets): ![image](/uploads/8ac1e13e6e72bdefc475abb1422aa3f7/image.png){width=443 height=251} Neochat context menu (QtQuick): ![image](/uploads/a86b4c9768db386c0bef6346ceecafa4/image.png){width=178 height=203} It's likely impossible to bring these to exactly like each other, but we should at the very least have some proper guidelines for them *Perfect is the enemy of good.* :) ## Selection states Using Dolphin as an example, we have multiple selection states for items: | State | Screenshot | | ------ | ------ | | Focus (Not selected, but keyboard focus is on it) | ![image](/uploads/1db06b92c18c1900ec1db7147d894b44/image.png){width=100 height=80} | | Selection | ![image](/uploads/1d86d245c7e1c275836e8152115f5fa8/image.png){width=100 height=80} | | Selection + Hover | ![image](/uploads/3d169d1bdaf32c17e78f73ffdc09d6fc/image.png){width=100 height=80} | | Focus + Hover | ![image](/uploads/a288168ea5a1fbd837abf2216c44f2ae/image.png){width=100 height=80} | | Selection + Focus (the focus indicator is difficult to see) | ![image](/uploads/25753fad87df7527eeefe6bcd779f048/image.png){width=100 height=80} | | Click (from desktop widget, Dolphin does not have this yet.) |![image](/uploads/d726d868bb2a8e431185e378e1529f45/image.png){width=101 height=100} | (Ignore the mouse dragging cursor, it happens when you hold mouse down long enough to take screenshot :P ) If I'm lacking other selection states, let me know. (Or just edit them there) These selection states can be different across our apps and file views. The point of this issue is to create some sort of unified guidelines which to follow when further implementing visuals and UX for the selection items. - [ ] Figure out the new styling for the selection, if any - [ ] Update these guidelines to HIG? - [ ] Implement guidelines in Dolphin - [ ] Implement guidelines in KIO KFileWidget (open/save dialog) - [ ] Implement guidelines in QtQuick fileviews (Kirigami?)
issue