kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

refractor secondary tab bar

Browse Source
This commit is contained in:
end-4
2025-11-07 12:56:08 +01:00
parent 96cda9e6dd
commit e5e85db75d
4 changed files with 78 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dots/.config/quickshell/ii/modules/common/widgets/SecondaryTabBar.qml
+53
View File
@@ -0,0 +1,53 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.modules.common
import qs.modules.common.models
TabBar {
id: root
property real indicatorPadding: 8
Layout.fillWidth: true
background: Item {
WheelHandler {
onWheel: (event) => {
if (event.angleDelta.y < 0) root.incrementCurrentIndex();
else if (event.angleDelta.y > 0) root.decrementCurrentIndex();
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
}
Rectangle {
id: activeIndicator
z: 9999
anchors.bottom: parent.bottom
topLeftRadius: height
topRightRadius: height
bottomLeftRadius: 0
bottomRightRadius: 0
color: Appearance.colors.colPrimary
// Animation
property real baseWidth: root.width / root.count
AnimatedTabIndexPair {
id: idxPair
index: root.currentIndex
}
height: 3
x: Math.min(idxPair.idx1, idxPair.idx2) * baseWidth + root.indicatorPadding
width: ((Math.max(idxPair.idx1, idxPair.idx2) + 1) * baseWidth - root.indicatorPadding) - x
}
Rectangle { // Tabbar bottom border
id: tabBarBottomBorder
z: 9998
anchors.bottom: parent.bottom
height: 1
anchors {
left: parent.left
right: parent.right
}
color: Appearance.colors.colOutlineVariant
}
}
}
dots/.config/quickshell/ii/modules/common/widgets/SecondaryTabButton.qml
+12 -10
View File
@@ -1,6 +1,6 @@
import qs.modules.common
import qs.modules.common.widgets
import qs.modules.common.functions
import qs.modules.common.widgets
import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Controls
@@ -10,14 +10,12 @@ TabButton {
id: root
property string buttonText
property string buttonIcon
property bool selected: false
property int rippleDuration: 1200
height: buttonBackground.height
property int tabContentWidth: buttonBackground.width - buttonBackground.radius*2
property color colBackground: ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
property color colBackgroundHover: Appearance.colors.colLayer1Hover
property color colRipple: Appearance.colors.colLayer1Active
property color colBackground: ColorUtils.transparentize(Appearance.colors.colSurfaceContainer)
property color colBackgroundHover: ColorUtils.transparentize(Appearance.colors.colOnSurface, root.checked ? 1 : 0.95)
property color colRipple: ColorUtils.transparentize(Appearance.colors.colOnSurface, 0.95)
PointingHandInteraction {}
@@ -91,8 +89,12 @@ TabButton {
background: Rectangle {
id: buttonBackground
anchors {
fill: parent
margins: 3
}
radius: Appearance?.rounding.normal
implicitHeight: 37
implicitHeight: 42
color: (root.hovered ? root.colBackgroundHover : root.colBackground)
layer.enabled: true
layer.effect: OpacityMask {
@@ -156,8 +158,8 @@ TabButton {
verticalAlignment: Text.AlignVCenter
text: buttonIcon
iconSize: Appearance.font.pixelSize.huge
fill: selected ? 1 : 0
color: selected ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1
fill: root.checked ? 1 : 0
color: root.checked ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
@@ -167,7 +169,7 @@ TabButton {
id: buttonTextWidget
verticalAlignment: Text.AlignVCenter
font.pixelSize: Appearance.font.pixelSize.small
color: selected ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1
color: root.checked ? Appearance.colors.colPrimary : Appearance.colors.colOnLayer1
text: buttonText
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)