primarytabbar: use synchronizer to simplify bindings

This commit is contained in:
end-4
2025-10-30 00:03:18 +01:00
parent 9fe68c5a38
commit 714895976f
4 changed files with 25 additions and 27 deletions
@@ -5,6 +5,7 @@ import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import Qt.labs.synchronizer
import Quickshell.Io import Quickshell.Io
import Quickshell import Quickshell
import Quickshell.Wayland import Quickshell.Wayland
@@ -22,7 +23,6 @@ Scope { // Scope
"name": Translation.tr("Elements") "name": Translation.tr("Elements")
}, },
] ]
property int selectedTab: 0
Loader { Loader {
id: cheatsheetLoader id: cheatsheetLoader
@@ -31,6 +31,7 @@ Scope { // Scope
sourceComponent: PanelWindow { // Window sourceComponent: PanelWindow { // Window
id: cheatsheetRoot id: cheatsheetRoot
visible: cheatsheetLoader.active visible: cheatsheetLoader.active
property int selectedTab: 0
anchors { anchors {
top: true top: true
@@ -85,16 +86,16 @@ Scope { // Scope
} }
if (event.modifiers === Qt.ControlModifier) { if (event.modifiers === Qt.ControlModifier) {
if (event.key === Qt.Key_PageDown) { if (event.key === Qt.Key_PageDown) {
root.selectedTab = Math.min(root.selectedTab + 1, root.tabButtonList.length - 1); cheatsheetRoot.selectedTab = Math.min(cheatsheetRoot.selectedTab + 1, root.tabButtonList.length - 1);
event.accepted = true; event.accepted = true;
} else if (event.key === Qt.Key_PageUp) { } else if (event.key === Qt.Key_PageUp) {
root.selectedTab = Math.max(root.selectedTab - 1, 0); cheatsheetRoot.selectedTab = Math.max(cheatsheetRoot.selectedTab - 1, 0);
event.accepted = true; event.accepted = true;
} else if (event.key === Qt.Key_Tab) { } else if (event.key === Qt.Key_Tab) {
root.selectedTab = (root.selectedTab + 1) % root.tabButtonList.length; cheatsheetRoot.selectedTab = (cheatsheetRoot.selectedTab + 1) % root.tabButtonList.length;
event.accepted = true; event.accepted = true;
} else if (event.key === Qt.Key_Backtab) { } else if (event.key === Qt.Key_Backtab) {
root.selectedTab = (root.selectedTab - 1 + root.tabButtonList.length) % root.tabButtonList.length; cheatsheetRoot.selectedTab = (cheatsheetRoot.selectedTab - 1 + root.tabButtonList.length) % root.tabButtonList.length;
event.accepted = true; event.accepted = true;
} }
} }
@@ -140,9 +141,8 @@ Scope { // Scope
PrimaryTabBar { // Tab strip PrimaryTabBar { // Tab strip
id: tabBar id: tabBar
tabButtonList: root.tabButtonList tabButtonList: root.tabButtonList
externalTrackedTab: root.selectedTab Synchronizer on currentIndex {
function onCurrentIndexChanged(currentIndex) { property alias source: cheatsheetRoot.selectedTab
root.selectedTab = currentIndex;
} }
} }
@@ -164,12 +164,12 @@ Scope { // Scope
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
} }
currentIndex: tabBar.externalTrackedTab currentIndex: cheatsheetRoot.selectedTab
onCurrentIndexChanged: { onCurrentIndexChanged: {
contentWidthBehavior.enabled = true; contentWidthBehavior.enabled = true;
contentHeightBehavior.enabled = true; contentHeightBehavior.enabled = true;
tabBar.enableIndicatorAnimation = true; tabBar.enableIndicatorAnimation = true;
root.selectedTab = currentIndex; cheatsheetRoot.selectedTab = currentIndex;
} }
clip: true clip: true
@@ -3,16 +3,20 @@ import qs.services
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Qt.labs.synchronizer
ColumnLayout { ColumnLayout {
id: root id: root
spacing: 0 spacing: 0
required property var tabButtonList // Something like [{"icon": "notifications", "name": Translation.tr("Notifications")}, {"icon": "volume_up", "name": Translation.tr("Volume mixer")}] required property var tabButtonList // Something like [{"icon": "notifications", "name": Translation.tr("Notifications")}, {"icon": "volume_up", "name": Translation.tr("Volume mixer")}]
required property var externalTrackedTab property int currentIndex
property bool enableIndicatorAnimation: false property bool enableIndicatorAnimation: false
property color colIndicator: Appearance?.colors.colPrimary ?? "#65558F" property color colIndicator: Appearance?.colors.colPrimary ?? "#65558F"
property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0" property color colBorder: Appearance?.m3colors.m3outlineVariant ?? "#C6C6D0"
signal currentIndexChanged(int index)
onCurrentIndexChanged: {
enableIndicatorAnimation = true
}
property bool centerTabBar: parent.width > 500 property bool centerTabBar: parent.width > 500
Layout.fillWidth: !centerTabBar Layout.fillWidth: !centerTabBar
@@ -22,9 +26,8 @@ ColumnLayout {
TabBar { TabBar {
id: tabBar id: tabBar
Layout.fillWidth: true Layout.fillWidth: true
currentIndex: root.externalTrackedTab Synchronizer on currentIndex {
onCurrentIndexChanged: { property alias source: root.currentIndex
root.onCurrentIndexChanged(currentIndex)
} }
background: Item { background: Item {
@@ -42,10 +45,11 @@ ColumnLayout {
Repeater { Repeater {
model: root.tabButtonList model: root.tabButtonList
delegate: PrimaryTabButton { delegate: PrimaryTabButton {
selected: (index == root.externalTrackedTab) selected: (index == root.currentIndex)
buttonText: modelData.name buttonText: modelData.name
buttonIcon: modelData.icon buttonIcon: modelData.icon
minimumWidth: 160 minimumWidth: 160
onClicked: root.currentIndex = index
} }
} }
} }
@@ -54,12 +58,6 @@ ColumnLayout {
id: tabIndicator id: tabIndicator
Layout.fillWidth: true Layout.fillWidth: true
height: 3 height: 3
Connections {
target: root
function onExternalTrackedTabChanged() {
root.enableIndicatorAnimation = true
}
}
Rectangle { Rectangle {
id: indicator id: indicator
@@ -5,11 +5,11 @@ import qs.modules.common.widgets
import qs.services import qs.services
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import Qt.labs.synchronizer
import Quickshell import Quickshell
import Quickshell.Io import Quickshell.Io
import Quickshell.Wayland import Quickshell.Wayland
import Quickshell.Hyprland import Quickshell.Hyprland
import Qt.labs.synchronizer
PanelWindow { PanelWindow {
id: root id: root
@@ -5,6 +5,7 @@ import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import Qt.labs.synchronizer
Item { Item {
id: root id: root
@@ -58,9 +59,8 @@ Item {
id: tabBar id: tabBar
visible: root.tabButtonList.length > 1 visible: root.tabButtonList.length > 1
tabButtonList: root.tabButtonList tabButtonList: root.tabButtonList
externalTrackedTab: root.selectedTab Synchronizer on currentIndex {
function onCurrentIndexChanged(currentIndex) { property alias source: root.selectedTab
root.selectedTab = currentIndex
} }
} }
@@ -71,7 +71,7 @@ Item {
Layout.fillHeight: true Layout.fillHeight: true
spacing: 10 spacing: 10
currentIndex: tabBar.externalTrackedTab currentIndex: root.selectedTab
onCurrentIndexChanged: { onCurrentIndexChanged: {
tabBar.enableIndicatorAnimation = true tabBar.enableIndicatorAnimation = true
root.selectedTab = currentIndex root.selectedTab = currentIndex