generated from 219-design/qt-qml-project-template-with-ci
/
StyledButton.qml
124 lines (104 loc) · 3.3 KB
/
StyledButton.qml
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.14
import QtQuick.Controls.Universal 2.2
import libstyles 1.0
Item {
id: root
signal clicked
// 0 is "dark button"
// 1 is "bright button"
property int buttonColorChoice: 0
property alias text: actualButton.text
property bool shrinkImageToFit: true // instantiation site can override this
property alias textFont: textLabel.font
property alias labelWidth: textLabel.contentWidth
property int statusAlertSetting: 0 // override to show icon
property string optionalImageSource: ""
Button {
id: actualButton
anchors.fill: parent
onClicked: {
root.clicked()
}
readonly property int imageMargin_: height * .25
// Uncomment (temporarily) for qmlscene work. Otherwise we got too much false security in layouts from these:
// width: 120
// height: 80
text: "" // to be set at instantiation site
// 0 is "dark button"
// 1 is "bright button"
function getTextColor(isPressed) {
// You might be tempted to just return the inverse from getButtonColor but
// that DOES NOT HOLD in all cases.
if (root.buttonColorChoice == 0) {
return Theme.neutralLight
} else {
console.warn('invalid buttonColorChoice', root.buttonColorChoice)
return Theme.neutralLight
}
}
function getButtonColor(isPressed) {
// You might be tempted to just return the inverse from getTextColor but
// that DOES NOT HOLD in all cases.
if (root.buttonColorChoice == 0) {
return isPressed ? Theme.primaryLight : Theme.primaryMediumLight
} else {
console.warn('invalid buttonColorChoice', root.buttonColorChoice)
return isPressed ? Theme.primaryMediumLight : Theme.primaryMedium
}
}
background: Rectangle {
id: buttonBg
color: actualButton.getButtonColor(actualButton.down)
radius: height * 0.25
ImageSvgHelper {
visible: root.optionalImageSource != ""
anchors.fill: parent
anchors.margins: actualButton.imageMargin_
source: root.optionalImageSource
fillMode: root.shrinkImageToFit ? Image.PreserveAspectFit : Image.Pad
}
Rectangle {
readonly property int sizing_: 30
visible: root.statusAlertSetting != 0
anchors.right: buttonBg.right
anchors.top: buttonBg.top
anchors.topMargin: -sizing_ * .35
anchors.rightMargin: -1 * (buttonBg.width * 0.03)
height: sizing_
width: sizing_
radius: sizing_
color: Theme.accentOtherDark
Label {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font: Theme.mediumFont
color: Theme.neutralLight
text: "?"
}
}
}
contentItem: Label {
id: textLabel
text: root.text
font: Theme.mediumFont
color: actualButton.getTextColor(actualButton.down)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
DropShadow {
id: shadow
source: actualButton
visible: !actualButton.down
anchors.fill: actualButton
color: "#54000000"
horizontalOffset: 0
verticalOffset: 6
radius: 14
samples: 29
spread: 0.1
}
}