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