New design for Toolbar, its buttons and menu

app/icons/icons.qrc

@@ -14,5 +14,9 @@
         <file>CloseButton.svg</file>
         <file>UploadImage.svg</file>
         <file>ReachedDataLimitImage.svg</file>
+        <file>Delete.svg</file>
+        <file>Done.svg</file>
+        <file>Edit.svg</file>
+        <file>More.svg</file>
     </qresource>
 </RCC>

app/qmlV2/Style.js

@@ -70,6 +70,10 @@ const arrowDownIcon = "qrc:/Arrow Down.svg"
 const qrCodeIcon = "qrc:/QR Code.svg"
 const checkmarkIcon = "qrc:/Checkmark.svg"
 const closeButtonIcon = "qrc:/CloseButton.svg"
+const deleteIcon = "qrc:/Delete.svg"
+const doneIcon = "qrc:/Done.svg"
+const editIcon = "qrc:/Edit.svg"
+const moreIcon = "qrc:/More.svg"
 
 // Images
 const uploadImage = "qrc:/UploadImage.svg"
@@ -78,6 +82,14 @@ const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg"
 // Spacing
 const commonSpacing = 20 * __dp
 
+// Toolbar
+const toolbarHeight = 89 * __dp
+const minimumToolbarButtonWidth = 100 * __dp
+const menuDrawerHeight = 67 * __dp
+const toolbarLongButtonWidth = 50 * __dp
+const minimumToolbarLongButtonWidth = 200 * __dp
+const maximumToolbarLongButtonWidth = 500 * __dp
+
 function dynamicText() {
   return "Dynamic text"
 }

app/qmlV2/component/MMMenuDrawer.qml

@@ -0,0 +1,87 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+import "../Style.js" as Style
+import "."
+
+Drawer {
+  id: control
+
+  property alias title: title.text
+  property alias model: menuView.model
+
+  signal clicked(var button)
+
+  width: window.width
+  height: mainColumn.height
+  edge: Qt.BottomEdge
+
+  Rectangle {
+    color: roundedRect.color
+    anchors.top: parent.top
+    anchors.left: parent.left
+    anchors.right: parent.right
+    height: 2 * radius
+    anchors.topMargin: -radius
+    radius: Style.commonSpacing
+  }
+
+  Rectangle {
+    id: roundedRect
+
+    anchors.fill: parent
+    color: Style.white
+
+    Column {
+      id: mainColumn
+
+      width: parent.width
+      spacing: Style.commonSpacing
+      leftPadding: Style.commonSpacing
+      rightPadding: Style.commonSpacing
+      bottomPadding: Style.commonSpacing
+
+      Image {
+        id: closeButton
+
+        source: Style.closeButtonIcon
+        anchors.right: parent.right
+        anchors.rightMargin: Style.commonSpacing
+
+        MouseArea {
+          anchors.fill: parent
+          onClicked: control.visible = false
+        }
+      }
+
+      Text {
+        id: title
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        font: Qt.font(Style.t1)
+        width: parent.width - 2*Style.commonSpacing
+        color: Style.forest
+        visible: text.length > 0
+        horizontalAlignment: Text.AlignHCenter
+      }
+
+      GridView {
+        id: menuView
+
+        width: parent.width - 2 * Style.commonSpacing
+        height: model ? model.count * Style.menuDrawerHeight : 0
+        cellWidth: width
+        cellHeight: Style.menuDrawerHeight
+      }
+    }
+  }
+}

app/qmlV2/component/MMToolbar.qml

