blob: 56dae24e2ce5b43cc3bef45a31bdee1c8a1bfa2c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
Item {
id: item1
DropShadow {
color: "#4d000000"
source: cardItem
verticalOffset: 4
radius: 40
samples: 81
anchors.fill: cardItem
}
Rectangle {
id: cardItem
anchors.fill: parent
anchors.rightMargin: 16
anchors.leftMargin: 16
anchors.bottomMargin: 16
anchors.topMargin: 16
Layout.minimumWidth: 300
Layout.minimumHeight: 475
radius: 8
ColumnLayout {
id: columnLayout
anchors.fill: parent
spacing: 0
Rectangle {
id: cardItemImage
radius: 8
Layout.fillHeight: true
Layout.preferredHeight: 255
Layout.fillWidth: true
Layout.preferredWidth: 300
Image {
id: cardItemImageSource
source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
fillMode: Image.PreserveAspectCrop
width: parent.width
height: parent.height
visible: false
}
OpacityMask {
id: cardItemImageMask
anchors.fill: cardItemImage
source: cardItemImageSource
maskSource: cardItemImage
}
Rectangle {
id: rectangle
width: cardItemImageMask.width
height: 5
color: "#ffffff"
anchors.bottom: cardItemImageMask.bottom
anchors.bottomMargin: 0
}
}
ColumnLayout {
id: cardItemBody
Layout.rightMargin: 20
Layout.leftMargin: 20
Layout.bottomMargin: 16
Layout.topMargin: 16
Layout.fillHeight: true
Layout.fillWidth: true
Item {
id: badgeAndFavorite
height: favorite.height
Layout.fillWidth: true
Label {
id: badge
color: "#0cbc87"
text: "All level"
anchors.left: parent.left
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: false
rightPadding: 6
leftPadding: 6
bottomPadding: 4
topPadding: 4
font.pointSize: 12
font.family: "Roboto"
background: Rectangle {
color: "#4d0cbc87"
radius: 8
}
}
Button {
id: favorite
width: 24
height: 24
text: qsTr("Button")
anchors.right: parent.right
anchors.rightMargin: 0
padding: 0
rightPadding: 0
leftPadding: 0
bottomPadding: 0
topPadding: 0
icon.source: "Material/svg/outlined/heart.svg"
display: AbstractButton.IconOnly
flat: true
Connections {
target: favorite
onClicked: item1.state = "favorite pressed"
}
}
}
}
Label {
id: cardTitle
color: "#24292d"
text: qsTr("Course title")
wrapMode: Text.Wrap
Layout.fillWidth: true
Layout.bottomMargin: 20
font.styleName: "Medium"
font.pointSize: 21
font.family: "Roboto"
Layout.rightMargin: 20
Layout.leftMargin: 20
}
}
}
states: [
State {
name: "favorite pressed"
when: favorite.pressed
PropertyChanges {
target: favorite
icon.color: "#d6293e"
icon.source: "Font-Awesome/svgs/solid/heart.svg"
}
PropertyChanges {
target: favorite
layer.enabled: true
}
}
]
}
|
