← Back to branch summary

~ubuntu-sdk-team/ubuntu-ui-toolkit/trunk

« back to all changes in this revision

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

  • Committer: CI Train Bot
  • Author(s): Christian Dywan, Zsombor Egri, Zoltán Balogh, Tim Peeters, Albert Astals Cid, Michael Sheldon, Benjamin Zeller
  • Date: 2015-12-17 17:13:49 UTC
  • mfrom: (1000.739.27 OTA9-landing-2015-12-16)
  • Revision ID: ci-train-bot@canonical.com-20151217171349-8xwclnhnx8v9oz4m
OTA9-landing-2015-12-16
Approved by: Zoltan Balogh

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Ubuntu/Components/1.3/Toolbar.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
// FIXME: In the example code below, replace the delegate
 
21
//  by the new text button when it becomes available.
 
22
/*!
 
23
    \qmltype Toolbar
 
24
    \inqmlmodule Ubuntu.Components 1.3
 
25
    \ingroup ubuntu
 
26
    \brief Toolbar that can be used as an extension for the edit mode header.
 
27
    Example:
 
28
    \qml
 
29
    PageHeader {
 
30
        id: editHeader
 
31
        property Component delegate: Component {
 
32
            AbstractButton {
 
33
                id: button
 
34
                action: modelData
 
35
                width: label.width + units.gu(4)
 
36
                height: parent.height
 
37
                Rectangle {
 
38
                    color: UbuntuColors.darkGrey
 
39
                    opacity: 0.1
 
40
                    anchors.fill: parent
 
41
                    visible: button.pressed
 
42
                }
 
43
                Label {
 
44
                    anchors.centerIn: parent
 
45
                    id: label
 
46
                    text: action.text
 
47
                    font.weight: text === "Confirm" ? Font.Normal : Font.Light
 
48
                }
 
49
            }
 
50
        }
 
51
 
 
52
        leadingActionBar {
 
53
            anchors.leftMargin: 0
 
54
            actions: Action {
 
55
                text: "Cancel"
 
56
                iconName: "close"
 
57
            }
 
58
            delegate: editHeader.delegate
 
59
        }
 
60
        trailingActionBar {
 
61
            anchors.rightMargin: 0
 
62
            actions: Action {
 
63
                text: "Confirm"
 
64
                iconName: "tick"
 
65
            }
 
66
            delegate: editHeader.delegate
 
67
        }
 
68
 
 
69
        extension: Toolbar {
 
70
            anchors {
 
71
                left: parent.left
 
72
                right: parent.right
 
73
                bottom: parent.bottom
 
74
            }
 
75
            trailingActionBar.actions: [
 
76
                Action { iconName: "bookmark-new" },
 
77
                Action { iconName: "add" },
 
78
                Action { iconName: "edit-select-all" },
 
79
                Action { iconName: "edit-copy" },
 
80
                Action { iconName: "select" }
 
81
            ]
 
82
            leadingActionBar.actions: Action {
 
83
                iconName: "delete"
 
84
                text: "delete"
 
85
                onTriggered: print("Delete action triggered")
 
86
            }
 
87
        }
 
88
    }
 
89
    \endqml
 
90
    See \l PageHeader.
 
91
*/
 
92
StyledItem {
 
93
    id: toolbar
 
94
    styleName: "ToolbarStyle"
 
95
 
 
96
    /*!
 
97
      \qmlproperty ActionBar leadingActionBar
 
98
      The leading ActionBar that should hold at most one action.
 
99
      Recommneded for the delete action.
 
100
      Example:
 
101
      \qml
 
102
      Toolbar {
 
103
          leadingActionBar.actions: [
 
104
              Action {
 
105
                  iconName: "delete"
 
106
                  text: "Delete"
 
107
                  onTriggered: print("delete!")
 
108
              }
 
109
          ]
 
110
      }
 
111
      \endqml
 
112
      See \l ActionBar.
 
113
     */
 
114
    readonly property alias leadingActionBar: leading
 
115
    ActionBar {
 
116
        id: leading
 
117
        anchors {
 
118
            left: parent.left
 
119
            top: parent.top
 
120
            bottom: parent.bottom
 
121
            leftMargin: units.gu(1)
 
122
        }
 
123
        numberOfSlots: 1
 
124
        delegate: toolbar.__styleInstance.defaultDelegate
 
125
        Component.onCompleted: {
 
126
            if (actions && actions.length > 1) {
 
127
                print("WARNING: Toolbar with more than one leading actions is not supported.");
 
128
            }
 
129
        }
 
130
    }
 
131
 
 
132
    /*!
 
133
      \qmlproperty ActionBar trailingActionBar
 
134
      The \l ActionBar with trailing actions.
 
135
      Example:
 
136
      \qml
 
137
      Toolbar {
 
138
            trailingActionBar.actions: [
 
139
                Action { iconName: "bookmark-new" },
 
140
                Action { iconName: "add" },
 
141
                Action { iconName: "edit-select-all" },
 
142
                Action { iconName: "edit-copy" }
 
143
            ]
 
144
      }
 
145
      \endqml
 
146
      The trailing ActionBar may contain up to 8 actions.
 
147
      Scrolling and support for more than 8 actions will be added in the near future.
 
148
      See \l ActionBar.
 
149
      */
 
150
    readonly property alias trailingActionBar: trailing
 
151
    ActionBar {
 
152
        id: trailing
 
153
        anchors {
 
154
            right: parent.right
 
155
            top: parent.top
 
156
            bottom: parent.bottom
 
157
            rightMargin: units.gu(1)
 
158
        }
 
159
        numberOfSlots: 8
 
160
        delegate: toolbar.__styleInstance.defaultDelegate
 
161
        Component.onCompleted: {
 
162
            if (actions && actions.length > 8) {
 
163
                print("WARNING: Toolbar with more than one leading actions is not supported.");
 
164
            }
 
165
        }
 
166
 
 
167
    }
 
168
}