Commit 90f927f3 authored by Noah Davis's avatar Noah Davis 🌵
Browse files

[TabButton] Change padding, how color set is picked and background

Still not really satisfied with the looks, but it's a bit better.
parent b131c571
......@@ -3,7 +3,6 @@
*/
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Templates 2.15 as T
import org.kde.kirigami 2.14 as Kirigami
import "impl"
......@@ -11,8 +10,8 @@ import "impl"
T.TabButton {
id: control
readonly property bool __inHeader: Controls.TabBar.position === Controls.TabBar.Header
readonly property bool __inFooter: Controls.TabBar.position === Controls.TabBar.Footer
readonly property bool __inHeader: T.TabBar.position === T.TabBar.Header
readonly property bool __inFooter: T.TabBar.position === T.TabBar.Footer
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding,
......@@ -22,12 +21,28 @@ T.TabButton {
implicitIndicatorHeight + topPadding + bottomPadding)
padding: Kirigami.Units.mediumSpacing
leftPadding: {
if ((!contentItem.hasIcon && contentItem.textBesideIcon) // False if contentItem has been replaced
|| display == T.AbstractButton.TextOnly
|| display == T.AbstractButton.TextUnderIcon) {
return Kirigami.Units.mediumHorizontalPadding
} else {
return control.horizontalPadding
}
}
rightPadding: {
if (contentItem.hasLabel && display != T.AbstractButton.IconOnly) { // False if contentItem has been replaced
return Kirigami.Units.mediumHorizontalPadding
} else {
return control.horizontalPadding
}
}
spacing: Kirigami.Units.mediumSpacing
icon.width: Kirigami.Units.iconSizes.auto
icon.height: Kirigami.Units.iconSizes.auto
Kirigami.Theme.colorSet: Kirigami.Theme.Button
Kirigami.Theme.colorSet: control.checked || control.down ? Kirigami.Theme.Button : (T.TabBar.tabBar.Kirigami.Theme.colorSet ?? Kirigami.Theme.Button)
Kirigami.Theme.inherit: !(background && background.visible)
contentItem: IconLabelContent {
......@@ -35,21 +50,25 @@ T.TabButton {
}
//TODO: tweak the appearance. This is just to have something usable and reasonably close to what we want.
background: Rectangle {
visible: control.checked
background: Kirigami.ShadowedRectangle {
// visible: control.checked
// && !(control.ListView.view
// && control.ListView.view.highlightItem
// && control.ListView.view.highlightItem.visible)
implicitHeight: Kirigami.Units.mediumControlHeight
implicitWidth: implicitHeight
color: Kirigami.Theme.alternateBackgroundColor
color: control.checked || control.down ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
Rectangle {
id: line
id: separatorLine
anchors {
left: parent.left
right: parent.right
top: control.__inFooter ? parent.top : undefined
bottom: control.__inHeader ? parent.bottom : undefined
}
height: Kirigami.Units.highlightLineThickness
color: Kirigami.Theme.focusColor
height: control.checked ? Kirigami.Units.highlightLineThickness : 1
color: control.hovered || control.checked || control.visualFocus ? Kirigami.Theme.focusColor : Kirigami.Theme.separatorColor
}
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment