← Back to branch summary

~zsombi/ubuntu-ui-toolkit/listitemSelectModeBugs

« back to all changes in this revision

Viewing changes to src/Ubuntu/Components/1.3/PageHeader.qml

  • Committer: Zsombor Egri
  • Date: 2015-11-16 06:35:05 UTC
  • mfrom: (1664.1.1 listitemSelectModeBugs)
  • Revision ID: zsombor.egri@canonical.com-20151116063505-cwn2qfks7qzk10g9
re-sync

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Ubuntu/Components/1.3/PageHeader.qml
 
1
/*
 
2
 * Copyright 2015 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
 
 
17
import QtQuick 2.4
 
18
import Ubuntu.Components 1.3
 
19
 
 
20
/*!
 
21
    \qmltype PageHeader
 
22
    \inqmlmodule Ubuntu.Components 1.3
 
23
    \ingroup ubuntu
 
24
    \brief The PageHeader shows a title with a leading and a trailing
 
25
        \l ActionBar that add action buttons to the header.
 
26
 
 
27
    The colors for foreground, background and the divider are configured
 
28
    in the style, so they may be set using \l StyleHints:
 
29
    \qml
 
30
        PageHeader {
 
31
            title: "Colors"
 
32
            StyleHints {
 
33
                foregroundColor: UbuntuColors.orange
 
34
                backgroundColor: "black"
 
35
                dividerColor: UbuntuColors.darkGrey
 
36
            }
 
37
        }
 
38
    \endqml
 
39
*/
 
