Add options to disable some/all buttons when hovering over thumbnails
ClosedPublic

Authored by huoni on Feb 10 2018, 4:41 AM.

Details

Summary

Adds three options:

  1. Show all (previous behaviour, now default)
  2. Show only selection buttons (hide fullscreen and rotate buttons in Browse View)
  3. Hide all buttons

This option affects Browse View, Image View Thumbnail Bar, and the Importer tool gwenview_importer.

Three modes in Browse view:



FEATURE: 164847

Diff Detail

Repository
R260 Gwenview
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
huoni requested review of this revision.Feb 10 2018, 4:41 AM
huoni created this revision.
huoni updated this revision to Diff 26863.Feb 10 2018, 10:48 AM

Remove old/duplicate config option

rkflx added a subscriber: ngraham.EditedFeb 11 2018, 12:43 AM

Thanks for choosing Gwenview for your first contribution ;) You even used Arcanist to upload the patch, which is great! If you have any questions or encounter any problems, just ask. Note we also have https://phabricator.kde.org/T7116 if you want to provide any feedback in that direction.

Turns out we even have a wishlist item for the feature your patch adds, see https://bugs.kde.org/show_bug.cgi?id=164847. Please append FEATURE: 164847 to the summary, so the Bugzilla item will get closed automatically when your patch is committed. Also note that the summary will become the commit message.


