Skip to content

Commit 0eb7560

Browse files
gabriel-bolbotinagabriel-bolbotina
committed
Initial draft
1 parent b28ac65 commit 0eb7560

File tree

4 files changed

+200
-0
lines changed

4 files changed

+200
-0
lines changed

‎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/MMPhotoCard.qml‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
import QtQuick
10+
import QtQuick.Controls
11+
import Qt5Compat.GraphicalEffects
12+
13+
Item {
14+
id: root
15+
16+
property alias imageSource: bngImage.source
17+
property string text: ""
18+
property bool textVisible: true
19+
20+
readonly property int cornerRadius: __style.margin20
21+
readonly property int blurAmount: __style.margin30
22+
23+
width: 300
24+
height: 300
25+
26+
Rectangle {
27+
id: maskRect
28+
anchors.fill: parent
29+
radius: root.cornerRadius
30+
visible: false
31+
}
32+
33+
Item {
34+
anchors.fill: parent
35+
layer.enabled: true
36+
layer.effect: OpacityMask {
37+
maskSource: maskRect
38+
}
39+
40+
// A. Background Image
41+
Image {
42+
id: bngImage
43+
anchors.fill: parent
44+
fillMode: Image.PreserveAspectCrop
45+
smooth: true
46+
visible: true
47+
}
48+
49+
Item {
50+
id: textContainer
51+
52+
visible: root.textVisible
53+
54+
anchors {
55+
bottom: parent.bottom
56+
left: parent.left
57+
right: parent.right
58+
}
59+
height: parent.height * 0.33
60+
61+
clip: true
62+
63+
ShaderEffectSource {
64+
id: effectSource
65+
sourceItem: bngImage
66+
67+
sourceRect: Qt.rect(0, bngImage.height - textContainer.height, bngImage.width, textContainer.height)
68+
recursive: false
69+
}
70+
71+
FastBlur {
72+
anchors.fill: parent
73+
source: effectSource
74+
radius: root.blurAmount
75+
}
76+
77+
Rectangle {
78+
anchors.fill: parent
79+
color: __style.nightColor
80+
opacity: 0.35
81+
}
82+
83+
Text {
84+
id: label
85+
text: root.text
86+
87+
anchors.centerIn: parent
88+
width: parent.width - __style.margin32
89+
height: parent.height - __style.margin10
90+
91+
color: __style.polarColor
92+
font {
93+
pixelSize: __style.margin10
94+
bold: true
95+
family: "Inter"
96+
}
97+
98+
horizontalAlignment: Text.AlignHCenter
99+
verticalAlignment: Text.AlignVCenter
100+
wrapMode: Text.WrapAnywhere
101+
elide: Text.ElideRight
102+
}
103+
}
104+
}
105+
106+
// add mouse area to go to the nex
107+
}

‎gallery/qml.qrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<file>qml/pages/NotificationPage.qml</file>
1919
<file>qml/pages/DrawerPage.qml</file>
2020
<file>qml/pages/PagesPage.qml</file>
21+
<file>qml/pages/PhotoCardPage.qml</file>
2122
<file>qml/pages/ChecksPage.qml</file>
2223
<file>qml/pages/MapPage.qml</file>
2324
<file>qml/pages/ToolbarPage.qml</file>

‎gallery/qml/pages/PhotoCardPage.qml‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
2+
3+
/***************************************************************************
4+
* *
5+
* This program is free software; you can redistribute it and/or modify *
6+
* it under the terms of the GNU General Public License as published by *
7+
* the Free Software Foundation; either version 2 of the License, or *
8+
* (at your option) any later version. *
9+
* *
10+
***************************************************************************/
11+
import QtQuick
12+
import QtQuick.Controls
13+
import QtQuick.Controls.Basic
14+
15+
import "../../app/qml/components"
16+
import "../../app/qml/form/editors"
17+
18+
Page {
19+
20+
Rectangle {
21+
anchors.fill: parent
22+
color: __style.lightGreenColor
23+
}
24+
25+
ScrollView {
26+
spacing: 20
27+
anchors.horizontalCenter: parent.horizontalCenter
28+
anchors.top: parent.top
29+
anchors.topMargin: 20
30+
anchors.left: parent.left
31+
anchors.leftMargin: 20
32+
anchors.fill: parent
33+
anchors.rightMargin: 20
34+
width: parent.width - 30
35+
height: contentHeight
36+
37+
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
38+
ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
39+
40+
Row {
41+
spacing: 10
42+
43+
MMPhotoCard {
44+
width: 120
45+
height: 120
46+
imageSource: "https://images.pexels.com/photos/615348/forest-fog-sunny-nature-615348.jpeg"
47+
text: "This is my feature"
48+
textVisible: true
49+
}
50+
51+
MMPhotoCard {
52+
width: 120
53+
height: 120
54+
imageSource: "https://images.pexels.com/photos/615348/forest-fog-sunny-nature-615348.jpeg"
55+
text: "This is my feature"
56+
textVisible: false
57+
}
58+
59+
MMPhotoCard {
60+
width: 120
61+
height: 120
62+
imageSource: "/Users/gabrielbolbotina/development/repos/mm/build-macos/app/android/assets/qgis-data/projects/Timisoara-trees/20260204_171556.jpg"
63+
text: "This is my feature and this is how it looks until now"
64+
textVisible: true
65+
}
66+
MMPhotoCard {
67+
width: 120
68+
height: 120
69+
imageSource: "https://images.pexels.com/photos/615348/forest-fog-sunny-nature-615348.jpeg"
70+
text: "This is my feature"
71+
textVisible: true
72+
}
73+
74+
MMPhotoCard {
75+
width: 120
76+
height: 120
77+
imageSource: "https://images.pexels.com/photos/615348/forest-fog-sunny-nature-615348.jpeg"
78+
text: "This is my feature"
79+
textVisible: false
80+
}
81+
82+
MMPhotoCard {
83+
width: 120
84+
height: 120
85+
imageSource: "/Users/gabrielbolbotina/development/repos/mm/build-macos/app/android/assets/qgis-data/projects/Timisoara-trees/20260204_171556.jpg"
86+
text: "This is my feature and I am proud of it to be shown in this state"
87+
textVisible: true
88+
}
89+
}
90+
}
91+
}

0 commit comments

Comments
 (0)