Added selectable toolbar

app/icons/icons.qrc

@@ -64,7 +64,14 @@
         <file>XMark.svg</file>
         <file>XTwitter.svg</file>
         <file>Youtube.svg</file>
+        <file>Globe.svg</file>
+        <file>Global.svg</file>
+        <file>Home.svg</file>
+        <file>Projects.svg</file>
         <file>ZoomToProject.svg</file>
+        <file>GlobalFilled.svg</file>
+        <file>HomeFilled.svg</file>
+        <file>ProjectsFilled.svg</file>
         <file>Minus.svg</file>
         <file>Plus.svg</file>
     </qresource>

app/mmstyle.h

@@ -81,7 +81,6 @@ class MMStyle: public QObject
 
     // Icons
     Q_PROPERTY( QUrl addIcon READ addIcon CONSTANT )
-    Q_PROPERTY( QUrl homeIcon READ homeIcon CONSTANT )
     Q_PROPERTY( QUrl layersIcon READ layersIcon CONSTANT )
     Q_PROPERTY( QUrl localChangesIcon READ localChangesIcon CONSTANT )
     Q_PROPERTY( QUrl mapThemesIcon READ mapThemesIcon CONSTANT )
@@ -108,7 +107,12 @@ class MMStyle: public QObject
     Q_PROPERTY( QUrl environmentalIcon READ environmentalIcon CONSTANT )
     Q_PROPERTY( QUrl errorIcon READ errorIcon CONSTANT )
     Q_PROPERTY( QUrl facebookIcon READ facebookIcon CONSTANT )
+    Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT )
+    Q_PROPERTY( QUrl globalIcon READ globalIcon CONSTANT )
+    Q_PROPERTY( QUrl globalFilledIcon READ globalFilledIcon CONSTANT )
     Q_PROPERTY( QUrl hideIcon READ hideIcon CONSTANT )
+    Q_PROPERTY( QUrl homeIcon READ homeIcon CONSTANT )
+    Q_PROPERTY( QUrl homeFilledIcon READ homeFilledIcon CONSTANT )
     Q_PROPERTY( QUrl infoIcon READ infoIcon CONSTANT )
     Q_PROPERTY( QUrl linkedinIcon READ linkedinIcon CONSTANT )
     Q_PROPERTY( QUrl mastodonIcon READ mastodonIcon CONSTANT )
@@ -121,6 +125,8 @@ class MMStyle: public QObject
     Q_PROPERTY( QUrl othersIcon READ othersIcon CONSTANT )
     Q_PROPERTY( QUrl plusIcon READ plusIcon CONSTANT )
     Q_PROPERTY( QUrl projectButtonMoreIcon READ projectButtonMoreIcon CONSTANT )
+    Q_PROPERTY( QUrl projectsIcon READ projectsIcon CONSTANT )
+    Q_PROPERTY( QUrl projectsFilledIcon READ projectsFilledIcon CONSTANT )
     Q_PROPERTY( QUrl qgisIcon READ qgisIcon CONSTANT )
     Q_PROPERTY( QUrl qrCodeIcon READ qrCodeIcon CONSTANT )
     Q_PROPERTY( QUrl redditIcon READ redditIcon CONSTANT )
@@ -142,7 +148,6 @@ class MMStyle: public QObject
     Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT )
     Q_PROPERTY( QUrl xTwitterIcon READ xTwitterIcon CONSTANT )
     Q_PROPERTY( QUrl youtubeIcon READ youtubeIcon CONSTANT )
-    Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT )
 
     // Images
     Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT )
@@ -217,7 +222,6 @@ class MMStyle: public QObject
 
     QUrl addIcon() {return QUrl( "qrc:/Add.svg" );}
     QUrl layersIcon() {return QUrl( "qrc:/Layers.svg" );}
-    QUrl homeIcon() {return QUrl( "qrc:/Home.svg" );}
     QUrl localChangesIcon() {return QUrl( "qrc:/LocalChanges.svg" );}
     QUrl mapThemesIcon() {return QUrl( "qrc:/MapThemes.svg" );}
     QUrl positionTrackingIcon() {return QUrl( "qrc:/PositionTracking.svg" );}
@@ -244,7 +248,11 @@ class MMStyle: public QObject
     QUrl errorIcon() {return QUrl( "qrc:/Error.svg" );}
     QUrl facebookIcon() {return QUrl( "qrc:/Facebook.svg" );}
     QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );}
