1/*
2 *  SPDX-FileCopyrightText: 2017 Marco Martin <mart@kde.org>
3 *
4 *  SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick 2.6
8import QtQuick.Layouts 1.2
9import QtQuick.Controls 2.2 as QQC2
10import org.kde.kirigami 2.11 as Kirigami
11
12Kirigami.ApplicationWindow {
13    id: root
14
15    //header: Kirigami.ToolBarApplicationHeader {}
16    //FIXME: perhaps the default logic for going widescreen should be refined upstream
17    wideScreen: width > columnWidth * 3
18    property int columnWidth: Kirigami.Units.gridUnit * 13
19    property int footerHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
20
21    globalDrawer: Kirigami.GlobalDrawer {
22        contentItem.implicitWidth: columnWidth
23        title: "Chat App"
24        titleIcon: "konversation"
25        modal: true
26        drawerOpen: false
27        isMenu: true
28
29        actions: [
30            Kirigami.Action {
31                text: "Rooms"
32                icon.name: "view-list-icons"
33            },
34            Kirigami.Action {
35                text: "Contacts"
36                icon.name: "tag-people"
37            },
38            Kirigami.Action {
39                text: "Search"
40                icon.name: "search"
41            }
42        ]
43    }
44    contextDrawer: Kirigami.OverlayDrawer {
45        id: contextDrawer
46        //they can depend on the page like that or be defined directly here
47        edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
48        modal: !root.wideScreen
49        onModalChanged: drawerOpen = !modal
50        handleVisible: applicationWindow == undefined ? false : applicationWindow().controlsVisible
51
52        //here padding 0 as listitems look better without as opposed to any other control
53        topPadding: 0
54        bottomPadding: 0
55        leftPadding: 0
56        rightPadding: 0
57
58        contentItem: ColumnLayout {
59            readonly property int implicitWidth: root.columnWidth
60            spacing: 0
61            QQC2.Control {
62                Layout.fillWidth: true
63                background: Rectangle {
64                    anchors.fill: parent
65                    color: Kirigami.Theme.highlightColor
66                    opacity: 0.8
67                }
68
69                padding: Kirigami.Units.gridUnit
70
71                contentItem: ColumnLayout {
72                    id: titleLayout
73                    spacing: Kirigami.Units.gridUnit
74
75                    RowLayout {
76                        spacing: Kirigami.Units.gridUnit
77                        Rectangle {
78                            color: Kirigami.Theme.highlightedTextColor
79                            radius: width
80                            implicitWidth: Kirigami.Units.iconSizes.medium
81                            implicitHeight: implicitWidth
82                        }
83                        ColumnLayout {
84                            QQC2.Label {
85                                Layout.fillWidth: true
86                                color: Kirigami.Theme.highlightedTextColor
87                                text: "KDE"
88                            }
89                            QQC2.Label {
90                                Layout.fillWidth: true
91                                color: Kirigami.Theme.highlightedTextColor
92                                font.pointSize: Kirigami.Units.fontMetrics.font.pointSize * 0.8
93                                text: "#kde: kde.org"
94                            }
95                        }
96                    }
97                    QQC2.Label {
98                        Layout.fillWidth: true
99                        color: Kirigami.Theme.highlightedTextColor
100                        text: "Main room for KDE community, other rooms are listed at kde.org/rooms"
101                        wrapMode: Text.WordWrap
102                    }
103                }
104            }
105
106            Kirigami.Separator {
107                Layout.fillWidth: true
108            }
109
110            QQC2.ScrollView {
111                Layout.fillWidth: true
112                Layout.fillHeight: true
113                ListView {
114                    model: 50
115                    delegate: Kirigami.BasicListItem {
116                        label: "Person " + modelData
117                        separatorVisible: false
118                        reserveSpaceForIcon: false
119                    }
120                }
121            }
122
123            Kirigami.Separator {
124                Layout.fillWidth: true
125                Layout.maximumHeight: 1//implicitHeight
126            }
127            Kirigami.BasicListItem {
128                label: "Group call"
129                icon: "call-start"
130                separatorVisible: false
131            }
132            Kirigami.BasicListItem {
133                label: "Send Attachment"
134                icon: "mail-attachment"
135                separatorVisible: false
136            }
137        }
138    }
139
140    pageStack.defaultColumnWidth: columnWidth
141    pageStack.initialPage: [channelsComponent, chatComponent]
142
143    Component {
144        id: channelsComponent
145        Kirigami.ScrollablePage {
146            title: "Channels"
147            actions.main: Kirigami.Action {
148                icon.name: "search"
149                text: "Search"
150            }
151            background: Rectangle {
152                anchors.fill: parent
153                color: Kirigami.Theme.backgroundColor
154            }
155            footer: QQC2.ToolBar {
156                height: root.footerHeight
157                padding: Kirigami.Units.smallSpacing
158                RowLayout {
159                    anchors.fill: parent
160                    spacing: Kirigami.Units.smallSpacing
161                    //NOTE: icon support in tool button in Qt 5.11
162                    QQC2.ToolButton {
163                        Layout.fillHeight: true
164                        //make it square
165                        implicitWidth: height
166                        Kirigami.Icon {
167                            anchors.centerIn: parent
168                            width: Kirigami.Units.iconSizes.smallMedium
169                            height: width
170                            source: "configure"
171                        }
172                        onClicked: root.pageStack.layers.push(secondLayerComponent);
173                    }
174                    QQC2.ComboBox {
175                        Layout.fillWidth: true
176                        Layout.fillHeight: true
177                        model: ["First", "Second", "Third"]
178                    }
179                }
180            }
181            ListView {
182                id: channelsList
183                currentIndex: 2
184                model: 30
185                delegate: Kirigami.BasicListItem {
186                    label: "#Channel " + modelData
187                    checkable: true
188                    checked: channelsList.currentIndex == index
189                    separatorVisible: false
190                    reserveSpaceForIcon: false
191                }
192            }
193        }
194    }
195
196    Component {
197        id: chatComponent
198        Kirigami.ScrollablePage {
199            title: "#KDE"
200            actions {
201                left: Kirigami.Action {
202                    icon.name: "documentinfo"
203                    text: "Channel info"
204                }
205                main: Kirigami.Action {
206                    icon.name: "search"
207                    text: "Search"
208                }
209            }
210            actions.contextualActions: [
211                Kirigami.Action {
212                    text: "Room Settings"
213                    icon.name: "configure"
214                    Kirigami.Action {
215                        text: "Setting 1"
216                    }
217                    Kirigami.Action {
218                        text: "Setting 2"
219                    }
220                },
221                Kirigami.Action {
222                    text: "Shared Media"
223                    icon.name: "document-share"
224                    Kirigami.Action {
225                        text: "Media 1"
226                    }
227                    Kirigami.Action {
228                        text: "Media 2"
229                    }
230                    Kirigami.Action {
231                        text: "Media 3"
232                    }
233                }
234            ]
235            background: Rectangle {
236                anchors.fill: parent
237                color: Kirigami.Theme.backgroundColor
238            }
239            footer: QQC2.Control {
240                height: footerHeight
241                padding: Kirigami.Units.smallSpacing
242                background: Rectangle {
243                    color: Kirigami.Theme.backgroundColor
244                    Kirigami.Separator {
245                        Rectangle {
246                            anchors.fill: parent
247                            color: Kirigami.Theme.focusColor
248                            visible: chatTextInput.activeFocus
249                        }
250                        anchors {
251                            left: parent.left
252                            right: parent.right
253                            top: parent.top
254                        }
255                    }
256                }
257                contentItem: RowLayout {
258                    QQC2.TextField {
259                        Layout.fillWidth: true
260                        id: chatTextInput
261                        background: Item {}
262                    }
263                    //NOTE: icon support in tool button in Qt 5.11
264                    QQC2.ToolButton {
265                        Layout.fillHeight: true
266                        //make it square
267                        implicitWidth: height
268                        Kirigami.Icon {
269                            anchors.centerIn: parent
270                            width: Kirigami.Units.iconSizes.smallMedium
271                            height: width
272                            source: "go-next"
273                        }
274                    }
275                }
276            }
277
278            ListView {
279                id: channelsList
280                verticalLayoutDirection: ListView.BottomToTop
281                currentIndex: 2
282                model: 30
283                delegate: Item {
284                    height: Kirigami.Units.gridUnit * 4
285                    ColumnLayout {
286                        x: Kirigami.Units.gridUnit
287                        anchors.verticalCenter: parent.verticalCenter
288                        QQC2.Label {
289                            text: modelData % 2 ? "John Doe" : "John Applebaum"
290                        }
291                        QQC2.Label {
292                            text: "Message " + modelData
293                        }
294                    }
295                }
296            }
297        }
298    }
299
300    Component {
301        id: secondLayerComponent
302        Kirigami.Page {
303            title: "Settings"
304            background: Rectangle {
305                color: Kirigami.Theme.backgroundColor
306            }
307            footer: QQC2.ToolBar {
308                height: root.footerHeight
309                QQC2.ToolButton {
310                    Layout.fillHeight: true
311                    //make it square
312                    implicitWidth: height
313                    Kirigami.Icon {
314                        anchors.centerIn: parent
315                        width: Kirigami.Units.iconSizes.smallMedium
316                        height: width
317                        source: "configure"
318                    }
319                    onClicked: root.pageStack.layers.pop();
320                }
321            }
322        }
323    }
324}
325