feat(Menu): supports background

tests/ui/modules/Common/Colors.qml

@@ -38,4 +38,5 @@ QtObject {
   property color u:   '#B1B1B1'
   property color v:   '#E2E2E2'
   property color w:   '#A1A1A1'
+  property color x:   '#96A5B1'
 }

tests/ui/modules/Common/Menu/Menu.qml

@@ -8,7 +8,7 @@ import Common.Styles 1.0
 // Responsive flat menu with visual indicators.
 // ===================================================================
 
-ColumnLayout {
+Rectangle {
   id: menu
 
   property int entryHeight
@@ -19,78 +19,95 @@ ColumnLayout {
 
   signal entrySelected (int entry)
 
-  spacing: MenuStyle.spacing
+  // -----------------------------------------------------------------
 
-  Repeater {
-    model: entries
+  function resetSelectedEntry () {
+    _selectedEntry = -1
+  }
 
-    Rectangle {
-      color: mouseArea.pressed
-        ? MenuStyle.entry.color.pressed
-        : (_selectedEntry === index
-           ? MenuStyle.entry.color.selected
-           : (mouseArea.containsMouse
-              ? MenuStyle.entry.color.hovered
-              : MenuStyle.entry.color.normal
-             )
-          )
-      height: menu.entryHeight
-      width: menu.entryWidth
+  // -----------------------------------------------------------------
 
-      RowLayout {
-        anchors {
-          left: parent.left
-          leftMargin: MenuStyle.entry.leftMargin
-          right: parent.right
-          rightMargin: MenuStyle.entry.rightMargin
-          verticalCenter: parent.verticalCenter
-        }
+  color: MenuStyle.backgroundColor
+  implicitHeight: content.height
+  width: entryWidth
 
-        spacing: MenuStyle.entry.spacing
+  ColumnLayout {
+    id: content
 
-        Icon {
-          Layout.preferredHeight: MenuStyle.entry.iconSize
-          Layout.preferredWidth: MenuStyle.entry.iconSize
-          icon: modelData.icon + (
-            _selectedEntry === index
-              ? '_selected'
-              : '_normal'
-          )
-        }
+    anchors.centerIn: parent
+    spacing: MenuStyle.spacing
 
-        Text {
-          Layout.fillWidth: true
-          color: _selectedEntry === index
-            ? MenuStyle.entry.text.color.selected
-            : MenuStyle.entry.text.color.normal
-          font.pointSize: MenuStyle.entry.text.fontSize
-          height: parent.height
-          text: modelData.entryName
-          verticalAlignment: Text.AlignVCenter
-        }
-      }
+    Repeater {
+      model: entries
 
       Rectangle {
-        anchors {
-          left: parent.left
+        color: mouseArea.pressed
+          ? MenuStyle.entry.color.pressed
+          : (_selectedEntry === index
+             ? MenuStyle.entry.color.selected
+             : (mouseArea.containsMouse
+                ? MenuStyle.entry.color.hovered
+                : MenuStyle.entry.color.normal
+               )
+            )
+        height: menu.entryHeight
+        width: menu.entryWidth
+
+        RowLayout {
+          anchors {
+            left: parent.left
+            leftMargin: MenuStyle.entry.leftMargin
+            right: parent.right
+            rightMargin: MenuStyle.entry.rightMargin
+            verticalCenter: parent.verticalCenter
+          }
+
+          spacing: MenuStyle.entry.spacing
+
+          Icon {
+            Layout.preferredHeight: MenuStyle.entry.iconSize
+            Layout.preferredWidth: MenuStyle.entry.iconSize
+            icon: modelData.icon + (
+              _selectedEntry === index
+                ? '_selected'
+                : '_normal'
+            )
+          }
+
+          Text {
+            Layout.fillWidth: true
+            color: _selectedEntry === index
+              ? MenuStyle.entry.text.color.selected
+              : MenuStyle.entry.text.color.normal
+            font.pointSize: MenuStyle.entry.text.fontSize
+            height: parent.height
+            text: modelData.entryName
+            verticalAlignment: Text.AlignVCenter
+          }
         }
 
-        height: parent.height
-        color: _selectedEntry === index
-          ? MenuStyle.entry.indicator.color
-          : 'transparent'
-        width: MenuStyle.entry.indicator.width
-      }
+        Rectangle {
+          anchors {
+            left: parent.left
+          }
 
-      MouseArea {
-        id: mouseArea
+          height: parent.height
+          color: _selectedEntry === index
+            ? MenuStyle.entry.indicator.color
+            : 'transparent'
+          width: MenuStyle.entry.indicator.width
+        }
 
-        anchors.fill: parent
-        hoverEnabled: true
+        MouseArea {
+          id: mouseArea
 
-        onClicked: {
-          _selectedEntry = index
-          entrySelected(index)
+          anchors.fill: parent
+          hoverEnabled: true
+
+          onClicked: {
+            _selectedEntry = index
+            entrySelected(index)
+          }
         }
       }
     }

tests/ui/modules/Common/Styles/Menu/MenuStyle.qml

@@ -6,7 +6,8 @@ import Common 1.0
 // ===================================================================
 
 QtObject {
-  property int spacing: 0
+  property int spacing: 1
+  property color backgroundColor: Colors.x
 
   property QtObject entry: QtObject {
     property int iconSize: 24

tests/ui/views/App/MainWindow/MainWindow.qml

@@ -126,8 +126,10 @@ ApplicationWindow {
       spacing: 0
 
       Menu {
+        id: menu
+
         entryHeight: MainWindowStyle.menu.entryHeight
-        entryWidth: parent.width
+        entryWidth: MainWindowStyle.menu.width
 
         entries: [{
           entryName: qsTr('homeEntry'),
@@ -156,7 +158,10 @@ ApplicationWindow {
         Layout.fillWidth: true
         model: ContactsListModel {} // Use History list.
 
-        onClicked: setView('Conversation')
+        onClicked: {
+          menu.resetSelectedEntry()
+          setView('Conversation')
+        }
       }
     }