Bug 163008 - Vertical tabs ignore layout for icons
Summary: Vertical tabs ignore layout for icons
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: UI (show other bugs)
Version:
(earliest affected)
unspecified
Hardware: All All
: medium normal
Assignee: Not Assigned
URL:
Whiteboard: target:26.2.0
Keywords:
Depends on:
Blocks: Vertical-Tab-dialogs
  Show dependency treegraph
 
Reported: 2024-09-17 12:17 UTC by Heiko Tietze
Modified: 2025-06-13 13:02 UTC (History)
4 users (show)

See Also:
Crash report or crash signature:


Attachments
Vertical tabs with icons (186.50 KB, image/png)
2025-03-31 10:52 UTC, Heiko Tietze
Details
Snapshot on macOS with https://gerrit.libreoffice.org/c/core/+/186191 patch (138.21 KB, image/png)
2025-06-10 14:03 UTC, Patrick (volunteer)
Details
Rough patch that uses buttons instead of tabs for vertical tabs on macOS (1.99 KB, text/plain)
2025-06-10 14:06 UTC, Patrick (volunteer)
Details
Snapshot of macOS with rough patch in attachment.cgi #201181 (143.58 KB, image/png)
2025-06-10 14:14 UTC, Patrick (volunteer)
Details
Rough patch 2 that looks more like the macOS System Settings application (2.03 KB, text/plain)
2025-06-10 14:22 UTC, Patrick (volunteer)
Details
Snapshot of macOS with rough patch 2 in attachment #201184 (139.03 KB, image/png)
2025-06-10 14:24 UTC, Patrick (volunteer)
Details
Snapshot of vertical tabs on macOS with https://gerrit.libreoffice.org/c/core/+/186340 patch (138.40 KB, image/png)
2025-06-10 20:12 UTC, Patrick (volunteer)
Details
Snapshot in macOS Light Mode (835.13 KB, image/png)
2025-06-10 23:59 UTC, Patrick (volunteer)
Details
Snapshot in macOS Dark Mode (700.23 KB, image/png)
2025-06-10 23:59 UTC, Patrick (volunteer)
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Heiko Tietze 2024-09-17 12:17:39 UTC
With gtk3 I can easily place the icon before the text by using a horizontal orientation. This is ignored for kf5/6, gen, and likely other VCL too, and the icon always goes in a vertical orientation.