Now for a first review (I'll look at the code later): Your patch disables more than just the overlay buttons, e.g. changing the mouse cursor on hover and expanding the filename in case it is too long to display. Do you think you could change that?

The overlay buttons are not only used in Browse mode, but also in other places:

  • In the thumbnail strips, where they are still there. I'm not sure what we should do: The buttons may be annoying for switching images, on the other hand they provide a way to access the "lighttable" function, i.e. selecting multiple images to view them side by side. Thoughts?
  • In Gwenview's importer tool (issue gwenview_importer . to test it), where they are now missing. As selecting images is the only thing you can do there, it might make sense to keep the buttons there. Opinions?

I guess we'd have to decide whether we want to consistently remove the buttons everywhere, or special case some parts for good reasons.

Regarding the config dialog:

  • I'm not sure a technical term such as "Hover UI" should appear there and is understood by users. We'd need to come up with something better. @ngraham Any ideas?
  • "Show image actions on hover": Perhaps "Show image actions when hovering over thumbnails"? This would make it a bit more clear what the option is about.
  • The option feels quite lonely on its new tab. As it is used in more places than Browse mode too, we might just move it to the General tab?
huoni edited the summary of this revision. (Show Details)Feb 11 2018, 1:01 AM

Thanks so much for the contribution! For user-visible features like these, it's also nice to include a screenshot in the Summary section, so folks can see it in action.

In general, it's not the best UI to have labels on both the left and right of a checkbox. There should only be one, to its right. With that in mind, how about this:

  • Show quick edit buttons over image thumbnails

No need to mention "hover", I think, since it will be pretty obvious what the label is talking about given how obvious the buttons are once you start using Gwenview for anything.

Also I think it might be overkill to add a new page to hold only one UI control. For now, how about putting this on the General page? It is pretty generally applicable since there are thumbnails in multiple views that show these buttons.

Thanks so much for the contribution! For user-visible features like these, it's also nice to include a screenshot in the Summary section, so folks can see it in action.

@huoni With a before/after screenshot (or perhaps a GIF), you might get featured in Nate's blog.

In general, it's not the best UI to have labels on both the left and right of a checkbox.

That might be better in the general case, however all the other config tabs in Gwenview kind of disagree here, so let's just go with the flow for now ;) Besides that, our HIG allows it too for grouping.

How about this (perhaps right as the first item on the General tab):

Thumbnails: [] Show image actions on hover

(I find "action" more appropriate, because going fullscreen and selecting something are not editing operations, while rotating could be classified as an action too. Also, with putting "Thumbnails" in front we lose "over", so we'd need the "hover" again to be clear enough.)

Thanks for the warm welcome. Bear with me as I'm not familiar with the code base so I'm still getting my head around it.

In the thumbnail strips, where they are still there. I'm not sure what we should do: The buttons may be annoying for switching images, on the other hand they provide a way to access the "lighttable" function, i.e. selecting multiple images to view them side by side. Thoughts?
In Gwenview's importer tool (issue gwenview_importer . to test it), where they are now missing. As selecting images is the only thing you can do there, it might make sense to keep the buttons there. Opinions?

Perhaps giving the user more options is the solution. For example, there could be three options:

  1. Show everything (current behaviour, default)
  2. Hide only the fullscreen and rotate buttons in Browse View
  3. Hide all buttons in all places including the Thumbnail Bar and the importer

This would accommodate users that like having the selection buttons but don't care for the others. It would also keep consistency - having selection buttons in some places but not others I don't think is good design.

The UI for this could be something like:

Thumbnail butons: () Show all
                  () Show selection button only (only affects Browse View)
                  () Hide all

As for the config UI - agree with feedback here, especially if it affects more than the Browse View. Will move it into the General page.

@rkflx thoughts?

Bear with me as I'm not familiar with the code base so I'm still getting my head around it.

I'm discovering new parts each day myself, so sometimes it takes me some time to react as well ;) No worries…

The UI for this could be something like:

That's a great idea and solves the dilemma quite nicely. I don't really get what "only affects Browse View" for the second option means, but the following could work and would be easy to understand for most users IMO:

Thumbnail actions: () All buttons
                   () Show selection button only
                   () None

If you look around, there should be some code in the kcfg and in cpp files already using enums, which you could take inspiration from.

I don't really get what "only affects Browse View" for the second option means

Well the extra buttons only appear in Browse View. The Thumbnail Bar and Import tool already only have the selection button, therefore the intention was to let the user know that setting only has an effect on Browse View.
But perhaps it's not necessary, and could be confusing now that I think about it (your confusion is case in point!).

I don't really get what "only affects Browse View" for the second option means

But perhaps it's not necessary, and could be confusing now that I think about it (your confusion is case in point!).

Yup. I know which buttons are where, but I don't think it should be pointed out in the dialog.

I don't think we can include a "show selection button only" item, since that's actually controlled in Dolphin, of all places. If you turn off Selection markers there, they turn off everywhere.

I don't think we can include a "show selection button only" item, since that's actually controlled in Dolphin, of all places. If you turn off Selection markers there, they turn off everywhere.

Hmh. Cannot reproduce, and I even restarted my session. I guess in Gwenview they are different enough.

I don't think we can include a "show selection button only" item, since that's actually controlled in Dolphin, of all places. If you turn off Selection markers there, they turn off everywhere.

Hmh. Cannot reproduce, and I even restarted my session. I guess in Gwenview they are different enough.

I also cannot reproduce this, "show selection marker" in Dolphin doens't appear to have an affect on Gwenview.

I don't think we can include a "show selection button only" item, since that's actually controlled in Dolphin, of all places. If you turn off Selection markers there, they turn off everywhere.

Hmh. Cannot reproduce, and I even restarted my session. I guess in Gwenview they are different enough.

I also cannot reproduce this, "show selection marker" in Dolphin doens't appear to have an affect on Gwenview.

What am I saying!? I must be on crack. You two are right, of course. Ignore me!

huoni updated this revision to Diff 26976.Feb 12 2018, 2:24 AM

Implement three display options for thumbnail hover buttons

  • Show all (default)
  • Show only selection buttons
  • Hide all

This setting affects Browse View, Thumbnail Bar (in Image View), and the Importer (gwenview_importer)

huoni added a comment.EditedFeb 12 2018, 2:31 AM

@rkflx @ngraham

I've implemented the three options. There's one issue I noticed with this implementation - in the Thumbnail Bar (when option set to None), there is no visual feedback when hovering over a thumbnail, like there is in the other two thumbnail views. Thoughts?

I've also recorded a video demo:

EDIT: GfyCat of above video

huoni retitled this revision from Add option to toggle the hover UI in Browse View to Add options to disable some/all buttons when hovering over thumbnails.Feb 12 2018, 2:52 AM
huoni edited the summary of this revision. (Show Details)
ngraham accepted this revision.Feb 12 2018, 4:37 AM

Lovely, +1 from me visually, functionally, and code-wide!

This revision is now accepted and ready to land.Feb 12 2018, 4:37 AM
rkflx requested changes to this revision.Feb 12 2018, 5:30 PM

Lovely, +1 from me visually, functionally, and code-wide!

@ngraham You are stating that only because you did not test extensively enough :D

@huoni Here's how I could break it, i.e. make all buttons appear again in both Fullscreen and windowed mode:

  • Press F11, observe thumbnails in Browse mode.
  • Or even easier: gwenview -f ~

Could you fix this? See below for an idea I had regarding the cause.


I've implemented the three options. There's one issue I noticed with this implementation - in the Thumbnail Bar (when option set to None), there is no visual feedback when hovering over a thumbnail, like there is in the other two thumbnail views. Thoughts?

Thanks for noticing! Yeah, that's not ideal indeed. I won't block your patch on that because it does not happen for the default config, but if you could try to prepare a follow-up patch that would be fabulous. Perhaps it's enough to change the background colour slightly, just like in Browse where selection is a dark blue and highlight is a lighter blue. (See also my comment right at the bottom of D9025#173151.)

app/browsemainpage.cpp
55

We already get that from lib/gwenviewconfig.h.

289–303

I'm not sure this code block sits in the right place, which might be the reason why it does not work in Fullscreen. I wonder where the hover actions for Browse are normally assembled, because there must be some code which adapts it dynamically to the zoom level, i.e. for small thumbnails fewer buttons are shown anyway.

importer/thumbnailpage.cpp
54

Remove

lib/gwenviewconfig.kcfg
88

Fix indentation.

lib/thumbnailactions.h
5–6

Replace with more accurate information ;)

lib/thumbnailview/thumbnailbarview.cpp
48

Remove

135

Is it possible to move this condition to the if above? This way we would avoid unnecessary work in some cases.

This revision now requires changes to proceed.Feb 12 2018, 5:30 PM
rkflx added a comment.Feb 12 2018, 5:33 PM

Implement three display options for thumbnail hover buttons

  • Show all (default)
  • Show only selection buttons
  • Hide all

    This setting affects Browse View, Thumbnail Bar (in Image View), and the Importer (gwenview_importer)

That works superb, and the settings dialog looks great too!

huoni updated this revision to Diff 27030.Feb 13 2018, 12:00 AM
huoni marked 7 inline comments as done.
  • Fix the config resetting after going to fullscreen mode
  • Code cleanup and formatting fixes
huoni added a comment.EditedFeb 13 2018, 12:06 AM

Thanks for your thorough review!

I have fixed the full screen issue, and everything else you've commented on.

I will start looking into highlighting the thumbnail on hover in the Thumbnail Bar. EDIT: see Diff 27036

lib/thumbnailview/thumbnailbarview.cpp
135

My reasoning for this was there might be other code in the future that needs to execute on hover. E.g. I thought the background highlight visual feedback would go here, but after looking at the code again that doesn't seem to be the case.

And now I think about it, whoever wants to add more code in the future can just change it again :)