+    QUrl globalIcon() {return QUrl( "qrc:/Global.svg" );}
+    QUrl globalFilledIcon() {return QUrl( "qrc:/GlobalFilled.svg" );}
     QUrl hideIcon() {return QUrl( "qrc:/Hide.svg" );}
+    QUrl homeIcon() {return QUrl( "qrc:/Home.svg" );}
+    QUrl homeFilledIcon() {return QUrl( "qrc:/HomeFilled.svg" );}
     QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );}
     QUrl linkedinIcon() {return QUrl( "qrc:/Linkedin.svg" );}
     QUrl mastodonIcon() {return QUrl( "qrc:/Mastodon.svg" );}
@@ -257,6 +265,8 @@ class MMStyle: public QObject
     QUrl othersIcon() {return QUrl( "qrc:/Others.svg" );}
     QUrl plusIcon() {return QUrl( "qrc:/Plus.svg" );}
     QUrl projectButtonMoreIcon() {return QUrl( "qrc:/ProjectButtonMore.svg" );}
+    QUrl projectsIcon() {return QUrl( "qrc:/Projects.svg" );}
+    QUrl projectsFilledIcon() {return QUrl( "qrc:/ProjectsFilled.svg" );}
     QUrl qgisIcon() {return QUrl( "qrc:/QGIS.svg" );}
     QUrl qrCodeIcon() {return QUrl( "qrc:/QRCode.svg" );}
     QUrl redditIcon() {return QUrl( "qrc:/Reddit.svg" );}

app/qml/components/MMSelectableToolbar.qml

@@ -0,0 +1,33 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+
+Rectangle {
+  id: control
+
+  signal clicked
+
+  property alias model: buttonView.model
+  property alias index: buttonView.currentIndex
+
+  height: __style.toolbarHeight
+  color: __style.forestColor
+
+  GridView {
+    id: buttonView
+
+    anchors.fill: parent
+
+    cellHeight: __style.toolbarHeight
+    cellWidth: Math.floor(control.width / control.model.count)
+
+    highlightFollowsCurrentItem: false
+  }
+}

app/qml/components/MMSelectableToolbarButton.qml

@@ -0,0 +1,66 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+Item {
+  id: control
+
+  signal clicked
+
+  required property url iconSource
+  required property url selectedIconSource
+  required property string text
+
+  property bool checked: false
+
+  height: __style.toolbarHeight
+
+  Rectangle {
+    width: parent.width - 10 * __dp
+    height: parent.height - 10 * __dp
+    anchors.centerIn: parent
+
+    clip: true
+    color: __style.transparentColor
+
+    MMIcon {
+      id: icon
+
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+      anchors.bottomMargin: 44 * __dp
+
+      source: control.checked ? control.selectedIconSource : control.iconSource
+      color: control.checked ? __style.whiteColor : __style.mediumGreenColor
+    }
+
+    Text {
+      id: text
+
+      width: parent.width
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+      anchors.bottomMargin: 20 * __dp
+
+      text: control.text
+      color: icon.color
+      font: __style.t4
+      horizontalAlignment: Text.AlignHCenter
+      elide: Text.ElideMiddle
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      onClicked: control.clicked()
+    }
+  }
+}

app/qml/components/MMToolbar.qml

@@ -44,8 +44,6 @@ Rectangle {
 
     model: visibleButtonModel
     anchors.fill: parent
-    leftMargin: 20 * __dp
-    rightMargin: 20 * __dp
     cellHeight: __style.toolbarHeight
     interactive: false
   }
