Bug 395510 - Grid Layout KCMs: inline buttons are hard to see and aren't usable with touch
Summary: Grid Layout KCMs: inline buttons are hard to see and aren't usable with touch
Status: RESOLVED FIXED
Alias: None
Product: frameworks-kdeclarative
Classification: Frameworks and Libraries
Component: general (show other bugs)
Version: unspecified
Platform: Other Linux
: NOR normal
Target Milestone: ---
Assignee: Marco Martin
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-06-16 21:54 UTC by Andres Betts
Modified: 2019-02-05 20:39 UTC (History)
5 users (show)

See Also:
Latest Commit:
Version Fixed In: 5.56


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Andres Betts 2018-06-16 21:54:31 UTC
With the addition of new icons into the grid layout, they are hard to see. Add semitransparent background to the button so it shows on hover.
Comment 1 Kai Uwe Broulik 2018-06-29 09:27:04 UTC
This must be done for all grid-based KCMs then.
Comment 2 Andres Betts 2018-06-29 14:14:12 UTC
Yes, that's what I mean. The controls are hard to see. If the background changed colors, it would help see those control icons.
Comment 3 Nate Graham 2018-06-29 23:10:59 UTC
I have to say I'm not really a fan of the current icons-appear-on-hover UI for the grid KCMs. The buttons suffer from a number of problems:

- Buttons obscure the content
- Buttons require some kind of overlay or an opaque background to be distinguishable themselves, further obscuring content
- Buttons are not very discoverable
- Buttons are inaccessible using a touch interface (where there's no concept of hover)

IMHO we need to rethink this conceptually.
Comment 4 Andres Betts 2018-06-29 23:15:26 UTC
I am not sure why we keep thinking that this is going to be the same on mobile. We talked about this some time ago and we came to the conclusion that things would be different for both. There would be a desktop version and a mobile version. They won't be identical.

Beyond that, in my mockups, the visibility of these items is clear. Because of some technical challenges, the icons could not be exactly the same. The only thing I am asking for, compromising in this respect, is to add a background that can further define the line art icons that we have inside the grid item. If that can't be done, let me know and we can look for something different. But if it does, is it possible to work on it?
Comment 5 Nate Graham 2018-06-29 23:24:19 UTC
I didn't mention mobile, only touch. I have a convertible laptop with a touchscreen. I can't access these hover-only buttons with the touchscreen, only with the touchpad.

Because of the hardware convergence that's taking place these days with laptops sprouting touchscreens, I don't believe it's wise to add any new functionality that's completely inaccessible using a touchscreen the way these hover buttons are.

Regarding the specific idea here: if we add a dark overlay background on hover to make the buttons more visible, we also make the content less visible right at the moment when you're most likely to be looking at it. I don't think that's a good trade-off.
Comment 6 Andres Betts 2018-06-29 23:27:46 UTC
I am willing to change this so that it can be better. Maybe we can place the icons off the grid item, or have a general add/delete button off the container. We follow this in other KCMs, so it wouldn't be a problem visually. Would that sound better?

/me I prefer option 2.
Comment 7 Nate Graham 2018-07-10 21:45:39 UTC
I'd be in favor of adding buttons below the grid view saying things like:

Preview <name of selected item>
Edit <name of selected item>
Delete <name of selected item>

(etc.)
Comment 8 Marco Martin 2019-02-01 11:17:30 UTC
fot the touchscreen issue: when on tabletmode (when will work reliably on all devices.. that's another issue) those 3 buttons are always visible
Comment 9 Marco Martin 2019-02-01 11:19:19 UTC
(In reply to Andres Betts from comment #6)
> I am willing to change this so that it can be better. Maybe we can place the
> icons off the grid item, or have a general add/delete button off the
> container. We follow this in other KCMs, so it wouldn't be a problem
> visually. Would that sound better?
> 
> /me I prefer option 2.

please don't add more noise or things out of the grid that will make correct layouting way more difficult
Comment 10 Marco Martin 2019-02-01 11:25:34 UTC
(In reply to Nate Graham from comment #7)
> I'd be in favor of adding buttons below the grid view saying things like:
> 
> Preview <name of selected item>
> Edit <name of selected item>
> Delete <name of selected item>
> 
> (etc.)

that is how things generally were.
and we slowly ported everything we could out of it, as per CDG request, for the reason that (correctly) actions specific of an item should not be disconnected from the item itself

besides, while a minor change in the aspect of the grid delegate and the icons is somethng that can be done once and all grid kcms will adopt immediately, a change that puts every actions outside the delegate must again be done in every single kcm, one by one, settings again the clock back on the porting work, that won't ever be completed if requirements keep chaning mid-work
Comment 11 Marco Martin 2019-02-01 11:26:31 UTC
(In reply to Marco Martin from comment #10)
> and we slowly ported everything we could out of it, as per CDG request, for
* VDG request
Comment 12 Marco Martin 2019-02-01 11:28:03 UTC
(In reply to Nate Graham from comment #5)
> functionality that's completely inaccessible using a touchscreen the way
> these hover buttons are.
do you really think this was not tought about?
Comment 13 Nate Graham 2019-02-01 17:49:58 UTC
Sorry, I didn't know it was supposed to work properly on mobile since I have a convertible laptop and am not able to use these inline buttons with it.

If that's a separate issue, then probably the only thing to be done here is to improve the contrast so you can actually see the icons against arbitrary background content. Here's a patch for that: https://phabricator.kde.org/D18649
Comment 14 Nate Graham 2019-02-05 20:39:32 UTC
Git commit 6258f33fce3af55f7cdd3b5487cd04d8e53c0b38 by Nate Graham.
Committed on 05/02/2019 at 20:39.
Pushed by ngraham into branch 'master'.

[GridViewKCM] improve contrast and legibility for delegates' inline hover buttons

Summary:
Right now the delegates' inline hover buttons can be very difficult to see, because they're
(mostly) white and don't get much background contrast. A gradient appears on the bottom of
the thumbnail on hover, which provides a bit of visual differentiation, but no real contrast.

This patch improves the situation by using real buttons (with a built-in background) instead
of toolbuttons.
FIXED-IN: 5.56

Test Plan:
{F6589836, autoplay=true}

{F6589841, autoplay=true}

Reviewers: #vdg, #plasma, broulik, GB_2, ndavis

Reviewed By: #vdg, GB_2, ndavis

Subscribers: Codezela, bruns, rizzitello, ndavis, andreask, filipf, abetts, GB_2, kde-frameworks-devel

Tags: #frameworks

Differential Revision: https://phabricator.kde.org/D18649

M  +11   -27   src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml

https://commits.kde.org/kdeclarative/6258f33fce3af55f7cdd3b5487cd04d8e53c0b38