git.iko.soy/unity8
on xenial help sign in
implement a custom (outline/tinted) button
19df370Lukáš Tinkl
qml/Notifications/Notification.qml+11−7
compare with xenial
unifiedsplit
@@ -36,7 +36,7 @@ StyledItem {
36 property var type
36 property var type
37 property var hints
37 property var hints
38 property var notification
38 property var notification
39− property color color: theme.palette.normal.overlay
39+ property color color: theme.palette.normal.background
40 property bool fullscreen: false
40 property bool fullscreen: false
41 property int maxHeight
41 property int maxHeight
42 property int margins: units.gu(1)
42 property int margins: units.gu(1)
@@ -421,12 +421,13 @@ StyledItem {
421 Component {
421 Component {
422 id: oneOverTwoButtonTop
422 id: oneOverTwoButtonTop
423
423
424− Button {
424+ NotificationButton {
425 objectName: "notify_oot_button" + index
425 objectName: "notify_oot_button" + index
426 width: oneOverTwoCase.width
426 width: oneOverTwoCase.width
427 text: oneOverTwoLoaderTop.actionLabel
427 text: oneOverTwoLoaderTop.actionLabel
428+ outline: notification.hints["x-canonical-private-affirmative-tint"] !== "true"
428 color: notification.hints["x-canonical-private-affirmative-tint"] === "true" ? theme.palette.normal.positive
429 color: notification.hints["x-canonical-private-affirmative-tint"] === "true" ? theme.palette.normal.positive
429− : theme.palette.normal.baseText
430+ : theme.palette.normal.background
430 onClicked: notification.notification.invokeAction(oneOverTwoLoaderTop.actionId)
431 onClicked: notification.notification.invokeAction(oneOverTwoLoaderTop.actionId)
431 }
432 }
432 }
433 }
@@ -450,12 +451,13 @@ StyledItem {
450 Component {
451 Component {
451 id: oneOverTwoButtonBottom
452 id: oneOverTwoButtonBottom
452
453
453− Button {
454+ NotificationButton {
454 objectName: "notify_oot_button" + index
455 objectName: "notify_oot_button" + index
455 width: oneOverTwoCase.width / 2 - spacing / 2
456 width: oneOverTwoCase.width / 2 - spacing / 2
456 text: oneOverTwoLoaderBottom.actionLabel
457 text: oneOverTwoLoaderBottom.actionLabel
458+ outline: notification.hints["x-canonical-private-rejection-tint"] !== "true"
457 color: index == 1 && notification.hints["x-canonical-private-rejection-tint"] === "true" ? theme.palette.normal.negative
459 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
459 onClicked: notification.notification.invokeAction(oneOverTwoLoaderBottom.actionId)
461 onClicked: notification.notification.invokeAction(oneOverTwoLoaderBottom.actionId)
460 }
462 }
461 }
463 }
@@ -510,12 +512,14 @@ StyledItem {
510 Component {
512 Component {
511 id: actionButton
513 id: actionButton
512
514
513− Button {
515+ NotificationButton {
514 objectName: "notify_button" + index
516 objectName: "notify_button" + index
515 width: buttonRow.width / 2 - spacing / 2
517 width: buttonRow.width / 2 - spacing / 2
516 text: loader.actionLabel
518 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")
517 color: {
521 color: {
518− var result = theme.palette.normal.baseText;
522+ var result = theme.palette.normal.background;
519 if (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] === "true") {
523 if (index == 0 && notification.hints["x-canonical-private-affirmative-tint"] === "true") {
520 result = theme.palette.normal.positive;
524 result = theme.palette.normal.positive;
521 }
525 }
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 {
32 color: theme.palette.normal.background
32 color: theme.palette.normal.background
33 height: expanded ? (optionToggleRepeater.count - startIndex) * itemHeight : itemHeight
33 height: expanded ? (optionToggleRepeater.count - startIndex) * itemHeight : itemHeight
34 width: parent.width
34 width: parent.width
35− radius: itemHeight/4
35+ radius: units.dp(4)
36 clip: true
36 clip: true
37 border.width: units.dp(1)
37 border.width: units.dp(1)
38 border.color: theme.palette.normal.base
38 border.color: theme.palette.normal.base
qml/Notifications/SwipeToAct.qml+4−2
@@ -66,13 +66,14 @@ Item {
66 }
66 }
67 }
67 }
68
68
69− Button {
69+ NotificationButton {
70 id: leftButton
70 id: leftButton
71 objectName: "leftButton"
71 objectName: "leftButton"
72 anchors.verticalCenter: parent.verticalCenter
72 anchors.verticalCenter: parent.verticalCenter
73 anchors.left: parent.left
73 anchors.left: parent.left
74 iconName: leftIconName
74 iconName: leftIconName
75 visible: clickToAct
75 visible: clickToAct
76+ outline: false
76 width: (parent.width / 2) - priv.gap / 2
77 width: (parent.width / 2) - priv.gap / 2
77 color: theme.palette.normal.negative
78 color: theme.palette.normal.negative
78 onClicked: {
79 onClicked: {
@@ -80,13 +81,14 @@ Item {
80 }
81 }
81 }
82 }
82
83
83− Button {
84+ NotificationButton {
84 id: rightButton
85 id: rightButton
85 objectName: "rightButton"
86 objectName: "rightButton"
86 anchors.verticalCenter: parent.verticalCenter
87 anchors.verticalCenter: parent.verticalCenter
87 anchors.right: parent.right
88 anchors.right: parent.right
88 iconName: rightIconName
89 iconName: rightIconName
89 visible: clickToAct
90 visible: clickToAct
91+ outline: false
90 width: (parent.width / 2) - priv.gap / 2
92 width: (parent.width / 2) - priv.gap / 2
91 color: theme.palette.normal.positive
93 color: theme.palette.normal.positive
92 onClicked: {
94 onClicked: {