diff --git a/examples/simpleexamples/AbstractApplicationWindow.qml b/examples/simpleexamples/AbstractApplicationWindow.qml index 558a7bb3..d520153d 100644 --- a/examples/simpleexamples/AbstractApplicationWindow.qml +++ b/examples/simpleexamples/AbstractApplicationWindow.qml @@ -1,165 +1,166 @@ /* * Copyright 2016 Marco Martin * * 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.1 import QtQuick.Layouts 1.2 +import QtQuick.Controls 2.0 as Controls import org.kde.kirigami 2.4 as Kirigami Kirigami.AbstractApplicationWindow { id: root width: 500 height: 800 visible: true globalDrawer: Kirigami.GlobalDrawer { title: "Widget gallery" titleIcon: "applications-graphics" actions: [ Kirigami.Action { text: "View" iconName: "view-list-icons" Kirigami.Action { - text: "action 1" + text: "action 1" } Kirigami.Action { - text: "action 2" + text: "action 2" } Kirigami.Action { - text: "action 3" + text: "action 3" } }, Kirigami.Action { text: "Sync" iconName: "folder-sync" Kirigami.Action { - text: "action 4" + text: "action 4" } Kirigami.Action { - text: "action 5" + text: "action 5" } }, Kirigami.Action { text: "Checkable" iconName: "view-list-details" checkable: true checked: false onTriggered: { print("Action checked:" + checked) } }, Kirigami.Action { text: "Settings" iconName: "configure" checkable: true //Need to do this, otherwise it breaks the bindings property bool current: pageStack.currentItem ? pageStack.currentItem.objectName == "settingsPage" : false onCurrentChanged: { checked = current; } onTriggered: { pageStack.push(settingsComponent); } } ] Controls.CheckBox { checked: true text: "Option 1" } Controls.CheckBox { text: "Option 2" } Controls.CheckBox { text: "Option 3" } Controls.Slider { Layout.fillWidth: true value: 0.5 } } contextDrawer: Kirigami.ContextDrawer { id: contextDrawer } header: Kirigami.ApplicationHeader {} pageStack: Controls.StackView { anchors.fill: parent property int currentIndex: 0 focus: true onCurrentIndexChanged: { if (depth > currentIndex+1) { pop(get(currentIndex)); } } onDepthChanged: { currentIndex = depth-1; } initialItem: mainPageComponent Keys.onReleased: { if (event.key == Qt.Key_Back || (event.key === Qt.Key_Left && (event.modifiers & Qt.AltModifier))) { event.accepted = true; if (root.contextDrawer && root.contextDrawer.drawerOpen) { root.contextDrawer.close(); } else if (root.globalDrawer && root.globalDrawer.drawerOpen) { root.globalDrawer.close(); } else { var backEvent = {accepted: false} if (root.pageStack.currentIndex >= 1) { root.pageStack.currentItem.backRequested(backEvent); if (!backEvent.accepted) { if (root.pageStack.depth > 1) { root.pageStack.currentIndex = Math.max(0, root.pageStack.currentIndex - 1); backEvent.accepted = true; } else { Qt.quit(); } } } if (!backEvent.accepted) { Qt.quit(); } } } } } Component { id: settingsComponent Kirigami.Page { title: "Settings" objectName: "settingsPage" Rectangle { anchors.fill: parent } } } //Main app content Component { id: mainPageComponent MultipleColumnsGallery {} } } diff --git a/examples/simpleexamples/FixedSidebar.qml b/examples/simpleexamples/FixedSidebar.qml index d0b9d320..632daa97 100644 --- a/examples/simpleexamples/FixedSidebar.qml +++ b/examples/simpleexamples/FixedSidebar.qml @@ -1,52 +1,53 @@ /* * Copyright 2016 Marco Martin * * 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.1 import QtQuick.Layouts 1.2 import org.kde.kirigami 2.4 as Kirigami +import QtQuick.Controls 2.0 as Controls Kirigami.ApplicationWindow { id: root width: Kirigami.Units.gridUnit * 60 height: Kirigami.Units.gridUnit * 40 pageStack.initialPage: mainPageComponent globalDrawer: Kirigami.OverlayDrawer { drawerOpen: true modal: false contentItem: Item { implicitWidth: Kirigami.Units.gridUnit * 10 - Kirigami.Label { + Controls.Label { text: "This is a sidebar" width: parent.width - Kirigami.Units.smallSpacing * 2 wrapMode: Text.WordWrap anchors.horizontalCenter: parent.horizontalCenter } } } //Main app content Component { id: mainPageComponent MultipleColumnsGallery {} } } diff --git a/examples/simpleexamples/MultipleColumnsGallery.qml b/examples/simpleexamples/MultipleColumnsGallery.qml index 49c5fa52..193d3393 100644 --- a/examples/simpleexamples/MultipleColumnsGallery.qml +++ b/examples/simpleexamples/MultipleColumnsGallery.qml @@ -1,96 +1,96 @@ /* * Copyright 2015 Marco Martin * * 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 import QtQuick.Controls 2.0 as Controls import QtQuick.Layouts 1.2 import org.kde.kirigami 2.8 ScrollablePage { id: page Layout.fillWidth: true implicitWidth: Units.gridUnit * (Math.floor(Math.random() * 35) + 8) title: "Multiple Columns" actions { contextualActions: [ Action { text:"Action for buttons" iconName: "bookmarks" onTriggered: print("Action 1 clicked") }, Action { text:"Action 2" iconName: "folder" enabled: false } ] } ColumnLayout { width: page.width spacing: Units.smallSpacing Controls.Label { Layout.fillWidth: true wrapMode: Text.WordWrap text: "This page is used to test multiple columns: you can push and pop an arbitrary number of pages, each new page will have a random implicit width between 8 and 35 grid units.\nIf you enlarge the window enough, you can test how the application behaves with multiple columns." } Item { Layout.minimumWidth: Units.gridUnit *2 Layout.minimumHeight: Layout.minimumWidth } Controls.Label { - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter text: "Page implicitWidth: " + page.implicitWidth } Controls.Button { text: "Push Another Page" - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter onClicked: pageStack.push(Qt.resolvedUrl("MultipleColumnsGallery.qml")); } Controls.Button { text: "Pop A Page" - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter onClicked: pageStack.pop(); } RowLayout { - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter Controls.TextField { id: edit text: page.title } Controls.Button { text: "Rename Page" onClicked: page.title = edit.text; } } SearchField { anchors.horizontalCenter: parent.horizontalCenter id: searchField onAccepted: console.log("Search text is " + searchField.text); } PasswordField { anchors.horizontalCenter: parent.horizontalCenter id: passwordField onAccepted: console.log("Password") } } } diff --git a/examples/simpleexamples/Sidebar.qml b/examples/simpleexamples/Sidebar.qml index 321e7c39..e6dcd69c 100644 --- a/examples/simpleexamples/Sidebar.qml +++ b/examples/simpleexamples/Sidebar.qml @@ -1,179 +1,181 @@ /* * Copyright 2016 Marco Martin * * 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.1 import QtQuick.Controls 2.3 as Controls import QtQuick.Layouts 1.2 import org.kde.kirigami 2.7 as Kirigami Kirigami.ApplicationWindow { id: root width: Kirigami.Units.gridUnit * 60 height: Kirigami.Units.gridUnit * 40 pageStack.initialPage: mainPageComponent globalDrawer: Kirigami.OverlayDrawer { id: drawer drawerOpen: true modal: false //leftPadding: Kirigami.Units.largeSpacing rightPadding: Kirigami.Units.largeSpacing contentItem: ColumnLayout { Layout.preferredWidth: Kirigami.Units.gridUnit * 20 - Kirigami.Label { - anchors.horizontalCenter: parent.horizontalCenter + Controls.Label { + Layout.alignment: Qt.AlignHCenter text: "This is a sidebar" Layout.fillWidth: true width: parent.width - Kirigami.Units.smallSpacing * 2 wrapMode: Text.WordWrap } Controls.Button { - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter text: "Modal" checkable: true Layout.fillWidth: true checked: false onCheckedChanged: drawer.modal = checked } Item { Layout.fillHeight: true } } } contextDrawer: Kirigami.OverlayDrawer { id: contextDrawer drawerOpen: true edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge modal: false leftPadding: Kirigami.Units.largeSpacing rightPadding: Kirigami.Units.largeSpacing contentItem: ColumnLayout { Layout.preferredWidth: Kirigami.Units.gridUnit * 10 - Kirigami.Label { - anchors.horizontalCenter: parent.horizontalCenter + Controls.Label { + Layout.alignment: Qt.AlignHCenter text: "This is a sidebar" Layout.fillWidth: true width: parent.width - Kirigami.Units.smallSpacing * 2 wrapMode: Text.WordWrap } Controls.Button { - anchors.horizontalCenter: parent.horizontalCenter + Layout.alignment: Qt.AlignHCenter text: "Modal" checkable: true Layout.fillWidth: true checked: false onCheckedChanged: contextDrawer.modal = checked } Item { Layout.fillHeight: true } } } menuBar: Controls.MenuBar { Controls.Menu { title: qsTr("&File") Controls.Action { text: qsTr("&New...") } Controls.Action { text: qsTr("&Open...") } Controls.Action { text: qsTr("&Save") } Controls.Action { text: qsTr("Save &As...") } Controls.MenuSeparator { } Controls.Action { text: qsTr("&Quit") } } Controls.Menu { title: qsTr("&Edit") Controls.Action { text: qsTr("Cu&t") } Controls.Action { text: qsTr("&Copy") } Controls.Action { text: qsTr("&Paste") } } Controls.Menu { title: qsTr("&Help") Controls.Action { text: qsTr("&About") } } } header: Controls.ToolBar { contentItem: RowLayout { Controls.ToolButton { text: "Global ToolBar" } Item { Layout.fillWidth: true } Kirigami.ActionTextField { id: searchField placeholderText: "Search..." focusSequence: "Ctrl+F" leftActions: [ Kirigami.Action { iconName: "edit-clear" visible: searchField.text != "" onTriggered: { searchField.text = "" searchField.accepted() } }, Kirigami.Action { iconName: "edit-clear" visible: searchField.text != "" onTriggered: { searchField.text = "" searchField.accepted() } } ] rightActions: [ Kirigami.Action { iconName: "edit-clear" visible: searchField.text != "" onTriggered: { searchField.text = "" searchField.accepted() } }, Kirigami.Action { iconName: "anchor" visible: searchField.text != "" onTriggered: { searchField.text = "" searchField.accepted() } } ] onAccepted: console.log("Search text is " + searchField.text) } } } //Main app content Component { id: mainPageComponent MultipleColumnsGallery {} } footer: Controls.ToolBar { - position: ToolBar.Footer - contentItem: Controls.Label { + position: Controls.ToolBar.Footer + Controls.Label { + anchors.fill: parent + verticalAlignment: Qt.AlignVCenter text: "Global Footer" } } } diff --git a/examples/simpleexamples/simpleChatApp.qml b/examples/simpleexamples/simpleChatApp.qml index a8721a14..c54a0be1 100644 --- a/examples/simpleexamples/simpleChatApp.qml +++ b/examples/simpleexamples/simpleChatApp.qml @@ -1,337 +1,336 @@ /* * Copyright 2017 Marco Martin * * 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.6 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.2 as QQC2 import org.kde.kirigami 2.4 as Kirigami Kirigami.ApplicationWindow { id: root //header: Kirigami.ToolBarApplicationHeader {} //FIXME: perhaps the default logic for going widescreen should be refined upstream wideScreen: width > columnWidth * 3 property int columnWidth: Kirigami.Units.gridUnit * 13 property int footerHeight: Math.round(Kirigami.Units.gridUnit * 2.5) globalDrawer: Kirigami.GlobalDrawer { contentItem.implicitWidth: columnWidth title: "Chat App" titleIcon: "konversation" modal: true drawerOpen: false actions: [ Kirigami.Action { text: "Rooms" iconName: "view-list-icons" }, Kirigami.Action { text: "Contacts" iconName: "tag-people" }, Kirigami.Action { text: "Search" iconName: "search" } ] } contextDrawer: Kirigami.OverlayDrawer { id: contextDrawer //they can depend on the page like that or be defined directly here edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge modal: !root.wideScreen onModalChanged: drawerOpen = !modal handleVisible: applicationWindow == undefined ? false : applicationWindow().controlsVisible //here padding 0 as listitems look better without as opposed to any other control topPadding: 0 bottomPadding: 0 leftPadding: 0 rightPadding: 0 - + contentItem: ColumnLayout { - readonly property int implicitWidth: root.columnWidth spacing: 0 QQC2.Control { Layout.fillWidth: true background: Rectangle { anchors.fill: parent color: Kirigami.Theme.highlightColor opacity: 0.8 } padding: Kirigami.Units.gridUnit contentItem: ColumnLayout { id: titleLayout spacing: Kirigami.Units.gridUnit RowLayout { spacing: Kirigami.Units.gridUnit Rectangle { color: Kirigami.Theme.highlightedTextColor radius: width implicitWidth: Kirigami.Units.iconSizes.medium implicitHeight: implicitWidth } ColumnLayout { QQC2.Label { Layout.fillWidth: true color: Kirigami.Theme.highlightedTextColor text: "KDE" } QQC2.Label { Layout.fillWidth: true color: Kirigami.Theme.highlightedTextColor font.pointSize: Kirigami.Units.fontMetrics.font.pointSize * 0.8 text: "#kde: kde.org" } } } QQC2.Label { Layout.fillWidth: true color: Kirigami.Theme.highlightedTextColor text: "Main room for KDE community, other rooms are listed at kde.org/rooms" wrapMode: Text.WordWrap } } } Kirigami.Separator { Layout.fillWidth: true } QQC2.ScrollView { Layout.fillWidth: true Layout.fillHeight: true ListView { model: 50 delegate: Kirigami.BasicListItem { label: "Person " + modelData separatorVisible: false reserveSpaceForIcon: false } } } Kirigami.Separator { Layout.fillWidth: true Layout.maximumHeight: 1//implicitHeight } Kirigami.BasicListItem { label: "Group call" icon: "call-start" separatorVisible: false } Kirigami.BasicListItem { label: "Send Attachment" icon: "mail-attachment" separatorVisible: false } } } pageStack.defaultColumnWidth: columnWidth pageStack.initialPage: [channelsComponent, chatComponent] Component { id: channelsComponent Kirigami.ScrollablePage { title: "Channels" actions.main: Kirigami.Action { icon.name: "search" text: "Search" } background: Rectangle { anchors.fill: parent color: Kirigami.Theme.backgroundColor } footer: QQC2.ToolBar { height: root.footerHeight padding: Kirigami.Units.smallSpacing RowLayout { anchors.fill: parent spacing: Kirigami.Units.smallSpacing //NOTE: icon support in tool button in Qt 5.11 QQC2.ToolButton { Layout.fillHeight: true //make it square implicitWidth: height Kirigami.Icon { anchors.centerIn: parent width: Kirigami.Units.iconSizes.smallMedium height: width source: "configure" } onClicked: root.pageStack.layers.push(secondLayerComponent); } QQC2.ComboBox { Layout.fillWidth: true Layout.fillHeight: true model: ["First", "Second", "Third"] } } } ListView { id: channelsList currentIndex: 2 model: 30 delegate: Kirigami.BasicListItem { label: "#Channel " + modelData checkable: true checked: channelsList.currentIndex == index separatorVisible: false reserveSpaceForIcon: false } } } } Component { id: chatComponent Kirigami.ScrollablePage { title: "#KDE" actions { left: Kirigami.Action { icon.name: "documentinfo" text: "Channel info" } main: Kirigami.Action { icon.name: "search" text: "Search" } } actions.contextualActions: [ Kirigami.Action { text: "Room Settings" iconName: "configure" Kirigami.Action { text: "Setting 1" } Kirigami.Action { text: "Setting 2" } }, Kirigami.Action { text: "Shared Media" iconName: "document-share" Kirigami.Action { text: "Media 1" } Kirigami.Action { text: "Media 2" } Kirigami.Action { text: "Media 3" } } ] background: Rectangle { anchors.fill: parent color: Kirigami.Theme.backgroundColor } footer: QQC2.Control { height: footerHeight padding: Kirigami.Units.smallSpacing background: Rectangle { color: Kirigami.Theme.backgroundColor Kirigami.Separator { Rectangle { anchors.fill: parent color: Kirigami.Theme.focusColor visible: chatTextInput.activeFocus } anchors { left: parent.left right: parent.right top: parent.top } } } contentItem: RowLayout { QQC2.TextField { Layout.fillWidth: true id: chatTextInput background: Item {} } //NOTE: icon support in tool button in Qt 5.11 QQC2.ToolButton { Layout.fillHeight: true //make it square implicitWidth: height Kirigami.Icon { anchors.centerIn: parent width: Kirigami.Units.iconSizes.smallMedium height: width source: "go-next" } } } } ListView { id: channelsList verticalLayoutDirection: ListView.BottomToTop currentIndex: 2 model: 30 delegate: Item { height: Kirigami.Units.gridUnit * 4 ColumnLayout { x: Kirigami.Units.gridUnit anchors.verticalCenter: parent.verticalCenter QQC2.Label { text: modelData % 2 ? "John Doe" : "John Applebaum" } QQC2.Label { text: "Message " + modelData } } } } } } Component { id: secondLayerComponent Kirigami.Page { title: "Settings" background: Rectangle { color: Kirigami.Theme.backgroundColor } footer: QQC2.ToolBar { height: root.footerHeight QQC2.ToolButton { Layout.fillHeight: true //make it square implicitWidth: height Kirigami.Icon { anchors.centerIn: parent width: Kirigami.Units.iconSizes.smallMedium height: width source: "configure" } onClicked: root.pageStack.layers.pop(); } } } } }