Fix UI layout

The current snowshoe version has invalid heights for some components
leading to incorrect positioning.

Reviewed-by: Lauro Moura

10 files changed, 11 insertions, 12 deletions

diff --git a/src/mobile/images/button_pin_pressed.png b/src/mobile/images/button_pin_pressed.png
index 8d17d9f..f1d0ae8 100644
--- a/src/mobile/images/button_pin_pressed.png
+++ b/src/mobile/images/button_pin_pressed.png
diff --git a/src/mobile/images/button_pin_unpressed.png b/src/mobile/images/button_pin_unpressed.png
index 65603f0..9bf39e1 100644
--- a/src/mobile/images/button_pin_unpressed.png
+++ b/src/mobile/images/button_pin_unpressed.png
diff --git a/src/mobile/images/button_settings_pressed.png b/src/mobile/images/button_settings_pressed.png
index 4dc92f3..a12f180 100644
--- a/src/mobile/images/button_settings_pressed.png
+++ b/src/mobile/images/button_settings_pressed.png
diff --git a/src/mobile/images/button_settings_unpressed.png b/src/mobile/images/button_settings_unpressed.png
index 8738b4d..ced4a54 100644
--- a/src/mobile/images/button_settings_unpressed.png
+++ b/src/mobile/images/button_settings_unpressed.png
diff --git a/src/mobile/images/button_share_pressed.png b/src/mobile/images/button_share_pressed.png
index 68aba5e..92aa7ba 100644
--- a/src/mobile/images/button_share_pressed.png
+++ b/src/mobile/images/button_share_pressed.png
diff --git a/src/mobile/images/button_share_unpressed.png b/src/mobile/images/button_share_unpressed.png
index aafa16e..3ee0fd9 100644
--- a/src/mobile/images/button_share_unpressed.png
+++ b/src/mobile/images/button_share_unpressed.png
diff --git a/src/mobile/qml/Main.qml b/src/mobile/qml/Main.qml
index 0e729cf..5fff69f 100644
--- a/src/mobile/qml/Main.qml
+++ b/src/mobile/qml/Main.qml
@@ -109,7 +109,7 @@ Rectangle {
         source: plusButtonMouseArea.pressed ? "qrc:///mobile/nav/btn_plus_pressed" : "qrc:///mobile/nav/btn_plus_unpressed"
 
         anchors.top: topSitesPanel.bottom
-        anchors.topMargin: 27
+        anchors.topMargin: 21
         anchors.horizontalCenter: rootPage.horizontalCenter
 
         MouseArea {
diff --git a/src/mobile/qml/NavigationPanel.qml b/src/mobile/qml/NavigationPanel.qml
index ba85dc0..4dd00c8 100644
--- a/src/mobile/qml/NavigationPanel.qml
+++ b/src/mobile/qml/NavigationPanel.qml
@@ -51,7 +51,7 @@ Item {
 
     Image {
         id: barsBackground
-        height: tabBar.height
+        height: UiConstants.TabBarHeight
         source: "qrc:///mobile/app/bg_image"
         anchors.bottom: parent.bottom
         fillMode: Image.Pad
@@ -186,9 +186,8 @@ Item {
             StateChangeScript { script: navigationBarHidingTimer.stop() }
             PropertyChanges {
                 target: barsBackground
-                height: tabBar.height + tabBar.anchors.topMargin + tabBar.anchors.bottomMargin
-                        + navigationBar.height + navigationBar.anchors.topMargin + navigationBar.anchors.bottomMargin
-                        + overlayBar.height + overlayBar.anchors.topMargin + overlayBar.anchors.bottomMargin
+                height: tabBar.height + navigationBar.height + navigationBar.anchors.bottomMargin
+                        + overlayBar.height + overlayBar.anchors.bottomMargin
             }
             PropertyChanges {
                 target: visibleTab
diff --git a/src/mobile/qml/OverlayBar.qml b/src/mobile/qml/OverlayBar.qml
index 9148c4e..9d330a8 100644
--- a/src/mobile/qml/OverlayBar.qml
+++ b/src/mobile/qml/OverlayBar.qml
@@ -46,7 +46,7 @@ Item {
             id: buttonShare
             anchors {
                 left: buttonThumbview.right
-                margins: UiConstants.OverlayBarInsideMargin
+                leftMargin: UiConstants.OverlayBarInsideMargin
             }
             pressedImage: "qrc:///mobile/overlaybar/btn_share_pressed"
             unpressedImage: "qrc:///mobile/overlaybar/btn_share_unpressed"
@@ -57,7 +57,7 @@ Item {
             id: buttonPlus
             anchors {
                 left: buttonShare.right
-                margins: UiConstants.OverlayBarInsideMargin
+                right: buttonPin.left
             }
             pressedImage: "qrc:///mobile/overlaybar/btn_plus_pressed"
             unpressedImage: "qrc:///mobile/overlaybar/btn_plus_unpressed"
@@ -67,8 +67,8 @@ Item {
         Button {
             id: buttonPin
             anchors {
-                left: buttonPlus.right
-                margins: UiConstants.OverlayBarInsideMargin
+                right: buttonSettings.left
+                rightMargin: UiConstants.OverlayBarInsideMargin
             }
             pressedImage: pin ? "qrc:///mobile/overlaybar/btn_pin_unpressed" : "qrc:///mobile/overlaybar/btn_pin_pressed"
             unpressedImage: pin ? "qrc:///mobile/overlaybar/btn_pin_pressed" : "qrc:///mobile/overlaybar/btn_pin_unpressed"
diff --git a/src/mobile/qml/UiConstants.js b/src/mobile/qml/UiConstants.js
index 7673e14..b64cbe9 100644
--- a/src/mobile/qml/UiConstants.js
+++ b/src/mobile/qml/UiConstants.js
@@ -28,9 +28,9 @@ var DefaultSwipeLenght = 50
 var NavBarLongMargin = 16
 var NavBarShortMargin = 8
 var OverlayBarSideMargin = 16
-var OverlayBarInsideMargin = 42
-var OverlayBarHeight = 64
-var StatusBarHeight = 30
+var OverlayBarInsideMargin = 40
+var OverlayBarHeight = 58
+var StatusBarHeight = 36
 var TabBarHeight = 25 + 27 + 21
 var PortraitHeight = 854 - StatusBarHeight
 var PortraitWidth = 480