@@ -0,0 +1,124 @@
+/***************************************************************************
+ *                                                                         *
+ *   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 Qt5Compat.GraphicalEffects
+import "../Style.js" as Style
+
+Rectangle {
+  id: control
+
+  signal clicked
+
+  required property var model
+
+  anchors {
+    left: parent.left
+    right: parent.right
+    bottom: parent.bottom
+  }
+  height: Style.toolbarHeight
+  color: Style.forest
+
+  onWidthChanged: setupBottomBar()
+
+  // buttons shown inside toolbar
+  ObjectModel {
+    id: visibleButtonModel
+  }
+
+  // buttons that are not shown inside toolbar, due to small space
+  ObjectModel {
+    id: invisibleButtonModel
+  }
+
+  GridView {
+    id: buttonView
+
+    model: visibleButtonModel
+    anchors.fill: parent
+    leftMargin: Style.commonSpacing
+    rightMargin: Style.commonSpacing
+    cellHeight: Style.toolbarHeight
+  }
+
+  MMMenuDrawer {
+    id: menu
+
+    title: qsTr("More Options")
+    model: invisibleButtonModel
+    onClicked: function(button) {
+      menu.visible = false
+      buttonClicked(button)
+    }
+  }
+
+  // Button More '...'
+  Component {
+    id: componentMore
+    MMToolbarButton {
+      text: "..."
+      iconSource: Style.deleteIcon
+      onClicked: menu.visible = true
+    }
+  }
+  Loader { id: buttonMore; sourceComponent: componentMore; visible: false }
+
+  function setupBottomBar() {
+    var m = control.model
+    var c = m.count
+    var w = control.width - 2 * Style.commonSpacing
+    var button
+
+    // add all buttons (max 4) into toolbar
+    visibleButtonModel.clear()
+    if(c <= 4 || w >= c*Style.minimumToolbarButtonWidth) {
+      for( var i = 0; i < c; i++ ) {
+        button = m.get(i)
+        if(button.isMenuButton !== undefined)
+          button.isMenuButton = false
+        button.width = w / c
+        visibleButtonModel.append(button)
+      }
+      buttonView.cellWidth = w / c
+    }
+    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/Style.minimumToolbarButtonWidth)
+      if(maxVisible<4)
+        maxVisible = 4
+      for( i = 0; i < maxVisible-1; i++ ) {
+        if(maxVisible===4 || w >= i*Style.minimumToolbarButtonWidth) {
+          button = m.get(i)
+          button.isMenuButton = false
+          button.width = w / maxVisible
+          visibleButtonModel.append(button)
+        }
+      }
+      // add More '...' button
+      button = buttonMore
+      button.visible = true
+      button.width = maxVisible ? w / maxVisible : w
+      visibleButtonModel.append( button )
+      buttonView.cellWidth = maxVisible ? w / maxVisible : w
+
+      // add all other buttons inside the '...' button
+      invisibleButtonModel.clear()
+      for( i = maxVisible-1; i < c; i++ ) {
+        if(i<0)
+          continue
+        button = m.get(i)
+        button.isMenuButton = true
+        button.width = w
+        invisibleButtonModel.append(button)
+      }
+    }
+  }
+}

app/qmlV2/component/MMToolbarButton.qml

@@ -0,0 +1,84 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+import "../Style.js" as Style
+
+Item {
+  id: control
+
+  signal clicked
+
+  required property var iconSource
+  required property string text
+  property var type: MMToolbarButton.Button.Normal
+  property bool isMenuButton: false
+
+  enum Button { Normal, Save }
+
+  height: isMenuButton ? Style.menuDrawerHeight/2 : Style.toolbarHeight
+
+  Rectangle {
+    width: parent.width - Style.commonSpacing/2
+    height: parent.height - Style.commonSpacing/2
+    anchors.centerIn: parent
+    clip: control.type !== MMToolbarButton.Button.Save
+    color: Style.transparent
+    visible: !control.isMenuButton
+
+    Image {
+      id: icon
+
+      source: control.iconSource
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+      anchors.bottomMargin: 2 * Style.commonSpacing + (control.type === MMToolbarButton.Button.Save ? 14 * __dp : 0)
+
+      Rectangle {
+        visible: control.type === MMToolbarButton.Button.Save
+        anchors.centerIn: parent
+        width: 56 * __dp
+        height: width
+        radius: width / 2
+        color: Style.transparent
+        border.color: Style.grass
+        border.width: 14 * __dp
+      }
+    }
+    Text {
+      id: text
+
+      text: control.text
+      width: parent.width
+      color: Style.white
+      font: Qt.font(Style.t4)
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+      anchors.bottomMargin: Style.commonSpacing
+      horizontalAlignment: Text.AlignHCenter
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      onClicked: control.clicked()
+    }
+  }
+
+  // Menu button
+  MMToolbarMenuButton {
+    width: control.width
+    height: Style.menuDrawerHeight
+    visible: control.isMenuButton
+    iconSource: control.iconSource
+    text: control.text
+    onClicked: control.clicked()
+  }
+}