Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix size of tab items when large text padding is used #989

Conversation

HeikoKlare
Copy link
Contributor

@HeikoKlare HeikoKlare commented Jan 19, 2024

This is follow-up to #785, which introduced an iconless tab folder design that allows to disable tab item images and uses centered text a large padding within tab items as a separator instead. This visualization option for tab folders currently works as follows: A large padding is applied to the tab item as a separator with the text being centered within this padding. For tabs showing a close icon (which in particular is the currently selected on), this icon is added right at the right end of the tab item, such that the text is centered in between the left end of the tab item and the close button.

As discussed downstream in eclipse-platform/eclipse.platform.ui#1071, this does not look perfect and while the padding is necessary as a separator for tabs only containing a text, having close icons and, in case of the selected tab, also a different background is sufficient as a separator. @thomasritter, @sratz and I evaluated different options and came up with the concept for what is proposed in this PR.

This change adapts the appearance of tab items having a close icon when having images disabled. It uses the same size for the tab as if no close icon was drawn and then reduces the area in which the text is centered to the remaining space left to the close icon. This looks cleaner and has the effect that tabs within a tab folder have a fixed width, such that when changing the selection all tabs keep their size and positions. Only the texts within the tab items change their positions depending on whether the close icon is shown or not.

This is a standalone screenshot of how the padding will look like:
image

This is how it looks now when switching from "Problems" to "Console" tab:
image

This is how it will look after this PR when switching from "Problems" to "Console" tab:
image

Note that this also improves the appearance when a tab folder only has a single item, as it will not have a large padding at the left.
Here is how it looks before this PR:
image

Here is how it looks after this PR:
image

@shubhamWaghmare-sap @praveen-skp FYI as original contributors of this functionality.

@HeikoKlare HeikoKlare requested a review from sratz January 19, 2024 11:52
@@ -2972,19 +2972,17 @@ boolean setItemSize(GC gc) {
for (int i = 0; i < items.length; i++) {
CTabItem tab = items[i];
int width = widths[i];
if (tab.height != tabHeight || tab.width != width) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a "dangerous" optimization as it assumes that tab items only have changed (and need some recalculation) if their size changed. That assumptions breaks with this PR.

Copy link
Contributor

github-actions bot commented Jan 19, 2024

Test Results

   299 files  ±0     299 suites  ±0   5m 44s ⏱️ -42s
 4 098 tests ±0   4 090 ✅ ±0   8 💤 ±0  0 ❌ ±0 
12 206 runs  ±0  12 133 ✅ ±0  73 💤 ±0  0 ❌ ±0 

Results for commit 3779c51. ± Comparison against base commit 2cdfd97.

♻️ This comment has been updated with latest results.

@HeikoKlare HeikoKlare marked this pull request as ready for review January 19, 2024 12:02
return 0;
}

private boolean applyLargeTextPadding(CTabFolder tabFolder) {
private boolean shouldApplyLargeTextPadding(CTabFolder tabFolder) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The present condition results in a large text padding only when showing images is disabled for all tabs (selected and unselected) of the tab folder.
But this leads to no text padding/margin for unselected tabs when showing images is disabled for all 'unselected' tabs.
image

  • Separation between unselected tabs takes a hit,

Similarly, there is no margin or padding applied to the selected tab when only the selected tab image is set to be hidden.
image

Suggested change
private boolean shouldApplyLargeTextPadding(CTabFolder tabFolder) {
private boolean shouldApplyLargeTextPadding(CTabItem item) {
CTabFolder folder = item.getParent();
return (!folder.showSelectedImage && (item.state & SWT.SELECTED) != 0) ||
(!folder.showUnselectedImage && (item.state & SWT.SELECTED) == 0);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's true, but that is the behavior even without the changes in this PR. And in particular, that is the behavior that has been existing for years and must not be changed.
The padding-based separation of tabs, as introduced with #785, is only active if images are completely disabled for tabs. This is currently identified by both showing images of selected and unselected tabs is set to false, as the former was always true before #785, so that this way of configuration cannot produce regressions. Still, we should think of more explicit approach to apply text-based padding to a CTabFolder (see #785 (comment)).

Note that #945 is also still open for this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the context of avoiding regression it makes sense to not apply this suggestion. Will evaluate this on #945 👍

Copy link
Member

@sratz sratz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. The extracted methods make the code much more readable and understandable 👍

The recently introduced option to not show images in tab folders
currently works as follows: A large padding is applied to the tab item
as a separator with the text being centered within this padding. For
tabs showing a close icon (which in particular is the currently selected
on), this icon is added right at the right end of the tab item, such
that the text is centered in between the left end of the tab item and
the close button. This does not look perfect and while the padding is
necessary as a separator for tabs only containing a text, having close
icons and, in case of the selected tab, also a different background is
sufficient as a separator.

This change adapts the appearance of tab items having a close icon when
having images disabled. It uses the same size for the tab as if no close
icon was drawn and then reduces the area in which the text is centered
to the remaining space left to the close icon. This looks cleaner and
has the effect that tabs within a tab folder have a fixed with, such
that when changing the selection all tabs keep their size and positions.
Only the texts within the tab items change their positions depending on
whether the close icon is shown or not.
@HeikoKlare HeikoKlare force-pushed the iconless-tabs-selected-appearance branch from 0bf36e3 to 3779c51 Compare January 30, 2024 15:05
@HeikoKlare
Copy link
Contributor Author

Thanks for your reviews, @shubhamWaghmare-sap @sratz!

@HeikoKlare HeikoKlare merged commit 6e665a6 into eclipse-platform:master Jan 30, 2024
13 checks passed
@HeikoKlare HeikoKlare deleted the iconless-tabs-selected-appearance branch January 30, 2024 17:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants