Commit d780fc1d authored by Dimitris Kardarakos's avatar Dimitris Kardarakos

Create a dynamic way to provide component information

In some components, an action is offered that provides descriptive info about the component as well as links to the source code and the hig website. All this info has been gathered into a json file. The InfoData plugin has been created to serve the data to the QML code.

Differential Revision: https://phabricator.kde.org/D18823
parent ed5a2eec
......@@ -2,6 +2,7 @@
set(kirigami2gallery_SRCS
main.cpp
InfoData.cpp
)
qt5_add_resources(RESOURCES resources.qrc)
......
#include "InfoData.h"
#include <QDebug>
#include <QFile>
#include <QJsonDocument>
#include <QJsonObject>
#include <QVariantMap>
InfoData::InfoData(QObject *parent)
: QObject(parent)
{
QString infoSheetData;
QFile file("://info-data.json");
if(file.open(QIODevice::ReadOnly | QIODevice::Text)) {
infoSheetData = file.readAll();
file.close();
}
QJsonObject jsonObject;
QJsonDocument data = QJsonDocument::fromJson(infoSheetData.toUtf8());
if (!data.isEmpty()) {
jsonObject = data.object();
m_jsonMap = jsonObject.toVariantMap();
}
}
QString InfoData::component() const
{
return m_component;
}
QString InfoData::higUrl() const
{
return m_higUrl;
}
QString InfoData::sourceUrl() const
{
return m_sourceUrl;
}
QString InfoData::title() const
{
return m_title;
}
QString InfoData::text() const
{
return m_text;
}
void InfoData::setComponent(const QString &componentName)
{
if (componentName != m_component) {
m_component = componentName;
emit componentChanged();
m_jsonMap.contains(componentName) ? setComponentData() : clearComponentData();
}
}
void InfoData::clearComponentData()
{
m_sourceUrl = QString();
m_higUrl = QString();
m_title = QString();
m_text = QString();
}
void InfoData::setComponentData()
{
QVariantMap componentVariant = qvariant_cast<QVariantMap>(m_jsonMap[m_component]);
if (!componentVariant.isEmpty()) {
m_sourceUrl = componentVariant.contains("sourceUrl") ? componentVariant["sourceUrl"].toString() : QString();
sourceUrlChanged();
m_higUrl = componentVariant.contains("higUrl") ? componentVariant["higUrl"].toString() : QString();
higUrlChanged();
m_title = componentVariant.contains("title") ? componentVariant["title"].toString() : QString();
titleChanged();
m_text = componentVariant.contains("text") ? componentVariant["text"].toString() : QString();
textChanged();
}
}
#ifndef INFODATA_H
#define INFODATA_H
#include <QObject>
#include <QString>
#include <QVariantMap>
class InfoData : public QObject
{
Q_OBJECT
Q_PROPERTY(QString component READ component WRITE setComponent NOTIFY componentChanged)
Q_PROPERTY(QString higUrl READ higUrl NOTIFY higUrlChanged)
Q_PROPERTY(QString sourceUrl READ sourceUrl NOTIFY sourceUrlChanged)
Q_PROPERTY(QString title READ title NOTIFY titleChanged)
Q_PROPERTY(QString text READ text NOTIFY textChanged)
public:
InfoData(QObject *parent=0);
QString component() const;
QString higUrl() const;
QString sourceUrl() const;
QString title() const;
QString text() const;
void setComponent(const QString &componentName);
signals:
void componentChanged();
void higUrlChanged();
void sourceUrlChanged();
void titleChanged();
void textChanged();
private:
void setComponentData();
void clearComponentData();
QString m_component;
QString m_higUrl;
QString m_sourceUrl;
QString m_title;
QString m_text;
QVariantMap m_jsonMap;
};
#endif // INFODATA_H
......@@ -39,12 +39,9 @@ Kirigami.ScrollablePage {
InfoSheet {
id: sheet
page: page
title: qsTr("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: 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, 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.\nA CardsLayout should always be contained within a ColumnLayout.")
page: page
component: "CardsLayoutGallery"
}
ColumnLayout {
......
......@@ -65,10 +65,9 @@ Kirigami.ScrollablePage {
InfoSheet {
id: sheet
title: qsTr("Drawers")
page: page
sourceUrl: "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/DrawerGallery.qml"
text: qsTr("Drawers are bars anchored to an edge of the screen: left, right, top or bottom.\nOn 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.\nOn 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.\nDrawers 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.\nNon modal drawers will leave the rest of the application window functional and vertical(left and right edge) drawers will become sidebars.\nNon modal drawers can also be collapsible, switching from a full vertical sidebar to a more compact vertical toolbar.\nYou can test between different Drawer modes in the \"Global Drawer Mode...\" menu entry in the global drawer of this application running on Desktop systems.")
component: "DrawerGallery"
}
Kirigami.OverlayDrawer {
......
......@@ -4,10 +4,35 @@ import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.2
import org.kde.kirigami 2.4 as Kirigami
import "components"
Kirigami.ScrollablePage {
id: page
title: "Form Layout"
actions.main: Kirigami.Action {
iconName: "documentinfo"
text: qsTr("Info")
checkable: true
onCheckedChanged: sheet.sheetOpen = checked;
shortcut: "Alt+I"
}
//Close the drawer with the back button
onBackRequested: {
if (sheet.sheetOpen) {
event.accepted = true;
sheet.close();
}
}
InfoSheet {
id: sheet
page: page
component: "FormLayoutGallery"
}
Kirigami.FormLayout {
id: layout
......
......@@ -49,9 +49,10 @@ Kirigami.ScrollablePage {
InfoSheet {
id: sheet
title: qsTr("Overlay Sheets")
sourceUrl: "https://cgit.kde.org/kirigami-gallery.git/tree/src/data/contents/ui/gallery/OverlaySheetGallery.qml"
text: qsTr("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.\nThe 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).")
page: page
component: "OverlaySheetGallery"
}
Kirigami.OverlaySheet {
......
......@@ -47,11 +47,9 @@ Kirigami.ScrollablePage {
InfoSheet {
id: sheet
page: page
title: qsTr("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: qsTr("<p>Selection controls allow users to complete tasks that involve a choice or a selection.</p> <p>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.</p> <ul><li>Use checkboxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of radio buttons or a combo box.</li> <li>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.</li> <li>Use switches on Mobile, when immediately activating or deactivating something (ok/Apply buttons not needed).</li></ul>")
component: "SelectionControlsGallery"
}
Controls.Dialog {
......
......@@ -21,19 +21,27 @@ 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 Data 1.0
Kirigami.OverlaySheet {
id: root
property Kirigami.Page page
property url higUrl
property url sourceUrl
property url higUrl: infoData.higUrl
property url sourceUrl: infoData.sourceUrl
property alias title: titleLabel.text
property alias text: mainText.text
property alias component: infoData.component
onSheetOpenChanged: page.actions.main.checked = sheetOpen
header: Kirigami.Heading {
id: titleLabel
text: infoData.title
Layout.fillWidth: true
InfoData {
id: infoData
}
}
footer: RowLayout {
......@@ -54,6 +62,7 @@ Kirigami.OverlaySheet {
Controls.Label {
id: mainText
text: infoData.text
property int implicitWidth: Kirigami.Units.gridUnit * 25
wrapMode: Text.WordWrap
}
......
{
"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": "<p>A Form layout is used to help align and structure a layout containing many control and input fields</p><br><p><b>When to use</b></p><br><ul><li>Use a Form layout when there are many related controls and input fields.</li><li>Form layouts are ideal for settings dialogs</li></ul>"
},
"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":"<p>Selection controls allow users to complete tasks that involve a choice or a selection.</p> <p>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.</p> <ul><li>Use checkboxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of radio buttons or a combo box.</li> <li>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.</li> <li>Use switches on Mobile, when immediately activating or deactivating something (ok/Apply buttons not needed).</li></ul>"
},
"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.<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, 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.<br>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.<br>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.<br>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.<br>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.<br>Non modal drawers will leave the rest of the application window functional and vertical(left and right edge) drawers will become sidebars.<br>Non modal drawers can also be collapsible, switching from a full vertical sidebar to a more compact vertical toolbar.<br>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.<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)."
}
}
......@@ -26,6 +26,7 @@
#include <QtQml>
#include <QUrl>
#include <QColor>
#include "InfoData.h"
#ifdef Q_OS_ANDROID
#include <QtAndroid>
......@@ -53,6 +54,8 @@ Q_DECL_EXPORT int main(int argc, char *argv[])
//qputenv("QML_IMPORT_TRACE", "1");
QQmlApplicationEngine engine;
qmlRegisterType<InfoData>("Data", 1, 0, "InfoData");
//we want different main files on desktop or mobile
//very small difference as they as they are subclasses of the same thing
if (qEnvironmentVariableIsSet("QT_QUICK_CONTROLS_MOBILE") &&
......
......@@ -29,5 +29,6 @@
<file alias="contents/ui/mobileApp.qml">./data/contents/ui/mobileApp.qml</file>
<file alias="metadata.desktop">./data/metadata.desktop</file>
<file alias="qtquickcontrols2.conf">qtquickcontrols2.conf</file>
<file alias="info-data.json">./data/info-data.json</file>
</qresource>
</RCC>
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