ContextMenu: styling, implement ContextMenuItem component

2 files changed, 62 insertions, 13 deletions

diff --git a/components/ContextMenu.qml b/components/ContextMenu.qml
index 58442e8d..a4ca3209 100644
--- a/components/ContextMenu.qml
+++ b/components/ContextMenu.qml
@@ -1,6 +1,7 @@
-import QtQuick.Controls 2.2
 import QtQuick 2.9
+import QtQuick.Controls 2.2
 
+import FontAwesome 1.0
 import "../components" as MoneroComponents
 
 MouseArea {
@@ -18,24 +19,20 @@ MouseArea {
         id: contextMenu
 
         background: Rectangle {
+            border.color: MoneroComponents.Style.buttonBackgroundColorDisabledHover
+            border.width: 1
             radius: 2
-            color: MoneroComponents.Style.buttonInlineBackgroundColor
+            color: MoneroComponents.Style.buttonBackgroundColorDisabled
         }
 
-        font.family: MoneroComponents.Style.fontRegular.name
-        font.pixelSize: 14
-        width: 50
+        padding: 1
+        width: 100
         x: root.mouseX
         y: root.mouseY
 
-        MenuItem {
-            id: pasteItem
-            background: Rectangle {
-                radius: 2
-                color: MoneroComponents.Style.buttonBackgroundColorDisabledHover
-                opacity: pasteItem.down ? 1 : 0
-            }
-            enabled: root.parent.canPaste
+        MoneroComponents.ContextMenuItem {
+            enabled: root.parent.canPaste === true
+            glyphIcon: FontAwesome.paste
             onTriggered: root.paste()
             text: qsTr("Paste") + translationManager.emptyString
         }
diff --git a/components/ContextMenuItem.qml b/components/ContextMenuItem.qml
new file mode 100644
index 00000000..de2d54ad
--- /dev/null
+++ b/components/ContextMenuItem.qml
@@ -0,0 +1,52 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.1
+
+import FontAwesome 1.0
+import "../components" as MoneroComponents
+
+MenuItem {
+    id: menuItem
+
+    property bool glyphIconSolid: true
+    property alias glyphIcon: glyphIcon.text
+
+    background: Rectangle {
+        color: MoneroComponents.Style.buttonBackgroundColorDisabledHover
+        opacity: mouse.containsMouse ? 1 : 0
+
+        MouseArea {
+            id: mouse
+
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: menuItem.triggered()
+            visible: menuItem.enabled
+        }
+    }
+
+    contentItem: RowLayout {
+        anchors.fill: parent
+        anchors.leftMargin: 10
+        anchors.rightMargin: 10
+        opacity: menuItem.enabled ? 1 : 0.4
+        spacing: 8
+
+        Text {
+            id: glyphIcon
+
+            color: MoneroComponents.Style.buttonTextColor
+            font.family: glyphIconSolid ? FontAwesome.fontFamilySolid : FontAwesome.fontFamily
+            font.pixelSize: 14
+            font.styleName: glyphIconSolid ? "Solid" : "Regular"
+        }
+
+        Text {
+            color: MoneroComponents.Style.buttonTextColor
+            font.family: MoneroComponents.Style.fontRegular.name
+            font.pixelSize: 14
+            Layout.fillWidth: true
+            text: menuItem.text
+        }
+    }
+}