40
Header {
 
41
    id: header
 
42
    anchors {
 
43
        left: parent ? parent.left : undefined
 
44
        right: parent ? parent.right : undefined
 
45
    }
 
46
 
 
47
    /*!
 
48
      The title to display in the header.
 
49
      Note that the title will be hidden if the \l contents Item is set.
 
50
     */
 
51
    property string title
 
52
 
 
53
    /*!
 
54
      The contents item to display in the header. By default the contents
 
55
      is undefined, and setting it will disable showing of the title in
 
56
      the header.
 
57
 
 
58
      Example:
 
59
      \qml
 
60
      PageHeader {
 
61
          id: header
 
62
          title: "Welcome"
 
63
          contents: Rectangle {
 
64
              anchors.fill: parent
 
65
              color: UbuntuColors.red
 
66
              Label {
 
67
                  anchors.centerIn: parent
 
68
                  text: header.title
 
69
                  color: "white"
 
70
              }
 
71
          }
 
72
      }
 
73
      \endqml
 
74
     */
 
75
    property Item contents
 
76
 
 
77
    Component.onCompleted: holder.updateContents()
 
78
    onContentsChanged: holder.updateContents()
 
79
 
 
80
    Item {
 
81
        id: holder
 
82
        anchors {
 
83
            left: leading.right
 
84
            right: trailing.left
 
85
            top: parent.top
 
86
            leftMargin: leading.visible ? 0 : units.gu(1)
 
87
            rightMargin: trailing.visible ? 0 : units.gu(1)
 
88
        }
 
89
        height: __styleInstance.contentHeight
 
90
        Loader {
 
91
            id: titleLoader
 
92
            anchors.fill: parent
 
93
        }
 
94
        property Item previousContents: null
 
95
        property Item previousContentsParent: null
 
96
 
 
97
        function updateContents() {
 
98
            if (holder.previousContents) {
 
99
                holder.previousContents.parent = holder.previousContentsParent;
 
100
            }
 
101
            if (contents) {
 
102
                titleLoader.sourceComponent = null;
 
103
                holder.previousContents = header.contents;
 
104
                holder.previousContentsParent = header.contents.parent;
 
105
                header.contents.parent = holder;
 
106
            } else {
 
107
                holder.previousContents = null;
 
108
                holder.previousContentsParent = null;
 
109
                titleLoader.sourceComponent = __styleInstance.titleComponent;
 
110
            }
 
111
        }
 
112
 
 
113
        // When the style changes, make sure that the titleLoader loads
 
114
        //  the new titleComponent.
 
115
        property Item styleInstance: __styleInstance
 
116
        onStyleInstanceChanged: updateContents()
 
117
    }
 
118
 
 
119
    /*!
 
120
      The actions to be shown in the leading action bar.
 
121
      This property is automatically set by the
 
122
      \l AdaptivePageLayout and other navigation components to configure the
 
123
      back action for the \l Page.
 
124
      Application developers should not set this property, because the
 
125
      value may be overridden by Ubuntu components that have navigation.
 
126
      Instead, set \l leadingActionBar's actions property.
 
127
     */
 
128
    property list<Action> navigationActions
 
129
 
 
130
    /*!
 
131
      \qmlproperty ActionBar leadingActionBar
 
132
      The \l ActionBar for the leading navigation actions.
 
133
      Example:
 
134
      \qml
 
135
      PageHeader {
 
136
          leadingActionBar.actions: [
 
137
              Action {
 
138
                  iconName: "back"
 
139
                  text: "Back"
 
140
              }
 
141
          ]
 
142
      }
 
143
      \endqml
 
144
      The default value of \l leadingActionBar actions is
 
145
      \l navigationActions, but that value can be changed to show
 
146
      different actions in front of the title.
 
147
      See \l ActionBar.
 
148
     */
 
149
    readonly property alias leadingActionBar: leading
 
150
    ActionBar {
 
151
        id: leading
 
152
        anchors {
 
153
            left: parent.left
 
154
            top: parent.top
 
155
            leftMargin: units.gu(1)
 
156
        }
 
157
        height: header.__styleInstance.contentHeight
 
158
        numberOfSlots: 1
 
159
        delegate: header.__styleInstance.defaultActionDelegate
 
160
        actions: header.navigationActions
 
161
        visible: leading.width > 0 // at least 1 visible action
 
162
        StyleHints {
 
163
            overflowIconName: "navigation-menu"
 
164
        }
 
165
    }
 
166
 
 
167
    /*!
 
168
      \qmlproperty ActionBar trailingActionBar
 
169
      The \l ActionBar with trailing actions.
 
170
      Example:
 
171
      \qml
 
172
      PageHeader {
 
173
          trailingActionBar {
 
174
              actions: [
 
175
                  Action {
 
176
                      iconName: "settings"
 
177
                      text: "first"
 
178
                  },
 
179
                  Action {
 
180
                      iconName: "info"
 
181
                      text: "second"
 
182
                  },
 
183
                  Action {
 
184
                      iconName: "search"
 
185
                      text: "third"
 
186
                  }
 
187
             ]
 
188
             numberOfSlots: 2
 
189
          }
 
190
      }
 
191
      \endqml
 
192
      See \l ActionBar.
 
193
      */
 
194
    readonly property alias trailingActionBar: trailing
 
195
    ActionBar {
 
196
        id: trailing
 
197
        anchors {
 
198
            right: parent.right
 
199
            top: parent.top
 
200
            rightMargin: units.gu(1)
 
201
        }
 
202
        height: header.__styleInstance.contentHeight
 
203
        numberOfSlots: 3
 
204
        delegate: header.__styleInstance.defaultActionDelegate
 
205
        visible: trailing.width > 0 // at least 1 visible action
 
206
    }
 
207
 
 
208
    /*!
 
209
      \qmlproperty Sections sections
 
210
      Sections shown at the bottom of the header. By default,
 
211
      the sections will only be visible if its actions or model
 
212
      is set. See \l Sections.
 
213
     */
 
214
    readonly property alias sections: sectionsItem
 
215
    Sections {
 
216
        id: sectionsItem
 
217
        anchors {
 
218
            left: parent.left
 
219
            leftMargin: units.gu(2)
 
220
            top: holder.bottom
 
221
        }
 
222
        visible: model && model.length > 0
 
223
        height: visible ? implicitHeight : 0
 
224
    }
 
225
 
 
226
    styleName: "PageHeaderStyle"
 
227
}