DrawerGallery.qml 6.86 KB
Newer Older
Marco Martin's avatar
Marco Martin committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
 *   Copyright 2018 Marco Martin <mart@kde.org>
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU Library General Public License as
 *   published by the Free Software Foundation; either version 2 or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU Library General Public License for more details
 *
 *   You should have received a copy of the GNU Library General Public
 *   License along with this program; if not, write to the
 *   Free Software Foundation, Inc.,
 *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */

import QtQuick 2.0
Marco Martin's avatar
Marco Martin committed
21
import QtQuick.Controls 2.2 as Controls
Marco Martin's avatar
Marco Martin committed
22
23
24
25
26
27
28
29
30
31
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5 as Kirigami

import "components"

Kirigami.ScrollablePage {
    id: page

    title: qsTr("Overlay Sheets")

Marco Martin's avatar
Marco Martin committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    actions{
        main: Kirigami.Action {
            iconName: "documentinfo"
            text: qsTr("Info")
            checkable: true
            onCheckedChanged: sheet.sheetOpen = checked;
            shortcut: "Alt+I"
        }
        contextualActions: [
            Kirigami.Action {
                text: qsTr("Action 1")
                iconName: "bookmarks"
                onTriggered: showPassiveNotification(qsTr("Action 1 clicked"))
            },
            Kirigami.Action {
                text: qsTr("Disabled Action")
                iconName: "folder"
                enabled: false
            },
            Kirigami.Action {
                text: qsTr("Action 3")
                onTriggered: showPassiveNotification(qsTr("Action 3 clicked"))
            }
        ]
Marco Martin's avatar
Marco Martin committed
56
57
58
59
60
61
62
63
64
65
66
67
    }

    //Close the drawer with the back button
    onBackRequested: {
        if (sheet.sheetOpen) {
            event.accepted = true;
            sheet.close();
        }
    }

    InfoSheet {
        id: sheet
Marco Martin's avatar
Marco Martin committed
68
69
70
        title: qsTr("Drawers")
        page: page
        sourceUrl: "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/DrawerGallery.qml"
71
        text: qsTr("Drawers are bars anchored to an edge of the screen: left, right, top or bottom.\nOn the left edge they should contain controls and settings global for the whole app, and is strongly encouraged to use the default component GlobalDrawer and to have only one instance for the whole application.\nOn the right edge they should have context-dependent actions linked to the current Page. It is strongly suggested to use the default component ContextDrawer for this and to have only one instance for the whole application.\nDrawers can be modal(default) in which they block input in the rest of the application window, clicking on a darkened out area will dismiss the drawer.\nNon modal drawers will leave the rest of the application window functional and vertical(left and right edge) drawers will become sidebars.\nNon modal drawers can also be collapsible, switching from a full vertical sidebar to a more compact vertical toolbar.\nYou can test between different Drawer modes in the \"Global Drawer Mode...\" menu entry in the global drawer of this application running on Desktop systems.")
Marco Martin's avatar
Marco Martin committed
72
73
74
75
76
77
78
79
80
    }

    Kirigami.OverlayDrawer {
        id: modalBottomDrawer
        edge: Qt.BottomEdge
        contentItem: ColumnLayout {
            Controls.Label {
                Layout.fillWidth: true
                wrapMode: Text.WordWrap
Yuri Chornoivan's avatar
Yuri Chornoivan committed
81
                text: qsTr("A modal bottom drawer will span for the whole application window width and will darken the rest of the app. Clicking on a darkened will dismiss the drawer.")
Marco Martin's avatar
Marco Martin committed
82
83
            }
            Controls.Button {
Marco Martin's avatar
Marco Martin committed
84
                Layout.alignment: Qt.AlignRight
Marco Martin's avatar
Marco Martin committed
85
86
87
88
89
                text: qsTr("Close")
                onClicked: modalBottomDrawer.close()
            }
        }
    }
Marco Martin's avatar
Marco Martin committed
90

Marco Martin's avatar
Marco Martin committed
91
92
93
94
    Kirigami.OverlayDrawer {
        id: inlineBottomDrawer
        edge: Qt.BottomEdge
        modal: false
Marco Martin's avatar
Marco Martin committed
95

Marco Martin's avatar
Marco Martin committed
96
97
98
99
        contentItem: ColumnLayout {
            Controls.Label {
                Layout.fillWidth: true
                wrapMode: Text.WordWrap
Marco Martin's avatar
Marco Martin committed
100
                text: qsTr("An inline top drawer covers the whole application width but lets the uncovered pieces to still be interacted with.")
Marco Martin's avatar
Marco Martin committed
101
102
            }
            Controls.Button {
Marco Martin's avatar
Marco Martin committed
103
                Layout.alignment: Qt.AlignRight
Marco Martin's avatar
Marco Martin committed
104
105
106
107
108
109
                text: qsTr("Close")
                onClicked: inlineBottomDrawer.close()
            }
        }
    }

Marco Martin's avatar
Marco Martin committed
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
    Kirigami.OverlayDrawer {
        id: modalTopDrawer
        edge: Qt.TopEdge
        contentItem: ColumnLayout {
            Controls.Label {
                Layout.fillWidth: true
                wrapMode: Text.WordWrap
                text: qsTr("A modal top drawer will span for the whole application window width and will darken the rest of the app. Clicking on the darkened area will dismiss the drawer.")
            }
            Controls.Button {
                Layout.alignment: Qt.AlignRight
                text: qsTr("Close")
                onClicked: modalTopDrawer.close()
            }
        }
    }

    Kirigami.OverlayDrawer {
        id: inlineTopDrawer
        edge: Qt.TopEdge
        modal: false

        contentItem: ColumnLayout {
            Controls.Label {
                Layout.fillWidth: true
                wrapMode: Text.WordWrap
                text: qsTr("An inline bottom drawer covers the whole application width but lets the uncovered pieces to still be interacted with.")
            }
            Controls.Button {
                Layout.alignment: Qt.AlignRight
                text: qsTr("Close")
                onClicked: inlineTopDrawer.close()
            }
        }
    }

Marco Martin's avatar
Marco Martin committed
146
147
148
149
    ColumnLayout {
        width: page.width
        spacing: Kirigami.Units.smallSpacing

Marco Martin's avatar
Marco Martin committed
150
151
152
153
154
        Controls.Button {
            text: qsTr("Left Global Drawer")
            Layout.alignment: Qt.AlignHCenter
            onClicked: applicationWindow().globalDrawer.open()
        }
Marco Martin's avatar
Marco Martin committed
155
156
157
158
159
160
        Controls.Button {
            text: qsTr("Right Context Drawer")
            Layout.alignment: Qt.AlignHCenter
            visible: applicationWindow().contextDrawer
            onClicked: applicationWindow().contextDrawer.open()
        }
Marco Martin's avatar
Marco Martin committed
161
162
163
164
165
166
167
168
169
170
        Controls.Button {
            text: qsTr("Modal Bottom Drawer")
            Layout.alignment: Qt.AlignHCenter
            onClicked: modalBottomDrawer.open()
        }
        Controls.Button {
            text: "Inline Bottom Drawer"
            Layout.alignment: Qt.AlignHCenter
            onClicked: inlineBottomDrawer.open()
        }
Marco Martin's avatar
Marco Martin committed
171
172
173
174
175
176
177
178
179
180
        Controls.Button {
            text: qsTr("Modal Top Drawer")
            Layout.alignment: Qt.AlignHCenter
            onClicked: modalTopDrawer.open()
        }
        Controls.Button {
            text: "Inline Top Drawer"
            Layout.alignment: Qt.AlignHCenter
            onClicked: inlineTopDrawer.open()
        }
Marco Martin's avatar
Marco Martin committed
181
182
    }
}