From db528ef1b015c104b64e50c4393d8c3c85af06bd Mon Sep 17 00:00:00 2001 From: Adam Treat Date: Thu, 6 Jul 2023 10:53:43 -0400 Subject: [PATCH] Add a close button for dialogs. --- gpt4all-chat/CMakeLists.txt | 2 ++ gpt4all-chat/icons/close.svg | 5 ++++ gpt4all-chat/qml/AboutDialog.qml | 10 +------ gpt4all-chat/qml/CollectionsDialog.qml | 11 +------- gpt4all-chat/qml/ModelDownloaderDialog.qml | 15 ++-------- gpt4all-chat/qml/MyDialog.qml | 33 ++++++++++++++++++++++ gpt4all-chat/qml/MyToolButton.qml | 1 + gpt4all-chat/qml/NetworkDialog.qml | 10 +------ gpt4all-chat/qml/NewVersionDialog.qml | 13 ++------- gpt4all-chat/qml/SettingsDialog.qml | 11 +------- gpt4all-chat/qml/StartupDialog.qml | 15 ++-------- gpt4all-chat/qml/ThumbsDownDialog.qml | 10 +------ 12 files changed, 54 insertions(+), 82 deletions(-) create mode 100644 gpt4all-chat/icons/close.svg create mode 100644 gpt4all-chat/qml/MyDialog.qml diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index 84480739..a6bdfca2 100644 --- a/gpt4all-chat/CMakeLists.txt +++ b/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 diff --git a/gpt4all-chat/icons/close.svg b/gpt4all-chat/icons/close.svg new file mode 100644 index 00000000..4074cd97 --- /dev/null +++ b/gpt4all-chat/icons/close.svg @@ -0,0 +1,5 @@ + + diff --git a/gpt4all-chat/qml/AboutDialog.qml b/gpt4all-chat/qml/AboutDialog.qml index fe6455bf..a4552509 100644 --- a/gpt4all-chat/qml/AboutDialog.qml +++ b/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 - } } diff --git a/gpt4all-chat/qml/CollectionsDialog.qml b/gpt4all-chat/qml/CollectionsDialog.qml index fb724737..76001254 100644 --- a/gpt4all-chat/qml/CollectionsDialog.qml +++ b/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 diff --git a/gpt4all-chat/qml/ModelDownloaderDialog.qml b/gpt4all-chat/qml/ModelDownloaderDialog.qml index cd7d7484..6874aac8 100644 --- a/gpt4all-chat/qml/ModelDownloaderDialog.qml +++ b/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 { diff --git a/gpt4all-chat/qml/MyDialog.qml b/gpt4all-chat/qml/MyDialog.qml new file mode 100644 index 00000000..da39c821 --- /dev/null +++ b/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(); + } + } +} diff --git a/gpt4all-chat/qml/MyToolButton.qml b/gpt4all-chat/qml/MyToolButton.qml index 2699efb5..12ddd099 100644 --- a/gpt4all-chat/qml/MyToolButton.qml +++ b/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 diff --git a/gpt4all-chat/qml/NetworkDialog.qml b/gpt4all-chat/qml/NetworkDialog.qml index 04340a22..2eeb6d1f 100644 --- a/gpt4all-chat/qml/NetworkDialog.qml +++ b/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 diff --git a/gpt4all-chat/qml/NewVersionDialog.qml b/gpt4all-chat/qml/NewVersionDialog.qml index 68175582..ebfdeec9 100644 --- a/gpt4all-chat/qml/NewVersionDialog.qml +++ b/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 diff --git a/gpt4all-chat/qml/SettingsDialog.qml b/gpt4all-chat/qml/SettingsDialog.qml index 491985e8..e0c3d189 100644 --- a/gpt4all-chat/qml/SettingsDialog.qml +++ b/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(); } diff --git a/gpt4all-chat/qml/StartupDialog.qml b/gpt4all-chat/qml/StartupDialog.qml index 9e97ea8b..bfe725ab 100644 --- a/gpt4all-chat/qml/StartupDialog.qml +++ b/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 - } } diff --git a/gpt4all-chat/qml/ThumbsDownDialog.qml b/gpt4all-chat/qml/ThumbsDownDialog.qml index 21c66231..ea04d980 100644 --- a/gpt4all-chat/qml/ThumbsDownDialog.qml +++ b/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