huoni updated this revision to Diff 27035.Feb 13 2018, 2:23 AM
  • Use default parameter value
huoni updated this revision to Diff 27036.Feb 13 2018, 4:28 AM
  • Allow default hover highlight effect in Thumbnail Bar

The stylesheet being applied was too broad, overriding the default hover effect.

rkflx added a comment.Feb 13 2018, 2:58 PM

Yay, code looks cleaner now, most fullscreen bugs are fixed and even hovering magically works. We are nearly there.

app/browsemainpage.cpp
289

// Can't change config when in fullscreen, so always pass fullScreen=false

This assumption does not hold, leading to a bug: Configure a shortcut for the config dialog and press it in fullscreen mode. Now you've got 4 buttons instead of three.

In general it's better to dynamically determine what mode Gwenview is in. After you rebase your patch on master where we worked on this topic over the last days, a fix should be easy (look at 140393d08972 for inspiration on how to read the fullscreen state).

huoni updated this revision to Diff 27119.Feb 13 2018, 11:45 PM
  • Update branch with master
  • Fix issue when saving config in fullscreen mode
  • Fix BG colour changing when saving config in fullscreen

Thanks, I'll look at it tomorrow.

  • Fix BG colour changing when saving config in fullscreen

I'm okay with including the hover bugfix here as it is slightly related, but please open a separate Diff for the other (obvious ;) problem you fixed. This way you'll have two patches in your name in no time…

