git.iko.soy/unity8
on xenial help sign in
implement a custom (outline/tinted) button
commit19df370426283ece285d324f5af2f531e5cd98ef authorLukáš Tinkl <lukas.tinkl@canonical.com> dateWed 6 Apr 2016, 23:09 (11 years ago) parent16386e0
4 files changed+73−10
compare with xenial
unifiedsplit
qml/Notifications/Notification.qml+11−7 qml/Notifications/NotificationButton.qml+57 qml/Notifications/OptionToggle.qml+1−1 qml/Notifications/SwipeToAct.qml+4−2
qml/Notifications/Notification.qml+11−7
@@ -36,7 +36,7 @@ StyledItem {
3636 property var type
3737 property var hints
3838 property var notification
39− property color color: theme.palette.normal.overlay
39+ property color color: theme.palette.normal.background
4040 property bool fullscreen: false
4141 property int maxHeight
4242 property int margins: units.gu(1)
@@ -421,12 +421,13 @@ StyledItem {
421421 Component {
422422 id: oneOverTwoButtonTop
423423
424− Button {
424+ NotificationButton {
425425 objectName: "notify_oot_button" + index
426426 width: oneOverTwoCase.width
427427 text: oneOverTwoLoaderTop.actionLabel
428+ outline: notification.hints["x-canonical-private-affirmative-tint"] !== "true"
428429 color: notification.hints["x-canonical-private-affirmative-tint"] === "true" ? theme.palette.normal.positive
429− : theme.palette.normal.baseText
430+ : theme.palette.normal.background
430431 onClicked: notification.notification.invokeAction(oneOverTwoLoaderTop.actionId)
431432 }
432433 }
@@ -450,12 +451,13 @@ StyledItem {
450451 Component {
451452 id: oneOverTwoButtonBottom
452453
453− Button {
454+ NotificationButton {
454455 objectName: "notify_oot_button" + index
455456 width: oneOverTwoCase.width / 2 - spacing / 2
456457 text: oneOverTwoLoaderBottom.actionLabel
458+ outline: notification.hints["x-canonical-private-rejection-tint"] !== "true"
457459 color: index == 1 && notification.hints["x-canonical-private-rejection-tint"] === "true" ? theme.palette.normal.negative
458− : theme.palette.normal.baseText
460+ : theme.palette.normal.background
459461 onClicked: notification.notification.invokeAction(oneOverTwoLoaderBottom.actionId)
460462 }
461463 }
@@ -510,12 +512,14 @@ StyledItem {
510512 Component {
511513 id: actionButton
512514
513− Button {
515+ NotificationButton {
514516 objectName: "notify_button" + index
515517 width: buttonRow.width / 2 - spacing / 2
516518 text: loader.actionLabel
519+ outline: (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] !== "true") ||
520+ (index == 1 && notification.hints["x-canonical-private-rejection-tint"] !== "true")
517521 color: {
518− var result = theme.palette.normal.baseText;
522+ var result = theme.palette.normal.background;
519523 if (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] === "true") {
520524 result = theme.palette.normal.positive;
521525 }
qml/Notifications/NotificationButton.qmlnew file+57
@@ -0,0 +1,57 @@
1+/*
2+ * Copyright 2016 Canonical Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU Lesser General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU Lesser General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU Lesser General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.4
18+import Ubuntu.Components 1.3
19+
20+Rectangle {
21+ id: root
22+
23+ height: units.gu(4)
24+ radius: units.dp(4)
25+ border.width: outline ? units.dp(1) : undefined
26+ border.color: outline ? theme.palette.normal.base : undefined
27+
28+ // to be set from outside
29+ property bool outline: true
30+ property alias text: label.text
31+ property alias iconName: icon.name
32+
33+ signal clicked()
34+
35+ AbstractButton {
36+ anchors.fill: root
37+ onClicked: root.clicked()
38+
39+ Label {
40+ id: label
41+ fontSize: "medium"
42+ font.weight: Font.Light
43+ anchors.centerIn: parent
44+ color: outline ? theme.palette.normal.baseText : "white"
45+ visible: text !== ""
46+ }
47+
48+ Icon {
49+ id: icon
50+ height: parent.height / 3 * 2
51+ width: height
52+ anchors.centerIn: parent
53+ color: "white"
54+ visible: !label.visible
55+ }
56+ }
57+}
qml/Notifications/OptionToggle.qml+1−1
@@ -32,7 +32,7 @@ Rectangle {
3232 color: theme.palette.normal.background
3333 height: expanded ? (optionToggleRepeater.count - startIndex) * itemHeight : itemHeight
3434 width: parent.width
35− radius: itemHeight/4
35+ radius: units.dp(4)
3636 clip: true
3737 border.width: units.dp(1)
3838 border.color: theme.palette.normal.base
qml/Notifications/SwipeToAct.qml+4−2
@@ -66,13 +66,14 @@ Item {
6666 }
6767 }
6868
69− Button {
69+ NotificationButton {
7070 id: leftButton
7171 objectName: "leftButton"
7272 anchors.verticalCenter: parent.verticalCenter
7373 anchors.left: parent.left
7474 iconName: leftIconName
7575 visible: clickToAct
76+ outline: false
7677 width: (parent.width / 2) - priv.gap / 2
7778 color: theme.palette.normal.negative
7879 onClicked: {
@@ -80,13 +81,14 @@ Item {
8081 }
8182 }
8283
83− Button {
84+ NotificationButton {
8485 id: rightButton
8586 objectName: "rightButton"
8687 anchors.verticalCenter: parent.verticalCenter
8788 anchors.right: parent.right
8889 iconName: rightIconName
8990 visible: clickToAct
91+ outline: false
9092 width: (parent.width / 2) - priv.gap / 2
9193 color: theme.palette.normal.positive
9294 onClicked: {