Add a close button for dialogs.

gpt4all-chat/CMakeLists.txt

@@ -105,6 +105,7 @@ qt_add_qml_module(chat
       qml/MySettingsStack.qml
       qml/MyButton.qml
       qml/MyComboBox.qml
+      qml/MyDialog.qml
       qml/MyDirectoryField.qml
       qml/MyTextField.qml
       qml/MyCheckBox.qml
@@ -114,6 +115,7 @@ qt_add_qml_module(chat
       icons/send_message.svg
       icons/stop_generating.svg
       icons/regenerate.svg
+      icons/close.svg
       icons/copy.svg
       icons/db.svg
       icons/settings.svg

gpt4all-chat/icons/close.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#7d7d8e" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
+<!--
+Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->

gpt4all-chat/qml/AboutDialog.qml

@@ -7,7 +7,7 @@ import download
 import network
 import llm
 
-Dialog {
+MyDialog {
     id: abpoutDialog
     anchors.centerIn: parent
     modal: false
@@ -102,12 +102,4 @@ Dialog {
             Accessible.description: qsTr("Contains embedded link to https://home.nomic.ai")
         }
     }
-
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
 }

gpt4all-chat/qml/CollectionsDialog.qml

@@ -8,24 +8,15 @@ import chatlistmodel
 import localdocs
 import llm
 
-Dialog {
+MyDialog {
     id: collectionsDialog
     modal: true
-    opacity: 0.9
     padding: 20
     width: 480
     height: 640
 
     property var currentChat: ChatListModel.currentChat
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     Label {
         id: listLabel
         anchors.top: parent.top

gpt4all-chat/qml/ModelDownloaderDialog.qml

@@ -11,20 +11,11 @@ import modellist
 import network
 import mysettings
 
-Dialog {
+MyDialog {
     id: modelDownloaderDialog
     modal: true
-    opacity: 0.9
     closePolicy: ModelList.installedModels.count === 0 ? Popup.NoAutoClose : (Popup.CloseOnEscape | Popup.CloseOnPressOutside)
-    padding: 20
-    bottomPadding: 30
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
+    padding: 10
 
     onOpened: {
         Network.sendModelDownloaderDialog();
@@ -38,7 +29,7 @@ Dialog {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.margins: 20
+        anchors.margins: 10
         spacing: 30
 
         Label {

gpt4all-chat/qml/MyDialog.qml

@@ -0,0 +1,33 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Dialogs
+import QtQuick.Layouts
+
+Dialog {
+    id: myDialog
+    background: Rectangle {
+        width: parent.width
+        height: parent.height
+        color: theme.backgroundDarkest
+        border.width: 1
+        border.color: theme.dialogBorder
+        radius: 10
+    }
+
+    MyToolButton {
+        x: 0 + myDialog.width - myDialog.padding - width - 15
+        y: 0 - myDialog.padding + 15
+        z: 300
+        visible: myDialog.closePolicy != Popup.NoAutoClose
+        width: 30
+        height: 30
+        padding: 0
+        source: "qrc:/gpt4all/icons/close.svg"
+        fillMode: Image.PreserveAspectFit
+        onClicked: {
+            myDialog.close();
+        }
+    }
+}

gpt4all-chat/qml/MyToolButton.qml

@@ -9,6 +9,7 @@ Button {
     padding: 10
     property bool toggled: false
     property alias source: image.source
+    property alias fillMode: image.fillMode
     contentItem: Text {
         text: myButton.text
         horizontalAlignment: Text.AlignHCenter

gpt4all-chat/qml/NetworkDialog.qml

@@ -8,7 +8,7 @@ import network
 import llm
 import mysettings
 
-Dialog {
+MyDialog {
     id: networkDialog
     anchors.centerIn: parent
     modal: true
@@ -94,14 +94,6 @@ NOTE: By turning on this feature, you will be sending your data to the GPT4All O
         }
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     footer: DialogButtonBox {
         id: dialogBox
         padding: 20

gpt4all-chat/qml/NewVersionDialog.qml

@@ -7,27 +7,18 @@ import download
 import network
 import llm
 
-Dialog {
+MyDialog {
     id: newVerionDialog
     anchors.centerIn: parent
     modal: true
-    opacity: 0.9
     width: contentItem.width
     height: contentItem.height
-    padding: 20
+    padding: 10
 
     Theme {
         id: theme
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     Item {
         id: contentItem
         width: childrenRect.width + 40

gpt4all-chat/qml/SettingsDialog.qml

@@ -11,19 +11,10 @@ import network
 import llm
 import mysettings
 
-Dialog {
+MyDialog {
     id: settingsDialog
     modal: true
     padding: 20
-    bottomPadding: 30
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     onOpened: {
         Network.sendSettingsDialog();
     }

gpt4all-chat/qml/StartupDialog.qml

@@ -8,14 +8,13 @@ import network
 import llm
 import mysettings
 
-Dialog {
+MyDialog {
     id: startupDialog
     anchors.centerIn: parent
     modal: true
-    opacity: 0.9
-    padding: 20
+    padding: 10
     width: 1024
-    height: column.height + 40
+    height: column.height + 20
     closePolicy: !optInStatisticsRadio.choiceMade || !optInNetworkRadio.choiceMade ? Popup.NoAutoClose : (Popup.CloseOnEscape | Popup.CloseOnPressOutside)
 
     Theme {
@@ -345,12 +344,4 @@ model release that uses your data!")
             }
         }
     }
-
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
 }

gpt4all-chat/qml/ThumbsDownDialog.qml

@@ -7,7 +7,7 @@ import download
 import network
 import llm
 
-Dialog {
+MyDialog {
     id: thumbsDownDialog
     modal: true
     opacity: 0.9
@@ -65,14 +65,6 @@ Dialog {
         }
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        color: theme.backgroundDarkest
-        border.width: 1
-        border.color: theme.dialogBorder
-        radius: 10
-    }
-
     footer: DialogButtonBox {
         padding: 20
         alignment: Qt.AlignRight