Replace tab's title ellpsis by a fade-out

[kelson42]

We currently use an ellipsis (...) if the title of the tab is to big to fit to the tab. But we should have a fade out instead. Like in the mockup, see:

[yashasvi-goel]

Can I work on this issue?

[kelson42]

@yashasvi-goel Yes :)

[yashasvi-goel]

I have written the CSS for completing this task. I'm unable to replace the CSS in place of setElideMode().

[kelson42]

I have written the CSS for completing this task. I'm unable to replace the CSS in place of setElideMode().

@mgautierfr @jetownfeve21 Any idea?
@yashasvi-goel Please make a WIP PR.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[kelson42]

From @asashnov

fade-out seems to need to reimplement our own analog of QTabBar so it can worth 10+ hours. I doubt if it really that important

Alternatively, we can do a research to see maybe that change will come in new versions of Qt; or file a bug otherwise, hope someone else will implement it

Also, I can search if any other open source application have it. Firefox and Chromium doesn't use Qt, but probably there Konquerror in KDE, or some other web-browser or some other Qt-based app have those tabs

I looked into the implementation of QTabBar, and didn't see other way as to copy and tune that code

[kelson42]

@asashnov I don't understand why you would need to subclass QTabBar. What is the problem exactly with the current PR? You apply a style to the QTabBar::tab which is only the text part of tab, so if the ext is short, the QTabBar::tab has a short width.. and so the fadout applies in the middle of the tab?

[asashnov]

@kelson42 Yes, It would not be a big problem if fadeout applies to the end of the tab. But tab text is aligned to center now, and it is not customizable with text-align: left because it is not supported by QTabBar (only by QPushButton and QProgressBar).
https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties

UPDATE: on Windows tab text may be aligned left by default, and 'center' on Linux and MacOS.

[kelson42]

@asashnov Can you measure the width of the text and apply conditionaly the fadeout style?

[asashnov]

@kelson42 two things to consider here:

• on Mac and Linux the text in tab is centered (see screenshot)
• we cannot apply fadeout style to the individual tab, only to all of them.

Here is the screenshot from Linux, on Mac maybe similar:

[asashnov]

We can carry about the selected tab only, by measuring text width and applying the style for long tab titles. But then we can see faded or not labels in the other (non-active) tabs depending on the selected.

[asashnov]

Also, I looked through KDE screenshots in Google Pictures and haven't seen fade-out in tabs (unless it was Google Chrome in a screenshot, not KDE program).

[kelson42]

@asashnov Th fade outapply to the roght of the text widget, there is no way to force its size so it fill the tab container?

[asashnov]

@kelson42 The current style looks like to be applied using relative size:

    color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
           stop: 0.8 #2A2A2A, stop: 1.0 #E1E1E1);

So 0 is the beginning of text, 0.8 is 20% to the end, and 1 is the end:

(in this picture, the right leg of the second A in tab header is faded out).

[kelson42]

@asashnov I'm not sure to fully understand your last comment like an answer to my latest question... An other approach would be to put the fade-out on the cross picture and make the text going behind it

[asashnov]

@kelson42 I'll see if I can expand the text widget to the whole tab header area.

[asashnov]

A style sheet can be applied only to a Widget.
But one tab in QTabBar is not a widget itself, it's a part of QTabBar.

There are 'Sub-Controls' and 'Pseudo States' which can restrict the appliance
of the style to specified parts of a widget:

https://doc.qt.io/qt-5/stylesheet-syntax.html

The tabs support the :only-one, :first, :last, :middle,
:previous--selected, :next-selected, :selected pseudo states:

https://doc.qt.io/qt-5/stylesheet-reference.html

So not possible to select tabs by number (let's say, 3 and 5 with long texts).
There are few opened issue on QT about that:

• https://bugreports.qt.io/browse/QTBUG-72063 (have tab num in a selector)
• https://bugreports.qt.io/browse/QTBUG-840 (set background per-tab)
• https://bugreports.qt.io/browse/QTBUG-11202 (duplicate)

Qt documentation also provides several examples on customization QTabBar,
but again, there is no sample of how to style an individual tab:

https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar

KDE Konsole application uses tabs and allows to enter an arbitrary Qt Style Sheet to customize it. But it's not possible to customize individual tabs also:

https://docs.kde.org/trunk5/en/applications/konsole/tabbarstylsheet.html
https://docs.kde.org/trunk5/en/applications/konsole/tabbarstylsheet.html

PS. But there is a little chance that this kind of selector can be implemented in the code, just not documented.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[asashnov]

Rebased, squashed.
The current implementation uses drawing on top after QTabbar in paintEvent().

[asashnov]

Currently PR #538 is in 'Changes Requested' state, but this status is wrong, I uploaded a new code:

5 screenshots from GitHub pull requests

I though it may be a known bug in GitHub, but it's not: In GitHub documentation and on the Internet I haven't found any sign that GitHub Pull Request and 'requested changes' can be break by git rebase.