CODEWITHSUNDEEP
qtqmlqtquick2qtquickcontrols2
Martin Omacht
Martin Omacht

Reputation: 425

How to style MenuBarItem with mnemonics strings in QML

I want to customize MenuBar (from QtQuick.Controls 2.4) in my Qt application, so I followed the example from Qt website (https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-menubar).

The example does not contain mnemonics, however. Here is my code for the MenuBar which has mnemonics:

import QtQuick 2.9
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11

import "../singletons"

MenuBar {    
    Menu {
        title: qsTr("&File")
        Action { text: qsTr("&Open...") }
        Action { text: qsTr("&Save") }
        Action { text: qsTr("Save &As...") }
        MenuSeparator { }
        Action { text: qsTr("&Quit") }
    }
    Menu {
        title: qsTr("&Edit")
        Action { text: qsTr("Cu&t") }
        Action { text: qsTr("&Copy") }
        Action { text: qsTr("&Paste") }
    }
    Menu {
        title: qsTr("&Help")
        Action { text: qsTr("&About") }
    }

    background: Rectangle {
        color: Style._ColorPrimaryDark
    }

    delegate: MenuBarItem {
        id: menuBarItem

        contentItem: Text {
            text: menuBarItem.text
            opacity: enabled ? 1.0 : 0.3
            color: "white"
            verticalAlignment: Text.AlignVCenter
        }
    }
}

When I run the code, the MenuBar items look like this (the mnemonic shortcuts still work though):

MenuBarItems have ampersands

Without the style, the MenuBar items have the mnemonic character underlined as expected:

MenuBarItems have underlined mnemonics

I couldn't find anything about this problem. Is there any way or workaround so I could keep the mnemonics and customize the looks?

Upvotes: 2

Views: 652

Answers (1)

folibis
folibis

Reputation: 12874

Looks like a bug. The native element uses some private control IconLabel which isn't accessible ( see it here). Using Label also doesn't solve the issue. So the solution is avoiding item customization, or to use some stupid workaround like this:

delegate: MenuBarItem {
    id: menuBarItem

    function replaceText(txt)
    {
        var index = txt.indexOf("&");
        if(index >= 0)
            txt = txt.replace(txt.substr(index, 2), ("<u>" + txt.substr(index + 1, 1) +"</u>"));
        return txt;
    }

    contentItem: Label {
        text: replaceText(menuBarItem.text)
        color: "white"
        verticalAlignment: Text.AlignVCenter
        textFormat: Text.RichText
    }
}

Upvotes: 3

Related Questions