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