diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt index ff599cd..ba15ea0 100644 --- a/src/CMakeLists.txt +++ b/src/CMakeLists.txt @@ -25,6 +25,9 @@ target_link_libraries(kirigami-testing KF6::I18n KF6::CoreAddons KF6::IconThemes + kirigami-testing-components ) install(TARGETS kirigami-testing ${KDE_INSTALL_TARGETS_DEFAULT_ARGS}) + +add_subdirectory(components) diff --git a/src/Main.qml b/src/Main.qml index 07fa36d..ffd9b14 100644 --- a/src/Main.qml +++ b/src/Main.qml @@ -3,91 +3,57 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami +import xyz.toast003.kirigamiTesting.components // Provides basic features needed for all kirigami applications Kirigami.ApplicationWindow { // Unique identifier to reference this object id: root - width: 400 - height: 300 + width: 600 + height: 400 // Window title // i18nc() makes a string translatable // and provides additional context for the translators title: i18nc("@title:window", "Day countdown") + globalDrawer: Kirigami.GlobalDrawer { + isMenu: true + actions: [ + Kirigami.Action { + text: i18n("Quit") + icon.name: "application-exit-symbolic" + shortcut: StandardKey.Quit + onTriggered: Qt.quit() + } + ] + } + // Set the first page that will be loaded when the app opens // This can also be set to an id of a Kirigami.Page pageStack.initialPage: Kirigami.ScrollablePage { title: i18nc("@title", "Countdown") + actions: [ + Kirigami.Action { + id: addAction + icon.name: "list-add-symbolic" + text: i18nc("@action:button", "Add countdown") + onTriggered: addDialog.open() + } + ] Kirigami.CardsListView { id: cardsView model: countdownModel - delegate: countdownDelegate + delegate: CountdownDelegate {} } } ListModel { id: countdownModel - - ListElement { - name: "Japan trip!" - description: ":D" - date: 131 - } - ListElement { - name: "My birthday!" - description: "Pls give money" - date: 61 - } } - Component { - 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 { - Layout.fillWidth: true - level: 1 - text: date - } - ColumnLayout { - Kirigami.Heading { - Layout.fillWidth: true - 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") - } - } - } - } + AddDialog { + id: addDialog } } diff --git a/src/components/AddDialog.qml b/src/components/AddDialog.qml new file mode 100644 index 0000000..b730bfa --- /dev/null +++ b/src/components/AddDialog.qml @@ -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(); + } +} diff --git a/src/components/CMakeLists.txt b/src/components/CMakeLists.txt new file mode 100644 index 0000000..61c0bc7 --- /dev/null +++ b/src/components/CMakeLists.txt @@ -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}) diff --git a/src/components/CountdownDelegate.qml b/src/components/CountdownDelegate.qml new file mode 100644 index 0000000..2084d22 --- /dev/null +++ b/src/components/CountdownDelegate.qml @@ -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") + } + } + } +} diff --git a/src/main.cpp b/src/main.cpp index 570244c..ba49d54 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -15,7 +15,7 @@ int main(int argc, char *argv[]) QApplication::setOrganizationName(QStringLiteral("Toast")); QApplication::setOrganizationDomain(QStringLiteral("toast003.xyz")); QApplication::setApplicationName(QStringLiteral("Kirigami Testing")); - QApplication::setDesktopFileName(QStringLiteral("xyz.toast003.kirigami-testing.desktop")); + QApplication::setDesktopFileName(QStringLiteral("xyz.toast003.kirigami-testing")); QApplication::setStyle(QStringLiteral("breeze")); if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) {