Skip to content

Commit ab412b2

Browse files
gabriel-bolbotinagabriel-bolbotina
authored
Add photo card component and update photo component (#4317)
1 parent abc39e1 commit ab412b2

7 files changed

Lines changed: 439 additions & 54 deletions

File tree

‎app/qml/CMakeLists.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ set(MM_QML
4444
components/MMColorButton.qml
4545
components/MMPopup.qml
4646
components/MMPhoto.qml
47+
components/MMPhotoCard.qml
4748
components/MMProgressBar.qml
4849
components/MMRadioButton.qml
4950
components/MMRoundButton.qml

‎app/qml/components/MMPhoto.qml‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,45 @@
66
* (at your option) any later version. *
77
* *
88
***************************************************************************/
9+
pragma ComponentBehavior: Bound
910

1011
import QtQuick
11-
import QtQuick.Controls
12-
import Qt5Compat.GraphicalEffects
13-
14-
import "../components" as MMComponents
15-
import "."
12+
import QtQuick.Effects
1613

1714
Image {
1815
id: root
1916

2017
property url photoUrl
2118
property bool isLocalFile: true
2219

23-
signal clicked( var path )
20+
signal clicked( url path )
2421

2522
height: width
2623
source: root.photoUrl
2724
asynchronous: true
2825
autoTransform: true
2926
layer.enabled: true
30-
layer {
31-
effect: OpacityMask {
32-
maskSource: Item {
33-
width: root.width
34-
height: root.height
35-
Rectangle {
36-
anchors.centerIn: parent
37-
width: parent.width
38-
height: parent.height
39-
radius: 20 * __dp
40-
}
41-
}
42-
}
27+
layer.effect: MultiEffect {
28+
maskEnabled: true
29+
maskSource: maskRect
30+
autoPaddingEnabled: false
31+
}
32+
33+
// The mask shape
34+
Rectangle {
35+
id: maskRect
36+
width: root.width
37+
height: root.height
38+
radius: 20 * __dp
39+
visible: false
40+
layer.enabled: true
4341
}
4442

4543
Rectangle {
46-
anchors.fill: parent
44+
anchors.fill: root
4745
color: __style.polarColor
4846
z: -1
49-
visible: root.photoUrl == '' || root.status === Image.Error // if image has transparent background, we would still see it
47+
visible: root.photoUrl.toString() === "" || root.status === Image.Error // if image has transparent background, we would still see it
5048

5149
MMIcon {
5250
anchors.centerIn: parent
@@ -57,13 +55,13 @@ Image {
5755
}
5856

5957
MMSingleClickMouseArea {
60-
anchors.fill: parent
58+
anchors.fill: root
6159
onSingleClicked: root.clicked(root.photoUrl)
6260
}
6361

64-
MMComponents.MMBusyIndicator {
62+
MMBusyIndicator {
6563
id: busyIndicator
66-
anchors.centerIn: parent
64+
anchors.centerIn: root
6765
visible: root.status === Image.Loading
6866
}
6967

‎app/qml/components/MMPhotoCard.qml‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/***************************************************************************
2+
* *
3+
* This program is free software; you can redistribute it and/or modify *
4+
* it under the terms of the GNU General Public License as published by *
5+
* the Free Software Foundation; either version 2 of the License, or *
6+
* (at your option) any later version. *
7+
* *
8+
***************************************************************************/
9+
pragma ComponentBehavior: Bound
10+
11+
import QtQuick
12+
import QtQuick.Effects
13+
14+
Item {
15+
id: root
16+
17+
property alias imageSource: bngImage.photoUrl
18+
property string text: ""
19+
property bool textVisible: false
20+
property int size: 120 * __dp
21+
22+
signal clicked(url path)
23+
24+
height: size
25+
width: size
26+
27+
layer.enabled: true
28+
layer.effect: MultiEffect {
29+
maskEnabled: true
30+
maskSource: photoMask
31+
autoPaddingEnabled: false
32+
}
33+
34+
Rectangle {
35+
id: photoMask
36+
width: root.width
37+
height: root.height
38+
radius: 20 * __dp
39+
visible: false
40+
layer.enabled: true
41+
}
42+
43+
MMPhoto {
44+
id: bngImage
45+
anchors.fill: root
46+
fillMode: Image.PreserveAspectCrop
47+
}
48+
49+
MultiEffect{
50+
id: blurFooter
51+
height: root.height * 0.33
52+
visible: root.textVisible
53+
anchors {
54+
left: root.left
55+
right: root.right
56+
bottom: root.bottom
57+
}
58+
59+
source: ShaderEffectSource {
60+
sourceItem: bngImage
61+
sourceRect: Qt.rect(0, bngImage.height - bngImage.height * 0.33, bngImage.width,
62+
bngImage.height * 0.33)
63+
recursive: false
64+
}
65+
66+
autoPaddingEnabled: false
67+
blurEnabled: true
68+
blur: 0.8
69+
}
70+
71+
// tint overlay
72+
Rectangle {
73+
anchors.fill: blurFooter
74+
color: __style.nightColor
75+
opacity: 0.35
76+
visible: root.textVisible
77+
}
78+
79+
Text {
80+
visible: root.textVisible
81+
text: root.text
82+
width: root.width - 2 * (root.size * 0.15)
83+
anchors.centerIn: blurFooter
84+
85+
color: __style.polarColor
86+
font: __style.t5
87+
88+
lineHeightMode: Text.FixedHeight
89+
lineHeight: __style.margin16
90+
maximumLineCount: 2
91+
92+
horizontalAlignment: Text.AlignHCenter | Text.AlignJustify
93+
verticalAlignment: Text.AlignVCenter
94+
95+
wrapMode: Text.WordWrap
96+
elide: Text.ElideRight
97+
}
98+
99+
MMSingleClickMouseArea {
100+
anchors.fill: root
101+
onSingleClicked: root.clicked(root.imageSource)
102+
}
103+
}

‎app/qml/form/editors/MMFormGalleryEditor.qml‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,10 @@ MMPrivateComponents.MMBaseInput {
4848
homePath: root._fieldActiveProject.homePath
4949
}
5050

51-
delegate: MMComponents.MMPhoto {
52-
width: rowView.height
51+
delegate: MMComponents.MMPhotoCard{
52+
size: rowView.height
5353

54-
fillMode: Image.PreserveAspectCrop
55-
56-
photoUrl: {
54+
imageSource: {
5755
let absolutePath = model.PhotoPath
5856

5957
if ( absolutePath !== '' && __inputUtils.fileExists( absolutePath ) ) {
@@ -62,6 +60,10 @@ MMPrivateComponents.MMBaseInput {
6260
return ''
6361
}
6462

63+
textVisible: false
64+
65+
text: model.FeatureTitle
66+
6567
onClicked: function( path ) {
6668
root.openLinkedFeature( model.FeaturePair )
6769
}

‎gallery/qml.qrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<file>qml/components/EditorItem.qml</file>
66
<file>qml/components/TextItem.qml</file>
77
<file>qml/components/ColorBox.qml</file>
8+
<file>qml/components/FormPhotoViewer.qml</file>
89
<file>qml/pages/ComponentsPage.qml</file>
910
<file>qml/pages/SandboxPage.qml</file>
1011
<file>qml/pages/IconsPage.qml</file>
@@ -106,6 +107,7 @@
106107
<file>../app/qml/form/components/calendar/MMDateTumbler.qml</file>
107108
<file>../app/qml/form/components/photo/MMPhotoAttachment.qml</file>
108109
<file>../app/qml/form/components/photo/MMPhotoPreview.qml</file>
110+
<file>../app/qml/form/components/MMFormPhotoSketchingPageDialog.qml</file>
109111
<file>../app/qml/form/editors/MMFormCalendarEditor.qml</file>
110112
<file>../app/qml/form/editors/MMFormComboboxBaseEditor.qml</file>
111113
<file>../app/qml/form/editors/MMFormGalleryEditor.qml</file>

0 commit comments

Comments
 (0)