Introduce titles to information components

opengisch · May 20, 2024 · 90cf072 · 90cf072
1 parent ca115e8
commit 90cf072
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 47 deletions.
diff --git a/src/qml/ElevationProfile.qml b/src/qml/ElevationProfile.qml
@@ -7,16 +7,14 @@ import org.qfield 1.0
 
 import Theme 1.0
 
-Item {
+Rectangle {
   id: elevationProfile
 
   property alias project: elevationProfileCanvas.project
   property alias crs: elevationProfileCanvas.crs
   property alias profileCurve: elevationProfileCanvas.profileCurve
   property alias tolerance: elevationProfileCanvas.tolerance
 
-  property alias radius: backgroundRect.radius
-
   function populateLayersFromProject() {
     elevationProfileCanvas.populateLayersFromProject();
   }
@@ -29,14 +27,8 @@ Item {
     elevationProfileCanvas.clear();
   }
 
-  Rectangle {
-      id: backgroundRect
-
-      width: elevationProfile.width
-      height: elevationProfile.height
-      color: "#ffffff"
-      radius: 8
-  }
+  color: "#bbfafafa"
+  radius: 0
 
   ElevationProfileCanvas {
     id: elevationProfileCanvas

diff --git a/src/qml/InformationDrawer.qml b/src/qml/InformationDrawer.qml
@@ -35,7 +35,6 @@ Item {
   property alias positioningPreciseView: positioningPreciseView
   property PositioningSettings positioningSettings
   property Positioning positionSource
-  property real positioningPreciseViewHeight
   property bool positioningPreciseEnabled: !elevationProfile.visible
                                            && !isNaN(navigation.distance)
                                            && navigation.isActive
@@ -49,56 +48,164 @@ Item {
   Column {
     id: mainContent
     width: parent.width - 10
-    anchors.horizontalCenter: parent.horizontalCenter
+    leftPadding: 5
+    rightPadding: 5
     spacing: 8
 
-    NavigationInformationView {
-      id: navigationInformationView
+    Rectangle {
+      visible: navigationInformationViewEnabled
       width: parent.width
-      height: navigationInformationViewEnabled ? contentHeight : 0
+      height: childrenRect.height
+      color: Theme.mainBackgroundColorSemiOpaque
       radius: itemRadius
       clip: true
-      navigation: controller.navigation
+
+      Column {
+        width: parent.width - 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        topPadding: 5
+        bottomPadding: 5
+        spacing: 4
+
+        Text {
+          text: "Navigation"
+          font: Theme.strongTipFont
+          color: Theme.mainTextColor
+        }
+
+        NavigationInformationView {
+          id: navigationInformationView
+          width: parent.width
+          height: contentHeight
+          navigation: controller.navigation
+        }
+      }
     }
 
-    PositioningInformationView {
-      id: positioningInformationView
+    Rectangle {
+      visible: positioningInformationViewEnabled
       width: parent.width
-      height: positioningInformationViewEnabled ? contentHeight : 0
+      height: childrenRect.height
+      color: Theme.mainBackgroundColorSemiOpaque
       radius: itemRadius
       clip: true
-      visible: positioningInformationViewEnabled
-      positionSource: controller.positionSource
-      antennaHeight: positioningSettings.antennaHeightActivated ? positioningSettings.antennaHeight : NaN
+
+      Column {
+        width: parent.width - 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        topPadding: 5
+        bottomPadding: 5
+        spacing: 4
+
+        Text {
+          text: "Positioning"
+          font: Theme.strongTipFont
+          color: Theme.mainTextColor
+        }
+
+        PositioningInformationView {
+          id: positioningInformationView
+          width: parent.width
+          height: contentHeight
+          radius: itemRadius
+          clip: true
+          visible: positioningInformationViewEnabled
+          positionSource: controller.positionSource
+          antennaHeight: positioningSettings.antennaHeightActivated ? positioningSettings.antennaHeight : NaN
+        }
+      }
     }
 
-    PositioningPreciseView {
-      id: positioningPreciseView
+    Rectangle {
+      visible: positioningPreciseEnabled
       width: parent.width
-      height: positioningPreciseEnabled ? positioningPreciseViewHeight : 0
-      clip: true
-      precision: positioningSettings.preciseViewPrecision
+      height: childrenRect.height
+      color: Theme.mainBackgroundColorSemiOpaque
+
+      Column {
+        width: parent.width - 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        topPadding: 5
+        bottomPadding: 5
+        spacing: 4
+
+        Text {
+          text: "Precise view"
+          font: Theme.strongTipFont
+          color: Theme.mainTextColor
+        }
+
+        PositioningPreciseView {
+          id: positioningPreciseView
+          width: parent.width
+          height: Math.min(mainWindow.height / 2.5, 400)
+          clip: true
+          precision: positioningSettings.preciseViewPrecision
+        }
+      }
     }
 
-    SensorInformationView {
-      id: sensorInformationView
-      height: sensorInformationViewEnabled ? contentHeight : 0
+    Rectangle {
+      visible: sensorInformationViewEnabled
+      width: parent.width
+      height: childrenRect.height
+      color: Theme.mainBackgroundColorSemiOpaque
       radius: itemRadius
       clip: true
-    }
-
-    ElevationProfile {
-        id: elevationProfile
 
-        visible: stateMachine.state === 'measure' && elevationProfileButton.elevationProfileActive
+      Column {
+        width: parent.width - 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        topPadding: 5
+        bottomPadding: 5
+        spacing: 4
+
+        Text {
+          text: "Sensors"
+          font: Theme.strongTipFont
+          color: Theme.mainTextColor
+        }
+
+        SensorInformationView {
+          id: sensorInformationView
+          height: contentHeight
+          radius: itemRadius
+          clip: true
+        }
+      }
+    }
 
-        width: parent.width
-        height: Math.max(220, mainWindow.height / 4)
-        radius: itemRadius
-        clip: true
+    Rectangle {
+      visible: stateMachine.state === 'measure' && elevationProfileButton.elevationProfileActive
+      width: parent.width
+      height: childrenRect.height
+      color: Theme.mainBackgroundColorSemiOpaque
+      radius: itemRadius
+      clip: true
 
-        project: qgisProject
-        crs: mapCanvas.mapSettings.destinationCrs
+      Column {
+        width: parent.width - 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        topPadding: 5
+        bottomPadding: 5
+        spacing: 4
+
+        Text {
+          text: "Elevation profile"
+          font: Theme.strongTipFont
+          color: Theme.mainTextColor
+        }
+
+        ElevationProfile {
+          id: elevationProfile
+
+          width: parent.width
+          height: Math.max(220, mainWindow.height / 4)
+
+          project: qgisProject
+          crs: mapCanvas.mapSettings.destinationCrs
+        }
+      }
     }
   }
 }
diff --git a/src/qml/NavigationInformationView.qml b/src/qml/NavigationInformationView.qml
@@ -23,8 +23,6 @@ Rectangle {
   property real contentHeight: content.height
 
   color: Theme.mainBackgroundColorSemiOpaque
-  border.color: alternateBackgroundColor
-  border.width: 2
 
   Timer {
     id: featureVertexTimer

diff --git a/src/qml/PositioningPreciseView.qml b/src/qml/PositioningPreciseView.qml
@@ -31,7 +31,7 @@ Item {
 
   Rectangle {
     anchors.fill: parent
-    color: "#ee" + Theme.mainBackgroundColor.toString().slice(1)
+    color: Theme.mainBackgroundColorSemiOpaque
     radius: 8
   }
 

diff --git a/src/qml/imports/Theme/Theme.qml b/src/qml/imports/Theme/Theme.qml
@@ -7,7 +7,7 @@ QtObject {
     property bool darkTheme: false
 
     property color mainBackgroundColor: darkTheme ? "#303030" : "#fafafa"
-    property color mainBackgroundColorSemiOpaque: darkTheme ? "#dd303030" : "#ddfafafa"
+    property color mainBackgroundColorSemiOpaque: darkTheme ? "#bb303030" : "#bbfafafa"
 
     property color mainTextColor: darkTheme ? "#EEEEEE" : "#000000"
     readonly property color mainTextDisabledColor: darkTheme ? "#73EEEEEE" : "#73000000"

diff --git a/src/qml/qgismobileapp.qml b/src/qml/qgismobileapp.qml
@@ -866,7 +866,6 @@ ApplicationWindow {
     navigation: navigation
     positionSource: positionSource
     positioningSettings: positioningSettings
-    positioningPreciseViewHeight: Math.min(mainWindow.height / 2.5, 400)
   }
 
   /**************************************************