Add photo card component and update photo component

app/qml/CMakeLists.txt

@@ -44,6 +44,7 @@ set(MM_QML
     components/MMColorButton.qml
     components/MMPopup.qml
     components/MMPhoto.qml
+    components/MMPhotoCard.qml
     components/MMProgressBar.qml
     components/MMRadioButton.qml
     components/MMRoundButton.qml

app/qml/components/MMPhoto.qml

@@ -6,47 +6,45 @@
  *   (at your option) any later version.                                   *
  *                                                                         *
  ***************************************************************************/
+pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Controls
-import Qt5Compat.GraphicalEffects
-
-import "../components" as MMComponents
-import "."
+import QtQuick.Effects
 
 Image {
   id: root
 
   property url photoUrl
   property bool isLocalFile: true
 
-  signal clicked( var path )
+  signal clicked( url path )
 
   height: width
   source: root.photoUrl
   asynchronous: true
   autoTransform: true
   layer.enabled: true
-  layer {
-    effect: OpacityMask {
-      maskSource: Item {
-        width: root.width
-        height: root.height
-        Rectangle {
-          anchors.centerIn: parent
-          width: parent.width
-          height: parent.height
-          radius: 20 * __dp
-        }
-      }
-    }
+  layer.effect: MultiEffect {
+    maskEnabled: true
+    maskSource: maskRect
+    autoPaddingEnabled: false
+  }
+
+  // The mask shape
+  Rectangle {
+    id: maskRect
+    width: root.width
+    height: root.height
+    radius: 20 * __dp
+    visible: false
+    layer.enabled: true 
   }
 
   Rectangle {
-    anchors.fill: parent
+    anchors.fill: root
     color: __style.polarColor
     z: -1
-    visible: root.photoUrl == '' || root.status === Image.Error // if image has transparent background, we would still see it
+    visible: root.photoUrl.toString() === "" || root.status === Image.Error // if image has transparent background, we would still see it
 
     MMIcon {
       anchors.centerIn: parent
@@ -57,13 +55,13 @@ Image {
   }
 
   MMSingleClickMouseArea {
-    anchors.fill: parent
+    anchors.fill: root
     onSingleClicked: root.clicked(root.photoUrl)
   }
 
-  MMComponents.MMBusyIndicator {
+  MMBusyIndicator {
     id: busyIndicator
-    anchors.centerIn: parent
+    anchors.centerIn: root
     visible: root.status === Image.Loading
   }
 

app/qml/components/MMPhotoCard.qml

@@ -0,0 +1,103 @@
+/***************************************************************************
+ *                                                                         *
+ *   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.                                   *
+ *                                                                         *
+ ***************************************************************************/
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  id: root
+
+  property alias imageSource: bngImage.photoUrl
+  property string text: ""
+  property bool textVisible: false
+  property int size: 120 * __dp
+
+  signal clicked(url path)
+
+  height: size
+  width: size
+
+  layer.enabled: true
+  layer.effect: MultiEffect {
+    maskEnabled: true
+    maskSource: photoMask
+    autoPaddingEnabled: false
+  }
+
+  Rectangle {
+    id: photoMask
+    width: root.width
+    height: root.height
+    radius: 20 * __dp
+    visible: false
+    layer.enabled: true
+  }
+
+  MMPhoto {
+    id: bngImage
+    anchors.fill: root
+    fillMode: Image.PreserveAspectCrop
+  }
+
+  MultiEffect{
+    id: blurFooter
+    height: root.height * 0.33
+    visible: root.textVisible
+    anchors {
+      left: root.left
+      right: root.right
+      bottom: root.bottom
+    }
+
+    source: ShaderEffectSource {
+      sourceItem: bngImage
+      sourceRect: Qt.rect(0, bngImage.height - bngImage.height * 0.33, bngImage.width,
+        bngImage.height * 0.33)
+      recursive: false
+    }
+
+    autoPaddingEnabled: false
+    blurEnabled: true
+    blur: 0.8
+  }
+
+  // tint overlay
+  Rectangle {
+    anchors.fill: blurFooter
+    color: __style.nightColor
+    opacity: 0.35
+    visible: root.textVisible
+  }
+
+  Text {
+    visible: root.textVisible
+    text: root.text
+    width: root.width - 2 * (root.size * 0.15)
+    anchors.centerIn: blurFooter
+
+    color: __style.polarColor
+    font: __style.t5
+
+    lineHeightMode: Text.FixedHeight
+    lineHeight: __style.margin16
+    maximumLineCount: 2
+
+    horizontalAlignment: Text.AlignHCenter | Text.AlignJustify
+    verticalAlignment: Text.AlignVCenter
+
+    wrapMode: Text.WordWrap
+    elide: Text.ElideRight
+  }
+
+  MMSingleClickMouseArea {
+    anchors.fill: root
+    onSingleClicked: root.clicked(root.imageSource)
+  }
+}

app/qml/form/editors/MMFormGalleryEditor.qml

@@ -48,12 +48,10 @@ MMPrivateComponents.MMBaseInput {
       homePath: root._fieldActiveProject.homePath
     }
 
-    delegate: MMComponents.MMPhoto {
-      width: rowView.height
+    delegate: MMComponents.MMPhotoCard{
+      size: rowView.height
 
-      fillMode: Image.PreserveAspectCrop
-
-      photoUrl: {
+      imageSource: {
         let absolutePath = model.PhotoPath
 
         if ( absolutePath !== '' && __inputUtils.fileExists( absolutePath ) ) {
@@ -62,6 +60,10 @@ MMPrivateComponents.MMBaseInput {
         return ''
       }
 
+      textVisible: false
+
+      text: model.FeatureTitle
+
       onClicked: function( path ) {
         root.openLinkedFeature( model.FeaturePair )
       }

gallery/qml.qrc

@@ -5,6 +5,7 @@
         <file>qml/components/EditorItem.qml</file>
         <file>qml/components/TextItem.qml</file>
         <file>qml/components/ColorBox.qml</file>
+        <file>qml/components/FormPhotoViewer.qml</file>
         <file>qml/pages/ComponentsPage.qml</file>
         <file>qml/pages/SandboxPage.qml</file>
         <file>qml/pages/IconsPage.qml</file>
@@ -106,6 +107,7 @@
         <file>../app/qml/form/components/calendar/MMDateTumbler.qml</file>
         <file>../app/qml/form/components/photo/MMPhotoAttachment.qml</file>
         <file>../app/qml/form/components/photo/MMPhotoPreview.qml</file>
+        <file>../app/qml/form/components/MMFormPhotoSketchingPageDialog.qml</file>
         <file>../app/qml/form/editors/MMFormCalendarEditor.qml</file>
         <file>../app/qml/form/editors/MMFormComboboxBaseEditor.qml</file>
         <file>../app/qml/form/editors/MMFormGalleryEditor.qml</file>