Warning, /utilities/daykountdown/src/contents/ui/AddEditSheet.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 * SPDX-FileCopyrightText: (C) 2021 Claudio Cambra <claudio.cambra@gmail.com>
0003 *
0004 * SPDX-LicenseRef: GPL-3.0-or-later
0005 */
0006
0007 // Includes relevant modules used by the QML
0008 import QtQuick 2.6
0009 import QtQuick.Controls 2.3 as Controls
0010 import QtQuick.Layouts 1.2
0011 import QtQuick.Dialogs 1.3
0012 import org.kde.kirigami 2.13 as Kirigami
0013 import org.kde.plasma.calendar 2.0 as PlasmaCalendar
0014 import org.kde.daykountdown.private 1.0
0015
0016 // Overlay sheets appear over a part of the window
0017 Kirigami.OverlaySheet {
0018 id: addEditSheet
0019
0020 // Sheet mode
0021 property string mode: "add"
0022
0023 property int index: -1
0024 property string name: ""
0025 property string description: ""
0026 property date kdate: nowDate
0027 property color colour: palette.text;
0028
0029 property alias datePickerComponent: datePicker
0030
0031 // Signals can be read an certain actions performed when these happen
0032 signal added (string name, string description, var kdate)
0033 signal edited(int index, string name, string description, var kdate)
0034 signal removed(int index)
0035
0036 onKdateChanged: {
0037 datePicker.selectedDate = kdate
0038 datePicker.clickedDate = kdate
0039 }
0040
0041 header: Kirigami.Heading {
0042 // i18nc is useful for adding context for translators
0043 text: mode === "add" ? i18nc("@title:window", "Add kountdown") :
0044 i18nc("@title:window", "Edit kountdown")
0045 }
0046 // Form layouts help align and structure a layout with several inputs
0047 Kirigami.FormLayout {
0048 id: formLayout
0049 // Textfields let you input text in a thin textbox
0050 Controls.TextField {
0051 id: nameField
0052 // Provides label attached to the textfield
0053 Kirigami.FormData.label: i18nc("@label:textbox", "Name:")
0054 // Placeholder text is visible before you enter anything
0055 placeholderText: i18n("Event name (required)")
0056 // What to do after input is accepted (i.e. pressed enter)
0057 // In this case, it moves the focus to the next field
0058 text: name
0059 onAccepted: descriptionField.forceActiveFocus()
0060 }
0061 Controls.TextField {
0062 id: descriptionField
0063 Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
0064 placeholderText: i18n("Optional")
0065 text: description
0066 onAccepted: datePicker.forceActiveFocus()
0067 }
0068 // Advanced colourpicker widget
0069 ColorDialog {
0070 id: colorDialog
0071 title: i18n("Kountdown Colour")
0072 onAccepted: {
0073 colour = colorDialog.color;
0074 }
0075 }
0076 // Horizontally display kountdown colour buttons
0077 RowLayout {
0078 Layout.fillWidth: true
0079 Kirigami.FormData.label: i18n("Colour:")
0080 Controls.RoundButton {
0081 contentItem: Text {
0082 text: "\u2B24"
0083 color: "crimson"
0084 horizontalAlignment: Text.AlignHCenter
0085 verticalAlignment: Text.AlignVCenter
0086 }
0087 onClicked: colour = "crimson"
0088 }
0089 Controls.RoundButton {
0090 contentItem: Text {
0091 text: "\u2B24"
0092 color: "coral"
0093 horizontalAlignment: Text.AlignHCenter
0094 verticalAlignment: Text.AlignVCenter
0095 }
0096 onClicked: colour = "coral"
0097 }
0098 Controls.RoundButton {
0099 contentItem: Text {
0100 text: "\u2B24"
0101 color: "goldenrod"
0102 horizontalAlignment: Text.AlignHCenter
0103 verticalAlignment: Text.AlignVCenter
0104 }
0105 onClicked: colour = "goldenrod"
0106 }
0107 Controls.RoundButton {
0108 contentItem: Text {
0109 text: "\u2B24"
0110 color: "lightseagreen"
0111 horizontalAlignment: Text.AlignHCenter
0112 verticalAlignment: Text.AlignVCenter
0113 }
0114 onClicked: colour = "lightseagreen"
0115 }
0116 Controls.RoundButton {
0117 contentItem: Text {
0118 text: "\u2B24"
0119 color: "deepskyblue"
0120 horizontalAlignment: Text.AlignHCenter
0121 verticalAlignment: Text.AlignVCenter
0122 }
0123 onClicked: colour = "deepskyblue"
0124 }
0125 Controls.RoundButton {
0126 contentItem: Text {
0127 text: "\u2B24"
0128 color: "hotpink"
0129 horizontalAlignment: Text.AlignHCenter
0130 verticalAlignment: Text.AlignVCenter
0131 }
0132 onClicked: colour = "hotpink"
0133 }
0134 Controls.Button {
0135 id: openColourDialog
0136 onClicked: colorDialog.open()
0137 text: "More"
0138 Layout.fillWidth: true
0139 }
0140 }
0141 Rectangle {
0142 color: colour
0143 Layout.fillWidth: true
0144 height: 20
0145 }
0146 Kirigami.Separator {
0147 // Stops the rectangle being eaten into by the PlasmaCalendar
0148 visible: formLayout.wideMode
0149 }
0150 // This singleton is bringing in a component defined in DatePicker.qml
0151 ColumnLayout {
0152 Layout.fillWidth: true
0153 height: Kirigami.Units.gridUnit * 16
0154
0155 DatePicker {
0156 id: datePicker
0157 anchors.fill: parent
0158 }
0159 }
0160 // This is a button.
0161 Controls.Button {
0162 id: deleteButton
0163 Layout.fillWidth: true
0164 text: i18nc("@action:button", "Delete")
0165 visible: mode === "edit"
0166 onClicked: {
0167 addEditSheet.removed(index)
0168 close();
0169 }
0170 }
0171 Controls.Button {
0172 id: doneButton
0173 Layout.fillWidth: true
0174 text: i18nc("@action:button", "Done")
0175 // Button is only enabled if the user has entered something into the nameField
0176 enabled: nameField.text.length > 0
0177 onClicked: {
0178 // Add a listelement to the kountdownModel ListModel
0179 if(mode === "add") {
0180 addEditSheet.added(
0181 nameField.text,
0182 descriptionField.text,
0183 datePicker.clickedDate,
0184 colour
0185 );
0186 }
0187 else {
0188 addEditSheet.edited(
0189 index,
0190 nameField.text,
0191 descriptionField.text,
0192 datePicker.clickedDate,
0193 colour
0194 );
0195 }
0196 close();
0197 }
0198 }
0199 }
0200 }