feat(Contact): use style file

tests/linphone.pro

@@ -36,6 +36,7 @@ lupdate_only{
     ui/modules/Linphone/Popup/*.qml \
     ui/modules/Linphone/Select/*.qml \
     ui/modules/Linphone/Styles/*.qml \
+    ui/modules/Linphone/Styles/Contact/*.qml \
     ui/modules/Linphone/Styles/Form/*.qml \
     ui/modules/Linphone/View/*.qml \
     ui/views/*.qml \

tests/resources.qrc

@@ -60,6 +60,9 @@
     <file>ui/modules/Linphone/SearchBox.qml</file>
     <file>ui/modules/Linphone/Select/SelectContact.qml</file>
     <file>ui/modules/Linphone/Styles/CollapseStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Contact/AvatarStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Contact/ContactDescriptionStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/Contact/ContactStyle.qml</file>
     <file>ui/modules/Linphone/Styles/DialogStyle.qml</file>
     <file>ui/modules/Linphone/Styles/ForceScrollBarStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Form/AbstractTextButtonStyle.qml</file>

tests/ui/modules/Linphone/Collapse.qml

@@ -26,7 +26,7 @@ Item {
 
     anchors.centerIn: parent
     background: CollapseStyle.background
-    icon: CollapseStyle.icon
+    icon: 'collapse'
     iconSize: CollapseStyle.iconSize
 
     onClicked: collapse()

tests/ui/modules/Linphone/Contact/Avatar.qml

 import QtQuick 2.7
 import QtGraphicalEffects 1.0
 
+import Linphone 1.0
+import Linphone.Styles 1.0
+
 // ===================================================================
 
 Item {
@@ -8,19 +11,7 @@ Item {
   property string presence
   property string username
 
-    // Image mask. (Circle)
-    Rectangle {
-        anchors.fill: parent
-        color: '#8F8F8F'
-        id: mask
-        radius: 50
-    }
-
-    // Initials.
-    Text {
-        anchors.centerIn: parent
-        color: '#FFFFFF'
-        text: {
+  function _computeInitials () {
     var spaceIndex = username.indexOf(' ')
     var firstLetter = username.charAt(0)
 
@@ -30,6 +21,22 @@ Item {
 
     return firstLetter + username.charAt(spaceIndex + 1)
   }
+
+  // Image mask. (Circle)
+  Rectangle {
+    id: mask
+
+    anchors.fill: parent
+    color: AvatarStyle.mask.color
+    radius: AvatarStyle.mask.radius
+  }
+
+  // Initials.
+  Text {
+    anchors.centerIn: parent
+    color: AvatarStyle.initials.color
+    font.pointSize: AvatarStyle.initials.fontSize
+    text: _computeInitials()
   }
 
   Image {
@@ -50,14 +57,12 @@ Item {
   }
 
   // Presence.
-    Image {
+  Icon {
     anchors.bottom: parent.bottom
     anchors.right: parent.right
-        fillMode: Image.PreserveAspectFit
     height: parent.height / 3
-        id: presenceImage
-        source: presence
-            ? 'qrc:/imgs/led_' + presence + '.svg'
+    icon: presence
+      ? 'led_' + presence
       : ''
     width: parent.width / 3
   }

tests/ui/modules/Linphone/Contact/Contact.qml

@@ -2,6 +2,7 @@ import QtQuick 2.7
 import QtQuick.Layouts 1.3
 
 import Linphone 1.0
+import Linphone.Styles 1.0
 
 // ===================================================================
 
@@ -9,35 +10,36 @@ Item {
   property alias actions: actionBar.data
   property alias image: avatar.image
   property alias presence: avatar.presence
-    property alias sipAddress: contactDescription.sipAddress
-    property string username
+  property alias sipAddress: description.sipAddress
+  property alias username: avatar.username
 
-    id: contact
-    height: 50
+  height: ContactStyle.height
 
   RowLayout {
     anchors.fill: parent
-        anchors.leftMargin: 14
-        anchors.rightMargin: 14
-        spacing: 14
+    anchors.leftMargin: ContactStyle.leftMargin
+    anchors.rightMargin: ContactStyle.rightMargin
+    spacing: ContactStyle.spacing
 
     Avatar {
-            Layout.preferredHeight: 32
-            Layout.preferredWidth: 32
       id: avatar
-            username: contact.username
+
+      Layout.preferredHeight: ContactStyle.contentHeight
+      Layout.preferredWidth: ContactStyle.contentHeight
     }
 
     ContactDescription {
+      id: description
+
       Layout.fillHeight: true
       Layout.fillWidth: true
-            id: contactDescription
-            username: contact.username
+      username: avatar.username
     }
 
     ActionBar {
-            Layout.preferredHeight: 32
       id: actionBar
+
+      Layout.preferredHeight: ContactStyle.contentHeight
     }
   }
 }

tests/ui/modules/Linphone/Contact/ContactDescription.qml

 import QtQuick 2.7
 
+import Linphone.Styles 1.0
+
 // ===================================================================
 
 Column {
@@ -8,22 +10,25 @@ Column {
 
   // Username.
   Text {
+    id: username
+
     clip: true
-        color: '#5A585B'
-        font.pointSize: 11
+    color: ContactDescriptionStyle.username.color
     font.bold: true
+    font.pointSize: ContactDescriptionStyle.username.fontSize
     height: parent.height / 2
-        id: username
     verticalAlignment: Text.AlignBottom
     width: parent.width
   }
 
   // Sip address.
   Text {
+    id: sipAddress
+
     clip: true
-        color: '#5A585B'
+    color: ContactDescriptionStyle.sipAddress.color
+    font.pointSize: ContactDescriptionStyle.sipAddress.fontSize
     height: parent.height / 2
-        id: sipAddress
     verticalAlignment: Text.AlignTop
     width: parent.width
   }

tests/ui/modules/Linphone/Form/ListForm.qml

@@ -42,7 +42,7 @@ RowLayout {
     ActionButton {
       Layout.preferredHeight: ListFormStyle.titleArea.iconSize
       Layout.preferredWidth: ListFormStyle.titleArea.iconSize
-      icon: ListFormStyle.titleArea.icon
+      icon: 'add_field'
 
       onClicked: _addValue('')
     }

tests/ui/modules/Linphone/Menu.qml

@@ -64,7 +64,7 @@ ColumnLayout {
           Layout.preferredHeight: MenuStyle.entry.selectionIconSize
           Layout.preferredWidth: MenuStyle.entry.selectionIconSize
           icon: _selectedEntry === index
-            ? MenuStyle.entry.selectionIcon
+            ? 'right_arrow'
             : ''
         }
       }

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

@@ -5,8 +5,6 @@ QtObject {
   property int animationDuration: 200
   property int iconSize: 32
 
-  property string icon: 'collapse'
-
   property Rectangle background: Rectangle {
     // Do not use Constants.colors.
     // Collapse uses an icon without background color.

tests/ui/modules/Linphone/Styles/Form/ListFormStyle.qml

@@ -32,8 +32,6 @@ QtObject {
     property int spacing: 10
     property int iconSize: 16
 
-    property string icon: 'add_field'
-
     property QtObject text: QtObject {
       property color color: '#000000'
 

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

@@ -13,8 +13,6 @@ QtObject {
     property int selectionIconSize: 12
     property int spacing: 18
 
-    property string selectionIcon: 'right_arrow'
-
     property QtObject color: QtObject {
       property color normal: Colors.g
       property color hovered: Colors.h

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

@@ -13,8 +13,6 @@ QtObject {
     property int leftMargin: 18
     property int spacing: 16
     property int topMargin: 10
-
-    property string icon: 'history'
   }
 
   property QtObject separator: QtObject {

tests/ui/modules/Linphone/Styles/qmldir

@@ -11,6 +11,10 @@ singleton PopupStyle               1.0 PopupStyle.qml
 singleton SearchBoxStyle           1.0 SearchBoxStyle.qml
 singleton TimelineStyle            1.0 TimelineStyle.qml
 
+singleton AvatarStyle              1.0 Contact/AvatarStyle.qml
+singleton ContactDescriptionStyle  1.0 Contact/ContactDescriptionStyle.qml
+singleton ContactStyle             1.0 Contact/ContactStyle.qml
+
 singleton AbstractTextButtonStyle  1.0 Form/AbstractTextButtonStyle.qml
 singleton ActionBarStyle           1.0 Form/ActionBarStyle.qml
 singleton CheckBoxTextStyle        1.0 Form/CheckBoxTextStyle.qml

tests/ui/modules/Linphone/Timeline.qml

@@ -16,7 +16,7 @@ ColumnLayout {
     spacing: TimelineStyle.legend.spacing
 
     Icon {
-      icon: TimelineStyle.legend.icon
+      icon: 'history'
       iconSize: TimelineStyle.legend.iconSize
     }
 

tests/ui/views/MainWindow/MainWindow.qml

@@ -87,90 +87,7 @@ ApplicationWindow {
           content.enabled = false
         }
 
-        model:  ListModel {
-          id: model
-
-          ListElement {
-            $presence: 'connected'
-            $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'connected'
-            $sipAddress: 'toto.lala.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'disconnected'
-            $sipAddress: 'machin.truc.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'absent'
-            $sipAddress: 'hey.listen.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'do_not_disturb'
-            $sipAddress: 'valentin.cognito.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'do_not_disturb'
-            $sipAddress: 'charles.henri.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'disconnected'
-            $sipAddress: 'yesyes.nono.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'connected'
-            $sipAddress: 'nsa.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'connected'
-            $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'connected'
-            $sipAddress: 'toto.lala.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'disconnected'
-            $sipAddress: 'machin.truc.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'absent'
-            $sipAddress: 'hey.listen.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'do_not_disturb'
-            $sipAddress: 'valentin.cognito.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'do_not_disturb'
-            $sipAddress: 'charles.henri.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'disconnected'
-            $sipAddress: 'yesyes.nono.sip.linphone.org'
-            $username: 'Toto'
-          }
-          ListElement {
-            $presence: 'connected'
-            $sipAddress: 'nsa.sip.linphone.org'
-            $username: 'Toto'
-          }
-        }
+        model: model1
 
         delegate: Contact {
           presence: $presence
@@ -317,4 +234,89 @@ ApplicationWindow {
       }
     }
   }
+
+  ListModel {
+    id: model1
+
+    ListElement {
+      $presence: 'connected'
+      $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'connected'
+      $sipAddress: 'toto.lala.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'disconnected'
+      $sipAddress: 'machin.truc.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'absent'
+      $sipAddress: 'hey.listen.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'do_not_disturb'
+      $sipAddress: 'valentin.cognito.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'do_not_disturb'
+      $sipAddress: 'charles.henri.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'disconnected'
+      $sipAddress: 'yesyes.nono.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'connected'
+      $sipAddress: 'nsa.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'connected'
+      $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'connected'
+      $sipAddress: 'toto.lala.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'disconnected'
+      $sipAddress: 'machin.truc.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'absent'
+      $sipAddress: 'hey.listen.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'do_not_disturb'
+      $sipAddress: 'valentin.cognito.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'do_not_disturb'
+      $sipAddress: 'charles.henri.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'disconnected'
+      $sipAddress: 'yesyes.nono.sip.linphone.org'
+      $username: 'Toto'
+    }
+    ListElement {
+      $presence: 'connected'
+      $sipAddress: 'nsa.sip.linphone.org'
+      $username: 'Toto'
+    }
+  }
 }

tests/ui/views/ManageAccounts.qml

@@ -15,17 +15,12 @@ DialogPlus {
     onClicked: exit(0)
   }
 
-  Item {
-    anchors.fill: parent
-
   // TODO: Compute list max.
   ScrollableListView {
     id: accounts
 
     anchors.fill: parent
-
-      // TODO: Remove, use C++ model instead.
-      model: model1
+    model: model1 // TMP
 
     delegate: Item {
       function isDefaultAccount () {
@@ -38,36 +33,26 @@ DialogPlus {
       Rectangle {
         anchors.fill: parent
         color: isDefaultAccount() ? '#EAEAEA' : 'transparent'
-          id: accountLine
 
         RowLayout {
           anchors.fill: parent
-            spacing: 15
           anchors.leftMargin: 15
           anchors.rightMargin: 15
+          spacing: 15
 
-            // Default account.
-            Item {
-              Layout.fillHeight: parent.height
+          // Is default account?
+          Icon {
+            Layout.preferredHeight: 20
             Layout.preferredWidth: 20
-
-              Image {
-                anchors.fill: parent
-                fillMode: Image.PreserveAspectFit
-                source: isDefaultAccount() ? 'qrc:/imgs/valid.svg' : ''
-              }
+            icon: isDefaultAccount() ? 'valid' : ''
           }
 
           // Sip account.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.fillWidth: true
-
           Text {
-                anchors.fill: parent
+            Layout.fillWidth: true
             clip: true
             color: '#59575A'
-                text: sipAddress;
+            text: $sipAddress
             verticalAlignment: Text.AlignVCenter
 
             MouseArea {
@@ -76,36 +61,24 @@ DialogPlus {
               onClicked: accounts.currentIndex = index
             }
           }
-            }
 
           // Presence.
-            Item {
-              Layout.fillHeight: parent.height
+          Icon {
+            Layout.preferredHeight: 20
             Layout.preferredWidth: 20
-
-              Image {
-                anchors.fill: parent
-                fillMode: Image.PreserveAspectFit
-                source: 'qrc:/imgs/led_' + presence + '.svg'
-              }
+            icon: 'led_' + $presence
           }
 
           // Update presence.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 160
-
           TransparentComboBox {
-                anchors.fill: parent
-                model: model2
+            Layout.preferredWidth: 160
+            model: model2 // TMP.
             textRole: 'key'
           }
         }
       }
     }
   }
-    }
-  }
 
   // =================================================================
   // TMP
@@ -115,36 +88,36 @@ DialogPlus {
     id: model1
 
     ListElement {
-      presence: 'connected'
-      sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
+      $presence: 'connected'
+      $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
     }
     ListElement {
-      presence: 'connected'
-      sipAddress: 'toto.lala.sip.linphone.org'
+      $presence: 'connected'
+      $sipAddress: 'toto.lala.sip.linphone.org'
     }
     ListElement {
-      presence: 'disconnected'
-      sipAddress: 'machin.truc.sip.linphone.org'
+      $presence: 'disconnected'
+      $sipAddress: 'machin.truc.sip.linphone.org'
     }
     ListElement {
-      presence: 'absent'
-      sipAddress: 'hey.listen.sip.linphone.org'
+      $presence: 'absent'
+      $sipAddress: 'hey.listen.sip.linphone.org'
     }
     ListElement {
-      presence: 'do_not_disturb'
-      sipAddress: 'valentin.cognito.sip.linphone.org'
+      $presence: 'do_not_disturb'
+      $sipAddress: 'valentin.cognito.sip.linphone.org'
     }
     ListElement {
-      presence: 'do_not_disturb'
-      sipAddress: 'charles.henri.sip.linphone.org'
+      $presence: 'do_not_disturb'
+      $sipAddress: 'charles.henri.sip.linphone.org'
     }
     ListElement {
-      presence: 'disconnected'
-      sipAddress: 'yesyes.nono.sip.linphone.org'
+      $presence: 'disconnected'
+      $sipAddress: 'yesyes.nono.sip.linphone.org'
     }
     ListElement {
-      presence: 'connected'
-      sipAddress: 'nsa.sip.linphone.org'
+      $presence: 'connected'
+      $sipAddress: 'nsa.sip.linphone.org'
     }
   }