Bug 407273

Summary: Icons-and-text button is taller than icons-only button and text field
Product: [Plasma] Breeze Reporter: Mikhail Zolotukhin <mail>
Component: QStyleAssignee: Unassigned bugs mailing-list <unassigned-bugs>
Status: CONFIRMED ---    
Severity: normal CC: i, nate
Priority: NOR    
Version: unspecified   
Target Milestone: ---   
Platform: Neon   
OS: Linux   
Latest Commit: Version Fixed In:
Attachments: Mixed screenshot of two hovered buttons with different heights
Dropdown button height mismatch in Gwenview
Okular short in height combox
Okular possible tall combobox
Okular combobox with caption

Description Mikhail Zolotukhin 2019-05-06 17:53:52 UTC
Created attachment 119874 [details]
Mixed screenshot of two hovered buttons with different heights

SUMMARY
Height of the button with a small icon and no text is less, than the one's with text. 

STEPS TO REPRODUCE
1. Open any KDE application with a toolbar (e.g. Gwenview)
2. Set the icon size in the toolbar to "Small (16x16)" and the text position to "Text alongside icons".
3. Make one button have a text (e.g. "previous" button on a screenshot)
4. Make another button have no text.
5. Now hover to each of them to see border boxes with different height sizes with the difference approximately equal to 1 or 2 px.

OBSERVED RESULT
Blue border boxes of buttons have different height.

EXPECTED RESULT
Blue border boxes should have the same height, because icon size is the same too.

SOFTWARE/OS VERSIONS
Operating System: KDE neon Unstable Edition
KDE Plasma Version: 5.15.80
KDE Frameworks Version: 5.58.0
Qt Version: 5.12.0
Kernel Version: 4.18.0-18-generic
OS Type: 64-bit
Processors: 4 × Intel® Core™ i7-8550U CPU @ 1.80GHz
Memory: 3,9 GiB of RAM


ADDITIONAL INFORMATION
Font is the default one - Noto Sans 10pt
If icon size is larger than small (16x16) (e.g. medium, large), button heights are the same, which is works as intended/.
Comment 1 Christoph Feck 2019-05-21 18:22:38 UTC
I don't think this should be changed in Breeze.

If you have large font size (say 40 pixels height), but only want a button with an icon, which is only 16 pixel height, then the button shouldn't allocate the 40 pixels for the text.

I am reassigning to Gwenview, because it could set a minimum size for the buttons to accomodate both the font size as well as the icon size.
Comment 2 Nate Graham 2019-05-21 22:16:51 UTC
It's worth mentioning that with the default toolbar icon size settings (22px icons), the heights do match up.

Not sure this makes sense to change in only Gwenview. If there's anywhere it does make sense to change, it would be in Breeze. If a user does something crazy like set 40pt font, nothing else is going to work right, so I'm not sure it makes sense to optimize around that.
Comment 3 Mikhail Zolotukhin 2019-05-21 22:54:21 UTC
Created attachment 120233 [details]
Dropdown button height mismatch in Gwenview

Well 40px font is a bit extreme, but if I understand correctly, button heights mismatch because font height is greater, than the icon's one, and buttons define their heights according to content. So,  I think it's a more fundamental problem, than fonts and icons - take a look at "Open With" dropdown button in Gwenview, it's height is way smaller, than rest of items on left. It also applies to other widgets, for example, page size combobox in Okular.

The heights of toolbar items should be equal to toolbar height, I think. In case of extreme scenarios (like on dropdown menu button on a screenshot) it won't only look nice - this will increase click area too. However, in case of comboboxes (like in Okular) I'm not sure about the look, the combo looks strange in my opinion.
Comment 4 Mikhail Zolotukhin 2019-05-21 22:55:33 UTC
Created attachment 120234 [details]
Okular short in height combox
Comment 5 Mikhail Zolotukhin 2019-05-21 22:56:21 UTC
Created attachment 120235 [details]
Okular possible tall combobox
Comment 6 Nate Graham 2019-05-21 23:08:40 UTC
Agreed.
Comment 7 Christoph Feck 2019-06-14 14:28:40 UTC
I don't agree, the tall comboboxes really look out-of-place.

In Skulpture I forced SmallIcons size to the same size as the font size, so that buttons with icons and text get the same height. They got blurry, though, but that shouldn't be an issue now that we have scalable icons, so we could revisit that idea.

But this won't work for the toolbar case, because toolbar icons can have any size. What you show here is "text is smaller than icon+text", which is of course always the case.
Comment 8 Nate Graham 2019-06-14 14:35:06 UTC
If there's way to make the heights identical only when they would otherwise be off by a pixel or two, that would probably be ideal.
Comment 9 Mikhail Zolotukhin 2019-06-15 14:33:54 UTC
Created attachment 120890 [details]
Okular combobox with caption

Agreed, the tall combobox is odd. Instead we could just use a caption "Scale" in "Text under icons" mode.
Comment 10 Nate Graham 2021-02-16 20:48:41 UTC
*** Bug 411811 has been marked as a duplicate of this bug. ***