mirror of
https://github.com/nomic-ai/gpt4all
synced 2024-11-10 01:10:35 +00:00
Customize the menu to fit our style (#2535)
* Style and align with a rounded border for combobox popups. * Convert this menu to use the new style as well. Signed-off-by: Adam Treat <treat.adam@gmail.com>
This commit is contained in:
parent
1ce65e8ef2
commit
45aa141189
@ -159,6 +159,8 @@ qt_add_qml_module(chat
|
||||
qml/MyDialog.qml
|
||||
qml/MyDirectoryField.qml
|
||||
qml/MyFancyLink.qml
|
||||
qml/MyMenu.qml
|
||||
qml/MyMenuItem.qml
|
||||
qml/MyMiniButton.qml
|
||||
qml/MySettingsButton.qml
|
||||
qml/MySettingsDestructiveButton.qml
|
||||
|
@ -232,7 +232,7 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
MyComboBox {
|
||||
ComboBox {
|
||||
id: comboBox
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.fillHeight: true
|
||||
@ -421,13 +421,16 @@ Rectangle {
|
||||
id: comboItemPopup
|
||||
y: comboBox.height - 1
|
||||
width: comboBox.width
|
||||
implicitHeight: Math.min(window.height - y, contentItem.implicitHeight)
|
||||
implicitHeight: Math.min(window.height - y, contentItem.implicitHeight + 20)
|
||||
padding: 0
|
||||
contentItem: Rectangle {
|
||||
implicitWidth: comboBox.width
|
||||
implicitHeight: comboItemPopupListView.implicitHeight
|
||||
color: "transparent"
|
||||
radius: 10
|
||||
ScrollView {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
clip: true
|
||||
ScrollBar.vertical.policy: ScrollBar.AsNeeded
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
@ -442,7 +445,8 @@ Rectangle {
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: theme.black
|
||||
color: theme.controlBackground
|
||||
radius: 10
|
||||
}
|
||||
}
|
||||
|
||||
@ -919,15 +923,15 @@ Rectangle {
|
||||
statusBar.externalHoveredLink = link
|
||||
}
|
||||
|
||||
Menu {
|
||||
MyMenu {
|
||||
id: conversationContextMenu
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: qsTr("Copy")
|
||||
enabled: myTextArea.selectedText !== ""
|
||||
height: enabled ? implicitHeight : 0
|
||||
onTriggered: myTextArea.copy()
|
||||
}
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: qsTr("Copy Message")
|
||||
enabled: myTextArea.selectedText === ""
|
||||
height: enabled ? implicitHeight : 0
|
||||
@ -937,7 +941,7 @@ Rectangle {
|
||||
myTextArea.deselect()
|
||||
}
|
||||
}
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: textProcessor.shouldProcessText ? qsTr("Disable markdown") : qsTr("Enable markdown")
|
||||
height: enabled ? implicitHeight : 0
|
||||
onTriggered: {
|
||||
@ -1660,25 +1664,25 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
Menu {
|
||||
MyMenu {
|
||||
id: textInputContextMenu
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: qsTr("Cut")
|
||||
enabled: textInput.selectedText !== ""
|
||||
height: enabled ? implicitHeight : 0
|
||||
onTriggered: textInput.cut()
|
||||
}
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: qsTr("Copy")
|
||||
enabled: textInput.selectedText !== ""
|
||||
height: enabled ? implicitHeight : 0
|
||||
onTriggered: textInput.copy()
|
||||
}
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: qsTr("Paste")
|
||||
onTriggered: textInput.paste()
|
||||
}
|
||||
MenuItem {
|
||||
MyMenuItem {
|
||||
text: qsTr("Select All")
|
||||
onTriggered: textInput.selectAll()
|
||||
}
|
||||
|
@ -64,19 +64,28 @@ ComboBox {
|
||||
// width and height as well as the window width and height
|
||||
y: comboBox.height - 1
|
||||
width: comboBox.width
|
||||
implicitHeight: contentItem.implicitHeight
|
||||
implicitHeight: contentItem.implicitHeight + 20
|
||||
padding: 0
|
||||
|
||||
contentItem: ListView {
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: comboBox.popup.visible ? comboBox.delegateModel : null
|
||||
currentIndex: comboBox.highlightedIndex
|
||||
ScrollIndicator.vertical: ScrollIndicator { }
|
||||
contentItem: Rectangle {
|
||||
implicitWidth: myListView.contentWidth
|
||||
implicitHeight: myListView.contentHeight
|
||||
color: "transparent"
|
||||
ListView {
|
||||
id: myListView
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: comboBox.popup.visible ? comboBox.delegateModel : null
|
||||
currentIndex: comboBox.highlightedIndex
|
||||
ScrollIndicator.vertical: ScrollIndicator { }
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: theme.black
|
||||
color: theme.controlBackground
|
||||
radius: 10
|
||||
}
|
||||
}
|
||||
indicator: Item {
|
||||
|
60
gpt4all-chat/qml/MyMenu.qml
Normal file
60
gpt4all-chat/qml/MyMenu.qml
Normal file
@ -0,0 +1,60 @@
|
||||
import QtCore
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Controls.Basic
|
||||
|
||||
Menu {
|
||||
id: menu
|
||||
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
contentWidth + leftPadding + rightPadding + 20)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
contentHeight + topPadding + bottomPadding + 20)
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: 220
|
||||
implicitHeight: 40
|
||||
color: theme.controlBackground
|
||||
radius: 10
|
||||
}
|
||||
|
||||
contentItem: Rectangle {
|
||||
implicitWidth: myListView.contentWidth
|
||||
implicitHeight: myListView.contentHeight
|
||||
color: "transparent"
|
||||
ListView {
|
||||
id: myListView
|
||||
anchors.margins: 10
|
||||
anchors.fill: parent
|
||||
implicitHeight: contentHeight
|
||||
model: menu.contentModel
|
||||
interactive: Window.window
|
||||
? contentHeight + menu.topPadding + menu.bottomPadding > menu.height
|
||||
: false
|
||||
clip: true
|
||||
currentIndex: menu.currentIndex
|
||||
|
||||
ScrollIndicator.vertical: ScrollIndicator {}
|
||||
}
|
||||
}
|
||||
|
||||
enter: Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from: 0
|
||||
to: 1
|
||||
easing.type: Easing.InOutQuad
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
|
||||
exit: Transition {
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
from: 1
|
||||
to: 0
|
||||
easing.type: Easing.InOutQuad
|
||||
duration: 100
|
||||
}
|
||||
}
|
||||
}
|
20
gpt4all-chat/qml/MyMenuItem.qml
Normal file
20
gpt4all-chat/qml/MyMenuItem.qml
Normal file
@ -0,0 +1,20 @@
|
||||
import QtCore
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Controls.Basic
|
||||
|
||||
MenuItem {
|
||||
id: item
|
||||
background: Rectangle {
|
||||
color: item.highlighted ? theme.lightContrast : theme.darkContrast
|
||||
}
|
||||
|
||||
contentItem: Text {
|
||||
leftPadding: 10
|
||||
rightPadding: 10
|
||||
padding: 5
|
||||
text: item.text
|
||||
color: theme.textColor
|
||||
font.pixelSize: theme.fontSizeLarge
|
||||
}
|
||||
}
|
@ -131,9 +131,9 @@ QtObject {
|
||||
property color darkContrast: {
|
||||
switch (MySettings.chatTheme) {
|
||||
case "LegacyDark":
|
||||
return blue500;
|
||||
return blue950;
|
||||
case "Dark":
|
||||
return darkgray100;
|
||||
return darkgray300;
|
||||
default:
|
||||
return gray100;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user