@@ -75,7 +73,7 @@ Rectangle {
   function setupBottomBar() {
     var m = control.model
     var c = m.count
-    var w = control.width - 40 * __dp
+    var w = control.width
     var button
 
     // add all buttons (max 4) into toolbar

app/qml/components/MMToolbarButton.qml

@@ -63,6 +63,7 @@ Item {
       anchors.bottom: parent.bottom
       anchors.bottomMargin: 20 * __dp
       horizontalAlignment: Text.AlignHCenter
+      elide: Text.ElideMiddle
     }
 
     MouseArea {

app/qml/components/MMToolbarLongButton.qml

@@ -27,7 +27,7 @@ Item {
 
   Button {
     width: {
-      var w = parent.width - 10 * __dp
+      var w = parent.width - 40 * __dp
       if(w < control.minimumToolbarLongButtonWidth)
         return control.minimumToolbarLongButtonWidth
       else if(w > control.maximumToolbarLongButtonWidth)

gallery/qml.qrc

@@ -68,6 +68,8 @@
         <file>../app/qml/components/MMBackButton.qml</file>
         <file>../app/qml/components/MMIconCheckBoxHorizontal.qml</file>
         <file>../app/qml/components/MMIconCheckBoxVertical.qml</file>
+        <file>../app/qml/components/MMSelectableToolbar.qml</file>
+        <file>../app/qml/components/MMSelectableToolbarButton.qml</file>
         <file>../app/qml/inputs/MMNumberEditor.qml</file>
         <file>../app/qml/inputs/MMButtonInputEditor.qml</file>
     </qresource>

gallery/qml/pages/IconsPage.qml

@@ -93,10 +93,34 @@ ScrollView {
           text: "errorIcon"
           source: __style.errorIcon
         }
+        IconBox {
+          text: "globeIcon"
+          source: __style.globeIcon
+        }
+        IconBox {
+          text: "globalIcon"
+          source: __style.globalIcon
+          colorise: true
+        }
+        IconBox {
+          text: "globalFilledIcon"
+          source: __style.globalFilledIcon
+          colorise: true
+        }
         IconBox {
           text: "hideIcon"
           source: __style.hideIcon
         }
+        IconBox {
+          text: "homeIcon"
+          source: __style.homeIcon
+          colorise: true
+        }
+        IconBox {
+          text: "homeFilledIcon"
+          source: __style.homeFilledIcon
+          colorise: true
+        }
         IconBox {
           text: "infoIcon"
           source: __style.infoIcon
@@ -123,6 +147,16 @@ ScrollView {
           text: "projectButtonMoreIcon"
           source: __style.projectButtonMoreIcon
         }
+        IconBox {
+          text: "projectsIcon"
+          source: __style.projectsIcon
+          colorise: true
+        }
+        IconBox {
+          text: "projectsFilledIcon"
+          source: __style.projectsFilledIcon
+          colorise: true
+        }
         IconBox {
           text: "qrCodeIcon"
           source: __style.qrCodeIcon
@@ -152,10 +186,6 @@ ScrollView {
           text: "xMarkIcon"
           source: __style.xMarkIcon
         }
-        IconBox {
-          text: "globeIcon"
-          source: __style.globeIcon
-        }
       }
     }
 

gallery/qml/pages/ToolbarPage.qml

@@ -16,6 +16,55 @@ import "../../app/qml/"
 Page {
   id: pane
 
+  MMSelectableToolbar {
+    id: selectableToolbar
+
+    anchors {
+      left: parent.left
+      right: parent.right
+      bottom: parent.bottom
+    }
+
+    Component.onCompleted: index = 1
+
+    model: ObjectModel {
+      MMSelectableToolbarButton {
+        width: Math.floor((pane.width - 40 * __dp) / 3)
+        text: "Home"
+        iconSource: __style.homeIcon
+        selectedIconSource: __style.homeFilledIcon
+        checked: selectableToolbar.index === 0
+        onClicked: {
+          selectableToolbar.index = 0
+          console.log("tapped "+text)
+        }
+      }
+      MMSelectableToolbarButton {
+        width: Math.floor((pane.width - 40 * __dp) / 3)
+        text: "Projects"
+        iconSource: __style.projectsIcon
+        selectedIconSource: __style.projectsFilledIcon
+        checked: selectableToolbar.index === 1
+        onClicked: {
+          selectableToolbar.index = 1
+          console.log("tapped "+text)
+        }
+      }
+      MMSelectableToolbarButton {
+        width: Math.floor((pane.width - 40 * __dp) / 3)
+        text: "Explore"
+        iconSource: __style.globalIcon
+        selectedIconSource: __style.globalFilledIcon
+        checked: selectableToolbar.index === 2
+        onClicked: {
+          selectableToolbar.index = 2
+          console.log("tapped "+text)
+        }
+      }
+    }
+    anchors.bottomMargin: 480 * __dp
+  }
+
   MMToolbar {
     model: ObjectModel {
       MMToolbarLongButton { text: "Long button"; iconSource: __style.deleteIcon; onClicked: console.log("tapped "+text) }