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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
/*
* Copyright 2013 Canonical Ltd.
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation; version 3.
*
* 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 Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* Author: Florian Boucault <florian.boucault@canonical.com>
*/
import QtQuick 2.0
import Ubuntu.Components 1.1
Item {
id: buttonStyle
property Button button: styledItem
property real minimumWidth: units.gu(10)
property real horizontalPadding: units.gu(1)
property color defaultColor: UbuntuColors.orange
property font defaultFont: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium")})
property Gradient defaultGradient
property real buttonFaceOffset: 0
/*!
The property overrides the button's default background with an item. This
item can be used by derived styles to reuse the ButtonStyle and override
the default coloured background with an image or any other drawing.
The default value is null.
*/
property Item backgroundSource: null
width: button.width
height: button.height
implicitWidth: Math.max(minimumWidth, foreground.implicitWidth + 2*horizontalPadding)
implicitHeight: units.gu(4)
LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
LayoutMirroring.childrenInherit: true
/*! \internal */
// Color properties in a JS ternary operator don't work as expected in
// QML because it overwrites alpha values with 1. A workaround is to use
// Qt.rgba(). For more information, see
// https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1197802 and
// https://bugreports.qt-project.org/browse/QTBUG-32238.
function __colorHack(color) { return Qt.rgba(color.r, color.g, color.b, color.a); }
/* The proxy is necessary because Gradient.stops and GradientStop.color are
non-NOTIFYable properties. They cannot be written to so it is fine but
the proxy avoids the warnings.
*/
property QtObject gradientProxy: gradientProxyObject
QtObject {
id: gradientProxyObject
property color topColor
property color bottomColor
function updateGradient() {
if (button.gradient) {
topColor = button.gradient.stops[0].color;
bottomColor = button.gradient.stops[1].color;
}
}
Component.onCompleted: {
updateGradient();
button.gradientChanged.connect(updateGradient);
}
}
// Use the gradient if it is defined and the color has not been set manually
// or the gradient has been set manually
property bool isGradient: button.gradient && (button.color == defaultColor ||
button.gradient != defaultGradient)
UbuntuShape {
id: background
anchors.fill: parent
borderSource: "radius_idle.sci"
visible: (color.a != 0.0) || backgroundSource
image: backgroundSource
color: backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.topColor) : __colorHack(button.color))
gradientColor: backgroundSource ? "#00000000" : (isGradient ? __colorHack(gradientProxy.bottomColor) : __colorHack(button.color))
}
UbuntuShape {
id: backgroundPressed
anchors.fill: parent
color: background.color
gradientColor: background.gradientColor
borderSource: "radius_pressed.sci"
opacity: button.pressed ? 1.0 : 0.0
Behavior on opacity {
NumberAnimation {
duration: UbuntuAnimation.SnapDuration
easing.type: Easing.Linear
}
}
visible: background.visible
}
ButtonForeground {
id: foreground
width: parent.width - 2*horizontalPadding
anchors {
centerIn: parent
horizontalCenterOffset: buttonFaceOffset
}
text: button.text
/* Pick either a clear or dark text color depending on the luminance of the
background color to maintain good contrast (works in most cases)
*/
textColor: ColorUtils.luminance(button.color) <= 0.85 ? "#F3F3E7" : "#888888"
iconSource: button.iconSource
iconPosition: button.iconPosition
iconSize: units.gu(3)
font: button.font
spacing: horizontalPadding
transformOrigin: Item.Top
scale: button.pressed ? 0.98 : 1.0
Behavior on scale {
NumberAnimation {
duration: UbuntuAnimation.SnapDuration
easing.type: Easing.Linear
}
}
}
}
|