Test with https://gerrit.libreoffice.org/c/core/+/168685 or change the respective attribute for cui/uiconfig/ui/hyperlinkdialog.ui.
Comment 1 Michael Weghorn 2024-09-17 12:57:29 UTC
(In reply to Heiko Tietze from comment #0)
> Test with https://gerrit.libreoffice.org/c/core/+/168685 or change the
> respective attribute for cui/uiconfig/ui/hyperlinkdialog.ui.

Do I understand correctly that this is something that is/can be set independently for the GtkBox of each single tab child, i.e. the tab control itself doesn't actually handle it, but it just gets a GtkWidget child?

Using `WB_SMALLICON` for the `SvtIconChoiceCtrl` seems to give a similar result to the gtk3 version, but is not configurable per tab child. Sample change to test that:

diff --git a/vcl/source/control/ivctrl.cxx b/vcl/source/control/ivctrl.cxx
index 4566ad1310b9..be5e4c774796 100644
--- a/vcl/source/control/ivctrl.cxx
+++ b/vcl/source/control/ivctrl.cxx
@@ -368,7 +368,7 @@ struct VerticalTabPageData
 
 VerticalTabControl::VerticalTabControl(vcl::Window* pParent, bool bWithIcons)
     : VclHBox(pParent)
-    , m_xChooser(VclPtr<SvtIconChoiceCtrl>::Create(this, WB_3DLOOK | (bWithIcons ?  WB_ICON : WB_DETAILS) | WB_BORDER |
+    , m_xChooser(VclPtr<SvtIconChoiceCtrl>::Create(this, WB_3DLOOK | (bWithIcons ?  WB_SMALLICON : WB_DETAILS) | WB_BORDER |
                                                          WB_NOCOLUMNHEADER |
                                                          WB_NODRAGSELECTION | WB_TABSTOP | WB_CLIPCHILDREN |
                                                          WB_NOHSCROLL))

If it were an attribute of the GtkNotebook, switching mode based on that attribute could be an option, but if it's not, I don't see a simple way to make it work in a way that's configurable independently for each single tab child.
Comment 2 Rafael Lima 2024-09-17 13:22:53 UTC
(In reply to Michael Weghorn from comment #1)
> If it were an attribute of the GtkNotebook, switching mode based on that
> attribute could be an option, but if it's not, I don't see a simple way to
> make it work in a way that's configurable independently for each single tab
> child.

Apparently this is set via the "tab-pos" property of the "GtkNotebook", defining the position of all child tabs.

See f.i. the file paradialog.ui in Heiko's patch.
Comment 3 Michael Weghorn 2024-09-17 13:49:25 UTC
(In reply to Rafael Lima from comment #2)
> Apparently this is set via the "tab-pos" property of the "GtkNotebook",
> defining the position of all child tabs.
> 
> See f.i. the file paradialog.ui in Heiko's patch.

As far as I understand, "tab-pos" defines whether the whole tab bar is on the top or on the left, not the position of the icons within the single tab items.
(Changing it to "top" moves the tab bar to the top of the dialog, but leaves the icons left of the text in the individual tab items.)

The GtkNotebook doc [1] also mentions that `tab_label` is a GtkWidget, not just a string/char*, which allows for much more flexibility for each single item.

[1] https://docs.gtk.org/gtk3/method.Notebook.append_page.html
Comment 4 Heiko Tietze 2025-03-31 10:52:05 UTC
Created attachment 200100 [details]
Vertical tabs with icons

If a dialog contains many VT we cannot place the icon above the label. Using the same method (GtkBox with label and image inside the tab grid) but now with horizontal orientation ends up in this mess.

Keep also an eye on the hover feedback: "text grid" is selected and the mouse cursor hovers over page. It works well with gtk3 and kf6, okayish for gen, not at all for win and macOS.
Comment 5 Patrick (volunteer) 2025-06-10 14:03:06 UTC
Created attachment 201180 [details]
Snapshot on macOS with https://gerrit.libreoffice.org/c/core/+/186191 patch
Comment 6 Commit Notification 2025-06-10 14:05:13 UTC
Heiko Tietze committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/b787dfcc08af0ae1358c69fe4fcbd50af4f444d5

Resolves tdf#163008 - Vertical tabs with small icons

It will be available in 26.2.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 7 Patrick (volunteer) 2025-06-10 14:06:11 UTC
Created attachment 201181 [details]
Rough patch that uses buttons instead of tabs for vertical tabs on macOS
Comment 8 Patrick (volunteer) 2025-06-10 14:14:26 UTC
Created attachment 201182 [details]
Snapshot of macOS with rough patch in attachment.cgi #201181
Comment 9 Patrick (volunteer) 2025-06-10 14:22:48 UTC
Created attachment 201184 [details]
Rough patch 2 that looks more like the macOS System Settings application
Comment 10 Heiko Tietze 2025-06-10 14:23:25 UTC
(In reply to Patrick (volunteer) from comment #7)
> Created attachment 201181 [details]
> Rough patch that uses buttons instead of tabs for vertical tabs on macOS

It definitely becomes more mac'ish but what I dislike is the low button. It needs at least 2px margin from the 28px (IIRC) icons which makes it 32px as defined in c'tor:

Size gridSize(140, (nWinStyle & WB_SMALLICON) ? 32 : 70);

All other OS/DE respect this but macOS just adds white space around the TabItem or PushButton.
Comment 11 Patrick (volunteer) 2025-06-10 14:24:43 UTC
Created attachment 201186 [details]
Snapshot of macOS with rough patch 2 in attachment #201184 [details]
Comment 12 Patrick (volunteer) 2025-06-10 15:15:33 UTC
(In reply to Heiko Tietze from comment #10)
> All other OS/DE respect this but macOS just adds white space around the
> TabItem or PushButton.

Found a way to increase the height of a native push button by setting its bezel type to NSBezelStyleFlexiblePush. Not sure how to wire up setting that bezel style though:

diff --git a/vcl/osx/salnativewidgets.cxx b/vcl/osx/salnativewidgets.cxx
index dd89133353bb..fcdaa10856bc 100644
--- a/vcl/osx/salnativewidgets.cxx
+++ b/vcl/osx/salnativewidgets.cxx
@@ -561,7 +561,8 @@ bool AquaGraphicsBackendBase::performDrawNativeControl(ControlType nType,
         case ControlType::Pushbutton:
             {
                 NSControlSize eSizeKind = NSControlSizeRegular;
-                NSBezelStyle eBezelStyle = NSBezelStyleRounded;
+                // NSBezelStyle eBezelStyle = NSBezelStyleRounded;
+                NSBezelStyle eBezelStyle = NSBezelStyleFlexiblePush;
 
                 PushButtonValue const *pPBVal = aValue.getType() == ControlType::Pushbutton ?
                                                 static_cast<PushButtonValue const *>(&aValue) : nullptr;
@@ -574,7 +575,7 @@ bool AquaGraphicsBackendBase::performDrawNativeControl(ControlType nType,
                 }
                 else if ((pPBVal && pPBVal->mbSingleLine) || rc.size.height < PUSH_BUTTON_NORMAL_HEIGHT * 3 / 2)
                 {
-                    GetThemeMetric(kThemeMetricPushButtonHeight, &nPaintHeight);
+                    // GetThemeMetric(kThemeMetricPushButtonHeight, &nPaintHeight);
                 }
                 else
                 {
Comment 13 Heiko Tietze 2025-06-10 15:31:03 UTC
(In reply to Patrick (volunteer) from comment #12)
> Found a way to increase the height of a native push button...
Sounds promising. A bit weird to implement this in order to make VT work, but... comments are patient. Mind to push a patch?
Comment 14 Patrick (volunteer) 2025-06-10 20:08:10 UTC
(In reply to Heiko Tietze from comment #13)
> Sounds promising. A bit weird to implement this in order to make VT work,
> but... comments are patient. Mind to push a patch?

I have uploaded the following patch. Still needs some "fit and finish" work though:

https://gerrit.libreoffice.org/c/core/+/186340
Comment 15 Patrick (volunteer) 2025-06-10 20:12:45 UTC
Created attachment 201190 [details]
Snapshot of vertical tabs on macOS with https://gerrit.libreoffice.org/c/core/+/186340 patch
Comment 16 Patrick (volunteer) 2025-06-10 23:59:06 UTC
Created attachment 201191 [details]
Snapshot in macOS Light Mode
Comment 17 Patrick (volunteer) 2025-06-10 23:59:41 UTC
Created attachment 201192 [details]
Snapshot in macOS Dark Mode
Comment 18 Commit Notification 2025-06-11 14:57:24 UTC
Patrick Luby committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/b9a390c5add74147bf8ed1b9b3658e7a36c20a66

Related: tdf#163008 draw the selected tab using a push button on macOS

It will be available in 26.2.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 19 Patrick (volunteer) 2025-06-11 15:03:35 UTC
I have committed a patch makes vertical tabs on macOS look and behave closer to the current (macOS Sequoia) vertical tabs in Apple's System Settings application. My latest commit should be in tomorrow's (12 June 2025) nightly master builds:

https://dev-builds.libreoffice.org/daily/master/current.html

Note for macOS testers: the nightly master build installer does *not* overwrite any LibreOffice official versions. Instead, it will be installed as a separate application called "LibreOfficeDev" in the /Applications folder.

Because this is a "test" build, you will need to do the following steps before you launch the LibreOfficeDev application:

1. Go to the Finder and navigate to the /Applications/Utilities folder
2. Launch the "Terminal" application
3. Paste the following command in the Terminal application window and press the Return key to execute the command:

   xattr -d com.apple.quarantine /Applications/LibreOfficeDev.app
Comment 20 Commit Notification 2025-06-11 21:54:23 UTC
Heiko Tietze committed a patch related to this issue.
It has been pushed to "libreoffice-25-8":

https://git.libreoffice.org/core/commit/f14064478726b8b35d45654d0162616bf01959ba

Resolves tdf#163008 - Vertical tabs with small icons

It will be available in 25.8.0.0.beta2.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 21 Commit Notification 2025-06-12 00:59:42 UTC
Patrick Luby committed a patch related to this issue.
It has been pushed to "libreoffice-25-8":

https://git.libreoffice.org/core/commit/6d4512517a31baf44fe38df7ed66414684b71088

Related: tdf#163008 draw the selected tab using a push button on macOS

It will be available in 25.8.0.0.beta2.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 22 Commit Notification 2025-06-13 07:04:31 UTC
Xisco Fauli committed a patch related to this issue.
It has been pushed to "libreoffice-25-8":

https://git.libreoffice.org/core/commit/01c02f3e3affec317bf5eb2de087dbe3dc556cc1

Revert "Related: tdf#163008 draw the selected tab using a push button on macOS"

It will be available in 25.8.0.0.beta2.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 23 Commit Notification 2025-06-13 07:04:34 UTC
Xisco Fauli committed a patch related to this issue.
It has been pushed to "libreoffice-25-8":

https://git.libreoffice.org/core/commit/3486101e4996fed94cd3153b7fe7b5fe4b6006ee

Revert "Resolves tdf#163008 - Vertical tabs with small icons"

It will be available in 25.8.0.0.beta2.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.