linphone-desktop/linphone-app/ui/modules/Common/Menus/MenuItem.qml

import QtQuick 2.7
import QtQuick.Controls 2.3  as Controls	//2.3 for menu property (Qt 5.10)
import QtQuick.Layouts 1.3

import Common 1.0

import Common.Styles 1.0

// =============================================================================

// Using MenuItem.icon doesn't seem to work as of 07/2021
// Workaround : Implement own Icon

Controls.MenuItem {
	id: button
	property alias iconMenu : iconArea.icon
	property alias iconSizeMenu: iconArea.iconSize
	property alias iconOverwriteColorMenu: iconArea.overwriteColor
	property alias iconLayoutDirection : rowArea.layoutDirection
	property alias radius: backgroundArea.radius
	property var menuItemStyle : MenuItemStyle.normal
	onMenuItemStyleChanged: if(!menuItemStyle) menuItemStyle = MenuItemStyle.normal
	
	property alias textWeight : rowText.font.bold
	property int offsetTopMargin : 0
	property int offsetBottomMargin : 0
	property bool displaySelection: true
	property bool isTabBar: false
	property bool fontItalic: false

	height:visible?undefined:0
	
	Component.onCompleted: if(!isTabBar) menu.width = Math.max(menu.width, implicitWidth)
	
	background: Rectangle {
		id: backgroundArea
		color: button.down
			   ? menuItemStyle.background.color.pressed.color
			   : (
					 button.hovered
					 ? menuItemStyle.background.color.hovered.color
					 : menuItemStyle.background.color.normal.color
					 )
		implicitHeight: button.menuItemStyle.background.height
	}
	contentItem:RowLayout{
		id:rowArea		
		spacing: iconArea.icon? 10 : 0
		Item{
			Layout.fillHeight: true
			Layout.preferredWidth: iconArea.icon?height/rowText.lineCount:0 
			Layout.leftMargin:(iconLayoutDirection == Qt.LeftToRight ? menuItemStyle.leftMargin : 0)
			Layout.rightMargin:(iconLayoutDirection == Qt.LeftToRight ? 0 : menuItemStyle.rightMargin)
			Icon{
				id: iconArea
				visible: icon
				anchors.centerIn: parent
				iconSize: rowText.lineCount > 0 ? rowText.contentHeight/rowText.lineCount + 2 : 0
				overwriteColor: button.enabled
								? (button.down
								   ? menuItemStyle.text.color.pressed.color
								   : (
										 button.hovered
										 ? menuItemStyle.text.color.hovered.color
										 : menuItemStyle.text.color.normal.color
										 ))
								: menuItemStyle.text.color.disabled.color
			}
		}
		Text {
			id:rowText
			Layout.fillWidth: true
			Layout.fillHeight: true
			Layout.leftMargin:(isTabBar || iconLayoutDirection == Qt.LeftToRight ? 0 : menuItemStyle.leftMargin) + (button.checkable ? CheckBoxTextStyle.size : 0)
			Layout.rightMargin:(!isTabBar && iconLayoutDirection == Qt.LeftToRight ? menuItemStyle.rightMargin : 0)
			color: button.enabled
				   ? (button.down
					  ? menuItemStyle.text.color.pressed.color
					  : (
							button.hovered
							? menuItemStyle.text.color.hovered.color
							: menuItemStyle.text.color.normal.color
							))
				   : menuItemStyle.text.color.disabled.color
			
			elide: Text.ElideRight
			
			font {
				weight: menuItemStyle.text.weight
				pointSize: menuItemStyle.text.pointSize
				italic: fontItalic
			}
			
			text: button.text
			horizontalAlignment: Text.AlignLeft
			verticalAlignment: Text.AlignVCenter
		}
	}
	indicator: Rectangle {
		visible: button.checkable
		border.color: button.down
					  ? CheckBoxTextStyle.color.pressed.color
					  : (
							button.hovered
							? CheckBoxTextStyle.color.hovered.color
							: (
								button.checked
								? CheckBoxTextStyle.color.selected.color
								: CheckBoxTextStyle.color.normal.color
							  )
							)
		
		implicitHeight: CheckBoxTextStyle.size
		implicitWidth: CheckBoxTextStyle.size
		
		radius: CheckBoxTextStyle.radius
		
		x: button.leftPadding
		y: parent.height / 2 - height / 2
		
		Rectangle {
			color: button.down
				   ? CheckBoxTextStyle.color.pressed.color
				   : (button.hovered
					  ? CheckBoxTextStyle.color.hovered.color
					  : (
							button.checked
							? CheckBoxTextStyle.color.selected.color
							: CheckBoxTextStyle.color.normal.color
							)
					  )
			
			height: parent.height - y * 2
			width: parent.width - x * 2
			
			radius: CheckBoxTextStyle.radius
			visible: button.checked
			
			x: 4 // Fixed, no needed to use style file.
			y: 4 // Same thing.
		}
	}
	
	hoverEnabled: true
	MouseArea{
		anchors.fill:parent
		visible: button.displaySelection
		propagateComposedEvents:true
		acceptedButtons: Qt.NoButton
		cursorShape: parent.hovered
					 ? Qt.PointingHandCursor
					 : Qt.ArrowCursor
	}
}