move components to map

MerginMaps · Feb 28, 2024 · 67653d4 · 67653d4
1 parent 89fb20b
commit 67653d4
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 180 deletions.
diff --git a/app/qml/CMakeLists.txt b/app/qml/CMakeLists.txt
@@ -26,7 +26,6 @@ set(MM_QML
     StakeoutPanel.qml
     map/Crosshair.qml
     map/Highlight.qml
-    map/LoadingIndicator.qml
     map/SplittingTools.qml
     map/StakeoutTools.qml
     misc/AttentionBanner.qml
@@ -51,9 +50,6 @@ set(MM_QML
     components/MMFeaturesListDrawer.qml
     components/MMListDrawer.qml
     components/MMListDrawerItem.qml
-    components/MMMapButton.qml
-    components/MMMapLabel.qml
-    components/MMMapPicker.qml
     components/MMMenuDrawer.qml
     components/MMMorePhoto.qml
     components/MMNotification.qml
@@ -140,7 +136,13 @@ set(MM_QML
     map/MapWrapper.qml
     map/MMPositionMarker.qml
     map/RecordingTools.qml
-    map/MMMapScaleBar.qml
+    map/components/MMBlurBox.qml
+    map/components/MMLoadingIndicator.qml
+    map/components/MMMapBlurLabel.qml
+    map/components/MMMapButton.qml
+    map/components/MMMapLabel.qml
+    map/components/MMMapPicker.qml
+    map/components/MMMapScaleBar.qml
     gps/MMAddPositionProviderDrawer.qml
     gps/MMBluetoothConnectionDrawer.qml
     gps/MMGpsDataDrawer.qml

diff --git a/app/qml/map/MapWrapper.qml b/app/qml/map/MapWrapper.qml
@@ -14,10 +14,10 @@ import QtQuick.Dialogs
 import QtQuick.Layouts
 import QtQuick.Shapes
 
-import ".."
+import "."
 import "../components"
+import "./components"
 import "../dialogs"
-import "../banners"
 
 import notificationType 1.0
 
@@ -155,7 +155,7 @@ Item {
 
       Rectangle {
         id: canvasBackground
-        color: InputStyle.clrPanelMain
+        color: __style.whiteColor
         anchors.fill: parent
       }
 
@@ -222,147 +222,140 @@ Item {
       StateGroup {
         id: gpsStateGroup
 
-        property color indicatorColor: InputStyle.softRed
+        property color indicatorColor: __style.negativeColor
 
         states: [
           State {
             name: "good" // GPS provides position AND horizontal accuracy is below set tolerance (threshold)
             when: __positionKit.hasPosition && __positionKit.horizontalAccuracy > 0 && __positionKit.horizontalAccuracy <= __appSettings.gpsAccuracyTolerance
             PropertyChanges {
               target: gpsStateGroup
-              indicatorColor: InputStyle.softGreen
+              indicatorColor: __style.positiveColor
             }
           },
           State {
             name: "low" // below accuracy tolerance OR GPS does not provide horizontal accuracy
             when: __positionKit.hasPosition &&  (__positionKit.horizontalAccuracy < 0 || __positionKit.horizontalAccuracy > __appSettings.gpsAccuracyTolerance )
             PropertyChanges {
               target: gpsStateGroup
-              indicatorColor: InputStyle.softOrange
+              indicatorColor: __style.warningColor
             }
           },
           State {
             name: "unavailable" // GPS does not provide position
             when: !__positionKit.hasPosition
             PropertyChanges {
               target: gpsStateGroup
-              indicatorColor: InputStyle.softRed
+              indicatorColor: __style.negativeColor
             }
           }
         ]
       }
 
-      LoadingIndicator {
-        width: mapCanvas.width
-        height: InputStyle.mapLoadingIndicatorHeight
+      // TOP elements
+      MMLoadingIndicator {
+        id: loadingIndicator
 
+        width: mapCanvas.width
+        height: visible ? 7 * __dp : 0
         anchors.top: canvasRoot.top
-
-        visible: mapCanvas.isRendering && root.state !== "inactive"
+        visible: true // mapCanvas.isRendering && root.state !== "inactive"
       }
 
-      Item {
-        id: topGuiElements
+      MMMapButton {
+        id: backButton
 
+        height: visible ? __style.mapItemHeight : 0
         anchors {
-          top: parent.top
-          topMargin: __style.mapButtonsMargin
+          top: loadingIndicator.bottom
+          topMargin: __style.margin8
           left: parent.left
           leftMargin: __style.mapButtonsMargin
-          right: parent.right
-          rightMargin: __style.mapButtonsMargin
         }
+        visible: internal.isInRecordState || root.state === "split"
+        iconSource: __style.backIcon
 
-        MMMapButton {
-          id: backButton
-
-          anchors {
-            top: parent.top
-            topMargin: __style.mapButtonsMargin
-            left: parent.left
-            leftMargin: __style.mapButtonsMargin
-          }
-
-          iconSource: __style.backIcon
-
-          visible: internal.isInRecordState || root.state === "split"
-
-          onClicked: {
-            if ( root.state === "edit" || root.state === "record" || root.state === "recordInLayer" ) {
-              if ( recordingToolsLoader.item.hasChanges() ) {
-                cancelEditDialog.open()
-              }
-              else {
-                recordingToolsLoader.item.discardChanges()
-              }
+        onClicked: {
+          if ( root.state === "edit" || root.state === "record" || root.state === "recordInLayer" ) {
+            if ( recordingToolsLoader.item.hasChanges() ) {
+              cancelEditDialog.open()
             }
-            else if ( root.state === "split" ) {
-              howtoSplittingBanner.hide()
-              root.splittingCanceled()
-              root.state = "view"
+            else {
+              recordingToolsLoader.item.discardChanges()
             }
           }
-        }
-
-        MMMapPicker {
-          id: mapPicker
-
-          anchors {
-            top: parent.top
-            topMargin: __style.mapButtonsMargin
-            left: backButton.right
-            leftMargin: __style.mapButtonsMargin
+          else if ( root.state === "split" ) {
+            howtoSplittingBanner.hide()
+            root.splittingCanceled()
+            root.state = "view"
           }
+        }
+      }
 
-          width: Math.min( parent.width - backButton.width - ( 3 * __style.mapButtonsMargin ), 500 * __dp )
-
-          text: __activeLayer.layerName
-          leftIconSource: __inputUtils.loadIconFromLayer( __activeLayer.layer )
-
-          visible: root.state === "record"
+      MMMapPicker {
+        id: mapPicker
 
-          onClicked: activeLayerPanel.open()
+        width: Math.min( parent.width - backButton.width - ( 3 * __style.mapButtonsMargin ), 500 * __dp )
+        height: visible ? __style.mapItemHeight : 0
+        anchors {
+          top: loadingIndicator.bottom
+          topMargin: __style.margin8
+          left: backButton.right
+          leftMargin: __style.mapButtonsMargin
         }
+        visible: root.state === "record"
+        text: __activeLayer.layerName
+        leftIconSource: __inputUtils.loadIconFromLayer( __activeLayer.layer )
 
-        MMMapBlurLabel {
-          id: howtoSplittingBanner
+        onClicked: activeLayerPanel.open()
+      }
 
-          width: parent.width - 2 * __style.pageMargins
-          anchors.top: mapPicker.visible ? mapPicker.bottom : canvasRoot.top
-          sourceItem: map
-          text: qsTr( "Create line to split the selected feature" )
-        }
+      MMMapBlurLabel {
+        id: howtoSplittingBanner
 
-        MMMapBlurLabel {
-          id: howtoEditingBanner
+        visible: false
+        width: parent.width - 2 * __style.pageMargins
+        height: visible ?  __style.row40 : 0
+        anchors.top: backButton.bottom
+        anchors.topMargin: __style.margin8
+        sourceItem: mapCanvas
+        text: qsTr( "Create line to split the selected feature" )
+      }
 
-          width: parent.width - 2 * __style.pageMargins
-          anchors.top: mapPicker.visible ? mapPicker.bottom : canvasRoot.top
-          sourceItem: map
-          text: qsTr( "Select some point to start editing the geometry" )
-        }
+      MMMapBlurLabel {
+        id: howtoEditingBanner
 
-        MMMapBlurLabel {
-          id: redrawGeometryBanner
+        width: parent.width - 2 * __style.pageMargins
+        height: visible ?  __style.row40 : 0
+        anchors.top: howtoSplittingBanner.bottom
+        anchors.topMargin: __style.margin8
+        sourceItem: mapCanvas
+        text: qsTr( "Select some point to start editing the geometry" )
+      }
 
-          width: parent.width - 2 * __style.pageMargins
-          anchors.top: mapPicker.visible ? mapPicker.bottom : canvasRoot.top
-          sourceItem: map
-          text: qsTr( "Record new geometry for the feature" )
-        }
+      MMMapBlurLabel {
+        id: redrawGeometryBanner
 
-        MMMapScaleBar {
-          id: scaleBar
+        width: parent.width - 2 * __style.pageMargins
+        height: visible ?  __style.row40 : 0
+        anchors.top: howtoEditingBanner.bottom
+        anchors.topMargin: __style.margin8
+        sourceItem: mapCanvas
+        text: qsTr( "Record new geometry for the feature" )
+      }
 
-          mapSettings: mapCanvas.mapSettings
-          sourceItem: mapCanvas
-          preferredWidth: Math.min( window.width, 180 * __dp )
+      MMMapScaleBar {
+        id: scaleBar
 
-          anchors.horizontalCenter: parent.horizontalCenter
-          anchors.top: mapPicker.visible ? mapPicker.bottom : canvasRoot.top
-          anchors.topMargin: 8 * __dp
-        }
+        mapSettings: mapCanvas.mapSettings
+        sourceItem: mapCanvas
+        preferredWidth: Math.min( window.width, 180 * __dp )
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: redrawGeometryBanner.bottom
+        anchors.topMargin: __style.margin8
       }
+      // END OF: TOP elements
 
       Highlight {
         id: identifyHighlight

diff --git a/app/qml/components/MMMapBlurLabel.qml → app/qml/map/components/MMBlurBox.qml b/app/qml/components/MMMapBlurLabel.qml → app/qml/map/components/MMBlurBox.qml
@@ -9,17 +9,19 @@
 
 import QtQuick
 import Qt5Compat.GraphicalEffects
+import lc 1.0
 import "."
 
 Item {
   id: root
 
-  height: 41 * __dp
-
   // Item to blur (map)
   property alias sourceItem: effect.sourceItem
 
-  property alias text: text.text
+  property alias fadeOutDuration: fadeOut.duration // in ms
+  property alias timerInterval: timer.interval // in ms
+
+  visible: false
 
   // Blurred map
   FastBlur {
@@ -46,19 +48,31 @@ Item {
     radius: parent.height / 2
   }
 
-  // Text
-  Text {
-    id: text
+  NumberAnimation on opacity {
+    id: fadeOut
 
-    height: parent.height
-    width: parent.width - 40 * __dp
-    anchors.verticalCenter: parent.verticalCenter
-    anchors.horizontalCenter: parent.horizontalCenter
+    from: 1
+    to: 0.0
 
-    color: __style.forestColor
-    font: __style.t3
-    horizontalAlignment: Text.AlignHCenter
-    verticalAlignment: Text.AlignVCenter
-    elide: Text.ElideRight
+    onStopped: {
+      root.visible = false
+      root.opacity = 1.0
+    }
+  }
+
+  Timer {
+    id: timer
+    running: false
+    repeat: false
+    onTriggered: {
+      fadeOut.start()
+    }
+  }
+
+  onVisibleChanged: {
+    if (root.visible) {
+      fadeOut.stop()
+      timer.restart()
+    }
   }
 }
diff --git a/app/qml/map/LoadingIndicator.qml → ...qml/map/components/MMLoadingIndicator.qml b/app/qml/map/LoadingIndicator.qml → ...qml/map/components/MMLoadingIndicator.qml
@@ -10,12 +10,10 @@
 import QtQuick
 import QtQuick.Controls
 import Qt5Compat.GraphicalEffects
-import ".."
 
 Rectangle {
   id: loadingIndicator
-  anchors.top: parent.top
-  color: InputStyle.fontColor
+  color: __style.forestColor
 
   Rectangle {
     id: bar
@@ -38,9 +36,9 @@ Rectangle {
       end: Qt.point(bar.width, 0)
       source: bar
       gradient: Gradient {
-        GradientStop { position: 0.0; color: InputStyle.fontColor }
-        GradientStop { position: 0.5; color: Qt.lighter(InputStyle.fontColor, 2) }
-        GradientStop { position: 1.0; color: InputStyle.fontColor }
+        GradientStop { position: 0.0; color: __style.forestColor }
+        GradientStop { position: 0.5; color: Qt.lighter(__style.forestColor, 2) }
+        GradientStop { position: 1.0; color: __style.forestColor }
       }
     }
   }