qml: UI only display datadir functionality

Author: D33r-Gee

src/qml/components/StorageLocations.qml

@@ -17,33 +17,49 @@ ColumnLayout {
     }
     spacing: 15
     OptionButton {
+        id: defaultDirOption
         Layout.fillWidth: true
         ButtonGroup.group: group
         text: qsTr("Default")
         description: qsTr("Your application directory.")
-        recommended: true
-        checked: true
+        customDir: optionsModel.getDefaultDataDirString
+        checked: !optionsModel.customDataDir
+        onClicked: {
+            optionsModel.customDataDir = false
+            defaultDirOption.checked = true
+        }
     }
     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 : ""
+        checked: optionsModel.customDataDir
         onClicked: fileDialog.open()
     }
     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")
+            defaultDirOption.checked = true
+            optionsModel.customDataDir = false
+            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")
+    }
+    ValueInput {
+        Layout.fillWidth: true
+        parentState: "DIRECTORY"
+        description: optionsModel.customDataDir ? optionsModel.getCustomDataDirString() : optionsModel.getDefaultDataDirString
+        filled: true
+        descriptionSize: 15
+        validator: null
+        maximumLength: 100
+        horizontalAlignment: Text.AlignLeft
+        wrapMode: Text.WordWrap
+    }
 }

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
@@ -24,6 +25,12 @@ Button {
             borderRadius: 14
         }
     }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: button.clicked()
+    }
+
     contentItem: RowLayout {
         spacing: 3
         Loader {
@@ -80,6 +87,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

src/qml/controls/ValueInput.qml

@@ -36,6 +36,14 @@ TextInput {
                 enabled: false
                 textColor: Theme.color.neutral4
             }
+        },
+        State {
+            name: "DIRECTORY"
+            PropertyChanges {
+                target: root
+                enabled: false
+                textColor: Theme.color.neutral7
+            }
         }
     ]