← Back to branch summary

~ahayzen/music-app/remix-cover-grid

« back to all changes in this revision

Viewing changes to common/Card.qml

* Add CardView and Card
* Implement in Albums tab.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

Show diffs side-by-side

added added

removed removed

Lines of Context:
common/Card.qml
 
1
/*
 
2
 * Copyright (C) 2014
 
3
 *      Andrew Hayzen <ahayzen@gmail.com>
 
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; version 3.
 
8
 *
 
9
 * This program is distributed in the hope that it will be useful,
 
10
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
11
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
12
 * GNU General Public License for more details.
 
13
 *
 
14
 * You should have received a copy of the GNU General Public License
 
15
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
16
 */
 
17
 
 
18
import QtQuick 2.3
 
19
import Ubuntu.Components 1.1
 
20
 
 
21
 
 
22
Rectangle {
 
23
    id: card
 
24
    color: "transparent"
 
25
    height: cardColumn.childrenRect.height + 2 * bg.anchors.margins
 
26
 
 
27
    property alias imageSource: image.source
 
28
    property alias primaryText: primaryLabel.text
 
29
    property alias secondaryText: secondaryLabel.text
 
30
 
 
31
    signal clicked(var mouse)
 
32
    signal pressAndHold(var mouse)
 
33
 
 
34
    /* Animations */
 
35
    Behavior on height {
 
36
        UbuntuNumberAnimation {
 
37
 
 
38
        }
 
39
    }
 
40
 
 
41
    Behavior on width {
 
42
        UbuntuNumberAnimation {
 
43
 
 
44
        }
 
45
    }
 
46
 
 
47
    Behavior on x {
 
48
        UbuntuNumberAnimation {
 
49
 
 
50
        }
 
51
    }
 
52
 
 
53
    Behavior on y {
 
54
        UbuntuNumberAnimation {
 
55
 
 
56
        }
 
57
    }
 
58
 
 
59
    /* Background for card */
 
60
    Rectangle {
 
61
        id: bg
 
62
        anchors {
 
63
            fill: parent
 
64
            margins: units.gu(1)
 
65
        }
 
66
        color: "#2c2c34"
 
67
    }
 
68
 
 
69
    /* Column containing image and labels */
 
70
    Column {
 
71
        id: cardColumn
 
72
        anchors {
 
73
            fill: bg
 
74
        }
 
75
        spacing: units.gu(0.5)
 
76
 
 
77
        Image {
 
78
            id: image
 
79
            height: parent.width
 
80
            width: parent.width
 
81
 
 
82
            onStatusChanged: {
 
83
                if (status === Image.Error) {
 
84
                    source = Qt.resolvedUrl("../images/music-app-cover@30.png")
 
85
                }
 
86
            }
 
87
        }
 
88
 
 
89
        Rectangle {
 
90
            color: "transparent"
 
91
            height: units.gu(1)
 
92
            width: units.gu(1)
 
93
        }
 
94
 
 
95
        Label {
 
96
            id: primaryLabel
 
97
            anchors {
 
98
                left: parent.left
 
99
                leftMargin: units.gu(1)
 
100
                right: parent.right
 
101
                rightMargin: units.gu(1)
 
102
            }
 
103
            color: "#FFF"
 
104
            elide: Text.ElideRight
 
105
            fontSize: "small"
 
106
            opacity: 1.0
 
107
            wrapMode: Text.WordWrap
 
108
        }
 
109
 
 
110
        Label {
 
111
            id: secondaryLabel
 
112
            anchors {
 
113
                left: parent.left
 
114
                leftMargin: units.gu(1)
 
115
                right: parent.right
 
116
                rightMargin: units.gu(1)
 
117
            }
 
118
            color: "#FFF"
 
119
            elide: Text.ElideRight
 
120
            fontSize: "small"
 
121
            opacity: 0.4
 
122
            wrapMode: Text.WordWrap
 
123
        }
 
124
 
 
125
        Rectangle {
 
126
            color: "transparent"
 
127
            height: units.gu(1.5)
 
128
            width: units.gu(1)
 
129
        }
 
130
    }
 
131
 
 
132
    /* Overlay for when card is pressed */
 
133
    Rectangle {
 
134
        id: overlay
 
135
        anchors {
 
136
            fill: bg
 
137
        }
 
138
        color: "#000"
 
139
        opacity: 0
 
140
 
 
141
        Behavior on opacity {
 
142
            UbuntuNumberAnimation {
 
143
 
 
144
            }
 
145
        }
 
146
    }
 
147
 
 
148
    /* Capture mouse events */
 
149
    MouseArea {
 
150
        anchors {
 
151
            fill: parent
 
152
        }
 
153
        onClicked: card.clicked(mouse)
 
154
        onPressAndHold: card.pressAndHold(mouse)
 
155
        onPressedChanged: overlay.opacity = pressed ? 0.3 : 0
 
156
    }
 
157
}