From cae757aacd3995544e9430eb0a596d060f910453 Mon Sep 17 00:00:00 2001 From: Adam Treat Date: Wed, 31 May 2023 21:07:14 -0400 Subject: [PATCH] Make all the toolbuttons highlight on hover. --- gpt4all-chat/CMakeLists.txt | 1 + gpt4all-chat/main.qml | 127 ++++++------------------------ gpt4all-chat/qml/ChatDrawer.qml | 18 +---- gpt4all-chat/qml/MyToolButton.qml | 44 +++++++++++ 4 files changed, 72 insertions(+), 118 deletions(-) create mode 100644 gpt4all-chat/qml/MyToolButton.qml diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index 1a283bc9..2071cfd8 100644 --- a/gpt4all-chat/CMakeLists.txt +++ b/gpt4all-chat/CMakeLists.txt @@ -96,6 +96,7 @@ qt_add_qml_module(chat qml/MyTextField.qml qml/MyCheckBox.qml qml/MyBusyIndicator.qml + qml/MyToolButton.qml RESOURCES icons/send_message.svg icons/stop_generating.svg diff --git a/gpt4all-chat/main.qml b/gpt4all-chat/main.qml index 7191abea..78a9183a 100644 --- a/gpt4all-chat/main.qml +++ b/gpt4all-chat/main.qml @@ -209,7 +209,7 @@ Window { Rectangle { id: bar1 - color: theme.backgroundLightest + color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest width: parent.width height: 6 radius: 2 @@ -219,7 +219,7 @@ Window { Rectangle { id: bar2 anchors.centerIn: parent - color: theme.backgroundLightest + color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest width: parent.width height: 6 radius: 2 @@ -229,7 +229,7 @@ Window { Rectangle { id: bar3 anchors.bottom: parent.bottom - color: theme.backgroundLightest + color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest width: parent.width height: 6 radius: 2 @@ -253,7 +253,7 @@ Window { } } - Button { + MyToolButton { id: networkButton anchors.right: parent.right anchors.top: parent.top @@ -263,29 +263,12 @@ Window { height: 40 z: 200 padding: 15 - - Accessible.role: Accessible.Button + checkable: true + checked: Network.isActive + source: "qrc:/gpt4all/icons/network.svg" Accessible.name: qsTr("Network button") Accessible.description: qsTr("Reveals a dialogue where you can opt-in for sharing data over network") - background: Item { - anchors.fill: parent - Rectangle { - anchors.fill: parent - color: "transparent" - visible: Network.isActive - border.color: theme.backgroundLightest - border.width: 1 - radius: 10 - } - Image { - anchors.centerIn: parent - width: 30 - height: 30 - source: "qrc:/gpt4all/icons/network.svg" - } - } - onClicked: { if (Network.isActive) { Network.isActive = false @@ -307,7 +290,7 @@ Window { anchors.centerIn: parent } - Button { + MyToolButton { id: collectionsButton anchors.right: networkButton.left anchors.top: parent.top @@ -317,27 +300,9 @@ Window { height: 40 z: 200 padding: 15 - - background: Item { - anchors.fill: parent - Rectangle { - anchors.fill: parent - color: "transparent" - visible: currentChat.collectionList.length - border.color: theme.backgroundLightest - border.width: 1 - radius: 10 - } - Image { - anchors.centerIn: parent - mipmap: true - width: 25 - height: 25 - source: "qrc:/gpt4all/icons/db.svg" - } - } - - Accessible.role: Accessible.Button + checkable: true + checked: currentChat.collectionList.length + source: "qrc:/gpt4all/icons/db.svg" Accessible.name: qsTr("Add collections of documents to the chat") Accessible.description: qsTr("Provides a button to add collections of documents to the chat") @@ -346,7 +311,7 @@ Window { } } - Button { + MyToolButton { id: settingsButton anchors.right: collectionsButton.left anchors.top: parent.top @@ -356,18 +321,7 @@ Window { height: 40 z: 200 padding: 15 - - background: Item { - anchors.fill: parent - Image { - anchors.centerIn: parent - width: 30 - height: 30 - source: "qrc:/gpt4all/icons/settings.svg" - } - } - - Accessible.role: Accessible.Button + source: "qrc:/gpt4all/icons/settings.svg" Accessible.name: qsTr("Settings button") Accessible.description: qsTr("Reveals a dialogue where you can change various settings") @@ -406,7 +360,7 @@ Window { } } - Button { + MyToolButton { id: copyButton anchors.right: settingsButton.left anchors.top: parent.top @@ -416,21 +370,10 @@ Window { height: 40 z: 200 padding: 15 - - Accessible.role: Accessible.Button + source: "qrc:/gpt4all/icons/copy.svg" Accessible.name: qsTr("Copy button") Accessible.description: qsTr("Copy the conversation to the clipboard") - background: Item { - anchors.fill: parent - Image { - anchors.centerIn: parent - width: 30 - height: 30 - source: "qrc:/gpt4all/icons/copy.svg" - } - } - TextEdit{ id: copyEdit visible: false @@ -482,7 +425,7 @@ Window { return str + "]}" } - Button { + MyToolButton { id: resetContextButton anchors.right: copyButton.left anchors.top: parent.top @@ -492,21 +435,11 @@ Window { height: 40 z: 200 padding: 15 + source: "qrc:/gpt4all/icons/regenerate.svg" - Accessible.role: Accessible.Button Accessible.name: text Accessible.description: qsTr("Reset the context which erases current conversation") - background: Item { - anchors.fill: parent - Image { - anchors.centerIn: parent - width: 30 - height: 30 - source: "qrc:/gpt4all/icons/regenerate.svg" - } - } - onClicked: { Network.sendResetContext(chatModel.count) currentChat.reset(); @@ -712,16 +645,12 @@ Window { Item { width: childrenRect.width height: childrenRect.height - Button { + MyToolButton { id: thumbsUp width: 30 height: 30 opacity: thumbsUpState || thumbsUpState == thumbsDownState ? 1.0 : 0.2 - background: Image { - anchors.fill: parent - source: "qrc:/gpt4all/icons/thumbs_up.svg" - } - Accessible.role: Accessible.Button + source: "qrc:/gpt4all/icons/thumbs_up.svg" Accessible.name: qsTr("Thumbs up") Accessible.description: qsTr("Gives a thumbs up to the response") onClicked: { @@ -735,7 +664,7 @@ Window { } } - Button { + MyToolButton { id: thumbsDown anchors.top: thumbsUp.top anchors.topMargin: 10 @@ -753,11 +682,7 @@ Window { x: thumbsDown.width } ] - background: Image { - anchors.fill: parent - source: "qrc:/gpt4all/icons/thumbs_down.svg" - } - Accessible.role: Accessible.Button + source: "qrc:/gpt4all/icons/thumbs_down.svg" Accessible.name: qsTr("Thumbs down") Accessible.description: qsTr("Opens thumbs down dialog") onClicked: { @@ -919,20 +844,14 @@ Window { } } - Button { + MyToolButton { anchors.right: textInputView.right anchors.verticalCenter: textInputView.verticalCenter anchors.rightMargin: 15 width: 30 height: 30 visible: !currentChat.isServer - - background: Image { - anchors.centerIn: parent - source: "qrc:/gpt4all/icons/send_message.svg" - } - - Accessible.role: Accessible.Button + source: "qrc:/gpt4all/icons/send_message.svg" Accessible.name: qsTr("Send the message button") Accessible.description: qsTr("Sends the message/prompt contained in textfield to the model") diff --git a/gpt4all-chat/qml/ChatDrawer.qml b/gpt4all-chat/qml/ChatDrawer.qml index b6a56fb6..7249c6cc 100644 --- a/gpt4all-chat/qml/ChatDrawer.qml +++ b/gpt4all-chat/qml/ChatDrawer.qml @@ -141,41 +141,31 @@ Drawer { anchors.right: chatRectangle.right anchors.rightMargin: 10 spacing: 10 - Button { + MyToolButton { id: editButton width: 30 height: 30 visible: isCurrent && !isServer opacity: trashQuestionDisplayed ? 0.5 : 1.0 - background: Image { - width: 30 - height: 30 - source: "qrc:/gpt4all/icons/edit.svg" - } + source: "qrc:/gpt4all/icons/edit.svg" onClicked: { chatName.focus = true chatName.readOnly = false chatName.selectByMouse = true } - Accessible.role: Accessible.Button Accessible.name: qsTr("Edit the chat name") Accessible.description: qsTr("Provides a button to edit the chat name") } - Button { + MyToolButton { id: trashButton width: 30 height: 30 visible: isCurrent && !isServer - background: Image { - width: 30 - height: 30 - source: "qrc:/gpt4all/icons/trash.svg" - } + source: "qrc:/gpt4all/icons/trash.svg" onClicked: { trashQuestionDisplayed = true timer.start() } - Accessible.role: Accessible.Button Accessible.name: qsTr("Delete of the chat") Accessible.description: qsTr("Provides a button to delete the chat") } diff --git a/gpt4all-chat/qml/MyToolButton.qml b/gpt4all-chat/qml/MyToolButton.qml new file mode 100644 index 00000000..95755837 --- /dev/null +++ b/gpt4all-chat/qml/MyToolButton.qml @@ -0,0 +1,44 @@ +import QtCore +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import Qt5Compat.GraphicalEffects + +Button { + id: myButton + padding: 10 + property alias source: image.source + contentItem: Text { + text: myButton.text + horizontalAlignment: Text.AlignHCenter + color: myButton.enabled ? theme.textColor : theme.mutedTextColor + Accessible.role: Accessible.Button + Accessible.name: text + } + + background: Item { + anchors.fill: parent + Rectangle { + anchors.fill: parent + color: "transparent" + visible: myButton.checkable && myButton.checked + border.color: theme.backgroundLightest + border.width: 1 + radius: 10 + } + Image { + id: image + anchors.centerIn: parent + mipmap: true + width: 30 + height: 30 + } + ColorOverlay { + anchors.fill: image + source: image + color: myButton.hovered ? theme.textColor : "transparent" + } + } + Accessible.role: Accessible.Button + Accessible.name: text +} \ No newline at end of file