Rebuild Displays around the canvas, and let the transaction keep color

Claude-Session: https://claude.ai/code/session_01Ms2FbjQy31TVf3CEvQhGM8
2026-08-24 10:44:11 -04:00
parent 1f694b00b6
commit 9bc68ba358
29 changed files with 3065 additions and 388 deletions
@@ -0,0 +1,115 @@
+// Rotation, as four little screens rather than four names.
+//
+// "Landscape (flipped)" and "Portrait (flipped)" are the two settings on this
+// page nobody reads correctly the first time: the words describe the result,
+// but what someone is looking for is the shape. The glyph is the shape, and the
+// full name is a hover away for anyone who wants it spelled out.
+
+import QtQuick
+import QtQuick.Controls
+import qs.config
+
+SettingRow {
+    id: root
+
+    // [{ value, label }] -- Displays.transforms, in its own order.
+    property var options: []
+    property int value: 0
+    property bool enabled: true
+
+    signal selected(int value)
+
+    controlWidth: Math.max(150, root.options.length * 48)
+
+    Row {
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 6
+        opacity: root.enabled ? 1 : 0.45
+
+        Repeater {
+            model: root.options
+
+            Rectangle {
+                id: segment
+
+                required property var modelData
+
+                readonly property bool current: root.value === segment.modelData.value
+                readonly property int orientation: Number(segment.modelData.value)
+                // 1 and 3 are the portrait transforms; 2 and 3 are the flipped
+                // ones. The glyph is those two facts drawn.
+                readonly property bool portrait: segment.orientation === 1 || segment.orientation === 3
+                readonly property bool flipped: segment.orientation >= 2
+
+                width: 42
+                height: 32
+                radius: 9
+                color: segment.current
+                    ? Theme.alpha(Theme.accent, 0.22)
+                    : Theme.alpha(Theme.fg, segmentHover.hovered && root.enabled ? 0.12 : 0.06)
+                border.width: 1
+                border.color: segment.current
+                    ? Theme.alpha(Theme.accent, 0.5)
+                    : Theme.alpha(Theme.fg, 0.08)
+
+                Accessible.role: Accessible.Button
+                Accessible.name: String(segment.modelData.label ?? "")
+
+                ToolTip.visible: segmentHover.hovered
+                ToolTip.delay: 400
+                ToolTip.text: String(segment.modelData.label ?? "")
+
+                // The screen itself: portrait is the same rectangle stood up.
+                Rectangle {
+                    anchors.centerIn: parent
+                    width: segment.portrait ? 12 : 17
+                    height: segment.portrait ? 17 : 12
+                    radius: 3
+                    color: "transparent"
+                    border.width: 2
+                    border.color: segment.current ? Theme.fg : Theme.fgDim
+
+                    // The thick edge is the bottom of the picture, so a flipped
+                    // screen is one whose bottom is somewhere unexpected. Two
+                    // rectangles rather than one with switched anchors: an
+                    // anchor bound to undefined is not reliably released.
+                    Rectangle {
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.bottom: parent.bottom
+                        anchors.margins: 2
+                        height: 3
+                        radius: 1
+                        border.width: 0
+                        visible: segment.flipped && !segment.portrait
+                        color: segment.current ? Theme.fg : Theme.fgDim
+                    }
+
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.right: parent.right
+                        anchors.margins: 2
+                        width: 3
+                        radius: 1
+                        border.width: 0
+                        visible: segment.flipped && segment.portrait
+                        color: segment.current ? Theme.fg : Theme.fgDim
+                    }
+                }
+
+                HoverHandler {
+                    id: segmentHover
+                    enabled: root.enabled
+                    cursorShape: Qt.PointingHandCursor
+                }
+
+                TapHandler {
+                    enabled: root.enabled && !segment.current
+                    onTapped: root.selected(segment.orientation)
+                }
+            }
+        }
+    }
+}