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:
AT 2024-07-03 11:43:59 -04:00 committed by GitHub
parent 1ce65e8ef2
commit 45aa141189
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 117 additions and 22 deletions

View File

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

View File

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

View File

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

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

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

View File

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