Make all the toolbuttons highlight on hover.

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

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
-
+        checkable: true
-        Accessible.role: Accessible.Button
+        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
-
+        checkable: true
-        background: Item {
+        checked: currentChat.collectionList.length
-            anchors.fill: parent
+        source: "qrc:/gpt4all/icons/db.svg"
-            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
         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
-
+        source: "qrc:/gpt4all/icons/settings.svg"
-        background: Item {
-            anchors.fill: parent
-            Image {
-                anchors.centerIn: parent
-                width: 30
-                height: 30
-                source: "qrc:/gpt4all/icons/settings.svg"
-            }
-        }
-
-        Accessible.role: Accessible.Button
         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
-
+        source: "qrc:/gpt4all/icons/copy.svg"
-        Accessible.role: Accessible.Button
         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 {
+                                    source: "qrc:/gpt4all/icons/thumbs_up.svg"
-                                        anchors.fill: parent
-                                        source: "qrc:/gpt4all/icons/thumbs_up.svg"
-                                    }
-                                    Accessible.role: Accessible.Button
                                     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 {
+                                    source: "qrc:/gpt4all/icons/thumbs_down.svg"
-                                        anchors.fill: parent
-                                        source: "qrc:/gpt4all/icons/thumbs_down.svg"
-                                    }
-                                    Accessible.role: Accessible.Button
                                     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
-
+            source: "qrc:/gpt4all/icons/send_message.svg"
-            background: Image {
-                anchors.centerIn: parent
-                source: "qrc:/gpt4all/icons/send_message.svg"
-            }
-
-            Accessible.role: Accessible.Button
             Accessible.name: qsTr("Send the message button")
             Accessible.description: qsTr("Sends the message/prompt contained in textfield to the model")
 

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 {
+                            source: "qrc:/gpt4all/icons/edit.svg"
-                                width: 30
-                                height: 30
-                                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 {
+                            source: "qrc:/gpt4all/icons/trash.svg"
-                                width: 30
-                                height: 30
-                                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")
                         }

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
+}