git.iko.soy/unity8
on xenial help sign in
First rough implementation of swipe-to-act button... still a wip.
7756780Mirco Müller
qml/Notifications/Notification.qml+18−2
compare with xenial
unifiedsplit
@@ -417,7 +417,7 @@ Item {
417 Component {
417 Component {
418 id: actionButton
418 id: actionButton
419
419
420− Button {
420+ /*Button {
421 objectName: "notify_button" + index
421 objectName: "notify_button" + index
422 width: buttonRow.width / 2 - spacing*2
422 width: buttonRow.width / 2 - spacing*2
423 text: loader.actionLabel
423 text: loader.actionLabel
@@ -432,9 +432,25 @@ Item {
432 return result;
432 return result;
433 }
433 }
434 onClicked: notification.notification.invokeAction(loader.actionId)
434 onClicked: notification.notification.invokeAction(loader.actionId)
435+ }*/
436+
437+ SwipeToAct {
438+ objectName: "notify_button" + index
439+
440+ leftText: loader.actionLabel
441+ rightText: loader.actionLabel
442+ width: buttonRow.width
443+
444+ onLeftTriggered: {
445+ notification.notification.invokeAction(loader.actionId)
446+ }
447+
448+ onRightTriggered: {
449+ notification.notification.invokeAction(loader.actionId)
450+ }
435 }
451 }
436 }
452 }
437− sourceComponent: (index == 0 || index == 1) ? actionButton : undefined
453+ sourceComponent: (index == 0) ? actionButton : undefined
438 }
454 }
439 }
455 }
440 }
456 }
qml/Notifications/SwipeToAct.qmlnew file+115
@@ -0,0 +1,115 @@
1+import QtQuick 2.0
2+import Ubuntu.Components 1.1
3+
4+Item {
5+ id: swipeToAct
6+
7+ property alias leftText: leftLabel.text
8+ property alias rightText: rightLabel.text
9+
10+ signal leftTriggered()
11+ signal rightTriggered()
12+
13+ readonly property double redH: 0.991
14+ readonly property double redS: 0.892
15+ readonly property double redL: 0.563
16+ readonly property double greenH: 0.386
17+ readonly property double greenS: 1.0
18+ readonly property double greenL: 0.316
19+ readonly property double sliderHeight: 4
20+ readonly property color lightGrey: "#eaeaea"
21+ readonly property color black: "#000000"
22+ readonly property color textColor: "#ffffff"
23+
24+ Row {
25+ id: row
26+
27+ width: swipeToAct.width
28+ clip: true
29+
30+ UbuntuShape {
31+ id: leftShape
32+
33+ property double scale: width / ((row.width - slider.width) / 2)
34+ color: Qt.hsla(redH, redS * (scale < 1.0 ? scale : 1.0), redL, 1.0)
35+ opacity: scale < 1.0 ? scale : 1.0
36+ width: slider.x
37+ height: units.gu(sliderHeight)
38+ Label {
39+ id: leftLabel
40+
41+ anchors.centerIn: parent
42+ color: textColor
43+ fontSize: "medium"
44+ }
45+ }
46+
47+ UbuntuShape {
48+ id: slider
49+
50+ Behavior on x {
51+ id: xBehavior
52+
53+ UbuntuNumberAnimation {
54+ duration: UbuntuAnimation.FastDuration
55+ easing.type: Easing.OutBounce
56+ }
57+ }
58+
59+ onXChanged: {
60+ if (x === 0.0) {
61+ rightTriggered()
62+ }
63+ if (x === row.width - slider.width) {
64+ leftTriggered()
65+ }
66+ }
67+
68+ color: lightGrey
69+ x: (row.width - slider.width) / 2
70+ width: units.gu(7)
71+ height: units.gu(sliderHeight)
72+ z: 1
73+ }
74+
75+ UbuntuShape {
76+ id: rightShape
77+
78+ property double scale: width / ((row.width - slider.width) / 2)
79+ color: Qt.hsla(greenH, greenS * (scale < 1.0 ? scale : 1.0), greenL, 1.0)
80+ opacity: scale < 1.0 ? scale : 1.0
81+ x: slider.x + slider.width
82+ width: row.width - (leftShape.width + slider.width)
83+ height: units.gu(sliderHeight)
84+ Label {
85+ id: rightLabel
86+
87+ anchors.centerIn: parent
88+ color: textColor
89+ fontSize: "medium"
90+ }
91+ }
92+ }
93+
94+ MouseArea {
95+ id: mouseArea
96+
97+ anchors.fill: row
98+ drag.target: slider
99+ drag.axis: Drag.XAxis
100+ drag.minimumX: 0
101+ drag.maximumX: row.width - slider.width
102+
103+ onReleased: {
104+ if (slider.x !== 0 || slider.x !== row.width - slider.width) {
105+ slider.x = (row.width - slider.width) / 2
106+ }
107+ if (slider.x < units.gu(.5)) {
108+ slider.x = 0
109+ }
110+ if (slider.x > row.width - slider.width - units.gu(.5)) {
111+ slider.x = row.width - slider.width
112+ }
113+ }
114+ }
115+}