Extract components to different files
This commit is contained in:
parent
92359188c0
commit
0d0f9d9bfd
5 changed files with 135 additions and 107 deletions
|
|
@ -25,6 +25,9 @@ target_link_libraries(kirigami-testing
|
||||||
KF6::I18n
|
KF6::I18n
|
||||||
KF6::CoreAddons
|
KF6::CoreAddons
|
||||||
KF6::IconThemes
|
KF6::IconThemes
|
||||||
|
kirigami-testing-components
|
||||||
)
|
)
|
||||||
|
|
||||||
install(TARGETS kirigami-testing ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})
|
install(TARGETS kirigami-testing ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})
|
||||||
|
|
||||||
|
add_subdirectory(components)
|
||||||
|
|
|
||||||
110
src/Main.qml
110
src/Main.qml
|
|
@ -3,6 +3,7 @@ import QtQuick
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Controls as Controls
|
import QtQuick.Controls as Controls
|
||||||
import org.kde.kirigami as Kirigami
|
import org.kde.kirigami as Kirigami
|
||||||
|
import xyz.toast003.kirigamiTesting.components
|
||||||
|
|
||||||
// Provides basic features needed for all kirigami applications
|
// Provides basic features needed for all kirigami applications
|
||||||
Kirigami.ApplicationWindow {
|
Kirigami.ApplicationWindow {
|
||||||
|
|
@ -44,7 +45,7 @@ Kirigami.ApplicationWindow {
|
||||||
Kirigami.CardsListView {
|
Kirigami.CardsListView {
|
||||||
id: cardsView
|
id: cardsView
|
||||||
model: countdownModel
|
model: countdownModel
|
||||||
delegate: countdownDelegate
|
delegate: CountdownDelegate {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -52,112 +53,7 @@ Kirigami.ApplicationWindow {
|
||||||
id: countdownModel
|
id: countdownModel
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
AddDialog {
|
||||||
id: countdownDelegate
|
|
||||||
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 {
|
|
||||||
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
|
|
||||||
Layout.columnSpan: 2
|
|
||||||
text: i18n("Edit")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Kirigami.Dialog {
|
|
||||||
id: addDialog
|
id: addDialog
|
||||||
title: i18nc("@title:window", "Add countdown")
|
|
||||||
standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
|
|
||||||
padding: Kirigami.Units.largeSpacing
|
|
||||||
preferredWidth: Kirigami.Units.gridUnit * 20
|
|
||||||
|
|
||||||
Kirigami.FormLayout {
|
|
||||||
Controls.TextField {
|
|
||||||
id: nameField
|
|
||||||
Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
|
|
||||||
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", "ISO Date*:")
|
|
||||||
inputMask: "D999-99-99"
|
|
||||||
onAccepted: addDialog.onAccepted()
|
|
||||||
}
|
|
||||||
Controls.Label {
|
|
||||||
text: "* = required fields"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Component.onCompleted: {
|
|
||||||
const button = standardButton(Kirigami.Dialog.Ok);
|
|
||||||
button.enabled = Qt.binding(() => requiredFieldsFilled());
|
|
||||||
}
|
|
||||||
|
|
||||||
function requiredFieldsFilled() {
|
|
||||||
return (nameField.text !== "" && dateField.acceptableInput);
|
|
||||||
}
|
|
||||||
|
|
||||||
function appendDataToModel() {
|
|
||||||
countdownModel.append({
|
|
||||||
name: nameField.text,
|
|
||||||
description: descriptionField.text,
|
|
||||||
date: new Date(dateField.text)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function clearFieldsAndClose() {
|
|
||||||
nameField.text = "";
|
|
||||||
descriptionField.text = "";
|
|
||||||
dateField.text = "";
|
|
||||||
addDialog.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
onAccepted: {
|
|
||||||
if (!addDialog.requiredFieldsFilled())
|
|
||||||
return;
|
|
||||||
appendDataToModel();
|
|
||||||
clearFieldsAndClose();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
64
src/components/AddDialog.qml
Normal file
64
src/components/AddDialog.qml
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls as Controls
|
||||||
|
import org.kde.kirigami as Kirigami
|
||||||
|
|
||||||
|
Kirigami.Dialog {
|
||||||
|
id: addDialog
|
||||||
|
title: i18nc("@title:window", "Add countdown")
|
||||||
|
standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
|
||||||
|
padding: Kirigami.Units.largeSpacing
|
||||||
|
preferredWidth: Kirigami.Units.gridUnit * 20
|
||||||
|
|
||||||
|
Kirigami.FormLayout {
|
||||||
|
Controls.TextField {
|
||||||
|
id: nameField
|
||||||
|
Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
|
||||||
|
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", "ISO Date*:")
|
||||||
|
inputMask: "D999-99-99"
|
||||||
|
onAccepted: addDialog.onAccepted()
|
||||||
|
}
|
||||||
|
Controls.Label {
|
||||||
|
text: "* = required fields"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
const button = standardButton(Kirigami.Dialog.Ok);
|
||||||
|
button.enabled = Qt.binding(() => requiredFieldsFilled());
|
||||||
|
}
|
||||||
|
|
||||||
|
function requiredFieldsFilled() {
|
||||||
|
return (nameField.text !== "" && dateField.acceptableInput);
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendDataToModel() {
|
||||||
|
countdownModel.append({
|
||||||
|
name: nameField.text,
|
||||||
|
description: descriptionField.text,
|
||||||
|
date: new Date(dateField.text)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function clearFieldsAndClose() {
|
||||||
|
nameField.text = "";
|
||||||
|
descriptionField.text = "";
|
||||||
|
dateField.text = "";
|
||||||
|
addDialog.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
onAccepted: {
|
||||||
|
if (!addDialog.requiredFieldsFilled())
|
||||||
|
return;
|
||||||
|
appendDataToModel();
|
||||||
|
clearFieldsAndClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
16
src/components/CMakeLists.txt
Normal file
16
src/components/CMakeLists.txt
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
add_library(kirigami-testing-components)
|
||||||
|
|
||||||
|
ecm_add_qml_module(kirigami-testing-components
|
||||||
|
URI "xyz.toast003.kirigamiTesting.components"
|
||||||
|
GENERATE_PLUGIN_SOURCE
|
||||||
|
)
|
||||||
|
|
||||||
|
ecm_target_qml_sources(kirigami-testing-components
|
||||||
|
SOURCES
|
||||||
|
AddDialog.qml
|
||||||
|
CountdownDelegate.qml
|
||||||
|
)
|
||||||
|
|
||||||
|
ecm_finalize_qml_module(kirigami-testing-components)
|
||||||
|
|
||||||
|
install(TARGETS kirigami-testing-components ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})
|
||||||
49
src/components/CountdownDelegate.qml
Normal file
49
src/components/CountdownDelegate.qml
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import QtQuick.Controls as Controls
|
||||||
|
import org.kde.kirigami as Kirigami
|
||||||
|
|
||||||
|
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 {
|
||||||
|
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
|
||||||
|
Layout.columnSpan: 2
|
||||||
|
text: i18n("Edit")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue