dashboard: design layout

Also use clippingrect to round swipeview

2 files changed, 104 insertions, 6 deletions

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
+        }
+    }
+}