Some color and theme enhancements to make the UI contrast a bit better.

This commit is contained in:
Adam Treat 2023-05-30 21:03:40 -04:00
parent e756675d56
commit 64ec93d59b
2 changed files with 32 additions and 18 deletions

View File

@ -3,6 +3,7 @@ import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Controls.Basic import QtQuick.Controls.Basic
import QtQuick.Layouts import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import llm import llm
import download import download
import network import network
@ -596,17 +597,7 @@ Window {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLighter color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLight
Image {
visible: currentChat.isServer || currentChat.modelName.startsWith("chatgpt-")
anchors.fill: parent
sourceSize.width: 1024
sourceSize.height: 1024
fillMode: Image.PreserveAspectFit
opacity: 0.15
source: "qrc:/gpt4all/icons/network.svg"
}
ListView { ListView {
id: listView id: listView
@ -629,7 +620,7 @@ Window {
cursorVisible: currentResponse ? currentChat.responseInProgress : false cursorVisible: currentResponse ? currentChat.responseInProgress : false
cursorPosition: text.length cursorPosition: text.length
background: Rectangle { background: Rectangle {
opacity: 0.3 opacity: 1.0
color: name === qsTr("Response: ") color: name === qsTr("Response: ")
? (currentChat.isServer ? theme.backgroundDarkest : theme.backgroundLighter) ? (currentChat.isServer ? theme.backgroundDarkest : theme.backgroundLighter)
: (currentChat.isServer ? theme.backgroundDark : theme.backgroundLight) : (currentChat.isServer ? theme.backgroundDark : theme.backgroundLight)
@ -813,6 +804,16 @@ Window {
height: 60 height: 60
} }
} }
Image {
visible: currentChat.isServer || currentChat.modelName.startsWith("chatgpt-")
anchors.fill: parent
sourceSize.width: 1024
sourceSize.height: 1024
fillMode: Image.PreserveAspectFit
opacity: 0.15
source: "qrc:/gpt4all/icons/network.svg"
}
} }
} }
@ -854,12 +855,22 @@ Window {
} }
anchors.bottom: textInputView.top anchors.bottom: textInputView.top
anchors.horizontalCenter: textInputView.horizontalCenter anchors.horizontalCenter: textInputView.horizontalCenter
anchors.bottomMargin: 40 anchors.bottomMargin: 20
padding: 15 padding: 15
text: currentChat.responseInProgress ? qsTr("Stop generating") : qsTr("Regenerate response") text: currentChat.responseInProgress ? qsTr("Stop generating") : qsTr("Regenerate response")
Accessible.description: qsTr("Controls generation of the response") Accessible.description: qsTr("Controls generation of the response")
} }
RectangularGlow {
id: effect
anchors.fill: textInputView
glowRadius: 50
spread: 0
color: theme.backgroundDark
cornerRadius: 10
opacity: 0.2
}
ScrollView { ScrollView {
id: textInputView id: textInputView
anchors.left: parent.left anchors.left: parent.left
@ -868,19 +879,20 @@ Window {
anchors.margins: 30 anchors.margins: 30
height: Math.min(contentHeight, 200) height: Math.min(contentHeight, 200)
visible: !currentChat.isServer visible: !currentChat.isServer
TextArea { TextArea {
id: textInput id: textInput
color: theme.textColor color: theme.textAccent
padding: 20 topPadding: 30
bottomPadding: 30
leftPadding: 20
rightPadding: 40 rightPadding: 40
enabled: currentChat.isModelLoaded && !currentChat.isServer enabled: currentChat.isModelLoaded && !currentChat.isServer
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarger
placeholderText: qsTr("Send a message...") placeholderText: qsTr("Send a message...")
placeholderTextColor: theme.mutedTextColor placeholderTextColor: theme.mutedTextColor
background: Rectangle { background: Rectangle {
color: theme.backgroundLighter color: theme.backgroundAccent
radius: 10 radius: 10
} }
Accessible.role: Accessible.EditableText Accessible.role: Accessible.EditableText

View File

@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
QtObject { QtObject {
property color textColor: "#d1d5db" property color textColor: "#d1d5db"
property color textAccent: "#8e8ea0"
property color mutedTextColor: backgroundLightest property color mutedTextColor: backgroundLightest
property color textErrorColor: "red" property color textErrorColor: "red"
property color backgroundDarkest: "#202123" property color backgroundDarkest: "#202123"
@ -12,6 +13,7 @@ QtObject {
property color backgroundLight: "#343541" property color backgroundLight: "#343541"
property color backgroundLighter: "#444654" property color backgroundLighter: "#444654"
property color backgroundLightest: "#7d7d8e" property color backgroundLightest: "#7d7d8e"
property color backgroundAccent: "#40414f"
property color buttonBorder: "#565869" property color buttonBorder: "#565869"
property color dialogBorder: "#d1d5db" property color dialogBorder: "#d1d5db"
property color userColor: "#ec86bf" property color userColor: "#ec86bf"