on xenial help sign in
1. HUD button now persistent on screen for 5 seconds

2. HUD button now appears with a longer drag (units.gu(8)) 3. HUD button disappears touching outside it 4. HUD button responds on clicks 5. HUD button is now centered on phones and small tablet (till Nexus 7 for example)

commite45b29725054b8d25c4021f6e49ddac171ee6329 authorAndrea Cimitan <andrea.cimitan@canonical.com> dateFri 23 Aug 2013, 14:35 (13 years ago) parentbbab3ce
2 files changed+57−12
Bottombar/Bottombar.qml+52−6 Bottombar/HudButton.qml+5−6
Bottombar/Bottombar.qml+52−6
@@ -28,15 +28,46 @@ Item {
2828
2929 property variant theHud
3030 property bool enabled: false
31+ property bool preventHiding: dragArea.dragging
3132 readonly property real bottomEdgeButtonCenterDistance: units.gu(34)
3233
33− state: dragArea.status === DirectionalDragArea.Recognized ? "shown" : "hidden"
34+ state: "hidden"
35+
36+ onStateChanged: {
37+ if (state == "hidden") {
38+ dismissTimer.stop()
39+ } else {
40+ dismissTimer.restart()
41+ }
42+ }
43+
44+ onPreventHidingChanged: {
45+ if (dismissTimer.running) {
46+ dismissTimer.restart();
47+ }
48+ }
49+
50+ Timer {
51+ id: dismissTimer
52+ interval: 5000
53+ onTriggered: {
54+ if (!bottombar.preventHiding) {
55+ bottombar.state = "hidden"
56+ } else {
57+ dismissTimer.restart()
58+ }
59+ }
60+ }
3461
3562 HudButton {
3663 id: hudButton
3764
38− x: MathLocal.clamp(dragArea.touchStartX - (width / 2), 0, bottombar.width - width)
65+ readonly property bool centeredHud: parent.width < units.gu(68) // Nexus 7 has 67 gu width
66+
67+ x: centeredHud ? parent.width / 2 - width / 2 : MathLocal.clamp(dragArea.touchStartX - (width / 2), 0, bottombar.width - width)
3968 y: bottombar.height - bottomEdgeButtonCenterDistance - (height / 2) - bottomMargin
69+ z: 1
70+ visible: opacity != 0
4071
4172 mouseOver: {
4273 if (dragArea.status === DirectionalDragArea.Recognized) {
@@ -55,13 +86,18 @@ Item {
5586 }
5687
5788 Behavior on opacity {
58− NumberAnimation{ duration: 200; easing.type: Easing.OutCubic}
89+ NumberAnimation{duration: 200; easing.type: Easing.OutCubic}
5990 }
6091 }
6192
6293 Connections {
6394 target: theHud
64− onShownChanged: bottomBarVisibilityCommunicatorShell.forceHidden = theHud.shown
95+ onShownChanged: {
96+ bottomBarVisibilityCommunicatorShell.forceHidden = theHud.shown
97+ if (theHud.shown) {
98+ bottombar.state = "hidden"
99+ }
100+ }
65101 }
66102
67103 EdgeDragArea {
@@ -70,6 +106,7 @@ Item {
70106 height: distanceThreshold
71107 anchors.bottom: parent.bottom
72108
109+ distanceThreshold: units.gu(8)
73110 enabled: !theHud.shown && bottombar.enabled && applicationIsOnForeground
74111 direction: Direction.Upwards
75112
@@ -83,13 +120,23 @@ Item {
83120 hudButton.clicked()
84121 }
85122 }
86− } else if (status === DirectionalDragArea.Undecided) {
123+ } else if (status === DirectionalDragArea.Undecided && !hudButton.centeredHud) {
87124 touchStartX = touchX
125+ } else if (status === DirectionalDragArea.Recognized) {
126+ bottombar.state = "shown"
88127 }
89128 previousStatus = status
90129 }
91130 }
92131
132+ MouseArea {
133+ anchors.fill: parent
134+ enabled: bottombar.state == "shown"
135+ onPressed: {
136+ bottombar.state = "hidden"
137+ }
138+ }
139+
93140 states: [
94141 State {
95142 name: "hidden"
@@ -102,5 +149,4 @@ Item {
102149 PropertyChanges { target: hudButton; bottomMargin: units.gu(0)}
103150 }
104151 ]
105−
106152}
Bottombar/HudButton.qml+5−6
@@ -33,7 +33,6 @@ Item {
3333
3434 Item {
3535 id: hudButton
36− property alias actionButton: actionButton
3736
3837 anchors.centerIn: parent
3938 height: units.gu(12)
@@ -43,14 +42,14 @@ Item {
4342 Behavior on opacity {NumberAnimation{duration: 200; easing.type: Easing.OutQuart}}
4443 Behavior on scale {NumberAnimation{duration: 200; easing.type: Easing.OutQuart}}
4544
46− UbuntuShape {
47− id: actionButton
45+ AbstractButton {
4846 anchors.fill: parent
49−
50− borderSource: ""
51− image: Image {
47+ style: Image {
48+ anchors.fill: parent
5249 source: "graphics/hud_invoke_button_active.png"
5350 }
51+
52+ onClicked: item.clicked()
5453 }
5554
5655 Image {