Make all the toolbuttons highlight on hover.

This commit is contained in:
Adam Treat 2023-05-31 21:07:14 -04:00
parent 93a05c8834
commit cae757aacd
4 changed files with 72 additions and 118 deletions

View File

@ -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

View File

@ -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")

View File

@ -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")
}

View File

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