Please nominate your Qt Champions for 2021! https://forum.qt.io/topic/132134/looking-for-the-2021-qt-champions

MenuBar: display shortcut in QuickControls2



  • 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)?



  • Hi @maxwell31

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

    0_1560835379934_Menu.gif

    All the best



  • 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?


  • Moderators

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


  • 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?


  • Moderators

    @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



  • 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


Log in to reply