JustForFun/tutorial-kirigami2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Split into files from tutorial

Browse source
This commit is contained in:
Florian RICHER 2024-01-01 18:26:04 +01:00
parent 9117b7f341
commit 7eed6d9852
4 changed files with 172 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

147
src/contents/ui/main.qml
View file

@ -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 {}
}
}
}