~ubuntu-branches/ubuntu/trusty/ubuntu-settings-components/trusty

« back to all changes in this revision

Viewing changes to Ubuntu/Settings/Components/HeroMessageHeader.qml

  • Committer: Package Import Robot
  • Author(s): Ubuntu daily release
  • Date: 2013-11-20 14:57:11 UTC
  • Revision ID: package-import@ubuntu.com-20131120145711-696cnastnyown5hx
Tags: upstream-0.1+14.04.20131120.1
ImportĀ upstreamĀ versionĀ 0.1+14.04.20131120.1

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
/*
 
2
 * Copyright 2013 Canonical Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU Lesser General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU Lesser General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU Lesser General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 *
 
16
 * Authors:
 
17
 *      Renato Araujo Oliveira Filho <renato@canonical.com>
 
18
 *      Olivier Tilloy <olivier.tilloy@canonical.com>
 
19
 */
 
20
 
 
21
import QtQuick 2.0
 
22
import Ubuntu.Components 0.1
 
23
 
 
24
Item {
 
25
    id: heroMessageHeader
 
26
 
 
27
    property alias avatar: avatarImage.source
 
28
    property alias icon: iconImage.source
 
29
    property alias appIcon: appIconImage.source
 
30
    property alias titleText: __titleText
 
31
    property alias subtitleText: __subtitleText
 
32
    property alias bodyText: __bodyText
 
33
    property real bodyBottom: bodyText.y + bodyText.height
 
34
 
 
35
    signal appIconClicked()
 
36
 
 
37
    height: units.gu(9)
 
38
 
 
39
    UbuntuShape {
 
40
        id: avatarImageContainer
 
41
        anchors {
 
42
            top: parent.top
 
43
            topMargin: units.gu(2)
 
44
            left: parent.left
 
45
            leftMargin: units.gu(2)
 
46
        }
 
47
        height: units.gu(6)
 
48
        width: units.gu(6)
 
49
        image: Image {
 
50
            id: avatarImage
 
51
            objectName: "avatar"
 
52
            fillMode: Image.PreserveAspectFit
 
53
        }
 
54
    }
 
55
 
 
56
    Image {
 
57
        id: iconImage
 
58
        objectName: "icon"
 
59
        anchors {
 
60
            top: parent.top
 
61
            topMargin: units.gu(2)
 
62
            left: avatarImageContainer.right
 
63
            leftMargin: units.gu(1)
 
64
        }
 
65
        width: units.gu(2)
 
66
        height: width
 
67
        horizontalAlignment: Image.AlignHCenter
 
68
        verticalAlignment: Image.AlignBottom
 
69
        fillMode: Image.PreserveAspectFit
 
70
    }
 
71
 
 
72
    Label {
 
73
        id: __titleText
 
74
        objectName: "title"
 
75
        anchors {
 
76
            baseline: iconImage.bottom
 
77
            left: iconImage.right
 
78
            leftMargin: units.gu(1)
 
79
            right: __appIcon.left
 
80
            rightMargin: units.gu(2)
 
81
        }
 
82
        elide: Text.ElideRight
 
83
        font.weight: Font.DemiBold
 
84
        fontSize: "medium"
 
85
    }
 
86
 
 
87
    Label {
 
88
        id: __subtitleText
 
89
        objectName: "subtitle"
 
90
        anchors {
 
91
            baseline: __titleText.baseline
 
92
            baselineOffset: units.gu(2.5)
 
93
            left: __titleText.left
 
94
            right: __titleText.right
 
95
        }
 
96
        elide: Text.ElideRight
 
97
        fontSize: "small"
 
98
    }
 
99
 
 
100
    Label {
 
101
        id: __bodyText
 
102
        objectName: "body"
 
103
        anchors {
 
104
            baseline: __subtitleText.baseline
 
105
            baselineOffset: units.gu(2.5)
 
106
            left: __titleText.left
 
107
            right: parent.right
 
108
            rightMargin: units.gu(2)
 
109
        }
 
110
        maximumLineCount: 2
 
111
        wrapMode: Text.WordWrap
 
112
        elide: Text.ElideRight
 
113
        fontSize: "small"
 
114
    }
 
115
 
 
116
    Item {
 
117
        id: __appIcon
 
118
        width: units.gu(7)
 
119
        height: units.gu(7)
 
120
        anchors {
 
121
            top: parent.top
 
122
            right: parent.right
 
123
        }
 
124
        opacity: 0.0
 
125
        enabled: heroMessageHeader.state === "expanded"
 
126
 
 
127
        Image {
 
128
            id: appIconImage
 
129
            objectName: "appIcon"
 
130
            height: width
 
131
            anchors {
 
132
                left: parent.left
 
133
                leftMargin: units.gu(2)
 
134
                right: parent.right
 
135
                rightMargin: units.gu(2)
 
136
                topMargin: units.gu(1)
 
137
                verticalCenter: parent.verticalCenter
 
138
            }
 
139
            fillMode: Image.PreserveAspectFit
 
140
        }
 
141
 
 
142
        MouseArea {
 
143
            anchors.fill: parent
 
144
            onClicked: heroMessageHeader.appIconClicked()
 
145
        }
 
146
    }
 
147
 
 
148
    states: State {
 
149
        name: "expanded"
 
150
 
 
151
        PropertyChanges {
 
152
            target: __appIcon
 
153
            opacity: 1.0
 
154
        }
 
155
    }
 
156
 
 
157
    transitions: Transition {
 
158
        NumberAnimation {
 
159
            property: "opacity"
 
160
            duration: 200
 
161
            easing.type: Easing.OutQuad
 
162
        }
 
163
    }
 
164
}