116 lines
4.3 KiB
QML
116 lines
4.3 KiB
QML
// 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)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|