MenuBar: display shortcut in QuickControls2

maxwell31

Hi,

I have a menu bar which looks like this:

menuBar: MenuBar {
    id: mainmenu
    Menu {
        title: qsTr("&File")
        Action {
            text: qsTr("&Open...")
            shortcut: StandardKey.Open
            onTriggered: {
                fileDialog.visible=true
            }
        }
     }
    Menu {
        title: qsTr("&View")
        Action {
            id: fullscreenAction
            checkable: true
            checked: false
            text: qsTr("&Fullscreen")
            shortcut: Shortcut {
                sequences: [StandardKey.FullScreen,"F12"]
                onActivated: {
                    fullscreenAction.toggle()
                }
            }

If I press Alt+F The File Menu expands. Is it possible to show the Keyboard shortcut next to the text (in the case of file open Ctrl+O)?

Pradeep P N

Hi @maxwell31

Please have a look at MenuItem which has a shortcut property.
You can provide action to the MenuItem

Example:

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

ApplicationWindow  {
    visible: true
    width: 640
    height: 480

    menuBar: MenuBar {
        Menu {
            title: "File"

            MenuItem { text: "Open"; shortcut: "Ctrl+O"; }

            MenuItem {
                shortcut: "Ctrl+Q"
                text: 'Close';

                action: Action {
                    shortcut: StandardKey.Quit

                    onTriggered: {
                        Qt.quit();
                    }
                }
            }
        }

        Menu {
            title: "Edit"
            MenuItem { text: "Cut";  shortcut: "Ctrl+X"  }
            MenuItem { text: "Copy"; shortcut: "Ctrl+C"  }
            MenuItem { text: "Paste";  shortcut: "Ctrl+V"  }
        }
    }
}

All the best

maxwell31

Ah, I see. Thank you. I thought about using The QuickControls2 menu, as QuickControls1 are already listed as deprecated. There the MenuItem does not have a shortcut property anymore. Is there a possibility with QuickControls2?

J.Hilk

@maxwell31
you can customize your MenuItem
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html

Therefore, (untested)

MenuItem {
    id:menuItem

   contentItem: Item {
 Text {
            leftPadding: menuItem.indicator.width
            rightPadding: menuItem.arrow.width
            text: menuItem.text
            font: menuItem.font
            opacity: enabled ? 1.0 : 0.3
            color: menuItem.highlighted ? "#ffffff" : "#21be2b"
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
        }

    Text{
     //the shortcut
            leftPadding: menuItem.indicator.width
            rightPadding: menuItem.arrow.width
            text: "STRG + Q"
            font: menuItem.font
            opacity: enabled ? 1.0 : 0.3
            color: menuItem.highlighted ? "#ffffff" : "#21be2b"
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
    }
   }
}

maxwell31

Thank you! Yes this will work. Do you know a way how to get the text corresponding to something like StandardKey.Fullscreen? It will be a cross platform application, therefore I don't want to hardcode the text.

With e.g. StandardKey.Quit.toString() I can get the enum value, but how to get the string in qml?

J.Hilk

@maxwell31 I'm afraid not,

you can decide the text on the OS, currently running.

text: {
     if(Qt.platform.os == "windows")
        return "STRG + Q"
     else if( Qt.platform.os == "osx")
       return "⌘ + Q"
}

https://doc.qt.io/qt-5/qml-qtqml-qt.html#platform-prop

alex_spataru

Elaborating on the answers provided so far, I came up with the following solution:

Create a QML file named CustomMenuItem.qml with the following code:

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

MenuItem {
    id: root

    property alias sequence: _shortcut.sequence
    property bool indicatorVisible: root.icon.source.length > 0 || root.checkable

    Shortcut {
        id: _shortcut
        enabled: root.enabled
        onActivated: root.triggered()
    }

    contentItem: RowLayout {
        spacing: 0
        width: root.width
        opacity: root.enabled ? 1 : 0.5

        Item {
            width: root.indicatorVisible ? root.indicator.width + 4 : 0
        }

        Label {
            text: root.text
            Layout.fillWidth: true
            elide: Label.ElideRight
            verticalAlignment: Qt.AlignVCenter
        }

        Item {
            Layout.fillWidth: true
        }

        Label {
            text: _shortcut.nativeText
            verticalAlignment: Qt.AlignVCenter
        }
    }
}

You can now use this item in your MenuBar as follows:

MenuBar {
    Menu {
        title: qsTr("File")

        CustomMenuItem {
            sequence: StandardKey.Open
            text: qsTr("Select JSON file") + "..."
        }

        // Rest of code... (which I still haven't done)
    }
}

Screenshot:

Screen Shot 2021-02-17 at 11.45.13.png