1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 2 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
import QtQuick
// One monitor in the mock desk layout: a bezel, a stand, and the panel at the
// screen's real aspect ratio. Drawn rather than loaded from an SVG so it takes
// its colours from the theme and stays sharp at any scale.
Item {
id: mock
property string label: ""
property string source: ""
property bool targeted: false
// The panel's size; the bezel and stand are added around it.
property real panelWidth: 100
property real panelHeight: 100
readonly property real bezel: Math.max(4, Math.round(panelWidth * 0.02))
// Proportional to width rather than height: the vertical monitor is tall
// and narrow, and a share of its height would give it an absurd stand.
readonly property real standHeight: Math.max(14, Math.round(panelWidth * 0.1))
implicitWidth: panelWidth + bezel * 2
implicitHeight: panelHeight + bezel * 2 + standHeight
Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
// Case.
Rectangle {
width: mock.panelWidth + mock.bezel * 2
height: mock.panelHeight + mock.bezel * 2
radius: Math.max(3, mock.bezel)
color: "#1a1a1e"
border.width: 1
border.color: mock.targeted ? Theme.accent : Qt.alpha("#ffffff", 0.14)
// Screen.
Rectangle {
anchors.centerIn: parent
width: mock.panelWidth
height: mock.panelHeight
color: Theme.base
clip: true
Image {
anchors.fill: parent
source: mock.source === "" ? "" : "file://" + mock.source
asynchronous: true
cache: false
// swaybg is called with -m fill, so the mock crops the same way.
fillMode: Image.PreserveAspectCrop
sourceSize.width: 640
}
Text {
anchors.centerIn: parent
visible: mock.source === ""
text: mock.label
font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
color: Theme.overlay
}
}
}
// Neck.
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: Math.max(8, Math.round(mock.panelWidth * 0.09))
height: Math.round(mock.standHeight * 0.55)
color: "#26262e"
}
// Foot.
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: Math.max(30, Math.round(mock.panelWidth * 0.32))
height: Math.max(5, Math.round(mock.standHeight * 0.45))
radius: height / 2
color: "#2c2c35"
}
}
}
|
