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

fancier tabs

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml
+1 -1
View File
@@ -94,7 +94,7 @@ Rectangle {
property int remainingTasks: Todo.list.filter(task => !task.done).length;
Layout.margins: 10
Layout.leftMargin: 0
text: `${DateTime.day} ${DateTime.month} ${DateTime.year} • ${remainingTasks} task${remainingTasks > 1 ? "s" : ""}`
text: `${DateTime.day} ${DateTime.month} ${DateTime.year} • ${remainingTasks} task${remainingTasks > 1 ? "s" : ""}`
font.pixelSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnLayer1
}
.config/quickshell/modules/sidebarRight/CenterWidgetGroup.qml
+110
View File
@@ -0,0 +1,110 @@
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/services"
import "./calendar"
import "./todo"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
Rectangle {
id: root
radius: Appearance.rounding.normal
color: Appearance.colors.colLayer1
property int currentTab: 0
property var tabButtonList: [{"icon": "notifications", "name": "Notifications"}, {"icon": "volume_up", "name": "Volume mixer"}]
ColumnLayout {
anchors.margins: 5
anchors.fill: parent
spacing: 0
TabBar {
id: tabBar
Layout.fillWidth: true
currentIndex: currentTab
onCurrentIndexChanged: currentTab = currentIndex
background: Item {
WheelHandler {
onWheel: (event) => {
if (event.angleDelta.y < 0)
tabBar.currentIndex = Math.min(tabBar.currentIndex + 1, root.tabButtonList.length - 1)
else if (event.angleDelta.y > 0)
tabBar.currentIndex = Math.max(tabBar.currentIndex - 1, 0)
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
}
}
Repeater {
model: root.tabButtonList
delegate: PrimaryTabButton {
selected: (index == currentTab)
buttonText: modelData.name
buttonIcon: modelData.icon
}
}
}
Item { // Tab indicator
id: tabIndicator
Layout.fillWidth: true
height: 3
property bool enableIndicatorAnimation: false
Connections {
target: root
function onCurrentTabChanged() {
tabIndicator.enableIndicatorAnimation = true
}
}
Rectangle {
color: Appearance.m3colors.m3primary
radius: Appearance.rounding.full
z: 2
anchors.fill: parent
anchors.leftMargin: {
const tabCount = root.tabButtonList.length
const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
const fullTabSize = tabBar.width / tabCount;
return fullTabSize * currentTab + (fullTabSize - targetWidth) / 2;
}
anchors.rightMargin: {
const tabCount = root.tabButtonList.length
const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
const fullTabSize = tabBar.width / tabCount;
return fullTabSize * (tabCount - currentTab - 1) + (fullTabSize - targetWidth) / 2;
}
Behavior on anchors.leftMargin {
enabled: tabIndicator.enableIndicatorAnimation
SmoothedAnimation {
velocity: Appearance.animation.positionShift.velocity
}
}
Behavior on anchors.rightMargin {
enabled: tabIndicator.enableIndicatorAnimation
SmoothedAnimation {
velocity: Appearance.animation.positionShift.velocity
}
}
}
}
SwipeView {
id: swipeView
Layout.topMargin: 10
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
currentIndex: currentTab
onCurrentIndexChanged: currentTab = currentIndex
Item{}
Item{}
}
}
}
.config/quickshell/modules/sidebarRight/SidebarRight.qml
+1 -3
View File
@@ -140,12 +140,10 @@ Scope {
}
// Center widget group
Rectangle {
CenterWidgetGroup {
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
Layout.fillWidth: true
radius: Appearance.rounding.normal
color: Appearance.colors.colLayer1
}
BottomWidgetGroup {
.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
+39 -13
View File
@@ -50,9 +50,9 @@ Item {
WheelHandler {
onWheel: (event) => {
if (event.angleDelta.y < 0)
currentTab = Math.min(currentTab + 1, root.tabButtonList.length - 1)
tabBar.currentIndex = Math.min(tabBar.currentIndex + 1, root.tabButtonList.length - 1)
else if (event.angleDelta.y > 0)
currentTab = Math.max(currentTab - 1, 0)
tabBar.currentIndex = Math.max(tabBar.currentIndex - 1, 0)
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
}
@@ -60,7 +60,7 @@ Item {
Repeater {
model: root.tabButtonList
delegate: StyledTabButton {
delegate: SecondaryTabButton {
selected: (index == currentTab)
buttonText: modelData.name
buttonIcon: modelData.icon
@@ -68,21 +68,47 @@ Item {
}
}
Item {
Item { // Tab indicator
id: tabIndicator
Layout.fillWidth: true
height: 3
property bool enableIndicatorAnimation: false
Connections {
target: root
function onCurrentTabChanged() {
tabIndicator.enableIndicatorAnimation = true
}
}
Rectangle {
property int indicatorPadding: 15
id: indicator
color: Appearance.m3colors.m3primary
height: 3
radius: Appearance.rounding.full
width: tabBar.width / root.tabButtonList.length - indicatorPadding * 2
x: indicatorPadding + tabBar.width / root.tabButtonList.length * currentTab
z: 2
Behavior on x { SmoothedAnimation {
velocity: Appearance.animation.positionShift.velocity
} }
anchors.fill: parent
anchors.leftMargin: {
const tabCount = root.tabButtonList.length
const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
const fullTabSize = tabBar.width / tabCount;
return fullTabSize * currentTab + (fullTabSize - targetWidth) / 2;
}
anchors.rightMargin: {
const tabCount = root.tabButtonList.length
const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
const fullTabSize = tabBar.width / tabCount;
return fullTabSize * (tabCount - currentTab - 1) + (fullTabSize - targetWidth) / 2;
}
Behavior on anchors.leftMargin {
enabled: tabIndicator.enableIndicatorAnimation
SmoothedAnimation {
velocity: Appearance.animation.positionShift.velocity
}
}
Behavior on anchors.rightMargin {
enabled: tabIndicator.enableIndicatorAnimation
SmoothedAnimation {
velocity: Appearance.animation.positionShift.velocity
}
}
}
}