Reduce the right space in a context menu

[franco.amato]

I created the following custom element to personalize a context menu.

// LogoMenuItem.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

MenuItem {
    id: menuItem
    verticalPadding: 2

    background: Rectangle {
        color: "transparent"
    }

    // Icon sources
    property string defaultIconSource: ""
    property string hoverIconSource: ""

    // Text colors
    property color defaultTextColor: "white"
    property color hoverColor: "gray"

    // Icon size
    property int iconWidth: 24
    property int iconHeight: 24

    // Custom contentItem for the MenuItem
    contentItem: Row {
        spacing: 8
        padding: 5

        Image {
            id: icon
            source: menuItem.hovered ? menuItem.hoverIconSource : menuItem.defaultIconSource
            width: menuItem.iconWidth
            height: menuItem.iconHeight
        }
        Text {
            id: textLabel
            text: menuItem.text
            color: menuItem.hovered ? menuItem.hoverColor : menuItem.defaultTextColor
            font.family: "Poppins"
            font.pixelSize: 17
            font.styleName: "normal"
            font.weight: Font.Light
            lineHeight: 1.0
            verticalAlignment: Text.AlignVCenter
        }
    }
}

and an usage example:

// LeftToolBar.qml

LogoMenuItem {
         text: qsTr("Exit")
         defaultIconSource: "qrc:/Resources/images/Launcher/ContextMenu/exit_default.png"
         hoverIconSource: "qrc:/Resources/images/Launcher/ContextMenu/exit_hover.png"
         iconWidth: 21
         iconHeight: 22
         onTriggered: Qt.quit()
}

What I wanted to achieve is to show a hover icon when the mouse is hover the item and also avoid showing the classic highlight (the gray rectangle).

It works well, below an image containing 5 LogoMenuItem items :

1. "General Settings"
2. "Support"
3. "Log Out"
4. "Mobile App:
5. "Exit"

I would like to reduce the right spacing: the distance between the right side of the text (in this case the "General Settings" text) and the right border of the context menu and do it like the left spacing.
Any ideas?
Thanx

[GrecKo]

What's the parent of your LogoMenuItems and how do you lay them out? Some code showing that would help.

Have you tried GammaRay? It's useful for debugging items positioning.

[franco.amato]

@GrecKo below the code showing how the LogoMenuItem is used:

Menu {
     id: logoMenu
     x: parent.width - logoMenu.width
     y: parent.height

     LogoMenuItem {
                   text: qsTr("General Settings")
                   defaultIconSource: "qrc:/Resources/images/Launcher/ContextMenu/settings_default.png"
                   hoverIconSource: "qrc:/Resources/images/Launcher/ContextMenu/settings_hover.png"
                   iconWidth: 21
                   iconHeight: 23
     }
     LogoMenuItem {
                   text: qsTr("Support")
                   defaultIconSource: "qrc:/Resources/images/Launcher/ContextMenu/support_default.png"
                   hoverIconSource: "qrc:/Resources/images/Launcher/ContextMenu/support_hover.png"
                   iconWidth: 21
                   iconHeight: 16
     }
      LogoMenuItem {
                   text: qsTr("Log Out")
                   defaultIconSource: "qrc:/Resources/images/Launcher/ContextMenu/logout_default.png"
                   hoverIconSource: "qrc:/Resources/images/Launcher/ContextMenu/logout_hover.png"
                   iconWidth: 21
                   iconHeight: 19
      }
      LogoMenuItem {
                   text: qsTr("Mobile App")
                   defaultIconSource: "qrc:/Resources/images/Launcher/ContextMenu/mobile_default.png"
                   hoverIconSource: "qrc:/Resources/images/Launcher/ContextMenu/mobile_hover.png"
                   iconWidth: 17
                   iconHeight: 24
      }
      LogoMenuItem {
                   text: qsTr("Exit")
                   defaultIconSource: "qrc:/Resources/images/Launcher/ContextMenu/exit_default.png"
                   hoverIconSource: "qrc:/Resources/images/Launcher/ContextMenu/exit_hover.png"
                   iconWidth: 21
                   iconHeight: 22
                   onTriggered: Qt.quit()
      }

      background: Rectangle {
                   implicitWidth: 220 // Changing this value has no effect
                   color: "#21212D"
      }
}

onClicked: logoMenu.open()

The parent is Menu {}