fancier tabs

This commit is contained in:
end-4
2025-04-18 12:43:39 +02:00
parent d8d812cf47
commit 02151a93f6
6 changed files with 225 additions and 23 deletions
@@ -0,0 +1,67 @@
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Io
import Quickshell.Widgets
TabButton {
id: button
property string buttonText
property string buttonIcon
property bool selected: false
property int tabContentWidth: contentItem.children[0].implicitWidth
height: buttonBackground.height
PointingHandInteraction {}
background: Rectangle {
id: buttonBackground
radius: Appearance.rounding.small
implicitHeight: 50
color: (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : Appearance.transparentize(Appearance.colors.colLayer1Hover, 1))
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
contentItem: Item {
anchors.centerIn: buttonBackground
ColumnLayout {
anchors.centerIn: parent
spacing: 0
MaterialSymbol {
visible: buttonIcon?.length > 0
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter
text: buttonIcon
font.pixelSize: 24
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
StyledText {
id: buttonTextWidget
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Appearance.font.pixelSize.small
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
text: buttonText
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
}
}
}
@@ -12,6 +12,7 @@ TabButton {
property string buttonIcon
property bool selected: false
height: buttonBackground.height
property int tabContentWidth: buttonBackground.width - buttonBackground.radius*2
PointingHandInteraction {}
@@ -27,9 +28,6 @@ TabButton {
easing.type: Appearance.animation.elementDecel.type
}
}
// border.color: button.activeFocus ? Appearance.m3colors.m3secondary : Appearance.transparentize(Appearance.m3colors.m3secondary, 1)
// border.width: button.activeFocus ? 2 : 0
}
contentItem: Item {
anchors.centerIn: buttonBackground
@@ -37,9 +35,11 @@ TabButton {
anchors.centerIn: parent
spacing: 0
MaterialSymbol {
visible: buttonIcon?.length > 0
Layout.rightMargin: 5
verticalAlignment: Text.AlignVCenter
text: buttonIcon
font.pixelSize: Appearance.font.pixelSize.larger
font.pixelSize: Appearance.font.pixelSize.huge
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
Behavior on color {
ColorAnimation {
@@ -50,9 +50,10 @@ TabButton {
}
StyledText {
id: buttonTextWidget
horizontalAlignment: Text.AlignHCenter
text: buttonText
verticalAlignment: Text.AlignVCenter
font.pixelSize: Appearance.font.pixelSize.small
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
text: buttonText
Behavior on color {
ColorAnimation {
duration: Appearance.animation.elementDecel.duration