qml: UI only display datadir functionality

Author: D33r-Gee

src/qml/components/StorageLocations.qml

@@ -17,33 +17,52 @@ ColumnLayout {
     }
     spacing: 15
     OptionButton {
+        id: defaultDirOption
         Layout.fillWidth: true
         ButtonGroup.group: group
         text: qsTr("Default")
         description: qsTr("Your application directory.")
+        // customDir: optionsModel.getDefaultDataDirString // TODO: either delete or keep based on designer feedback
         recommended: true
         checked: true
+        onClicked: {
+            customDirOption.customDir = ""
+            optionsModel.customDataDir = false
+        }
     }
     OptionButton {
+        id: customDirOption
         Layout.fillWidth: true
         ButtonGroup.group: group
         text: qsTr("Custom")
         description: qsTr("Choose the directory and storage device.")
+        customDir: customDirOption.checked ? fileDialog.folder : ""
         onClicked: fileDialog.open()
+        onCheckedChanged: {
+            if (!customDirOption.checked) {
+                customDirOption.customDir = ""
+            }
+        }
     }
     FileDialog {
         id: fileDialog
         selectFolder: true
-        folder: optionsModel.getDefaultDataDirectory
+        folder: shortcuts.home
         onAccepted: {
             optionsModel.setCustomDataDirString(fileDialog.fileUrls[0].toString())
             var customDataDir = fileDialog.fileUrl.toString();
             if (customDataDir !== "") {
                 optionsModel.setCustomDataDirArgs(customDataDir);
+                customDirOption.customDir = optionsModel.getCustomDataDirString();
             }
         }
         onRejected: {
             console.log("Custom datadir selection canceled")
+            if (fileDialog.folder == shortcuts.home) {
+                defaultDirOption.checked = true
+            } else {
+                customDirOption.customDir = optionsModel.getCustomDataDirString()
+            }
         }
     }
 }

src/qml/components/StorageSettings.qml

@@ -58,4 +58,21 @@ ColumnLayout {
             loadedItem.forceActiveFocus()
         }
     }
+    Separator { Layout.fillWidth: true }
+    Setting {
+        id: customDataDirSetting
+        Layout.fillWidth: true
+        header: qsTr("Data Directory")
+        actionItem: ValueInput {
+            parentState: "DISABLED"
+            description: optionsModel.customDataDir ? optionsModel.getCustomDataDirString() : optionsModel.getDefaultDataDirString
+            filled: true
+            descriptionSize: 18
+            textColor: Theme.color.neutral5
+            validator: null
+            maximumLength: 100
+            width: 300
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+    }
 }

src/qml/controls/OptionButton.qml

@@ -11,6 +11,7 @@ Button {
     property string description
     property bool recommended: false
     property string image: ""
+    property string customDir: ""
     padding: 15
     checkable: true
     implicitWidth: 450
@@ -80,6 +81,28 @@ Button {
                     }
                 }
             }
+            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
+                        wrapMode: Text.WordWrap
+                    }
+                }
+            }
         }
         Item {
             height: parent.height