updated style

2026-08-11 00:22:59 +02:00
parent 47ff5233bd
commit 0a439d951e
16 changed files with 1077 additions and 208 deletions
@@ -0,0 +1,92 @@
+import QtQuick
+import "root:/config"
+import "root:/components"
+
+// A slab on the right-hand rail. The vertical counterpart to BarPill: it sizes
+// itself to a stacked column rather than a row, and pulls its lean and chamfer
+// from the shape-variance tables by `variant`, so no two slabs on the rail are
+// congruent.
+Item {
+    id: root
+
+    property color accent: Theme.primary
+    property int variant: 0
+    property bool active: false
+    property real padding: Theme.padS
+    property bool interactive: false
+    property bool halftone: false
+
+    readonly property bool hovered: hover.hovered
+    readonly property real contentPad: panel.contentPad
+    readonly property alias panelItem: panel
+
+    default property alias content: holder.data
+
+    signal clicked()
+
+    implicitWidth: Theme.railWidth
+
+    P5Panel {
+        id: panel
+        anchors.fill: parent
+        vertical: true
+
+        // Scaled down from the horizontal tables: a rail slab leans by a
+        // fraction of its 48px width, so the raw values would be far too steep.
+        lean: Theme.leanFor(root.variant) * 0.6
+        leanLeft: Theme.leanLeftFor(root.variant)
+        chop: Math.min(Theme.chopFor(root.variant), 10)
+        chopCorners: Theme.cornersFor(root.variant)
+
+        padding: root.padding
+        halftone: root.halftone
+        halftoneColor: root.accent
+        sheen: true
+
+        fill: root.active ? Theme.surfaceAlt : Theme.surface
+        fillOpacity: root.hovered ? 0.98 : 0.88
+        border: root.hovered || root.active
+            ? Theme.alpha(root.accent, 0.9)
+            : Theme.alpha(Theme.outline, 0.7)
+        borderWidth: root.hovered || root.active ? Theme.stroke : 1
+
+        slash: root.active
+        slashColor: root.accent
+
+        Behavior on fillOpacity {
+            NumberAnimation { duration: Theme.durFast }
+        }
+        Behavior on border {
+            ColorAnimation { duration: Theme.durBase }
+        }
+
+        Item {
+            id: holder
+            anchors.fill: parent
+        }
+    }
+
+    // Slabs lift toward the pointer, away from the screen edge.
+    transform: Translate {
+        x: root.hovered && root.interactive ? -3 : 0
+
+        Behavior on x {
+            NumberAnimation {
+                duration: Theme.durBase
+                easing.type: Easing.OutBack
+            }
+        }
+    }
+
+    HoverHandler {
+        id: hover
+        enabled: root.interactive
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    TapHandler {
+        enabled: root.interactive
+        acceptedButtons: Qt.LeftButton
+        onTapped: root.clicked()
+    }
+}