diff --git a/src/data/contents/ui/gallery/CardsGridViewGallery.qml b/src/data/contents/ui/gallery/CardsGridViewGallery.qml index d9ee082..c98314a 100644 --- a/src/data/contents/ui/gallery/CardsGridViewGallery.qml +++ b/src/data/contents/ui/gallery/CardsGridViewGallery.qml @@ -1,105 +1,96 @@ /* * Copyright 2018 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.Controls 2.0 as Controls import QtQuick.Layouts 1.2 import org.kde.kirigami 2.4 as Kirigami +import "components" + Kirigami.ScrollablePage { id: page title: qsTr("Grid view of Cards") actions.main: Kirigami.Action { iconName: "documentinfo" text: qsTr("Info") checkable: true onCheckedChanged: sheet.sheetOpen = checked; shortcut: "Alt+I" } - Kirigami.OverlaySheet { - id: sheet - onSheetOpenChanged: page.actions.main.checked = sheetOpen - header: RowLayout { - Kirigami.Heading { - Layout.fillWidth: true - text: qsTr("Cards Grid View") - } - Controls.ToolButton { - text: qsTr("HIG...") - enabled: false - onClicked: Qt.openUrlExternally("") - } - Controls.ToolButton { - text: qsTr("Source code...") - onClicked: Qt.openUrlExternally("https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/CardsGridViewGallery.qml") - } + //Close the drawer with the back button + onBackRequested: { + if (sheet.sheetOpen) { + event.accepted = true; + sheet.close(); } + } - Controls.Label { - property int implicitWidth: Kirigami.Units.gridUnit * 25 - wrapMode: Text.WordWrap - text: qsTr("The Kirigami types AbstractCard and Card are used to implement the popular Card pattern used on many mobile and web platforms that is used to display a collection of information or actions.\n Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.\n\nIn this page, CardsGridView shows an example on how to put cards in a grid view, generated by a Qt model.\nThe behavior is same as CardsLayout, and it allows cards to be put in one or two columns depending from the available width.\nCardsGridView has the limitation that every Card must have the same exact height, so cellHeight must be manually set to a value in which the content fits for every item.\nIf possible use cards only when you don't need to instantiate that many and use CardsLayout instead.") - } + InfoSheet { + id: sheet + + page: page + component: "CardsGridViewGallery" } Component.onCompleted: { for (var i = 0; i < 50; ++i) { mainModel.append({"title": "Item " + i, "image": "../banner.jpg", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus id augue euismod accumsan. Nunc vestibulum placerat bibendum.", "actions": [{text: "Action 1", icon: "add-placemark"}, {text: "Action 2", icon: "address-book-new-symbolic"}] }) } } Kirigami.CardsGridView { id: view model: ListModel { id: mainModel } //property Component delegate delegate:Kirigami.Card { id: card banner { title: model.title source: model.image } contentItem: Controls.Label { wrapMode: Text.WordWrap text: model.text } actions: [ Kirigami.Action { text: model.actions.get(0).text icon.name: model.actions.get(0).icon onTriggered: print(model.actions) }, Kirigami.Action { text: model.actions.get(1).text icon.name: model.actions.get(1).icon onTriggered: print(model.actions) } ] } } } diff --git a/src/data/contents/ui/gallery/CardsListViewGallery.qml b/src/data/contents/ui/gallery/CardsListViewGallery.qml index 1a1dbc6..b928d69 100644 --- a/src/data/contents/ui/gallery/CardsListViewGallery.qml +++ b/src/data/contents/ui/gallery/CardsListViewGallery.qml @@ -1,115 +1,106 @@ /* * Copyright 2018 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.Controls 2.0 as Controls import QtQuick.Layouts 1.2 import org.kde.kirigami 2.4 as Kirigami +import "components" + Kirigami.ScrollablePage { id: page title: qsTr("List view of simple cards") actions.main: Kirigami.Action { iconName: "documentinfo" text: qsTr("Info") checkable: true onCheckedChanged: sheet.sheetOpen = checked; shortcut: "Alt+I" } - Kirigami.OverlaySheet { - id: sheet - onSheetOpenChanged: page.actions.main.checked = sheetOpen - header: RowLayout { - Kirigami.Heading { - Layout.fillWidth: true - text: qsTr("Cards List View") - } - Controls.ToolButton { - text: qsTr("HIG...") - enabled: false - onClicked: Qt.openUrlExternally("") - } - Controls.ToolButton { - text: qsTr("Source code...") - onClicked: Qt.openUrlExternally("https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/CardsListViewGallery.qml") - } + //Close the drawer with the back button + onBackRequested: { + if (sheet.sheetOpen) { + event.accepted = true; + sheet.close(); } + } - Controls.Label { - property int implicitWidth: Kirigami.Units.gridUnit * 25 - wrapMode: Text.WordWrap - text: qsTr("The Kirigami types AbstractCard and Card are used to implement the popular Card pattern used on many mobile and web platforms that is used to display a collection of information or actions.\n Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.\n\nIn this page, CardsListView is used to do a list view of AbstractCard subclasses with a custom layout inside.\n CardsListView should be used only with cards which can look good at any horizontal size, so it is recommended to use directly AbstractCard with an appropriate layout inside, because they are stretching for the whole list width.\nTherefore is discouraged to use it with the Card type, unless it has Horizontal as headerOrientation.\n The choice between using this view with AbstractCard or a normal ListView with AbstractListItem/BasicListItem is purely a choice based on aesthetics alone.") - } + InfoSheet { + id: sheet + + page: page + component: "CardsListViewGallery" } Kirigami.CardsListView { id: view model: 100 delegate: Kirigami.AbstractCard { //NOTE: never put a Layout as contentItem as it will cause binding loops //SEE: https://bugreports.qt.io/browse/QTBUG-66826 contentItem: Item { implicitWidth: delegateLayout.implicitWidth implicitHeight: delegateLayout.implicitHeight GridLayout { id: delegateLayout anchors { left: parent.left top: parent.top right: parent.right //IMPORTANT: never put the bottom margin } rowSpacing: Kirigami.Units.largeSpacing columnSpacing: Kirigami.Units.largeSpacing columns: width > Kirigami.Units.gridUnit * 20 ? 4 : 2 Kirigami.Icon { source: "applications-graphics" Layout.fillHeight: true Layout.maximumHeight: Kirigami.Units.iconSizes.huge Layout.preferredWidth: height } ColumnLayout { Kirigami.Heading { level: 2 text: qsTr("Product ")+ modelData } Kirigami.Separator { Layout.fillWidth: true } Controls.Label { Layout.fillWidth: true wrapMode: Text.WordWrap text: qsTr("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus id augue euismod accumsan.") } } Controls.Button { Layout.alignment: Qt.AlignRight|Qt.AlignVCenter Layout.columnSpan: 2 text: qsTr("Install") onClicked: showPassiveNotification("Install for Product " + modelData + " clicked"); } } } } } } diff --git a/src/data/contents/ui/gallery/InlineMessagesGallery.qml b/src/data/contents/ui/gallery/InlineMessagesGallery.qml index f77dafd..1320df0 100644 --- a/src/data/contents/ui/gallery/InlineMessagesGallery.qml +++ b/src/data/contents/ui/gallery/InlineMessagesGallery.qml @@ -1,226 +1,218 @@ /* * Copyright 2018 Eike Hein * Copyright 2018 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.7 import QtQuick.Layouts 1.2 import QtQuick.Controls 2.0 as Controls import org.kde.kirigami 2.4 as Kirigami +import "components" + Kirigami.ScrollablePage { id: page title: qsTr("Inline Messages") actions.main: Kirigami.Action { iconName: "documentinfo" text: qsTr("Info") checkable: true onCheckedChanged: sheet.sheetOpen = checked; shortcut: "Alt+I" } - Kirigami.OverlaySheet { - id: sheet - onSheetOpenChanged: page.actions.main.checked = sheetOpen - header: RowLayout { - Kirigami.Heading { - Layout.fillWidth: true - text: qsTr("Inline Messages") - } - Controls.ToolButton { - text: qsTr("HIG...") - enabled: false - onClicked: Qt.openUrlExternally("") - } - Controls.ToolButton { - text: qsTr("Source code...") - onClicked: Qt.openUrlExternally("https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/InlineMessagesGallery.qml") - } - } - Controls.Label { - property int implicitWidth: Kirigami.Units.gridUnit * 25 - wrapMode: Text.WordWrap - text: qsTr("Inline messages allow you to show various types of messages placed the same layout as content they relate to, instead of showing a message in an overlay. They are invisible by default and need to be explicitly set visible to be revealed.") + //Close the drawer with the back button + onBackRequested: { + if (sheet.sheetOpen) { + event.accepted = true; + sheet.close(); } } + InfoSheet { + id: sheet + + page: page + component: "InlineMessagesGallery" + } + ColumnLayout { spacing: Kirigami.Units.largeSpacing Kirigami.InlineMessage { Layout.fillWidth: true visible: true text: qsTr("This is an informational inline message (the default type). Use it for example to announce a result or provide commentary.") } Kirigami.InlineMessage { Layout.fillWidth: true visible: true type: Kirigami.MessageType.Positive text: qsTr("This is a positive inline message. Use it for example to announce a successful result or the successful completion of a procedure.") } Kirigami.InlineMessage { Layout.fillWidth: true visible: true type: Kirigami.MessageType.Warning text: qsTr("This is a warning inline message. Use it for example to provide critical guidance or warn about something that is not going to work.") } Kirigami.InlineMessage { Layout.fillWidth: true visible: true type: Kirigami.MessageType.Error text: qsTr("This is an error inline message. Use it for example to announce something has gone wrong or that input will not be accepted.") } Kirigami.Separator { Layout.fillWidth: true } Kirigami.InlineMessage { Layout.fillWidth: true visible: true icon.source: "system-run" text: qsTr("Inline messages can optionally have a custom icon set.") } Kirigami.InlineMessage { Layout.fillWidth: true visible: true text: qsTr("You can use rich text in inline messages and optionally handle clicks on links (opens in browser): https://www.kde.org/") onLinkActivated: Qt.openUrlExternally(link) } Kirigami.InlineMessage { Layout.fillWidth: true visible: true showCloseButton: true text: qsTr("Inline messages can have an optional close button.") } Kirigami.InlineMessage { id: actionsMessage Layout.fillWidth: true visible: true readonly property string initialText: "Inline messages can have optional actions." text: initialText actions: [ Kirigami.Action { enabled: actionsMessage.text == actionsMessage.initialText text: qsTr("Add text") icon.name: "list-add" onTriggered: { actionsMessage.text = actionsMessage.initialText + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."; } }, Kirigami.Action { enabled: actionsMessage.text != actionsMessage.initialText text: qsTr("Reset text") icon.name: "list-remove" onTriggered: actionsMessage.text = actionsMessage.initialText } ] } Kirigami.Separator { Layout.fillWidth: true } ColumnLayout { Layout.alignment: Qt.AlignHCenter Layout.minimumWidth: 1 spacing: Kirigami.Units.smallSpacing Controls.Label { Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter text: qsTr("Inline messages are initially hidden and animate when revealed. Try it!") wrapMode: Text.WordWrap } Controls.Button { Layout.alignment: Qt.AlignHCenter enabled: !toggleMessage.visible text: qsTr("Show additional message") //TODO: enable when we can depend from Qt 5.10 // icon.name: "list-add" onClicked: toggleMessage.visible = true } } Kirigami.InlineMessage { id: toggleMessage Layout.fillWidth: true visible: false type: Kirigami.MessageType.Warning text: qsTr("Boo!") actions: [ Kirigami.Action { text: qsTr("Shush") icon.name: "dialog-cancel" onTriggered: toggleMessage.visible = false } ] } } } diff --git a/src/data/info-data.json b/src/data/info-data.json index 4c45e6d..ce1d7aa 100644 --- a/src/data/info-data.json +++ b/src/data/info-data.json @@ -1,30 +1,45 @@ { "FormLayoutGallery": { "title":"Form Layout", "higUrl": "https://hig.kde.org/patterns/content/form.html", "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/FormLayoutGallery.qml", "text": "

A Form layout is used to help align and structure a layout containing many control and input fields


When to use


  • Use a Form layout when there are many related controls and input fields.
  • Form layouts are ideal for settings dialogs
" }, "SelectionControlsGallery" : { "title" : "Selection Controls", "higUrl": "https://hig.kde.org/components/index.html#selection", "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/SelectionControlsGallery.qml", "text":"

Selection controls allow users to complete tasks that involve a choice or a selection.

Depending on the kind of choice that has to be made, the best control to use may be a Checkbox, a RadioButton, or a Switch.

  • Use checkboxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of radio buttons or a combo box.
  • Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a combo box or list instead.
  • Use switches on Mobile, when immediately activating or deactivating something (ok/Apply buttons not needed).
" }, "CardsLayoutGallery" : { "title": "Cards Layout", "higUrl": "https://hig.kde.org/components/editing/card.html", "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/CardsLayoutGallery.qml", "text": "The Kirigami types AbstractCard and Card are used to implement the popular Card pattern used on many mobile and web platforms that is used to display a collection of information or actions.
Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.

In this page, CardsLayout is presented, which should be used when the cards are not instantiated by a model or by a model which has always very few items (In the case of a big model CardsListView or CardsGridview should be used instead). They are presented as a grid of two columns which will remain centered if the application is really wide, or become a single column if there is not enough space for two columns, such as a mobile phone screen.
A CardsLayout should always be contained within a ColumnLayout." }, "DrawerGallery": { "title": "Drawers", "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/DrawerGallery.qml", "text": "Drawers are bars anchored to an edge of the screen: left, right, top or bottom.
On the left edge they should contain controls and settings global for the whole app, and is strongly encouraged to use the default component GlobalDrawer and to have only one instance for the whole application.
On the right edge they should have context-dependent actions linked to the current Page. It is strongly suggested to use the default component ContextDrawer for this and to have only one instance for the whole application.
Drawers can be modal(default) in which they block input in the rest of the application window, clicking on a darkened out area will dismiss the drawer.
Non modal drawers will leave the rest of the application window functional and vertical(left and right edge) drawers will become sidebars.
Non modal drawers can also be collapsible, switching from a full vertical sidebar to a more compact vertical toolbar.
You can test between different Drawer modes in the \"Global Drawer Mode...\" menu entry in the global drawer of this application running on Desktop systems." }, "OverlaySheetGallery": { "title": "Overlay Sheets", "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/OverlaySheetGallery.qml", "text": "The OverlaySheet control is a kind of modal content which goes over the main application content (either just the page or the whole app area) which is supposed to be used to display long contents, which may be taller than the application window itself, in which case the content will be scrollable.
The visual metaphore of the control is a piece of paper that scrolling, covering the page of the application, which can be dismissed scrolling it away (or tapping any area outside it)." + }, + "CardsListViewGallery": { + "title": "Cards List View", + "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/CardsListViewGallery.qml", + "text": "The Kirigami types AbstractCard and Card are used to implement the popular Card pattern used on many mobile and web platforms that is used to display a collection of information or actions.
Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.

In this page, CardsListView is used to do a list view of AbstractCard subclasses with a custom layout inside.
CardsListView should be used only with cards which can look good at any horizontal size, so it is recommended to use directly AbstractCard with an appropriate layout inside, because they are stretching for the whole list width.
Therefore is discouraged to use it with the Card type, unless it has Horizontal as headerOrientation.
The choice between using this view with AbstractCard or a normal ListView with AbstractListItem/BasicListItem is purely a choice based on aesthetics alone." + }, + "CardsGridViewGallery" : { + "title": "Cards Grid View", + "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/CardsGridViewGallery.qml", + "text": "The Kirigami types AbstractCard and Card are used to implement the popular Card pattern used on many mobile and web platforms that is used to display a collection of information or actions.
Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.

In this page, CardsGridView shows an example on how to put cards in a grid view, generated by a Qt model.
The behavior is same as CardsLayout, and it allows cards to be put in one or two columns depending from the available width.
CardsGridView has the limitation that every Card must have the same exact height, so cellHeight must be manually set to a value in which the content fits for every item.
If possible use cards only when you don't need to instantiate that many and use CardsLayout instead." + }, + "InlineMessagesGallery" : { + "title": "Inline Messages", + "sourceUrl": "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/InlineMessagesGallery.qml", + "text": "Inline messages allow you to show various types of messages placed the same layout as content they relate to, instead of showing a message in an overlay. They are invisible by default and need to be explicitly set visible to be revealed." } }