From ba2ec69285951beba16c248e35b617ecc0a845da Mon Sep 17 00:00:00 2001
From: Ronan Abhamon <ronan.abhamon@belledonne-communications.com>
Date: Tue, 27 Sep 2016 11:19:00 +0200
Subject: [PATCH] feat(app): new menu component

---
 tests/imgs/contacts_list.svg                 | 15 ++++
 tests/imgs/home.svg                          | 17 ++++
 tests/imgs/right_arrow.svg                   | 15 ++++
 tests/linphone.pro                           |  1 -
 tests/resources.qrc                          |  5 +-
 tests/ui/modules/Linphone/Menu.qml           | 85 ++++++++++++++++++++
 tests/ui/modules/Linphone/Misc/MenuEntry.qml | 39 ---------
 tests/ui/modules/Linphone/qmldir             |  4 +-
 tests/ui/views/MainWindow/MainWindow.qml     | 23 +++---
 9 files changed, 151 insertions(+), 53 deletions(-)
 create mode 100644 tests/imgs/contacts_list.svg
 create mode 100644 tests/imgs/home.svg
 create mode 100644 tests/imgs/right_arrow.svg
 create mode 100644 tests/ui/modules/Linphone/Menu.qml
 delete mode 100644 tests/ui/modules/Linphone/Misc/MenuEntry.qml

