Commit d8ce1591 authored by Dimitris Kardarakos's avatar Dimitris Kardarakos

Port Cards Grid, Cards List and Inline Messages extra information to json-based info sheet

Info sheet is fed by a single json file that contains extra info and links to source and hig. Cards Grid, Cards List and Inline Messages should use this to provide extra info. Also changed links that pointed to the kirigami repository, to kirigami-gallery which is more useful for the contributors.

Differential Revision: https://phabricator.kde.org/D18839
parent d780fc1d
......@@ -22,6 +22,8 @@ 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
......@@ -35,30 +37,19 @@ Kirigami.ScrollablePage {
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: {
......
......@@ -22,6 +22,8 @@ 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
......@@ -35,30 +37,19 @@ Kirigami.ScrollablePage {
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 {
......
......@@ -23,6 +23,8 @@ 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
......@@ -36,32 +38,22 @@ Kirigami.ScrollablePage {
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
......
......@@ -26,5 +26,20 @@
"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.<br>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.<br> Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.<br><br>In this page, CardsListView is used to do a list view of AbstractCard subclasses with a custom layout inside.<br> 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.<br>Therefore is discouraged to use it with the Card type, unless it has Horizontal as headerOrientation.<br> 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.<br> Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.<br><br>In this page, CardsGridView shows an example on how to put cards in a grid view, generated by a Qt model.<br>The behavior is same as CardsLayout, and it allows cards to be put in one or two columns depending from the available width.<br>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.<br>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."
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment