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

Begin move to kde configuration

Browse source
This commit is contained in:
Florian RICHER 2025-06-27 13:46:00 +02:00
parent a068fe8afc
commit a6f818864a
11 changed files with 58 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src/contents/ui/AddEditSheet.qml
View file

@ -1,91 +0,0 @@
import QtQuick
import QtQuick.Controls as Controls
import QtQuick.Layouts
import org.kde.kirigami 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
View file

@ -1,54 +0,0 @@
import QtQuick
import QtQuick.Controls as Controls
import QtQuick.Layouts
import org.kde.kirigami 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))
}
}
}
}

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

@ -6,7 +6,7 @@ import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
id: root
title: i18nc("@title:window", "Hello World")
title: i18nc("@title:window", "My Application")
globalDrawer: Kirigami.GlobalDrawer {
isMenu: true
@ -20,51 +20,12 @@ Kirigami.ApplicationWindow {
]
}
ListModel {
id: kountdownModel
}
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)
}
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()
}
pageStack.initialPage: Kirigami.ScrollablePage {
title: i18nc("@title", "Kountdown")
title: i18nc("@title", "Main Page")
actions: [
Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered:openPopulatedSheet("add")
}
]
Kirigami.CardsListView {
id: cardsView
model: kountdownModel
delegate: KountdownDelegate {}
}
Item {}
}
}