[map] refactor map controls on widgets

Change-Id: Idc282ac6bf8867daafbc2ec03bc815d6fc3b281d
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

15 files changed, 100 insertions, 72 deletions

diff --git a/apps/com.pelagicore.map/panels/HeaderBackgroundMaximizedPanel.qml b/apps/com.pelagicore.map/panels/HeaderBackgroundMaximizedPanel.qml
index 19d5fa21..d3e4fd48 100644
--- a/apps/com.pelagicore.map/panels/HeaderBackgroundMaximizedPanel.qml
+++ b/apps/com.pelagicore.map/panels/HeaderBackgroundMaximizedPanel.qml
@@ -56,8 +56,8 @@ Item {
         anchors.right: destinationButtonsPanel.right
         anchors.rightMargin: -Sizes.dp(45 * .5)
         height: root.state === "initial"
-                ? Sizes.dp(sourceSize.height)
-                : Sizes.dp(sourceSize.height) - root.destinationButtonrowHeight
+                ? Sizes.dp(sourceSize.height) * 0.7
+                : Sizes.dp(sourceSize.height) * 0.7 - root.destinationButtonrowHeight
         source: Helper.localAsset("panel-shadow", Style.theme)
         border {
             //don't change these values without knowing the exact size of source image
@@ -77,6 +77,7 @@ Item {
         anchors.rightMargin: -Sizes.dp(45)
         source: Helper.localAsset("panel-more-contrast-background", Style.theme)
         visible: root.state === "initial"
+        height: Sizes.dp(sourceSize.height) * 0.7
         border {
             //don't change these values without knowing the exact size of source image
             //QTBUG-73768 if border exceeds source image size, app crashes, avoid Sizes.dp here
@@ -102,7 +103,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.rightMargin: -Sizes.dp(45)
-        height: Sizes.dp(destinationButtonsPanel.sourceSize.height)
+        height: Sizes.dp(destinationButtonsPanel.sourceSize.height) * 0.7
                     - root.destinationButtonrowHeight
         source: Helper.localAsset("panel-background", Style.theme)
         border {
diff --git a/apps/com.pelagicore.map/panels/HeaderBackgroundWidgetPanel.qml b/apps/com.pelagicore.map/panels/HeaderBackgroundWidgetPanel.qml
index d225d57e..e70c81ae 100644
--- a/apps/com.pelagicore.map/panels/HeaderBackgroundWidgetPanel.qml
+++ b/apps/com.pelagicore.map/panels/HeaderBackgroundWidgetPanel.qml
@@ -48,7 +48,8 @@ Item {
     Image {
         id: widgetBackgroundImage
         height: root.neptuneWindowState === "Widget3Rows"
-                ? Sizes.dp(sourceSize.height)
+                ? root.state === "initial"
+                        ? Sizes.dp(sourceSize.height) : Sizes.dp(sourceSize.height/2)
                 : Sizes.dp(sourceSize.height/2)
         anchors.left: parent.left
         anchors.right: parent.right
diff --git a/apps/com.pelagicore.map/panels/MapBoxPanel.qml b/apps/com.pelagicore.map/panels/MapBoxPanel.qml
index 8d40f5b8..94463e42 100644
--- a/apps/com.pelagicore.map/panels/MapBoxPanel.qml
+++ b/apps/com.pelagicore.map/panels/MapBoxPanel.qml
@@ -229,7 +229,8 @@ Item {
     Map {
         id: mainMap
         anchors.fill: parent
-        anchors.topMargin: (root.neptuneWindowState === "Widget3Rows") ? header.height/2 : 0
+        anchors.topMargin: root.neptuneWindowState === "Widget3Rows"
+                && root.state !== "demo_driving" ? header.height/3 : 0
         Behavior on anchors.topMargin { DefaultNumberAnimation {} }
         Behavior on center {
             enabled: root.mapInteractive;
@@ -305,7 +306,6 @@ Item {
         id: header
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.rightMargin: root.state === "demo_driving" ? Sizes.dp(600) : 0
         anchors.top: parent.top
         Behavior on opacity { DefaultNumberAnimation {} }
         Behavior on anchors.rightMargin { DefaultNumberAnimation {} }
@@ -323,7 +323,6 @@ Item {
 
         onOpenSearchTextInput: root.openSearchTextInput()
         onShowRoute: {
-            root.maximizeMap();
             root.showRouteRequested();
         }
         onStartNavigation: {
@@ -335,7 +334,6 @@ Item {
         onShowDestinationPoint: {
             root.showDestinationPointRequested(destCoord, description);
             root.center = destCoord;
-            root.maximizeMap();
         }
     }
 
diff --git a/apps/com.pelagicore.map/panels/MapHeaderPanel.qml b/apps/com.pelagicore.map/panels/MapHeaderPanel.qml
index 052b669d..b9c4c66d 100644
--- a/apps/com.pelagicore.map/panels/MapHeaderPanel.qml
+++ b/apps/com.pelagicore.map/panels/MapHeaderPanel.qml
@@ -78,6 +78,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: Sizes.dp(210)
         active: root.neptuneWindowState === "Maximized"
+        opacity: root.state === "demo_driving" ? 0.6 : 1.0
         sourceComponent: HeaderBackgroundMaximizedPanel {
             state: root.state
             destinationButtonrowHeight: root.destinationButtonrowHeight
@@ -90,7 +91,7 @@ Item {
         height: headerBackgroundFullscreen.height
         active: root.neptuneWindowState === "Maximized" && root.state === "initial"
         anchors.top: headerBackgroundFullscreen.top
-        anchors.topMargin: Sizes.dp(112)
+        anchors.topMargin: Sizes.dp(50)
         anchors.horizontalCenter: headerBackgroundFullscreen.horizontalCenter
         sourceComponent: NavigationSearchPanel {
             offlineMapsEnabled: root.offlineMapsEnabled
@@ -120,7 +121,7 @@ Item {
     Loader {
         id: favoriteDestinationButtonsFullscreen
         anchors.top: headerBackgroundFullscreen.top
-        anchors.topMargin: headerBackgroundFullscreen.height - height
+        anchors.topMargin: Sizes.dp(164)
         anchors.left: headerBackgroundFullscreen.left
         anchors.leftMargin: Sizes.dp(45)
         anchors.right: headerBackgroundFullscreen.right
@@ -144,19 +145,24 @@ Item {
         anchors.right: parent.right
         anchors.top: parent.top
         active: (root.neptuneWindowState === "Widget2Rows"
-                    || root.neptuneWindowState === "Widget3Rows")
-                && (root.state === "initial" || root.state === "destination_selection")
+                    || root.neptuneWindowState === "Widget3Rows"
+                    || root.neptuneWindowState === "Widget1Row")
+        opacity: root.neptuneWindowState === "Widget1Row" || root.state === "demo_driving"
+                 ? 0.6 : 1.0
         sourceComponent: HeaderBackgroundWidgetPanel {
             neptuneWindowState: root.neptuneWindowState
+            state: root.state
         }
     }
 
     Loader {
         id: navigationSearchButtonsWidget
-        width: headerBackgroundWidget.width - Sizes.dp(184) // compensate for the "expand" button in the widget corner
+        // - Sizes.dp(160) compensates the "expand" button in the widget corner
+        width: headerBackgroundWidget.width - Sizes.dp(160)
         active: (root.neptuneWindowState === "Widget2Rows"
-                    || root.neptuneWindowState === "Widget3Rows")
-                && (root.state === "initial" || root.state === "destination_selection")
+                    || root.neptuneWindowState === "Widget3Rows"
+                    || root.neptuneWindowState === "Widget1Row")
+                && root.state === "initial"
         anchors.top: headerBackgroundWidget.top
         anchors.topMargin: Sizes.dp(48)
         anchors.horizontalCenter: headerBackgroundWidget.horizontalCenter
@@ -167,6 +173,28 @@ Item {
     }
 
     Loader {
+        id: navigationConfirmButtonsWidget
+        // - Sizes.dp(60) compensates the "expand" button in the widget corner
+        width: headerBackgroundWidget.width - Sizes.dp(60)
+        active: (root.neptuneWindowState !== "Maximized")
+                && (root.state === "route_selection"
+                    || root.state === "destination_selection"
+                    || root.state === "demo_driving")
+        anchors.top: headerBackgroundWidget.top
+        anchors.topMargin: Sizes.dp(48)
+        sourceComponent: NavigationConfirmPanel {
+            state: root.state
+            neptuneWindowState: root.neptuneWindowState
+            destination: root.destination
+            routeDistance: root.routeDistance
+            routeTime: root.routeTime
+            onStartNavigation: root.startNavigation()
+            onShowRoute: root.showRoute()
+            onStopNavigation: root.stopNavigation()
+        }
+    }
+
+    Loader {
         id: favoriteDestinationButtonsWidget
         anchors.top: headerBackgroundWidget.top
         anchors.topMargin: Sizes.dp(130)
diff --git a/apps/com.pelagicore.map/panels/NavigationConfirmPanel.qml b/apps/com.pelagicore.map/panels/NavigationConfirmPanel.qml
index 192ae4d4..7a5207c9 100644
--- a/apps/com.pelagicore.map/panels/NavigationConfirmPanel.qml
+++ b/apps/com.pelagicore.map/panels/NavigationConfirmPanel.qml
@@ -39,9 +39,11 @@ import shared.Style 1.0
 import shared.Sizes 1.0
 import "../helpers" 1.0
 
-Row {
+RowLayout {
     id: root
 
+    property string neptuneWindowState
+
     property string destination: ""
     property string routeDistance: ""
     property string routeTime: ""
@@ -52,27 +54,24 @@ Row {
 
     spacing: Sizes.dp(45 * .5)
 
-    ToolButton {
-        width: Sizes.dp(45 * .9)
-        height: width
-        visible: root.state === "demo_driving"
-        icon.source: Qt.resolvedUrl("../assets/ic-end-route.png")
-        onClicked: root.stopNavigation()
-    }
-
     RowLayout {
-        width: root.state === "demo_driving"
-               ? parent.width : parent.width / 2
-        anchors.verticalCenter: parent.verticalCenter
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignVCenter
         spacing: Sizes.dp(45 * .7)
+        width: parent.width / 2
 
         ToolButton {
             Layout.leftMargin: parent.spacing
             width: Sizes.dp(45)
             height: width
             enabled: visible
-            visible: root.state === "route_selection" || root.state === "destination_selection"
-            icon.name: LayoutMirroring.enabled ? "ic_forward" : "ic_back"
+            visible: root.state === "route_selection"
+                     || root.state === "destination_selection"
+                     || root.state === "demo_driving"
+            icon.name: root.state === "demo_driving"
+                       ? "" : LayoutMirroring.enabled ? "ic_forward" : "ic_back"
+            icon.source: root.state === "demo_driving"
+                        ? Qt.resolvedUrl("../assets/ic-end-route.png") : ""
             onClicked: root.stopNavigation()
         }
 
@@ -97,9 +96,10 @@ Row {
         id: startNavigationButton
         width: parent.width / 3
         height: Sizes.dp(80)
-        anchors.verticalCenter: parent.verticalCenter
+        Layout.alignment: Qt.AlignVCenter
         scale: pressed ? 1.1 : 1.0
-        visible: root.state === "destination_selection" || root.state === "route_selection"
+        visible: root.state === "destination_selection"
+                 || root.state === "route_selection"
         Behavior on scale { NumberAnimation { duration: 50 } }
         Behavior on opacity { NumberAnimation { duration: 150 } }
 
diff --git a/apps/com.pelagicore.map/panels/NavigationSearchPanel.qml b/apps/com.pelagicore.map/panels/NavigationSearchPanel.qml
index 3009d10b..792751c3 100644
--- a/apps/com.pelagicore.map/panels/NavigationSearchPanel.qml
+++ b/apps/com.pelagicore.map/panels/NavigationSearchPanel.qml
@@ -49,14 +49,12 @@ Row {
 
     Item {
         width: parent.width/2
-        height: parent.height
+        height: Sizes.dp(72)
         Label {
-            width: parent.width/2
-            wrapMode: Text.WordWrap
-            maximumLineCount: 2
-            elide: Label.ElideRight
-            font.pixelSize: Sizes.fontSizeS
-            text: qsTr("Where do you wanna go today?")
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.pixelSize: Sizes.dp(26)
+            text: qsTr("Where do you want to go?")
         }
     }
 
diff --git a/apps/com.pelagicore.map/views/MapView.qml b/apps/com.pelagicore.map/views/MapView.qml
index 37a7757e..9f415f13 100644
--- a/apps/com.pelagicore.map/views/MapView.qml
+++ b/apps/com.pelagicore.map/views/MapView.qml
@@ -160,28 +160,6 @@ Item {
         onMaximizeMap: root.maximizeMap();
     }
 
-// todo: move it to mapbox.... why it's placed here????
-    ToolButton {
-        anchors.left: parent.left
-        anchors.leftMargin: Sizes.dp(27)
-        anchors.top: parent.top
-        anchors.topMargin: Sizes.dp(48)
-        opacity: root.neptuneWindowState === "Widget1Row" && mapBoxPanel.state === "initial" ? 1 : 0
-        Behavior on opacity { DefaultNumberAnimation {} }
-        visible: opacity > 0
-        icon.source: Qt.resolvedUrl("../assets/ic-search.png")
-        width: Sizes.dp(background.sourceSize.width)
-        height: width
-        background: Image {
-            fillMode: Image.PreserveAspectFit
-            source: Helper.localAsset("floating-button-bg", Style.theme)
-        }
-        onClicked: {
-            root.maximizeMap();
-            root.store.searchViewEnabled = true;
-        }
-    }
-
     FastBlur {
         anchors.fill: mapBoxPanel
         source: mapBoxPanel
diff --git a/imports_shared/assets/translations/ar_MA.ts b/imports_shared/assets/translations/ar_MA.ts
index 40baa017..677b24a0 100644
--- a/imports_shared/assets/translations/ar_MA.ts
+++ b/imports_shared/assets/translations/ar_MA.ts
@@ -708,7 +708,7 @@
     <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation>إلى أين تريد الذهاب اليوم؟</translation>
+        <translation type="vanished">إلى أين تريد الذهاب اليوم؟</translation>
     </message>
     <message>
         <source>Search not available offline</source>
@@ -718,6 +718,10 @@
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Where do you want to go?</source>
+        <translation>إلى أين تريدين الذهاب ؟</translation>
+    </message>
 </context>
 <context>
     <name>NotificationCenter</name>
diff --git a/imports_shared/assets/translations/cs_CZ.ts b/imports_shared/assets/translations/cs_CZ.ts
index f2213974..8b0c805f 100644
--- a/imports_shared/assets/translations/cs_CZ.ts
+++ b/imports_shared/assets/translations/cs_CZ.ts
@@ -1412,7 +1412,7 @@ UX na cestu</translation>
     <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation>Kam se chcete vydat dnes?</translation>
+        <translation type="vanished">Kam se chcete vydat dnes?</translation>
     </message>
     <message>
         <source>Search</source>
@@ -1422,6 +1422,10 @@ UX na cestu</translation>
         <source>Search not available offline</source>
         <translation>Hledání nedostupné offline</translation>
     </message>
+    <message>
+        <source>Where do you want to go?</source>
+        <translation>Kam se chcete vydat?</translation>
+    </message>
 </context>
 <context>
     <name>NetworkMonitor</name>
diff --git a/imports_shared/assets/translations/de_DE.ts b/imports_shared/assets/translations/de_DE.ts
index 25c0942b..85378938 100644
--- a/imports_shared/assets/translations/de_DE.ts
+++ b/imports_shared/assets/translations/de_DE.ts
@@ -982,7 +982,7 @@
     <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation type="unfinished">Wo soll es heute hingehen?</translation>
+        <translation type="obsolete">Wo soll es heute hingehen?</translation>
     </message>
     <message>
         <source>Search</source>
@@ -992,6 +992,10 @@
         <source>Search not available offline</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Where do you want to go?</source>
+        <translation>Wo soll es hingehen?</translation>
+    </message>
 </context>
 <context>
     <name>NetworkMonitor</name>
diff --git a/imports_shared/assets/translations/en_GB.ts b/imports_shared/assets/translations/en_GB.ts
index b5a276bc..a59adb5c 100644
--- a/imports_shared/assets/translations/en_GB.ts
+++ b/imports_shared/assets/translations/en_GB.ts
@@ -702,15 +702,15 @@
 <context>
     <name>NavigationSearchPanel</name>
     <message>
-        <source>Where do you wanna go today?</source>
+        <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>Search</source>
+        <source>Search not available offline</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>Search not available offline</source>
+        <source>Where do you want to go?</source>
         <translation type="unfinished"></translation>
     </message>
 </context>
diff --git a/imports_shared/assets/translations/en_US.ts b/imports_shared/assets/translations/en_US.ts
index 8ca1f6d9..24479096 100644
--- a/imports_shared/assets/translations/en_US.ts
+++ b/imports_shared/assets/translations/en_US.ts
@@ -695,15 +695,15 @@
 <context>
     <name>NavigationSearchPanel</name>
     <message>
-        <source>Where do you wanna go today?</source>
+        <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>Search</source>
+        <source>Search not available offline</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>Search not available offline</source>
+        <source>Where do you want to go?</source>
         <translation type="unfinished"></translation>
     </message>
 </context>
diff --git a/imports_shared/assets/translations/ja_JP.ts b/imports_shared/assets/translations/ja_JP.ts
index 1fad397d..2182ef63 100644
--- a/imports_shared/assets/translations/ja_JP.ts
+++ b/imports_shared/assets/translations/ja_JP.ts
@@ -1082,7 +1082,7 @@
     <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation type="unfinished">あなたはヒンジを握っていますか？</translation>
+        <translation type="obsolete">あなたはヒンジを握っていますか？</translation>
     </message>
     <message>
         <source>Search</source>
@@ -1092,6 +1092,10 @@
         <source>Search not available offline</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Where do you want to go?</source>
+        <translation>あなたはヒンジを握っていますか？</translation>
+    </message>
 </context>
 <context>
     <name>NetworkMonitor</name>
diff --git a/imports_shared/assets/translations/ko_KR.ts b/imports_shared/assets/translations/ko_KR.ts
index 1487eebd..aed0d1e8 100644
--- a/imports_shared/assets/translations/ko_KR.ts
+++ b/imports_shared/assets/translations/ko_KR.ts
@@ -1089,7 +1089,7 @@
     <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation type="unfinished">힌트 힌지를 해결 하시겠습니까?</translation>
+        <translation type="obsolete">힌트 힌지를 해결 하시겠습니까?</translation>
     </message>
     <message>
         <source>Search</source>
@@ -1099,6 +1099,10 @@
         <source>Search not available offline</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Where do you want to go?</source>
+        <translation>힌트 힌지를 해결 하시겠습니까?</translation>
+    </message>
 </context>
 <context>
     <name>NetworkMonitor</name>
diff --git a/imports_shared/assets/translations/zh_CN.ts b/imports_shared/assets/translations/zh_CN.ts
index 2ddca31b..a0d41605 100644
--- a/imports_shared/assets/translations/zh_CN.ts
+++ b/imports_shared/assets/translations/zh_CN.ts
@@ -1117,7 +1117,7 @@ If it is wrong, you can just delete first two charactor, just ues &quot;源&quot
     <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation type="unfinished">今天你想要去哪儿？</translation>
+        <translation type="obsolete">今天你想要去哪儿？</translation>
     </message>
     <message>
         <source>Search</source>
@@ -1127,6 +1127,10 @@ If it is wrong, you can just delete first two charactor, just ues &quot;源&quot
         <source>Search not available offline</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Where do you want to go?</source>
+        <translation>你想去哪里？</translation>
+    </message>
 </context>
 <context>
     <name>NetworkMonitor</name>