Toolbar

app/mmstyle.h

@@ -234,7 +234,7 @@ class MMStyle: public QObject
     Q_PROPERTY( double mapButtonsMargin READ margin20 CONSTANT )
 
     // Toolbar
-    Q_PROPERTY( double toolbarHeight READ toolbarHeight CONSTANT )
+    Q_PROPERTY( double toolbarHeight READ toolbarHeight NOTIFY safeAreaBottomChanged )
     Q_PROPERTY( double menuDrawerHeight READ menuDrawerHeight CONSTANT )
 
     // Safe area sizes - to not draw content over notch and system bars (used on mobile devices)
@@ -468,7 +468,17 @@ class MMStyle: public QObject
     double icon32() {return 32 * mDp;}
 
     double mapItemHeight() {return 60 * mDp;}
-    double toolbarHeight() {return 68 * mDp;}
+    double toolbarHeight()
+    {
+      if ( mSafeAreaBottom > 2 )
+      {
+        return 54 * mDp;
+      }
+      else
+      {
+        return 68 * mDp;
+      }
+    }
     double menuDrawerHeight() {return 67 * mDp;}
     double maxPageWidth() {return 720 * mDp;}
 

app/qml/CMakeLists.txt

@@ -14,6 +14,7 @@ set(MM_QML
     account/MMSignUpPage.qml
     account/MMSwitchWorkspacePage.qml
     account/MMWhichIndustryPage.qml
+    components/MMBaseToolbar.qml
     components/MMButton.qml
     components/MMCalendarDrawer.qml
     components/MMCheckBox.qml

app/qml/components/MMBaseToolbar.qml

@@ -0,0 +1,35 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+
+/**
+  Base toolbar - take care of safe margins and width and height.
+  Do not use directly in-app, see MMSelectableToolbar and MMToolbar
+*/
+Rectangle {
+  id: root
+
+  property alias toolbarContent: contentGroup.children
+
+  height: __style.toolbarHeight + __style.safeAreaBottom
+  width: window?.width ?? __style.safeAreaLeft + __style.safeAreaRight
+  color: __style.forestColor
+
+  Item {
+    id: contentGroup
+
+    height: __style.toolbarHeight
+    width: parent.width - __style.safeAreaLeft - __style.safeAreaRight
+
+    // center the content
+    x: __style.safeAreaLeft
+  }
+
+}

app/qml/components/MMSelectableToolbar.qml

@@ -9,24 +9,21 @@
 
 import QtQuick
 
-Rectangle {
-  id: control
+MMBaseToolbar {
+  id: root
 
   signal clicked
 
   property alias model: buttonView.model
   property alias index: buttonView.currentIndex
 
-  height: __style.toolbarHeight
-  color: __style.forestColor
-
-  GridView {
+  toolbarContent: GridView {
     id: buttonView
 
     anchors.fill: parent
 
-    cellHeight: __style.toolbarHeight
-    cellWidth: Math.floor(control.width / control.model.count)
+    cellHeight: parent.height
+    cellWidth: Math.floor(parent.width / root.model.count)
 
     highlightFollowsCurrentItem: false
     interactive: false

app/qml/components/MMToolbar.qml

@@ -8,24 +8,27 @@
  ***************************************************************************/
 
 import QtQuick
-import Qt5Compat.GraphicalEffects
 
-Rectangle {
-  id: control
-
-  signal clicked
+MMBaseToolbar {
+  id: root
 
   required property var model
-
   readonly property double minimumToolbarButtonWidth: 100 * __dp
-
   property int maxButtonsInToolbar: 4
 
-  height: __style.toolbarHeight
-  color: __style.forestColor
+  signal clicked
+
+  toolbarContent: GridView {
+    id: buttonView
 
-  onWidthChanged: setupBottomBar()
-  onModelChanged: setupBottomBar()
+    onWidthChanged: setupBottomBar()
+    onModelChanged: setupBottomBar()
+
+    model: visibleButtonModel
+    anchors.fill: parent
+    cellHeight: parent.height
+    interactive: false
+  }
 
   // buttons shown inside toolbar
   ObjectModel {
@@ -37,15 +40,6 @@ Rectangle {
     id: invisibleButtonModel
   }
 
-  GridView {
-    id: buttonView
-
-    model: visibleButtonModel
-    anchors.fill: parent
-    cellHeight: __style.toolbarHeight
-    interactive: false
-  }
-
   MMMenuDrawer {
     id: menu
 
@@ -70,14 +64,14 @@ Rectangle {
   Loader { id: buttonMore; sourceComponent: componentMore; visible: false }
 
   function setupBottomBar() {
-    var m = control.model
+    var m = root.model
     var c = m.count
-    var w = control.width
+    var w = buttonView.width
     var button
 
     // add all buttons (max maxButtonsInToolbar) into toolbar
     visibleButtonModel.clear()
-    if(c <= maxButtonsInToolbar || w >= c*control.minimumToolbarButtonWidth) {
+    if(c <= maxButtonsInToolbar || w >= c*root.minimumToolbarButtonWidth) {
       for( var i = 0; i < c; i++ ) {
         button = m.get(i)
         if(button.isMenuButton !== undefined)
@@ -90,11 +84,11 @@ Rectangle {
     else {
       // not all buttons are visible in toolbar due to width
       // the past of them will apper in the menu inside '...' button
-      var maxVisible = Math.floor(w/control.minimumToolbarButtonWidth)
+      var maxVisible = Math.floor(w/root.minimumToolbarButtonWidth)
       if(maxVisible<maxButtonsInToolbar)
         maxVisible = maxButtonsInToolbar
       for( i = 0; i < maxVisible-1; i++ ) {
-        if(maxVisible===maxButtonsInToolbar || w >= i*control.minimumToolbarButtonWidth) {
+        if(maxVisible===maxButtonsInToolbar || w >= i*root.minimumToolbarButtonWidth) {
           button = m.get(i)
           button.isMenuButton = false
           button.width = Math.floor(w / maxVisible)

app/qml/components/MMToolbarLongButton.qml

@@ -21,15 +21,15 @@ Item {
 
   required property string text
 
-  readonly property double toolbarLongButtonWidth: 50 * __dp
+  readonly property double toolbarLongButtonWidth: 48 * __dp
   readonly property double minimumToolbarLongButtonWidth: 200 * __dp
   readonly property double maximumToolbarLongButtonWidth: 500 * __dp
 
   height: __style.toolbarHeight
 
   Button {
     width: {
-      var w = parent.width - 40 * __dp
+      var w = parent.width
       if(w < control.minimumToolbarLongButtonWidth)
         return control.minimumToolbarLongButtonWidth
       else if(w > control.maximumToolbarLongButtonWidth)
@@ -62,8 +62,8 @@ Item {
           color: __style.forestColor
           font: __style.t3
           verticalAlignment: Text.AlignVCenter
-          topPadding: 10 * __dp
-          bottomPadding: 10 * __dp
+          topPadding: 9 * __dp
+          bottomPadding: 9 * __dp
         }
       }
     }

app/qml/main.qml

@@ -270,12 +270,7 @@ ApplicationWindow {
   MMToolbar {
     id: mapToolbar
 
-    anchors {
-      left: parent.left
-      bottom: parent.bottom
-      right: parent.right
-    }
-
+    anchors.bottom: parent.bottom
     visible: map.state === "view"
 
     model: ObjectModel {

app/qml/map/MMRecordingTools.qml

@@ -190,10 +190,7 @@ Item {
   }
 
   MMToolbar {
-
-    y: parent.height
-
-    width: parent.width
+    anchors.bottom: parent.bottom
 
     ObjectModel {
       id: polygonToolbarButtons

app/qml/map/MMSplittingTools.qml

@@ -80,9 +80,7 @@ Item {
   }
 
   MMToolbar {
-    y: parent.height
-
-    width: parent.width
+    anchors.bottom: parent.bottom
 
     model: ObjectModel {
 

app/qml/project/MMProjectController.qml

@@ -234,11 +234,11 @@ Item {
           MouseArea {
             anchors.fill: parent
             onClicked: {
-              if ( __merginApi.userAuth.hasAuthData() && __merginApi.apiVersionStatus === MerginApiStatus.OK ) {
+              if ( __merginApi.userAuth.hasAuthData() && __merginApi.apiVersionStatus === MM.MerginApiStatus.OK ) {
 
                 __merginApi.refreshUserData()
 
-                if ( __merginApi.serverType === MerginServerType.OLD ) {
+                if ( __merginApi.serverType === MM.MerginServerType.OLD ) {
                   __notificationModel.addWarning( qsTr( "Unsupported server, please contact your server administrator." ) )
                 }
                 else {

app/qml/project/MMProjectWizardPage.qml

@@ -133,7 +133,6 @@ Item {
   // footer toolbar
   MMToolbar {
     id: toolbar
-    width: parent.width
     anchors.bottom: parent.bottom
 
     model: ObjectModel {

gallery/main.cpp

@@ -72,6 +72,12 @@ int main( int argc, char *argv[] )
   // see https://tobiasmarciszko.github.io/qml-binding-errors/
   MMStyle *style = new MMStyle( &engine, dp );
 
+  // Set some safe areas
+  style->setSafeAreaTop( 20 );
+  style->setSafeAreaRight( 10 );
+  style->setSafeAreaBottom( 20 );
+  style->setSafeAreaLeft( 10 );
+
   NotificationModel notificationModel;
 
   PositionKit pk;

gallery/qml.qrc

@@ -49,6 +49,7 @@
         <file>../app/qml/components/MMProgressBar.qml</file>
         <file>../app/qml/components/MMShadow.qml</file>
         <file>../app/qml/components/MMToolbarButton.qml</file>
+        <file>../app/qml/components/MMBaseToolbar.qml</file>
         <file>../app/qml/components/MMToolbar.qml</file>
         <file>../app/qml/components/MMMenuDrawer.qml</file>
         <file>../app/qml/components/MMToolbarMenuButton.qml</file>

gallery/qml/Main.qml

@@ -205,4 +205,38 @@ ApplicationWindow {
       scale: 1.0
     }
   }
+
+  Rectangle {
+    width: 20
+    color: "lightblue"
+    x: parent.width / 2
+    opacity: .5
+    height: __style.safeAreaTop
+  }
+
+  Rectangle {
+    width: 20
+    color: "lightblue"
+    x: parent.width / 2
+    y: parent.height - __style.safeAreaBottom
+    opacity: .5
+    height: __style.safeAreaBottom
+  }
+
+  Rectangle {
+    width: __style.safeAreaLeft
+    color: "lightblue"
+    y: parent.height/2 - height/2
+    opacity: .5
+    height: 20
+  }
+
+  Rectangle {
+    width: __style.safeAreaRight
+    color: "lightblue"
+    x: parent.width - __style.safeAreaRight
+    y: parent.height/2 - height / 2
+    opacity: .5
+    height: 20
+  }
 }

gallery/qml/pages/InitialGalleryPage.qml

@@ -15,8 +15,14 @@ Page {
 
   Label {
     width: parent.width / 2
+
     text: "DP ratio: " + __dp.toPrecision(6) + "\n" +
-          "Used font: " + font.family
+          "Used font: " + font.family + "\n" +
+          "Safe area - top: " + __style.safeAreaTop + "\n" +
+          "Safe area - right: " + __style.safeAreaRight + "\n" +
+          "Safe area - left: " + __style.safeAreaLeft + "\n" +
+          "Safe area - bottom: " + __style.safeAreaBottom
+
     anchors.centerIn: parent
     horizontalAlignment: Label.AlignHCenter
     verticalAlignment: Label.AlignVCenter

gallery/qml/pages/MapPage.qml

@@ -183,11 +183,7 @@ Page {
   MMToolbar {
     id: toolbar
 
-    anchors {
-      left: parent.left
-      right: parent.right
-      bottom: parent.bottom
-    }
+    anchors.bottom: parent.bottom
 
     model: ObjectModel {
       MMToolbarButton { text: "Delete"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) }