Merge pull request #2938 from MerginMaps/dev-redesign_ProjectItem

Base new design of Project item

app/icons/icons.qrc

@@ -20,6 +20,11 @@
         <file>Done.svg</file>
         <file>Edit.svg</file>
         <file>More.svg</file>
+        <file>ProjectButtonMore.svg</file>
+        <file>Stop.svg</file>
+        <file>Download.svg</file>
+        <file>Info.svg</file>
+        <file>Sync.svg</file>
         <file>MorePhotos.svg</file>
     </qresource>
 </RCC>

app/mmstyle.h

@@ -93,6 +93,11 @@ class MMStyle: public QObject
     Q_PROPERTY( QUrl doneIcon READ doneIcon CONSTANT )
     Q_PROPERTY( QUrl editIcon READ editIcon CONSTANT )
     Q_PROPERTY( QUrl moreIcon READ moreIcon CONSTANT )
+    Q_PROPERTY( QUrl projectButtonMoreIcon READ projectButtonMoreIcon CONSTANT )
+    Q_PROPERTY( QUrl stopIcon READ stopIcon CONSTANT )
+    Q_PROPERTY( QUrl syncIcon READ syncIcon CONSTANT )
+    Q_PROPERTY( QUrl infoIcon READ infoIcon CONSTANT )
+    Q_PROPERTY( QUrl downloadIcon READ downloadIcon CONSTANT )
     Q_PROPERTY( QUrl morePhotosIcon READ morePhotosIcon CONSTANT )
 
     // Images
@@ -177,6 +182,11 @@ class MMStyle: public QObject
     QUrl doneIcon() {return QUrl( "qrc:/Done.svg" );}
     QUrl editIcon() {return QUrl( "qrc:/Edit.svg" );}
     QUrl moreIcon() {return QUrl( "qrc:/More.svg" );}
+    QUrl projectButtonMoreIcon() {return QUrl( "qrc:/ProjectButtonMore.svg" );}
+    QUrl stopIcon() {return QUrl( "qrc:/Stop.svg" );}
+    QUrl syncIcon() {return QUrl( "qrc:/Sync.svg" );}
+    QUrl infoIcon() {return QUrl( "qrc:/Info.svg" );}
+    QUrl downloadIcon() {return QUrl( "qrc:/Download.svg" );}
     QUrl morePhotosIcon() {return QUrl( "qrc:/MorePhotos.svg" );}
 
     QUrl uploadImage() {return QUrl( "qrc:/UploadImage.svg" );}

app/qml/components/MMListDrawer.qml

@@ -0,0 +1,107 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+
+Drawer {
+  id: control
+
+  property alias title: title.text
+  property alias model: listView.model
+
+  padding: 20 * __dp
+
+  signal clicked(type: string)
+
+  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: 20 * __dp
+  }
+
+  Rectangle {
+    id: roundedRect
+
+    anchors.fill: parent
+    color: __style.whiteColor
+
+    Column {
+      id: mainColumn
+
+      width: parent.width
+      spacing: 20 * __dp
+      leftPadding: control.padding
+      rightPadding: control.padding
+      bottomPadding: control.padding
+
+      Row {
+        width: parent.width - 2 * control.padding
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Item { width: closeButton.width; height: 1 }
+
+        Text {
+          id: title
+
+          anchors.verticalCenter: parent.verticalCenter
+          font: __style.t2
+          width: parent.width - closeButton.width * 2
+          color: __style.forestColor
+          horizontalAlignment: Text.AlignHCenter
+          verticalAlignment: Text.AlignVCenter
+          elide: Text.ElideRight
+        }
+
+        Image {
+          id: closeButton
+
+          source: __style.closeButtonIcon
+
+          MouseArea {
+            anchors.fill: parent
+            onClicked: control.visible = false
+          }
+        }
+      }
+
+      ListView {
+        id: listView
+
+        width: parent.width - 2 * control.padding
+        height: control.model ? control.model.count * __style.menuDrawerHeight : 0
+        interactive: false
+
+        delegate: Item {
+          width: listView.width
+          height: __style.menuDrawerHeight
+
+          MMListDrawerItem {
+            width: listView.width
+
+            type: model.type
+            text: model.name
+            iconSource: model.iconSource
+
+            onClicked: function(type) { control.clicked(type); control.visible = false }
+          }
+        }
+      }
+    }
+  }
+}

app/qml/components/MMListDrawerItem.qml

@@ -0,0 +1,58 @@
+/***************************************************************************
+ *                                                                         *
+ *   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(type: string)
+
+  required property string type
+  required property string text
+  required property var iconSource
+
+  width: control.width
+  height: __style.menuDrawerHeight
+
+  Rectangle {
+    anchors.top: parent.top
+    width: parent.width
+    height: 1 * __dp
+    color: __style.grayColor
+  }
+
+  Row {
+    height: parent.height
+    width: parent.width
+    spacing: 10 * __dp
+
+    MMIcon {
+      height: parent.height
+      width: 20 * __dp
+      color: __style.forestColor
+      source: control.iconSource ?? ""
+    }
+
+    Text {
+      height: parent.height
+      verticalAlignment: Text.AlignVCenter
+      text: control.text
+      color: __style.nightColor
+      font: __style.t3
+    }
+  }
+
+  MouseArea {
+    anchors.fill: parent
+    onClicked: control.clicked(control.type)
+  }
+}