Bug 394296

Created attachment 112678 [details]
ElementaryOS segmented control example 2

(Note that making this into a Segmented Control-style widget would automatically fix Bug 394295)

Created attachment 117553 [details]
No frame and not touching

Consider the following code:


ColumnLayout {
    anchors.fill: parent

    TabBar {
        id: tabView

        TabButton {
            text: "Red"
        }
        TabButton {
            text: "Green"
        }
        TabButton {
            text: "Blue"
        }
    }

    SwipeView {
        Layout.fillWidth: true
        Layout.fillHeight: true

        clip: true

        currentIndex: tabView.currentIndex

        Rectangle {
            color: "Red"
        }
        Rectangle {
            color: "Green"
        }
        Rectangle {
            color: "Blue"
        }
    }
}


See the attachment for the visual result. The tab bar doesn't draw a frame like QWidgets, but it doesn't touch the content area beneath it either. The result is awkward and weird.

BTW the "tabs don't touch the line below them" issue is Bug 394295.

...Which is now fixed.

So the issue here is that the tab QQC2 tab bar should draw a frame (with internal padding) around its content area, just like the QQC1 and QWidgets versions do/did.

>So the issue here is that the tab QQC2 tab bar should draw a frame (with internal padding) around its content area,

I don't think that's do-able out of the box in the theme.
(QQC2's component is more like QTabBar than QTabWidget in QWidget terms)

However, it's still do-able on the client side. I've just pushed a tabbar.qml in the tests folder of QQC2.
I think it's spot-on. Let me know if there's any issues.

Maybe we could/should wrap it all as one item somewhere, but not here.

Thanks David, that's just about perfect. Only two minor visual issues:
- With this, the one-pixel line below the tab bar is now unnecessary; the active tab should appear to be a vertical extension of the view below it, just like a QWidgets tab
- The frame doesn't have rounded corners like the QWidgets one

(In reply to David Edmundson from comment #6)
> >So the issue here is that the tab QQC2 tab bar should draw a frame (with internal padding) around its content area,
> 
> I don't think that's do-able out of the box in the theme.
> (QQC2's component is more like QTabBar than QTabWidget in QWidget terms)
> 
> However, it's still do-able on the client side. I've just pushed a
> tabbar.qml in the tests folder of QQC2.
> I think it's spot-on. Let me know if there's any issues.
> 
> Maybe we could/should wrap it all as one item somewhere, but not here.

we may end up needing a hmm "TabbarView" in Kirigami, ialready tought about an api for such a thing in the past, tough never really started it as i am still not sure that's something that should be up to us...
on my side is one of those frustrating things that will probably be done upstream in qqc2 a short time after i publish ours :p

(In reply to Marco Martin from comment #8)
> (In reply to David Edmundson from comment #6)
> > >So the issue here is that the tab QQC2 tab bar should draw a frame (with internal padding) around its content area,
> > 
> > I don't think that's do-able out of the box in the theme.
> > (QQC2's component is more like QTabBar than QTabWidget in QWidget terms)
> > 
> > However, it's still do-able on the client side. I've just pushed a
> > tabbar.qml in the tests folder of QQC2.
> > I think it's spot-on. Let me know if there's any issues.
> > 
> > Maybe we could/should wrap it all as one item somewhere, but not here.
> 
> we may end up needing a hmm "TabbarView" in Kirigami, ialready tought about
> an api for such a thing in the past, tough never really started it as i am
> still not sure that's something that should be up to us...
> on my side is one of those frustrating things that will probably be done
> upstream in qqc2 a short time after i publish ours :p

on the API:
TabView {
currentIndex: 0

        Rectangle {
            color: "Red"
        }
        Rectangle {
            color: "Green"
        }
        Rectangle {
            color: "Blue"
        }
}

(In reply to Marco Martin from comment #8)
> (In reply to David Edmundson from comment #6)
> > >So the issue here is that the tab QQC2 tab bar should draw a frame (with internal padding) around its content area,
> > 
> > I don't think that's do-able out of the box in the theme.
> > (QQC2's component is more like QTabBar than QTabWidget in QWidget terms)
> > 
> > However, it's still do-able on the client side. I've just pushed a
> > tabbar.qml in the tests folder of QQC2.
> > I think it's spot-on. Let me know if there's any issues.
> > 
> > Maybe we could/should wrap it all as one item somewhere, but not here.
> 
> we may end up needing a hmm "TabbarView" in Kirigami, ialready tought about
> an api for such a thing in the past, tough never really started it as i am
> still not sure that's something that should be up to us...
> on my side is one of those frustrating things that will probably be done
> upstream in qqc2 a short time after i publish ours :p
on the API:
TabView {
    property Item delegate //optional: the TabButton, which can be overridden if one wants stuff like a close button on a tab, icons and what not

    //Items are just declared into it (perhaps could provide also imperative
    // functions like append, insertAt, remove)
    // items must have a "title" property, at least with the default delegate (so, recommended being pages, either qqc2 or kirigami pages)
        Page {
            title: "Tab1"
        }
        Rectangle {
            property string title: "Tab2"
        }
        Page {
            title: "Blue"
        }
}

Not really relevant to qqc2-desktop-style since TabBar is indeed just that: a tab bar. If we want a whole tabbed *view* like I'm requesting, that would need to be a Kirigami component. It could presumably have a desktop appearance and a mobile appearance, as tab bars tens to look different on the two platforms. As such this seems at least semi-reasonable to have as a convergent Kirigami component; moving there.

(In reply to Nate Graham from comment #11)
> Not really relevant to qqc2-desktop-style since TabBar is indeed just that:
> a tab bar. If we want a whole tabbed *view* like I'm requesting, that would
> need to be a Kirigami component. It could presumably have a desktop
> appearance and a mobile appearance, as tab bars tens to look different on
> the two platforms. As such this seems at least semi-reasonable to have as a
> convergent Kirigami component; moving there.

One thing that makes me a bit hesitant ti add that is the existence of SwipeView which is kiiiida that but not really.
In retrospect was probably a mistake having this component, as there are many things abput it i don't like. but kinda feel that adding a similar one now would kinda be... api clutter?

Yeah maybe it could live in kirigami-extras, or kdeclarative?

> on my side is one of those frustrating things that will probably be done upstream in qqc2 a short time after i publish ours :p

that never worked out, and we are still missing QTabWidget equivalent and having to work around `z: 1` and `Layout.bottomMargin: -1` stacking things. Not to mention, background of QQC2.Frame (used in kwin/kcms/decoration) does not match the color of TabButton; in fact, frame is transparent with a border — while Pane is solid but without border. This is a mess.