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/MyDialog.qml
qml/MyDirectoryField.qml qml/MyDirectoryField.qml
qml/MyFancyLink.qml qml/MyFancyLink.qml
qml/MyMenu.qml
qml/MyMenuItem.qml
qml/MyMiniButton.qml qml/MyMiniButton.qml
qml/MySettingsButton.qml qml/MySettingsButton.qml
qml/MySettingsDestructiveButton.qml qml/MySettingsDestructiveButton.qml

View File

@ -232,7 +232,7 @@ Rectangle {
} }
} }
MyComboBox { ComboBox {
id: comboBox id: comboBox
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true Layout.fillHeight: true
@ -421,13 +421,16 @@ Rectangle {
id: comboItemPopup id: comboItemPopup
y: comboBox.height - 1 y: comboBox.height - 1
width: comboBox.width width: comboBox.width
implicitHeight: Math.min(window.height - y, contentItem.implicitHeight) implicitHeight: Math.min(window.height - y, contentItem.implicitHeight + 20)
padding: 0 padding: 0
contentItem: Rectangle { contentItem: Rectangle {
implicitWidth: comboBox.width implicitWidth: comboBox.width
implicitHeight: comboItemPopupListView.implicitHeight implicitHeight: comboItemPopupListView.implicitHeight
color: "transparent"
radius: 10
ScrollView { ScrollView {
anchors.fill: parent anchors.fill: parent
anchors.margins: 10
clip: true clip: true
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@ -442,7 +445,8 @@ Rectangle {
} }
background: Rectangle { background: Rectangle {
color: theme.black color: theme.controlBackground
radius: 10
} }
} }
@ -919,15 +923,15 @@ Rectangle {
statusBar.externalHoveredLink = link statusBar.externalHoveredLink = link
} }
Menu { MyMenu {
id: conversationContextMenu id: conversationContextMenu
MenuItem { MyMenuItem {
text: qsTr("Copy") text: qsTr("Copy")
enabled: myTextArea.selectedText !== "" enabled: myTextArea.selectedText !== ""
height: enabled ? implicitHeight : 0 height: enabled ? implicitHeight : 0
onTriggered: myTextArea.copy() onTriggered: myTextArea.copy()
} }
MenuItem { MyMenuItem {
text: qsTr("Copy Message") text: qsTr("Copy Message")
enabled: myTextArea.selectedText === "" enabled: myTextArea.selectedText === ""
height: enabled ? implicitHeight : 0 height: enabled ? implicitHeight : 0
@ -937,7 +941,7 @@ Rectangle {
myTextArea.deselect() myTextArea.deselect()
} }
} }
MenuItem { MyMenuItem {
text: textProcessor.shouldProcessText ? qsTr("Disable markdown") : qsTr("Enable markdown") text: textProcessor.shouldProcessText ? qsTr("Disable markdown") : qsTr("Enable markdown")
height: enabled ? implicitHeight : 0 height: enabled ? implicitHeight : 0
onTriggered: { onTriggered: {
@ -1660,25 +1664,25 @@ Rectangle {
} }
} }
Menu { MyMenu {
id: textInputContextMenu id: textInputContextMenu
MenuItem { MyMenuItem {
text: qsTr("Cut") text: qsTr("Cut")
enabled: textInput.selectedText !== "" enabled: textInput.selectedText !== ""
height: enabled ? implicitHeight : 0 height: enabled ? implicitHeight : 0
onTriggered: textInput.cut() onTriggered: textInput.cut()
} }
MenuItem { MyMenuItem {
text: qsTr("Copy") text: qsTr("Copy")
enabled: textInput.selectedText !== "" enabled: textInput.selectedText !== ""
height: enabled ? implicitHeight : 0 height: enabled ? implicitHeight : 0
onTriggered: textInput.copy() onTriggered: textInput.copy()
} }
MenuItem { MyMenuItem {
text: qsTr("Paste") text: qsTr("Paste")
onTriggered: textInput.paste() onTriggered: textInput.paste()
} }
MenuItem { MyMenuItem {
text: qsTr("Select All") text: qsTr("Select All")
onTriggered: textInput.selectAll() onTriggered: textInput.selectAll()
} }

View File

@ -64,19 +64,28 @@ ComboBox {
// width and height as well as the window width and height // width and height as well as the window width and height
y: comboBox.height - 1 y: comboBox.height - 1
width: comboBox.width width: comboBox.width
implicitHeight: contentItem.implicitHeight implicitHeight: contentItem.implicitHeight + 20
padding: 0 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 clip: true
implicitHeight: contentHeight implicitHeight: contentHeight
model: comboBox.popup.visible ? comboBox.delegateModel : null model: comboBox.popup.visible ? comboBox.delegateModel : null
currentIndex: comboBox.highlightedIndex currentIndex: comboBox.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { } ScrollIndicator.vertical: ScrollIndicator { }
} }
}
background: Rectangle { background: Rectangle {
color: theme.black color: theme.controlBackground
radius: 10
} }
} }
indicator: Item { 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: { property color darkContrast: {
switch (MySettings.chatTheme) { switch (MySettings.chatTheme) {
case "LegacyDark": case "LegacyDark":
return blue500; return blue950;
case "Dark": case "Dark":
return darkgray100; return darkgray300;
default: default:
return gray100; return gray100;
} }