dialogs/imagePickerDialog/ImagePickerDialog.qml

0001 // SPDX-License-Identifier: GPL-2.0-or-later
0002 // SPDX-FileCopyrightText: 2023 Louis Schul <schul9louis@gmail.com>
0003
0004 import QtQuick 2.15
0005 import QtQuick.Controls 2.3 as Controls
0006 import QtQuick.Layouts 1.15
0007 import Qt.labs.platform 1.1
0008
0009 import org.kde.kirigami 2.19 as Kirigami
0010 import org.kde.kirigamiaddons.formcard 1.0 as FormCard
0011
0012 import org.kde.Klever 1.0
0013
0014 import "qrc:/contents/ui/dialogs"
0015
0016
0017 Kirigami.Dialog {
0018     id: imagePickerDialog
0019
0020     readonly property Image imageObject: displayImage
0021     readonly property FormCard.FormCheckDelegate storeCheckbox: storeCheckbox
0022     readonly property bool imageLoaded: displayImage.visible
0023     readonly property bool storeImage: storeCheckbox.checked && !storedImageChoosen
0024
0025     property string noteImagesStoringPath
0026     property var paintClipRect
0027     property string path: ""
0028     property alias imageName: nameTextField.text
0029     property bool storedImageChoosen: false
0030     property bool paintedImageChoosen: false
0031     property bool storedImagesExist: !KleverUtility.isEmptyDir(noteImagesStoringPath)
0032
0033     title: i18nc("@title:dialog", "Image selector")
0034
0035     height: header.height + footer.height + topPadding + bottomPadding + mainItem.height
0036
0037     standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
0038
0039     onPathChanged: {
0040         displayImage.source = path
0041     }
0042     onClosed: {
0043         clearTmp()
0044         path = ""
0045         imageName = ""
0046         displayImage.height = undefined
0047     }
0048
0049     FilePickerDialog {
0050         id: filePickerDialog
0051
0052         caller: imagePickerDialog
0053     }
0054
0055     URLDialog {
0056         id: urlDialog
0057
0058         caller: imagePickerDialog
0059     }
0060
0061     // GridLayout was causing to much problem :/
0062     ColumnLayout {
0063         id: mainItem
0064
0065         property int iconSize: imageHolder.visible
0066             ? Kirigami.Units.iconSizes.small
0067             : Kirigami.Units.iconSizes.large
0068
0069         width: Kirigami.Units.iconSizes.huge * 4
0070         spacing: 0
0071
0072         RowLayout {
0073             spacing: 0
0074
0075             Layout.fillWidth: true
0076             Layout.fillHeight: true
0077
0078             ButtonDelegate {
0079                 id: internetButton
0080
0081                 text: i18nc("@label:button, As in 'image from the internet'", "Web image")
0082                 padding: Kirigami.Units.largeSpacing
0083
0084                 display: imageHolder.visible
0085                     ? Controls.AbstractButton.TextBesideIcon
0086                     : Controls.AbstractButton.TextUnderIcon
0087
0088                 icon {
0089                     name: "internet-amarok"
0090                     width: mainItem.iconSize
0091                     height: mainItem.iconSize
0092                 }
0093
0094                 Layout.preferredWidth: Kirigami.Units.iconSizes.huge * 2
0095                 Layout.preferredHeight: imageHolder.visible
0096                     ? Kirigami.Units.iconSizes.small * 3
0097                     : width
0098
0099                 onClicked: {
0100                     imagePickerDialog.paintClipRect = undefined
0101                     clearTmp()
0102                     storedImageChoosen = false
0103                     urlDialog.open()
0104                 }
0105             }
0106
0107             ButtonDelegate {
0108                 id: localButton
0109
0110                 text: i18nc("label:button, Image from the local file system", "Local image")
0111                 display: internetButton.display
0112
0113                 icon {
0114                     name: "document-open-folder"
0115                     width: mainItem.iconSize
0116                     height: mainItem.iconSize
0117                 }
0118
0119                 Layout.preferredWidth: Kirigami.Units.iconSizes.huge * 2
0120                 Layout.preferredHeight: internetButton.height
0121
0122                 onClicked: {
0123                     imagePickerDialog.paintClipRect = undefined
0124                     clearTmp()
0125                     storedImageChoosen = false
0126                     filePickerDialog.folder = StandardPaths.standardLocations(StandardPaths.HomeLocation)[0]
0127                     filePickerDialog.open()
0128                 }
0129             }
0130         }
0131
0132         RowLayout {
0133             spacing: 0
0134
0135             Layout.fillWidth: true
0136             Layout.fillHeight: true
0137
0138             ButtonDelegate {
0139                 id: paintingButton
0140
0141                 text: i18nc("@label:button", "Paint an image")
0142                 display: internetButton.display
0143
0144                 icon {
0145                     name: "draw-brush"
0146                     width: mainItem.iconSize
0147                     height: mainItem.iconSize
0148                 }
0149
0150                 Layout.preferredWidth: storageButton.visible ? Kirigami.Units.iconSizes.huge * 2 : Kirigami.Units.iconSizes.huge * 4
0151                 Layout.preferredHeight: internetButton.height
0152
0153                 onClicked: {
0154                     imagePickerDialog.paintClipRect = undefined
0155                     clearTmp()
0156                     imagePickerDialog.close()
0157                     applicationWindow().switchToPage('Painting')
0158                 }
0159             }
0160
0161             ButtonDelegate {
0162                 id: storageButton
0163
0164                 text: i18nc("@label:button, Collection of image stored inside the note folder", "Image collection")
0165                 display: internetButton.display
0166                 visible: imagePickerDialog.storedImagesExist
0167
0168                 icon {
0169                     name: "dblatex"
0170                     width: mainItem.iconSize
0171                     height: mainItem.iconSize
0172                 }
0173
0174                 Layout.preferredWidth: visible ? Kirigami.Units.iconSizes.huge * 2 : 0
0175                 Layout.preferredHeight: visible ? internetButton.height : 0
0176
0177                 onClicked: {
0178                     imagePickerDialog.paintClipRect = undefined
0179                     clearTmp()
0180                     storedImageChoosen = true
0181                     filePickerDialog.folder = "file://"+imagePickerDialog.noteImagesStoringPath
0182                     filePickerDialog.open()
0183                 }
0184             }
0185         }
0186
0187         Kirigami.Separator {
0188             visible: imageHolder.visible
0189             Layout.fillWidth: true
0190         }
0191
0192         Item {
0193             id: imageHolder
0194
0195             visible: imagePickerDialog.path !== ""
0196
0197             Layout.fillWidth: true
0198             Layout.preferredHeight: Kirigami.Units.iconSizes.huge * 3 + Kirigami.Units.largeSpacing
0199             Layout.margins: Kirigami.Units.smallSpacing
0200
0201             Image {
0202                 id: displayImage
0203
0204                 property int idealWidth
0205                 property int idealHeight
0206
0207                 anchors.centerIn: parent
0208
0209                 source: path
0210                 visible: displayImage.status == Image.Ready
0211                 fillMode: Image.PreserveAspectFit
0212                 sourceClipRect: imagePickerDialog.paintClipRect
0213
0214                 onStatusChanged: if (status == Image.Ready){
0215                     // If the image is placed inside the note folder, we want it to be max 1024x1024
0216                     if (Math.max(implicitWidth, implicitHeight, 1024) == 1024) {
0217                         idealWidth = implicitWidth
0218                         idealHeight = implicitHeight
0219                     } else {
0220                         let divider = (implicitHeight > implicitWidth)
0221                             ? implicitHeight / 1024
0222                             : implicitWidth / 1024
0223
0224                         idealWidth = Math.round(implicitWidth / divider)
0225                         idealHeight = Math.round(implicitHeight / divider)
0226                     }
0227                     height = Kirigami.Units.iconSizes.huge * 3
0228                 }
0229             }
0230
0231             Text {
0232                 padding: Kirigami.Units.largeSpacing
0233                 anchors.fill: parent
0234                 anchors.centerIn: parent
0235
0236                 text: i18n("It appears that the image you selected does not exist or is not supported.")
0237                 wrapMode: Text.WordWrap
0238                 visible: !displayImage.visible
0239
0240                 Kirigami.Theme.colorSet: Kirigami.Theme.View
0241                 Kirigami.Theme.inherit: false
0242
0243                 color: Kirigami.Theme.textColor
0244             }
0245         }
0246
0247         Kirigami.Separator {
0248             visible: imageHolder.visible
0249             Layout.fillWidth: true
0250         }
0251
0252         FormCard.FormTextFieldDelegate {
0253             id: nameTextField
0254
0255             label: i18nc("@label:textbox, text associated to the selected image", "Image text: ")
0256             maximumLength: 40
0257
0258             Layout.fillWidth: true
0259         }
0260
0261         FormCard.FormCheckDelegate {
0262             id: storeCheckbox
0263
0264             text: i18nc("@label:checkbox", "Place this image inside the note folder")
0265
0266             Layout.fillWidth: true
0267         }
0268     }
0269
0270     function clearTmp() {
0271         if (paintedImageChoosen) {
0272             paintedImageChoosen = false
0273             storeCheckbox.enabled = true
0274             storeCheckbox.checked = false
0275         }
0276     }
0277 }