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>

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

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()
                         }

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

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

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

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