From 45aa14118953eca98cc6349f5e642bb38112c9d9 Mon Sep 17 00:00:00 2001 From: AT Date: Wed, 3 Jul 2024 11:43:59 -0400 Subject: [PATCH] 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 --- gpt4all-chat/CMakeLists.txt | 2 ++ gpt4all-chat/qml/ChatView.qml | 28 ++++++++------- gpt4all-chat/qml/MyComboBox.qml | 25 +++++++++----- gpt4all-chat/qml/MyMenu.qml | 60 +++++++++++++++++++++++++++++++++ gpt4all-chat/qml/MyMenuItem.qml | 20 +++++++++++ gpt4all-chat/qml/Theme.qml | 4 +-- 6 files changed, 117 insertions(+), 22 deletions(-) create mode 100644 gpt4all-chat/qml/MyMenu.qml create mode 100644 gpt4all-chat/qml/MyMenuItem.qml diff --git a/gpt4all-chat/CMakeLists.txt b/gpt4all-chat/CMakeLists.txt index 3b8983f0..578c3b31 100644 --- a/gpt4all-chat/CMakeLists.txt +++ b/gpt4all-chat/CMakeLists.txt @@ -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 diff --git a/gpt4all-chat/qml/ChatView.qml b/gpt4all-chat/qml/ChatView.qml index 58761c3a..7b178a0d 100644 --- a/gpt4all-chat/qml/ChatView.qml +++ b/gpt4all-chat/qml/ChatView.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() } diff --git a/gpt4all-chat/qml/MyComboBox.qml b/gpt4all-chat/qml/MyComboBox.qml index 7f25c60c..1bdc31ba 100644 --- a/gpt4all-chat/qml/MyComboBox.qml +++ b/gpt4all-chat/qml/MyComboBox.qml @@ -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 { diff --git a/gpt4all-chat/qml/MyMenu.qml b/gpt4all-chat/qml/MyMenu.qml new file mode 100644 index 00000000..0319d3df --- /dev/null +++ b/gpt4all-chat/qml/MyMenu.qml @@ -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 + } + } +} diff --git a/gpt4all-chat/qml/MyMenuItem.qml b/gpt4all-chat/qml/MyMenuItem.qml new file mode 100644 index 00000000..24598870 --- /dev/null +++ b/gpt4all-chat/qml/MyMenuItem.qml @@ -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 + } +} diff --git a/gpt4all-chat/qml/Theme.qml b/gpt4all-chat/qml/Theme.qml index e2fac4a4..487f0fba 100644 --- a/gpt4all-chat/qml/Theme.qml +++ b/gpt4all-chat/qml/Theme.qml @@ -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; }