diff --git a/tests/imgs/contacts_list.svg b/tests/imgs/contacts_list.svg
new file mode 100644
index 000000000..529c9cda9
--- /dev/null
+++ b/tests/imgs/contacts_list.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="86px" height="86px" viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
+    <title>footer_contacts</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-1888.000000, -17134.000000)">
+            <g id="footer_contacts" sketch:type="MSLayerGroup" transform="translate(1886.000000, 17132.000000)">
+                <path d="M45.2014578,5 C56.7508248,5 66.113294,14.455 66.113294,26.118 C66.113294,31.7 63.9701741,36.775 60.4679539,40.552 C59.9764491,41.083 60.1704642,40.99 59.6262271,41.467 L60.4987973,42.061 C92.192895,55.993 84.0661522,79.413 84.0661522,79.413 C63.6547753,85.951 45.2342911,84.945 45.2342911,84.945 L44.7666651,84.945 C44.7666651,84.944 26.344191,85.951 5.93380901,79.413 C5.93380901,79.413 -2.19293371,55.993 29.5021589,42.061 L30.3747291,41.467 C29.830492,40.99 30.0245071,41.083 29.5330023,40.552 C26.0317771,36.775 23.8876622,31.7 23.8876622,26.118 C23.8876622,14.455 33.2501314,5 44.7994984,5 L45.2014578,5 L45.2014578,5 Z" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
+                <rect id="Rectangle-250-Copy-9" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tests/imgs/home.svg b/tests/imgs/home.svg
new file mode 100644
index 000000000..3907176c7
--- /dev/null
+++ b/tests/imgs/home.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="56px" height="55px" viewBox="0 0 56 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
+    <title>menu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="OUTILS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="linphone_v2.0_icones_buttons" sketch:type="MSArtboardGroup" transform="translate(-7027.000000, -2873.000000)">
+            <g id="menu" sketch:type="MSLayerGroup" transform="translate(7010.000000, 2856.000000)">
+                <rect id="Rectangle-232-Copy" fill-opacity="0" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="90" height="90"></rect>
+                <g id="menu-copy" transform="translate(19.000000, 20.000000)" stroke="#FFFFFF" stroke-width="5" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M1,0 L51,0 M1,16.4781511 L51,16.4781511 M1,32.445549 L51,32.445549 M1,48.9237001 L51,48.9237001" id="menu-icon-copy"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/tests/imgs/right_arrow.svg b/tests/imgs/right_arrow.svg
new file mode 100644
index 000000000..68a9ded59
--- /dev/null
+++ b/tests/imgs/right_arrow.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="56px" height="106px" viewBox="0 0 56 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow_hangup</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="SMARTPHONE-PORTRAIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="6-call-incoming-04-background-mode-hangup" sketch:type="MSArtboardGroup" transform="translate(-924.000000, -1773.000000)" stroke-linecap="round" stroke="#FFFFFF" stroke-width="5">
+            <g id="arrow_hangup" sketch:type="MSLayerGroup" transform="translate(928.500000, 1825.500000) rotate(-45.000000) translate(-928.500000, -1825.500000) translate(892.000000, 1790.000000)">
+                <path d="M70.5,0 L70.5,70" id="Line" sketch:type="MSShapeGroup"></path>
+                <path d="M70,70 L0,70" id="Line-Copy" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/tests/linphone.pro b/tests/linphone.pro
index 22dbf6a7e..063e22312 100644
--- a/tests/linphone.pro
+++ b/tests/linphone.pro
@@ -33,7 +33,6 @@ lupdate_only{
     ui/modules/Linphone/Dialog/*.qml \
     ui/modules/Linphone/Form/*.qml \
     ui/modules/Linphone/Image/*.qml \
-    ui/modules/Linphone/Misc/*.qml \
     ui/modules/Linphone/Popup/*.qml \
     ui/modules/Linphone/Select/*.qml \
     ui/modules/Linphone/Styles/*.qml \
diff --git a/tests/resources.qrc b/tests/resources.qrc
index 0f3011265..8c97b4edf 100644
--- a/tests/resources.qrc
+++ b/tests/resources.qrc
@@ -6,10 +6,12 @@
     <file>imgs/chat.svg</file>
     <file>imgs/collapse.svg</file>
     <file>imgs/conference.svg</file>
+    <file>imgs/contacts_list.svg</file>
     <file>imgs/contact.svg</file>
     <file>imgs/delete.svg</file>
     <file>imgs/hangup.svg</file>
     <file>imgs/history.svg</file>
+    <file>imgs/home.svg</file>
     <file>imgs/incoming_call.svg</file>
     <file>imgs/led_absent.svg</file>
     <file>imgs/led_connected.svg</file>
@@ -18,6 +20,7 @@
     <file>imgs/linphone.png</file>
     <file>imgs/lost_incoming_call.svg</file>
     <file>imgs/lost_outgoing_call.svg</file>
+    <file>imgs/right_arrow.svg</file>
     <file>imgs/valid.svg</file>
     <file>languages/en.qm</file>
     <file>languages/fr.qm</file>
@@ -47,7 +50,7 @@
     <file>ui/modules/Linphone/Form/TransparentComboBox.qml</file>
     <file>ui/modules/Linphone/Image/Icon.qml</file>
     <file>ui/modules/Linphone/InvertedMouseArea.qml</file>
-    <file>ui/modules/Linphone/Misc/MenuEntry.qml</file>
+    <file>ui/modules/Linphone/Menu.qml</file>
     <file>ui/modules/Linphone/Popup/DropDownMenu.qml</file>
     <file>ui/modules/Linphone/Popup/PopupShadow.qml</file>
     <file>ui/modules/Linphone/qmldir</file>
diff --git a/tests/ui/modules/Linphone/Menu.qml b/tests/ui/modules/Linphone/Menu.qml
new file mode 100644
index 000000000..eda31fb49
--- /dev/null
+++ b/tests/ui/modules/Linphone/Menu.qml
@@ -0,0 +1,85 @@
+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Linphone 1.0
+
+// ===================================================================
+// Responsive flat menu with visual indicators.
+// ===================================================================
+
+ColumnLayout {
+    id: item
+
+    property int entryHeight
+    property int entryWidth
+    property variant entries
+
+    property int _selectedEntry: 0
+
+    signal entrySelected (int entry)
+
+    spacing: 2
+
+    Repeater {
+        model: entries
+
+        Rectangle {
+            color: _selectedEntry === index
+                ? '#434343'
+                : (mouseArea.pressed
+                   ? '#FE5E00'
+                   : (mouseArea.containsMouse
+                      ? '#707070'
+                      : '#8E8E8E'
+                     )
+                  )
+            height: item.entryHeight
+            width: item.entryWidth
+
+            RowLayout {
+                anchors.left: parent.left
+                anchors.leftMargin: 20
+                anchors.right: parent.right
+                anchors.rightMargin: 20
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 18
+
+                Icon {
+                    Layout.preferredHeight: 24
+                    Layout.preferredWidth: 24
+                    icon: modelData.icon
+                }
+
+                Text {
+                    Layout.fillWidth: true
+                    color: '#FFFFFF'
+                    font.pointSize: 13
+                    height: parent.height
+                    text: modelData.entryName
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                Icon {
+                    Layout.alignment: Qt.AlignRight
+                    Layout.preferredHeight: 12
+                    Layout.preferredWidth: 12
+                    icon: _selectedEntry === index ? 'right_arrow' : ''
+                }
+            }
+
+            MouseArea {
+                id: mouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onClicked: {
+                    if (_selectedEntry !== index) {
+                        _selectedEntry = index
+                        entrySelected(index)
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/tests/ui/modules/Linphone/Misc/MenuEntry.qml b/tests/ui/modules/Linphone/Misc/MenuEntry.qml
deleted file mode 100644
index a97240029..000000000
--- a/tests/ui/modules/Linphone/Misc/MenuEntry.qml
+++ /dev/null
@@ -1,39 +0,0 @@
-import QtQuick 2.7
-
-Rectangle {
-    property alias entryName: text.text
-    property bool isSelected
-
-    color: isSelected ? '#434343' : '#8E8E8E'
-
-    Row {
-        anchors.fill: parent
-        anchors.leftMargin: 10
-        anchors.rightMargin: 10
-        spacing: 10
-
-        Image {
-            fillMode: Image.PreserveAspectFit
-            height: parent.height
-            width: 30
-        }
-
-        Text {
-            color: '#FFFFFF'
-            font.pointSize: 13
-            height: parent.height
-            id: text
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        Image {
-            fillMode: Image.PreserveAspectFit
-            height: parent.height
-        }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: { } // TODO.
-    }
-}
diff --git a/tests/ui/modules/Linphone/qmldir b/tests/ui/modules/Linphone/qmldir
index a763ced38..e6ab51e54 100644
--- a/tests/ui/modules/Linphone/qmldir
+++ b/tests/ui/modules/Linphone/qmldir
@@ -40,8 +40,8 @@ Icon                 1.0 Image/Icon.qml
 # InvertedMouseArea
 InvertedMouseArea    1.0 InvertedMouseArea.qml
 
-# Misc
-MenuEntry            1.0 Misc/MenuEntry.qml
+# Menu
+Menu                 1.0 Menu.qml
 
 # Popup
 DropDownMenu         1.0 Popup/DropDownMenu.qml
diff --git a/tests/ui/views/MainWindow/MainWindow.qml b/tests/ui/views/MainWindow/MainWindow.qml
index c82d88930..bbfaf106d 100644
--- a/tests/ui/views/MainWindow/MainWindow.qml
+++ b/tests/ui/views/MainWindow/MainWindow.qml
@@ -93,18 +93,21 @@ ApplicationWindow {
             Layout.preferredWidth: 250
             spacing: 0
 
-            MenuEntry {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 50
-                entryName: qsTr('homeEntry')
-            }
+            Menu {
+                entryHeight: 50
+                entryWidth: parent.width
 
-            Item { Layout.preferredHeight: 2 }
+                entries: [{
+                    entryName: qsTr('homeEntry'),
+                    icon: 'home'
+                }, {
+                    entryName: qsTr('contactsEntry'),
+                    icon: 'contacts_list'
+                }]
 
-            MenuEntry {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 50
-                entryName: qsTr('contactsEntry')
+                onEntrySelected: {
+                    console.log('entry', entry)
+                }
             }
 
             // History.