From 8cdb49bd832bc3933b8931d78c1789b4455505d0 Mon Sep 17 00:00:00 2001 From: Sam Hadow Date: Wed, 13 Mar 2024 18:46:28 +0100 Subject: [PATCH] tabgroup --- package/contents/ui/FullRepresentation.qml | 346 +++++++++++++-------- 1 file changed, 221 insertions(+), 125 deletions(-) diff --git a/package/contents/ui/FullRepresentation.qml b/package/contents/ui/FullRepresentation.qml index 3520d86..cbcf17f 100644 --- a/package/contents/ui/FullRepresentation.qml +++ b/package/contents/ui/FullRepresentation.qml @@ -19,6 +19,9 @@ with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ +// module "org.kde.plasma.components" version 2.0 is not installed + + import QtQuick 2.3 import org.kde.plasma.plasmoid 2.0 import QtQuick.Layouts 1.1 @@ -26,7 +29,7 @@ import org.kde.plasma.plasmoid as PlasmaCore import org.kde.ksvg as KSvg import org.kde.plasma.plasma5support as Plasma5Support import org.kde.kirigami 2.20 as Kirigami -import org.kde.plasma.components 3.0 as PlasmaComponents +import org.kde.plasma.components as PlasmaComponents import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.kquickcontrolsaddons 2.0 @@ -125,181 +128,274 @@ Item { id: mainArea anchors.topMargin: mainTabGroup.state == "top" ? Kirigami.Units.smallSpacing : 0 - Kirigami.Page { - id: mainPage + PlasmaComponents.TabGroup { + id: mainTabGroup + currentTab: favoritesPage - // Set anchors - anchors.fill: parent - - // Create a row for the tab buttons - Kirigami.PageRow { - id: tabRow - - // Set row orientation based on plasmoid location - orientation: { - switch (plasmoid.location) { - case PlasmaCore.Types.LeftEdge: - case PlasmaCore.Types.RightEdge: - return Qt.Horizontal - default: - return Qt.Vertical - } - } - - // Add tab buttons - PlasmaComponents.Button { - text: i18n("Favorites") - onClicked: mainPage.currentIndex = 0 - } - PlasmaComponents.Button { - text: i18n("Applications") - onClicked: mainPage.currentIndex = 1 - } - PlasmaComponents.Button { - text: i18n("Computer") - onClicked: mainPage.currentIndex = 2 - } - PlasmaComponents.Button { - text: i18n("Recently Used") - onClicked: mainPage.currentIndex = 3 - } - PlasmaComponents.Button { - text: i18n("Often Used") - onClicked: mainPage.currentIndex = 4 - } - PlasmaComponents.Button { - text: i18n("Leave") - onClicked: mainPage.currentIndex = 5 - } - PlasmaComponents.Button { - text: i18n("Search") - onClicked: root.state = "Search" - } + anchors { + fill: parent } - // Add pages - Kirigami.Page { + //pages + FavoritesView { id: favoritesPage - anchors.fill: parent - visible: mainPage.currentIndex === 0 - // Add contents of the Favorites view here } - Kirigami.Page { + PlasmaExtras.ConditionalLoader { id: applicationsPage - anchors.fill: parent - visible: mainPage.currentIndex === 1 - // Add contents of the Applications view here + when: mainTabGroup.currentTab == applicationsPage + source: Qt.resolvedUrl("ApplicationsView.qml") } - Kirigami.Page { - id: computerPage - anchors.fill: parent - visible: mainPage.currentIndex === 2 - // Add contents of the Computer view here + PlasmaExtras.ConditionalLoader { + id: systemPage + when: mainTabGroup.currentTab == systemPage + source: Qt.resolvedUrl("ComputerView.qml") } - Kirigami.Page { + PlasmaExtras.ConditionalLoader { id: recentlyUsedPage - anchors.fill: parent - visible: mainPage.currentIndex === 3 - // Add contents of the Recently Used view here + when: mainTabGroup.currentTab == recentlyUsedPage + source: Qt.resolvedUrl("RecentlyUsedView.qml") } - Kirigami.Page { + PlasmaExtras.ConditionalLoader { id: oftenUsedPage - anchors.fill: parent - visible: mainPage.currentIndex === 4 - // Add contents of the Often Used view here + when: mainTabGroup.currentTab == oftenUsedPage + source: Qt.resolvedUrl("OftenUsedView.qml") } - Kirigami.Page { + PlasmaExtras.ConditionalLoader { id: leavePage - anchors.fill: parent - visible: mainPage.currentIndex === 5 - // Add contents of the Leave view here + when: mainTabGroup.currentTab == leavePage + source: Qt.resolvedUrl("LeaveView.qml") } - Kirigami.Page { + PlasmaExtras.ConditionalLoader { id: searchPage - anchors.fill: parent - visible: root.state === "Search" - // Add contents of the Search view here + when: root.state == "Search" + //when: mainTabGroup.currentTab == searchPage || root.state == "Search" + source: Qt.resolvedUrl("SearchView.qml") } - // Handle the plasmoid location states + state: { + switch (plasmoid.location) { + case PlasmaCore.Types.LeftEdge: + return LayoutMirroring.enabled ? "right" : "left"; + case PlasmaCore.Types.TopEdge: + return "top"; + case PlasmaCore.Types.RightEdge: + return LayoutMirroring.enabled ? "left" : "right"; + case PlasmaCore.Types.BottomEdge: + default: + return "bottom"; + } + } states: [ State { name: "left" - PropertyChanges { - target: tabRow - rotation: 0 + AnchorChanges { + target: header + anchors { + left: root.left + top: undefined + right: root.right + bottom: root.bottom + } } PropertyChanges { - target: tabRow + target: header + width: header.implicitWidth + location: PlasmaExtras.PlasmoidHeading.Location.Footer + } + AnchorChanges { + target: mainArea anchors { - left: parent.left - top: parent.top - bottom: parent.bottom + left: tabBar.right + top: root.top + right: root.right + bottom: header.top + } + } + PropertyChanges { + target: tabBar + width: (tabBar.opacity == 0) ? 0 : PlasmaCore.Units.gridUnit * 5 + } + AnchorChanges { + target: tabBar + anchors { + left: root.left + top: root.top + right: undefined + bottom: header.top + } + } + PropertyChanges { + target:tabBarSeparator + width: tabBarSeparatorLine.elementSize("vertical-line").width + elementId: "vertical-line" + } + AnchorChanges { + target: tabBarSeparator + anchors { + left: tabBar.right + top: tabBar.top + bottom:tabBar.bottom } } }, State { name: "top" - PropertyChanges { - target: tabRow - rotation: -90 + AnchorChanges { + target: header + anchors { + left: root.left + top: undefined + right: root.right + bottom: root.bottom + } } PropertyChanges { - target: tabRow + target: header + height: header.implicitHeight + location: PlasmaExtras.PlasmoidHeading.Location.Footer + } + AnchorChanges { + target: mainArea anchors { - top: parent.top - left: parent.left - right: parent.right + left: root.left + top: tabBar.bottom + right: root.right + bottom: header.top + } + } + PropertyChanges { + target: tabBar + height: (tabBar.opacity == 0) ? 0 : PlasmaCore.Units.gridUnit * 5 + } + AnchorChanges { + target: tabBar + anchors { + left: root.left + top: root.top + right: root.right + bottom: undefined + } + } + PropertyChanges { + target:tabBarSeparator + height: tabBarSeparatorLine.elementSize("horizontal-line").height + elementId: "horizontal-line" + } + AnchorChanges { + target: tabBarSeparator + anchors { + left: tabBar.left + right: tabBar.right + top: tabBar.bottom } } }, State { name: "right" - PropertyChanges { - target: tabRow - rotation: 180 + AnchorChanges { + target: header + anchors { + left: root.left + top: undefined + right: root.right + bottom: root.bottom + } } PropertyChanges { - target: tabRow + target: header + width: header.implicitWidth + location: PlasmaExtras.PlasmoidHeading.Location.Footer + } + AnchorChanges { + target: mainArea anchors { - right: parent.right - top: parent.top - bottom: parent.bottom + left: root.left + top: root.top + right: tabBar.left + bottom: header.top + } + } + PropertyChanges { + target: tabBar + width: (tabBar.opacity == 0) ? 0 : PlasmaCore.Units.gridUnit * 5 + } + AnchorChanges { + target: tabBar + anchors { + left: undefined + top: root.top + right: root.right + bottom: header.top + } + } + PropertyChanges { + target:tabBarSeparator + width: tabBarSeparatorLine.elementSize("vertical-line").width + elementId: "vertical-line" + } + AnchorChanges { + target: tabBarSeparator + anchors { + right: tabBar.left + top: tabBar.top + bottom: tabBar.bottom } } }, State { name: "bottom" - PropertyChanges { - target: tabRow - rotation: 90 + AnchorChanges { + target: header + anchors { + left: root.left + top: root.top + right: root.right + bottom: undefined + } } PropertyChanges { - target: tabRow + target: header + height: header.implicitHeight + location: PlasmaExtras.PlasmoidHeading.Location.Header + } + AnchorChanges { + target: mainArea anchors { - bottom: parent.bottom - left: parent.left - right: parent.right + left: root.left + top: header.bottom + right: root.right + bottom: tabBar.top + } + } + PropertyChanges { + target: tabBar + height: (tabBar.opacity == 0) ? 0 : PlasmaCore.Units.gridUnit * 5 + } + AnchorChanges { + target: tabBar + anchors { + left: root.left + top: undefined + right: root.right + bottom: root.bottom + } + } + PropertyChanges { + target:tabBarSeparator + height: tabBarSeparatorLine.elementSize("horizontal-line").height + elementId: "horizontal-line" + } + AnchorChanges { + target: tabBarSeparator + anchors { + bottom: tabBar.top + left: tabBar.left + right: tabBar.right } } } ] - - // Set initial plasmoid state - state: { - switch (plasmoid.location) { - case PlasmaCore.Types.LeftEdge: - return "left" - case PlasmaCore.Types.TopEdge: - return "top" - case PlasmaCore.Types.RightEdge: - return "right" - case PlasmaCore.Types.BottomEdge: - default: - return "bottom" - } - } - } + } // mainTabGroup } PlasmaComponents.TabBar {