examples/simpleexamples/simpleChatApp.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2017 Marco Martin <mart@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import QtQuick.Layouts
0009 import QtQuick.Controls as QQC2
0010 import org.kde.kirigami as Kirigami
0011
0012 Kirigami.ApplicationWindow {
0013     id: root
0014
0015     //FIXME: perhaps the default logic for going widescreen should be refined upstream
0016     wideScreen: width > columnWidth * 3
0017     property int columnWidth: Kirigami.Units.gridUnit * 13
0018     property int footerHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
0019
0020     globalDrawer: Kirigami.GlobalDrawer {
0021         contentItem.implicitWidth: columnWidth
0022         modal: true
0023         drawerOpen: false
0024         isMenu: true
0025
0026         actions: [
0027             Kirigami.Action {
0028                 text: "Rooms"
0029                 icon.name: "view-list-icons"
0030             },
0031             Kirigami.Action {
0032                 text: "Contacts"
0033                 icon.name: "tag-people"
0034             },
0035             Kirigami.Action {
0036                 text: "Search"
0037                 icon.name: "search"
0038             }
0039         ]
0040     }
0041     contextDrawer: Kirigami.OverlayDrawer {
0042         id: contextDrawer
0043         //they can depend on the page like that or be defined directly here
0044         edge: Qt.application.layoutDirection === Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
0045         modal: !root.wideScreen
0046         onModalChanged: drawerOpen = !modal
0047         handleVisible: root.controlsVisible
0048
0049         //here padding 0 as listitems look better without as opposed to any other control
0050         topPadding: 0
0051         bottomPadding: 0
0052         leftPadding: 0
0053         rightPadding: 0
0054
0055         contentItem: ColumnLayout {
0056             readonly property int implicitWidth: root.columnWidth
0057             spacing: 0
0058             QQC2.Control {
0059                 Layout.fillWidth: true
0060                 background: Rectangle {
0061                     anchors.fill: parent
0062                     color: Kirigami.Theme.highlightColor
0063                     opacity: 0.8
0064                 }
0065
0066                 padding: Kirigami.Units.gridUnit
0067
0068                 contentItem: ColumnLayout {
0069                     id: titleLayout
0070                     spacing: Kirigami.Units.gridUnit
0071
0072                     RowLayout {
0073                         spacing: Kirigami.Units.gridUnit
0074                         Rectangle {
0075                             color: Kirigami.Theme.highlightedTextColor
0076                             radius: width
0077                             implicitWidth: Kirigami.Units.iconSizes.medium
0078                             implicitHeight: implicitWidth
0079                         }
0080                         ColumnLayout {
0081                             QQC2.Label {
0082                                 Layout.fillWidth: true
0083                                 color: Kirigami.Theme.highlightedTextColor
0084                                 text: "KDE"
0085                             }
0086                             QQC2.Label {
0087                                 Layout.fillWidth: true
0088                                 color: Kirigami.Theme.highlightedTextColor
0089                                 font: Kirigami.Theme.smallFont
0090                                 text: "#kde: kde.org"
0091                             }
0092                         }
0093                     }
0094                     QQC2.Label {
0095                         Layout.fillWidth: true
0096                         color: Kirigami.Theme.highlightedTextColor
0097                         text: "Main room for KDE community, other rooms are listed at kde.org/rooms"
0098                         wrapMode: Text.WordWrap
0099                     }
0100                 }
0101             }
0102
0103             Kirigami.Separator {
0104                 Layout.fillWidth: true
0105             }
0106
0107             QQC2.ScrollView {
0108                 Layout.fillWidth: true
0109                 Layout.fillHeight: true
0110                 ListView {
0111                     reuseItems: true
0112                     model: 50
0113                     delegate: QQC2.ItemDelegate {
0114                         text: "Person " + modelData
0115                         width: parent.width
0116                     }
0117                 }
0118             }
0119
0120             Kirigami.Separator {
0121                 Layout.fillWidth: true
0122                 Layout.maximumHeight: 1//implicitHeight
0123             }
0124             QQC2.ItemDelegate {
0125                 text: "Group call"
0126                 icon.name: "call-start"
0127                 width: parent.width
0128             }
0129             QQC2.ItemDelegate {
0130                 text: "Send Attachment"
0131                 icon.name: "mail-attachment"
0132                 width: parent.width
0133             }
0134         }
0135     }
0136
0137     pageStack.defaultColumnWidth: columnWidth
0138     pageStack.initialPage: [channelsComponent, chatComponent]
0139
0140     Component {
0141         id: channelsComponent
0142         Kirigami.ScrollablePage {
0143             title: "Channels"
0144             actions: Kirigami.Action {
0145                 icon.name: "search"
0146                 text: "Search"
0147             }
0148             background: Rectangle {
0149                 anchors.fill: parent
0150                 color: Kirigami.Theme.backgroundColor
0151             }
0152             footer: QQC2.ToolBar {
0153                 height: root.footerHeight
0154                 padding: Kirigami.Units.smallSpacing
0155                 RowLayout {
0156                     anchors.fill: parent
0157                     spacing: Kirigami.Units.smallSpacing
0158                     QQC2.ToolButton {
0159                         Layout.fillHeight: true
0160                         //make it square
0161                         implicitWidth: height
0162                         icon.name: "configure"
0163                         onClicked: root.pageStack.layers.push(secondLayerComponent);
0164                     }
0165                     QQC2.ComboBox {
0166                         Layout.fillWidth: true
0167                         Layout.fillHeight: true
0168                         model: ["First", "Second", "Third"]
0169                     }
0170                 }
0171             }
0172             ListView {
0173                 id: channelsList
0174                 currentIndex: 2
0175                 model: 30
0176                 reuseItems: true
0177                 delegate: QQC2.ItemDelegate {
0178                     text: "#Channel " + modelData
0179                     checkable: true
0180                     checked: channelsList.currentIndex === index
0181                     width: parent.width
0182                 }
0183             }
0184         }
0185     }
0186
0187     Component {
0188         id: chatComponent
0189         Kirigami.ScrollablePage {
0190             title: "#KDE"
0191             actions: [
0192                 Kirigami.Action {
0193                     icon.name: "documentinfo"
0194                     text: "Channel info"
0195                 },
0196                 Kirigami.Action {
0197                     icon.name: "search"
0198                     text: "Search"
0199                 },
0200                 Kirigami.Action {
0201                     text: "Room Settings"
0202                     icon.name: "configure"
0203                     Kirigami.Action {
0204                         text: "Setting 1"
0205                     }
0206                     Kirigami.Action {
0207                         text: "Setting 2"
0208                     }
0209                 },
0210                 Kirigami.Action {
0211                     text: "Shared Media"
0212                     icon.name: "document-share"
0213                     Kirigami.Action {
0214                         text: "Media 1"
0215                     }
0216                     Kirigami.Action {
0217                         text: "Media 2"
0218                     }
0219                     Kirigami.Action {
0220                         text: "Media 3"
0221                     }
0222                 }
0223             ]
0224             background: Rectangle {
0225                 anchors.fill: parent
0226                 color: Kirigami.Theme.backgroundColor
0227             }
0228             footer: QQC2.Control {
0229                 height: footerHeight
0230                 padding: Kirigami.Units.smallSpacing
0231                 background: Rectangle {
0232                     color: Kirigami.Theme.backgroundColor
0233                     Kirigami.Separator {
0234                         Rectangle {
0235                             anchors.fill: parent
0236                             color: Kirigami.Theme.focusColor
0237                             visible: chatTextInput.activeFocus
0238                         }
0239                         anchors {
0240                             left: parent.left
0241                             right: parent.right
0242                             top: parent.top
0243                         }
0244                     }
0245                 }
0246                 contentItem: RowLayout {
0247                     QQC2.TextField {
0248                         Layout.fillWidth: true
0249                         id: chatTextInput
0250                         background: Item {}
0251                     }
0252                     QQC2.ToolButton {
0253                         Layout.fillHeight: true
0254                         //make it square
0255                         implicitWidth: height
0256                         icon.name: "go-next"
0257                     }
0258                 }
0259             }
0260
0261             ListView {
0262                 id: channelsList
0263                 verticalLayoutDirection: ListView.BottomToTop
0264                 currentIndex: 2
0265                 model: 30
0266                 reuseItems: true
0267                 delegate: Item {
0268                     height: Kirigami.Units.gridUnit * 4
0269                     ColumnLayout {
0270                         x: Kirigami.Units.gridUnit
0271                         anchors.verticalCenter: parent.verticalCenter
0272                         QQC2.Label {
0273                             text: modelData % 2 ? "John Doe" : "John Applebaum"
0274                         }
0275                         QQC2.Label {
0276                             text: "Message " + modelData
0277                         }
0278                     }
0279                 }
0280             }
0281         }
0282     }
0283
0284     Component {
0285         id: secondLayerComponent
0286         Kirigami.Page {
0287             title: "Settings"
0288             background: Rectangle {
0289                 color: Kirigami.Theme.backgroundColor
0290             }
0291             footer: QQC2.ToolBar {
0292                 height: root.footerHeight
0293                 QQC2.ToolButton {
0294                     Layout.fillHeight: true
0295                     //make it square
0296                     implicitWidth: height
0297                     icon.name: "configure"
0298                     onClicked: root.pageStack.layers.pop();
0299                 }
0300             }
0301         }
0302     }
0303 }