From 6de0288b709126a44e699293cee554fd292e4957 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Sat, 17 May 2025 23:02:38 +0800 Subject: dashboard: design layout Also use clippingrect to round swipeview --- modules/dashboard/Content.qml | 32 ++++++++++++++---- modules/dashboard/Dash.qml | 78 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 6 deletions(-) create mode 100644 modules/dashboard/Dash.qml (limited to 'modules/dashboard') diff --git a/modules/dashboard/Content.qml b/modules/dashboard/Content.qml index f3f102a..5f65e7f 100644 --- a/modules/dashboard/Content.qml +++ b/modules/dashboard/Content.qml @@ -2,6 +2,7 @@ import "root:/widgets" import "root:/services" import "root:/config" import Quickshell +import Quickshell.Widgets import QtQuick import QtQuick.Controls @@ -13,22 +14,41 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom - implicitWidth: 800 - implicitHeight: 300 + implicitWidth: view.implicitWidth + viewWrapper.anchors.margins * 2 + implicitHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins * 2 Tabs { id: tabs - anchors.fill: parent + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right anchors.topMargin: Appearance.padding.normal anchors.margins: Appearance.padding.large currentIndex: view.currentIndex } - SwipeView { - id: view + ClippingRectangle { + id: viewWrapper - currentIndex: tabs.currentIndex + anchors.top: tabs.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: Appearance.padding.large + + radius: Appearance.rounding.normal + color: "transparent" + + SwipeView { + id: view + + anchors.fill: parent + + currentIndex: tabs.currentIndex + + Dash {} + } } } diff --git a/modules/dashboard/Dash.qml b/modules/dashboard/Dash.qml new file mode 100644 index 0000000..66af8cb --- /dev/null +++ b/modules/dashboard/Dash.qml @@ -0,0 +1,78 @@ +import "root:/widgets" +import "root:/services" +import "root:/config" +import Quickshell +import QtQuick.Layouts + +GridLayout { + id: root + + rowSpacing: Appearance.spacing.small + columnSpacing: Appearance.spacing.small + + Rect { + text: "user" + + Layout.columnSpan: 3 + Layout.preferredWidth: 300 + Layout.preferredHeight: 150 + } + + Rect { + text: "toggles" + + Layout.column: 3 + Layout.columnSpan: 2 + Layout.preferredWidth: 250 + Layout.fillHeight: true + } + + Rect { + text: "time" + + Layout.row: 1 + Layout.preferredWidth: 100 + Layout.fillHeight: true + } + + Rect { + text: "calendar" + + Layout.row: 1 + Layout.column: 1 + Layout.columnSpan: 3 + Layout.fillWidth: true + Layout.preferredHeight: 200 + } + + Rect { + text: "perf" + + Layout.row: 1 + Layout.column: 4 + Layout.preferredWidth: 120 + Layout.fillHeight: true + } + + Rect { + text: "media" + + Layout.row: 0 + Layout.column: 5 + Layout.rowSpan: 2 + Layout.preferredWidth: 250 + Layout.fillHeight: true + } + + component Rect: StyledRect { + required property string text + + radius: Appearance.rounding.small + color: Colours.palette.m3surfaceContainer + + StyledText { + anchors.centerIn: parent + text: parent.text + } + } +} -- cgit v1.2.3-freya