qml: initial custom data directory support

Author: jarolrod

src/qml/components/StorageLocations.qml

@@ -5,6 +5,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import QtQuick.Dialogs 1.3
 import "../controls"
 
 ColumnLayout {
@@ -21,9 +22,23 @@ ColumnLayout {
         checked: true
     }
     OptionButton {
+        id: customDirOption
         Layout.fillWidth: true
         ButtonGroup.group: group
         text: qsTr("Custom")
         description: qsTr("Choose the directory and storage device.")
+        customDir: fileDialog.folder
+        onClicked: fileDialog.open()
     }
+
+    FileDialog {
+        id: fileDialog
+        title: qsTr("Please choose a directory")
+        selectFolder: true
+        folder: shortcuts.home
+        onAccepted: {
+            customDirOption.customDir = fileDilog.folder
+        }
+    }
+
 }

src/qml/controls/OptionButton.qml

@@ -9,6 +9,7 @@ import QtQuick.Layouts 1.15
 Button {
     property string description
     property bool recommended: false
+    property string customDir: ""
     id: button
     padding: 15
     checkable: true
@@ -64,6 +65,27 @@ Button {
                     text: qsTr("Recommended")
                 }
             }
+            Loader {
+                Layout.topMargin: 12
+                Layout.fillWidth: true
+                active: button.customDir.length > 0
+                visible: active
+                sourceComponent: Button {
+                    id: container
+                    background: Rectangle {
+                        color: Theme.color.neutral2
+                        radius: 5
+                    }
+                    font.family: "Inter"
+                    font.styleName: "Semi Bold"
+                    font.pixelSize: 13
+                    contentItem: Text {
+                        font: container.font
+                        color: Theme.color.neutral9
+                        text: button.customDir
+                    }
+                }
+            }
         }
         Item {
             height: parent.height