Split into files from tutorial
This commit is contained in:
parent
9117b7f341
commit
7eed6d9852
4 changed files with 172 additions and 122 deletions
91
src/contents/ui/AddEditSheet.qml
Normal file
91
src/contents/ui/AddEditSheet.qml
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15 as Controls
|
||||
import QtQuick.Layouts 1.15
|
||||
import org.kde.kirigami 2.20 as Kirigami
|
||||
|
||||
// Overlay sheets appear over a part of the window
|
||||
Kirigami.OverlaySheet {
|
||||
id: addEditSheet
|
||||
|
||||
// Sheet mode
|
||||
property string mode: "add"
|
||||
|
||||
property int index: -1
|
||||
property alias name: nameField.text
|
||||
property alias description: descriptionField.text
|
||||
property alias kdate: dateField.text
|
||||
|
||||
// Signals can be read and certain actions performed when these happen
|
||||
signal added(string name, string description, var kdate)
|
||||
signal edited(int index, string name, string description, var kdate)
|
||||
signal removed(int index)
|
||||
|
||||
header: Kirigami.Heading {
|
||||
// i18nc is useful for adding context for translators
|
||||
text: mode === "add" ? i18nc("@title:window", "Add kountdown") :
|
||||
i18nc("@title:window", "Edit kountdown")
|
||||
}
|
||||
// Form layouts help align and structure a layout with several inputs
|
||||
Kirigami.FormLayout {
|
||||
// Textfields let you input text in a thin textbox
|
||||
Controls.TextField {
|
||||
id: nameField
|
||||
// Provides label attached to the textfield
|
||||
Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
|
||||
// Placeholder text is visible before you enter anything
|
||||
placeholderText: i18n("Event name (required)")
|
||||
// What to do after input is accepted (i.e. pressed enter)
|
||||
// In this case, it moves the focus to the next field
|
||||
onAccepted: descriptionField.forceActiveFocus()
|
||||
}
|
||||
Controls.TextField {
|
||||
id: descriptionField
|
||||
Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
|
||||
placeholderText: i18n("Optional")
|
||||
onAccepted: dateField.forceActiveFocus()
|
||||
}
|
||||
Controls.TextField {
|
||||
id: dateField
|
||||
Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
|
||||
inputMask: "0000-00-00"
|
||||
placeholderText: i18n("YYYY-MM-DD")
|
||||
}
|
||||
// This is a button.
|
||||
Controls.Button {
|
||||
id: deleteButton
|
||||
Layout.fillWidth: true
|
||||
text: i18nc("@action:button", "Delete")
|
||||
visible: mode === "edit"
|
||||
onClicked: {
|
||||
addEditSheet.removed(addEditSheet.index)
|
||||
close();
|
||||
}
|
||||
}
|
||||
Controls.Button {
|
||||
id: doneButton
|
||||
Layout.fillWidth: true
|
||||
text: i18nc("@action:button", "Done")
|
||||
// Button is only enabled if the user has entered something into the nameField
|
||||
enabled: nameField.text.length > 0
|
||||
onClicked: {
|
||||
// Add a listelement to the kountdownModel ListModel
|
||||
if(mode === "add") {
|
||||
addEditSheet.added(
|
||||
nameField.text,
|
||||
descriptionField.text,
|
||||
dateField.text
|
||||
);
|
||||
}
|
||||
else {
|
||||
addEditSheet.edited(
|
||||
index,
|
||||
nameField.text,
|
||||
descriptionField.text,
|
||||
dateField.text
|
||||
);
|
||||
}
|
||||
close();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
54
src/contents/ui/KountdownDelegate.qml
Normal file
54
src/contents/ui/KountdownDelegate.qml
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15 as Controls
|
||||
import QtQuick.Layouts 1.15
|
||||
import org.kde.kirigami 2.20 as Kirigami
|
||||
|
||||
Kirigami.AbstractCard {
|
||||
id: kountdownDelegate
|
||||
contentItem: Item {
|
||||
implicitWidth: delegateLayout.implicitWidth
|
||||
implicitHeight: delegateLayout.implicitHeight
|
||||
GridLayout {
|
||||
id: delegateLayout
|
||||
anchors {
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
}
|
||||
rowSpacing: Kirigami.Units.largeSpacing
|
||||
columnSpacing: Kirigami.Units.largeSpacing
|
||||
columns: root.wideScreen ? 4 : 2
|
||||
|
||||
Kirigami.Heading {
|
||||
Layout.fillHeight: true
|
||||
level: 1
|
||||
text: i18n("%1 days", Math.round((date-Date.now())/86400000))
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Kirigami.Heading {
|
||||
Layout.fillWidth: true
|
||||
level: 2
|
||||
text: name
|
||||
}
|
||||
Kirigami.Separator {
|
||||
Layout.fillWidth: true
|
||||
visible: description.length > 0
|
||||
}
|
||||
Controls.Label {
|
||||
Layout.fillWidth: true
|
||||
wrapMode: Text.WordWrap
|
||||
text: description
|
||||
visible: description.length > 0
|
||||
}
|
||||
}
|
||||
Controls.Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
// Column spanning within grid layout (vertically in this case)
|
||||
Layout.columnSpan: 2
|
||||
text: i18n("Edit")
|
||||
onClicked: openPopulatedSheet("edit", index, name, description, new Date(date).toISOString().slice(0,10))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,129 +28,33 @@ Kirigami.ApplicationWindow {
|
|||
|
||||
ListModel {
|
||||
id: kountdownModel
|
||||
// Each ListElement is an element on the list, containing information
|
||||
ListElement {
|
||||
name: "Dog birthday!!"
|
||||
description: "Big doggo birthday blowout."
|
||||
date: 100
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Dog birthday!!"
|
||||
description: "Big doggo birthday blowout."
|
||||
date: 100
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: kountdownDelegate
|
||||
Kirigami.AbstractCard {
|
||||
contentItem: Item {
|
||||
implicitWidth: delegateLayout.implicitWidth
|
||||
implicitHeight: delegateLayout.implicitHeight
|
||||
GridLayout {
|
||||
id: delegateLayout
|
||||
anchors {
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
}
|
||||
rowSpacing: Kirigami.Units.largeSpacing
|
||||
columnSpacing: Kirigami.Units.largeSpacing
|
||||
columns: root.wideScreen ? 4 : 2
|
||||
|
||||
Kirigami.Heading {
|
||||
// Heading will be as tall as possible while respecting constraints
|
||||
Layout.fillHeight: true
|
||||
// Level determines the size of the heading
|
||||
level: 1
|
||||
text: date
|
||||
}
|
||||
|
||||
// Layout for positioning elements vertically
|
||||
ColumnLayout {
|
||||
Kirigami.Heading {
|
||||
Layout.fillWidth: true
|
||||
level: 2
|
||||
text: name
|
||||
}
|
||||
// Horizontal rule
|
||||
Kirigami.Separator {
|
||||
Layout.fillWidth: true
|
||||
visible: description.length > 0
|
||||
}
|
||||
// Labels contain text
|
||||
Controls.Label {
|
||||
Layout.fillWidth: true
|
||||
// Word wrap makes text stay within box and shift with size
|
||||
wrapMode: Text.WordWrap
|
||||
text: description
|
||||
visible: description.length > 0
|
||||
}
|
||||
}
|
||||
Controls.Button {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
// Column spanning within grid layout (vertically in this case)
|
||||
Layout.columnSpan: 2
|
||||
text: i18n("Edit")
|
||||
//onClicked: to be done...
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fetches item from addEditSheet.qml and does action on signal
|
||||
AddEditSheet {
|
||||
id: addEditSheet
|
||||
onAdded: kountdownModel.append({
|
||||
"name": name,
|
||||
"description": description,
|
||||
"date": Date.parse(kdate)
|
||||
});
|
||||
onEdited: kountdownModel.set(index, {
|
||||
"name": name,
|
||||
"description": description,
|
||||
"date": Date.parse(kdate)
|
||||
});
|
||||
onRemoved: kountdownModel.remove(index, 1)
|
||||
}
|
||||
|
||||
// Overlay sheets appear over a part of the window
|
||||
Kirigami.OverlaySheet {
|
||||
id: addSheet
|
||||
header: Kirigami.Heading {
|
||||
text: i18nc("@title:window", "Add kountdown")
|
||||
}
|
||||
// Form layouts help align and structure a layout with several inputs
|
||||
Kirigami.FormLayout {
|
||||
// Textfields let you input text in a thin textbox
|
||||
Controls.TextField {
|
||||
id: nameField
|
||||
// Provides label attached to the textfield
|
||||
Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
|
||||
// Placeholder text is visible before you enter anything
|
||||
placeholderText: i18n("Event name (required)")
|
||||
// What to do after input is accepted (i.e. pressed enter)
|
||||
// In this case, it moves the focus to the next field
|
||||
onAccepted: descriptionField.forceActiveFocus()
|
||||
}
|
||||
Controls.TextField {
|
||||
id: descriptionField
|
||||
Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
|
||||
placeholderText: i18n("Optional")
|
||||
onAccepted: dateField.forceActiveFocus()
|
||||
}
|
||||
Controls.TextField {
|
||||
id: dateField
|
||||
Kirigami.FormData.label: i18nc("@label:textbox", "Date:")
|
||||
placeholderText: i18n("YYYY-MM-DD")
|
||||
inputMask: "0000-00-00"
|
||||
}
|
||||
Controls.Button {
|
||||
id: doneButton
|
||||
Layout.fillWidth: true
|
||||
text: i18nc("@action:button", "Done")
|
||||
// Button is only enabled if the user has entered something into the nameField
|
||||
enabled: nameField.text.length > 0
|
||||
onClicked: {
|
||||
// Add a listelement to the kountdownModel ListModel
|
||||
kountdownModel.append({
|
||||
name: nameField.text,
|
||||
description: descriptionField.text,
|
||||
date: Date.parse(dateField.text)
|
||||
});
|
||||
nameField.text = ""
|
||||
descriptionField.text = ""
|
||||
dateField.text = ""
|
||||
addSheet.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
// Function called by 'edit' button on card and by 'add'-Action
|
||||
function openPopulatedSheet(mode, index = -1, listName = "", listDesc = "", listDate = "") {
|
||||
addEditSheet.mode = mode
|
||||
addEditSheet.index = index;
|
||||
addEditSheet.name = listName
|
||||
addEditSheet.description = listDesc
|
||||
addEditSheet.kdate = listDate
|
||||
|
||||
addEditSheet.open()
|
||||
}
|
||||
|
||||
// Set the first page that will be loaded when the app opens
|
||||
|
|
@ -163,18 +67,17 @@ Kirigami.ApplicationWindow {
|
|||
id: addAction
|
||||
icon.name: "list-add"
|
||||
text: i18nc("@action:button", "Add kountdown")
|
||||
onTriggered: addSheet.open()
|
||||
onTriggered:openPopulatedSheet("add")
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
// List view for card elements
|
||||
Kirigami.CardsListView {
|
||||
id: cardsView
|
||||
// Model contains info to be displayed
|
||||
model: kountdownModel
|
||||
// Delegate is how the information will be presented in the ListView
|
||||
delegate: kountdownDelegate
|
||||
delegate: KountdownDelegate {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<RCC>
|
||||
<qresource prefix="/">
|
||||
<file alias="main.qml">contents/ui/main.qml</file>
|
||||
<file alias="AddEditSheet.qml">contents/ui/AddEditSheet.qml</file>
|
||||
<file alias="KountdownDelegate.qml">contents/ui/KountdownDelegate.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
Loading…
Reference in a new issue