feat(Menu): use style file

tests/resources.qrc

@@ -59,6 +59,7 @@
     <file>ui/modules/Linphone/Styles/CollapseStyle.qml</file>
     <file>ui/modules/Linphone/Styles/DialogStyle.qml</file>
     <file>ui/modules/Linphone/Styles/ForceScrollBarStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/MenuStyle.qml</file>
     <file>ui/modules/Linphone/Styles/PopupStyle.qml</file>
     <file>ui/modules/Linphone/Styles/qmldir</file>
     <file>ui/modules/Linphone/Styles/SearchBoxStyle.qml</file>

tests/ui/modules/Linphone/Constants.qml

@@ -5,13 +5,22 @@ QtObject {
     property int zPopup: 999
     property int zMax: 999999
 
-    // TODO: Mutualize similar colors.
     property QtObject colors: QtObject {
         property string a: 'transparent'
-        property string b: '#5E5E5F'
-        property string c: '#C5C5C5'
-        property string d: '#5A585B'
-        property string e: '#DEDEDE'
-        property string f: '#808080'
+        property string b: '#5E5E5F' // Pressed toolbar.
+        property string c: '#C5C5C5' // Released toolbar.
+
+        property string d: '#5A585B' // Text color.
+
+        property string e: '#DEDEDE' // Timeline separator
+
+        property string f: '#808080' // Popup shadow.
+
+        property string g: '#8E8E8E' // MenuEntry Normal.
+        property string h: '#707070' // MenuEntry Hovered.
+        property string i: '#FE5E00' // MenuEntry Pressed.
+        property string j: '#434343' // MenuEntry Selected.
+
+        property string k: '#FFFFFF' // Text color.
     }
 }

tests/ui/modules/Linphone/Menu.qml

@@ -2,6 +2,7 @@ import QtQuick 2.7
 import QtQuick.Layouts 1.3
 
 import Linphone 1.0
+import Linphone.Styles 1.0
 
 // ===================================================================
 // Responsive flat menu with visual indicators.
@@ -18,19 +19,19 @@ ColumnLayout {
 
     signal entrySelected (int entry)
 
-    spacing: 2
+    spacing: MenuStyle.spacing
 
     Repeater {
         model: entries
 
         Rectangle {
             color: _selectedEntry === index
-                ? '#434343'
+                ? MenuStyle.entry.color.selected
                 : (mouseArea.pressed
-                   ? '#FE5E00'
+                   ? MenuStyle.entry.color.pressed
                    : (mouseArea.containsMouse
-                      ? '#707070'
-                      : '#8E8E8E'
+                      ? MenuStyle.entry.color.hovered
+                      : MenuStyle.entry.color.normal
                      )
                   )
             height: item.entryHeight
@@ -38,22 +39,22 @@ ColumnLayout {
 
             RowLayout {
                 anchors.left: parent.left
-                anchors.leftMargin: 20
+                anchors.leftMargin: MenuStyle.entry.leftMargin
                 anchors.right: parent.right
-                anchors.rightMargin: 20
+                anchors.rightMargin: MenuStyle.entry.rightMargin
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 18
+                spacing: MenuStyle.entry.spacing
 
                 Icon {
-                    Layout.preferredHeight: 24
-                    Layout.preferredWidth: 24
+                    Layout.preferredHeight: MenuStyle.entry.iconSize
+                    Layout.preferredWidth: MenuStyle.entry.iconSize
                     icon: modelData.icon
                 }
 
                 Text {
                     Layout.fillWidth: true
-                    color: '#FFFFFF'
-                    font.pointSize: 13
+                    color: MenuStyle.entry.textColor
+                    font.pointSize: MenuStyle.entry.fontSize
                     height: parent.height
                     text: modelData.entryName
                     verticalAlignment: Text.AlignVCenter
@@ -61,9 +62,11 @@ ColumnLayout {
 
                 Icon {
                     Layout.alignment: Qt.AlignRight
-                    Layout.preferredHeight: 12
-                    Layout.preferredWidth: 12
-                    icon: _selectedEntry === index ? 'right_arrow' : ''
+                    Layout.preferredHeight: MenuStyle.entry.selectionIconSize
+                    Layout.preferredWidth: MenuStyle.entry.selectionIconSize
+                    icon: _selectedEntry === index
+                        ? MenuStyle.entry.selectionIcon
+                        : ''
                 }
             }
 

tests/ui/modules/Linphone/Styles/CollapseStyle.qml

@@ -4,6 +4,7 @@ import QtQuick 2.7
 QtObject {
     property int animationDuration: 200
     property int iconSize: 32
+
     property string icon: 'collapse'
 
     property Rectangle background: Rectangle {

tests/ui/modules/Linphone/Styles/MenuStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Linphone 1.0
+
+QtObject {
+    property int spacing: 2
+
+    property QtObject entry: QtObject {
+        property int fontSize: 13
+        property int iconSize: 24
+        property int leftMargin: 20
+        property int rightMargin: 20
+        property int selectionIconSize: 12
+        property int spacing: 18
+
+        property string selectionIcon: 'right_arrow'
+        property string textColor: Constants.colors.k
+
+        property QtObject color: QtObject {
+            property string normal: Constants.colors.g
+            property string hovered: Constants.colors.h
+            property string pressed: Constants.colors.i
+            property string selected: Constants.colors.j
+        }
+    }
+}

tests/ui/modules/Linphone/Styles/PopupStyle.qml

@@ -6,9 +6,11 @@ import Linphone 1.0
 QtObject {
     property QtObject shadow: QtObject {
         property double radius: 8.0
+
         property int horizontalOffset: 0
         property int samples: 15
         property int verticalOffset: 2
+
         property string color: Constants.colors.f
     }
 }

tests/ui/modules/Linphone/Styles/TimelineStyle.qml

@@ -11,12 +11,14 @@ QtObject {
         property int leftMargin: 18
         property int spacing: 16
         property int topMargin: 10
+
         property string color: Constants.colors.d
         property string icon: 'history'
     }
 
     property QtObject separator: QtObject {
         property int height: 1
+
         property string color: Constants.colors.e
     }
 }

tests/ui/modules/Linphone/Styles/qmldir

@@ -3,9 +3,10 @@
 module Linphone.Style
 
 # Components styles.
-singleton CollapseStyle 1.0 CollapseStyle.qml
-singleton DialogStyle 1.0 DialogStyle.qml
+singleton CollapseStyle       1.0 CollapseStyle.qml
+singleton DialogStyle         1.0 DialogStyle.qml
 singleton ForceScrollBarStyle 1.0 ForceScrollBarStyle.qml
-singleton PopupStyle 1.0 PopupStyle.qml
-singleton SearchBoxStyle 1.0 SearchBoxStyle.qml
-singleton TimelineStyle 1.0 TimelineStyle.qml
+singleton MenuStyle           1.0 MenuStyle.qml
+singleton PopupStyle          1.0 PopupStyle.qml
+singleton SearchBoxStyle      1.0 SearchBoxStyle.qml
+singleton TimelineStyle       1.0 TimelineStyle.qml