huoni marked an inline comment as done.Feb 13 2018, 11:52 PM

magically

Not sure about that :)

Speaking of the hover highlight in the Thumbnail Bar - I noticed that the effect isn't very noticeable in the fullscreen mode thumbnail bar. Should we try to adjust it there?

app/browsemainpage.cpp
270–271

I noticed when saving the config in fullscreen mode, the background colour changed to what it is in non-fullscreen mode (Browse). This fixes that.

Should this be done in a different revision/diff though? I couldn't find a bug for it, but maybe I wasn't using the right keywords.

huoni updated this revision to Diff 27120.Feb 13 2018, 11:58 PM
  • Revert fullscreen BG colour fix
huoni marked an inline comment as done.EditedFeb 13 2018, 11:59 PM

I'm okay with including the hover bugfix here as it is slightly related, but please open a separate Diff for the other (obvious ;) problem you fixed. This way you'll have two patches in your name in no time…

Answered my question already! Have reverted that and will submit a new diff.

rkflx added a comment.EditedFeb 14 2018, 12:00 AM

In general, it's better to open new Diffs for unrelated/new issues. This makes it much easier to review and (most importantly) ensures a somewhat tidy Git history (in case you have to understand a change from the past, or revert something, or bisect a bug etc.).

Searching for bugs in Bugzilla before working on something is good (to be able to close the bug and get hints about the implementation/requirements), but in KDE it's not required to have a tracking bug for every Diff.

As for the unnoticeable fullscreen hover: Yeah, this bugs me too (and the normal thumbnail grid is also not that great in that regard), especially when compared to the neon-coloured sidebar frame.

In summary: create two new Diffs…

huoni added a comment.Feb 14 2018, 1:43 AM
This comment was removed by huoni.
rkflx accepted this revision.Feb 14 2018, 5:04 PM

Perfect, works great now. I'll land it on your behalf in a bit.

Thanks again for contributing! Let us know if you need ideas for what to work on next if you like it so far (either Gwenview or other components).


especially when compared to the neon-coloured sidebar frame.

Not sure what you mean by that.

This was about the fullscreen mode. If you hover the mouse over the Information sidebar, it gets a "glow". Obviously that's too much for the thumbnail hovering, but IMO currently the dark blue is quite hard to see.

This revision is now accepted and ready to land.Feb 14 2018, 5:04 PM
This revision was automatically updated to reflect the committed changes.
huoni added a comment.Feb 14 2018, 9:45 PM

Perfect, works great now. I'll land it on your behalf in a bit.

Thanks again for contributing! Let us know if you need ideas for what to work on next if you like it so far (either Gwenview or other components).

Awesome! Thanks so much for your help!

muhlenpfordt added inline comments.
app/generalconfigpage.ui
142

Just noticed this preset accelerator (it's the only one on this and most other config pages).
Don't know if this can cause any trouble or breaks any guideline, but wanted to point out. ;)

huoni added inline comments.Feb 15 2018, 10:16 AM
app/generalconfigpage.ui
142

That's odd. I used Qt Designer to edit the General page, and didn't put that in on purpose.

I'm not sure what the best course of action is here. @rkflx thoughts?

muhlenpfordt added inline comments.Feb 15 2018, 10:26 AM
app/generalconfigpage.ui
142

I hated Designer for this automation more than once... ;)
Some time ago I found a solution somewhere, just add these lines to your KDE global config:

~/.config/kdeglobals
[Development]
AutoCheckAccelerators=false
huoni added inline comments.Feb 15 2018, 10:30 AM
app/generalconfigpage.ui
142

Thanks, done!

rkflx added inline comments.Feb 15 2018, 1:03 PM
app/generalconfigpage.ui
142

Late to the party, but yeah, I noticed this too when reviewing the patch but did not mention it in the end (my bad). Trying to undo this in Designer just put it somewhere else, making me question .ui files once more (just look at how noisy the patch is for this file…).

Removing this again moves the underline from onlY to shoW, which is not too bad.

A quick check shows that in some places this might be deliberate (done by Aurélien, at the start of words), while in some cases it might be the same mistake (e.g. in 4efdfcdae). I'll commit a fix tonight if nobody disagrees.

huoni edited the summary of this revision. (Show Details)Feb 16 2018, 11:23 PM