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 {
-    property alias image: imageToFilter.source
-    property string presence
-    property string username
+  property alias image: imageToFilter.source
+  property string presence
+  property string username
+
+  function _computeInitials () {
+    var spaceIndex = username.indexOf(' ')
+    var firstLetter = username.charAt(0)
 
-    // Image mask. (Circle)
-    Rectangle {
-        anchors.fill: parent
-        color: '#8F8F8F'
-        id: mask
-        radius: 50
+    if (spaceIndex === -1) {
+      return firstLetter
     }
 
-    // Initials.
-    Text {
-        anchors.centerIn: parent
-        color: '#FFFFFF'
-        text: {
-            var spaceIndex = username.indexOf(' ')
-            var firstLetter = username.charAt(0)
+    return firstLetter + username.charAt(spaceIndex + 1)
+  }
 
-            if (spaceIndex === -1) {
-                return firstLetter
-            }
+  // Image mask. (Circle)
+  Rectangle {
+    id: mask
 
-            return firstLetter + username.charAt(spaceIndex + 1)
-        }
-    }
+    anchors.fill: parent
+    color: AvatarStyle.mask.color
+    radius: AvatarStyle.mask.radius
+  }
 
-    Image {
-        anchors.fill: parent
-        id: imageToFilter
-        fillMode: Image.PreserveAspectFit
+  // Initials.
+  Text {
+    anchors.centerIn: parent
+    color: AvatarStyle.initials.color
+    font.pointSize: AvatarStyle.initials.fontSize
+    text: _computeInitials()
+  }
 
-        // Image must be invisible.
-        // The only visible image is the OpacityMask!
-        visible: false
-    }
+  Image {
+    anchors.fill: parent
+    id: imageToFilter
+    fillMode: Image.PreserveAspectFit
 
-    // Avatar.
-    OpacityMask {
-        anchors.fill: imageToFilter
-        maskSource: mask
-        source: imageToFilter
-    }
+    // Image must be invisible.
+    // The only visible image is the OpacityMask!
+    visible: false
+  }
 
-    // Presence.
-    Image {
-        anchors.bottom: parent.bottom
-        anchors.right: parent.right
-        fillMode: Image.PreserveAspectFit
-        height: parent.height / 3
-        id: presenceImage
-        source: presence
-            ? 'qrc:/imgs/led_' + presence + '.svg'
-            : ''
-        width: parent.width / 3
-    }
+  // Avatar.
+  OpacityMask {
+    anchors.fill: imageToFilter
+    maskSource: mask
+    source: imageToFilter
+  }
+
+  // Presence.
+  Icon {
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+    height: parent.height / 3
+    icon: presence
+      ? 'led_' + presence
+      : ''
+    width: parent.width / 3
+  }
 }

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

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

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

 import QtQuick 2.7
 
+import Linphone.Styles 1.0
+
 // ===================================================================
 
 Column {
-    property alias sipAddress: sipAddress.text
-    property alias username: username.text
+  property alias sipAddress: sipAddress.text
+  property alias username: username.text
+
+  // Username.
+  Text {
+    id: username
+
+    clip: true
+    color: ContactDescriptionStyle.username.color
+    font.bold: true
+    font.pointSize: ContactDescriptionStyle.username.fontSize
+    height: parent.height / 2
+    verticalAlignment: Text.AlignBottom
+    width: parent.width
+  }
 
-    // Username.
-    Text {
-        clip: true
-        color: '#5A585B'
-        font.pointSize: 11
-        font.bold: true
-        height: parent.height / 2
-        id: username
-        verticalAlignment: Text.AlignBottom
-        width: parent.width
-    }
+  // Sip address.
+  Text {
+    id: sipAddress
 
-    // Sip address.
-    Text {
-        clip: true
-        color: '#5A585B'
-        height: parent.height / 2
-        id: sipAddress
-        verticalAlignment: Text.AlignTop
-        width: parent.width
-    }
+    clip: true
+    color: ContactDescriptionStyle.sipAddress.color
+    font.pointSize: ContactDescriptionStyle.sipAddress.fontSize
+    height: parent.height / 2
+    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,92 +15,65 @@ DialogPlus {
     onClicked: exit(0)
   }
 
-  Item {
-    anchors.fill: parent
+  // TODO: Compute list max.
+  ScrollableListView {
+    id: accounts
 
-    // TODO: Compute list max.
-    ScrollableListView {
-      id: accounts
+    anchors.fill: parent
+    model: model1 // TMP
 
-      anchors.fill: parent
+    delegate: Item {
+      function isDefaultAccount () {
+        return accounts.currentIndex === index
+      }
 
-      // TODO: Remove, use C++ model instead.
-      model: model1
+      height: 34
+      width: parent.width
 
-      delegate: Item {
-        function isDefaultAccount () {
-          return accounts.currentIndex === index
-        }
+      Rectangle {
+        anchors.fill: parent
+        color: isDefaultAccount() ? '#EAEAEA' : 'transparent'
 
-        height: 34
-        width: parent.width
-
-        Rectangle {
+        RowLayout {
           anchors.fill: parent
-          color: isDefaultAccount() ? '#EAEAEA' : 'transparent'
-          id: accountLine
-
-          RowLayout {
-            anchors.fill: parent
-            spacing: 15
-            anchors.leftMargin: 15
-            anchors.rightMargin: 15
-
-            // Default account.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 20
-
-              Image {
-                anchors.fill: parent
-                fillMode: Image.PreserveAspectFit
-                source: isDefaultAccount() ? 'qrc:/imgs/valid.svg' : ''
-              }
-            }
-
-            // Sip account.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.fillWidth: true
-
-              Text {
-                anchors.fill: parent
-                clip: true
-                color: '#59575A'
-                text: sipAddress;
-                verticalAlignment: Text.AlignVCenter
-
-                MouseArea {
-                  anchors.fill: parent
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: accounts.currentIndex = index
-                }
-              }
-            }
-
-            // Presence.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 20
+          anchors.leftMargin: 15
+          anchors.rightMargin: 15
+          spacing: 15
+
+          // Is default account?
+          Icon {
+            Layout.preferredHeight: 20
+            Layout.preferredWidth: 20
+            icon: isDefaultAccount() ? 'valid' : ''
+          }
 
-              Image {
-                anchors.fill: parent
-                fillMode: Image.PreserveAspectFit
-                source: 'qrc:/imgs/led_' + presence + '.svg'
-              }
+          // Sip account.
+          Text {
+            Layout.fillWidth: true
+            clip: true
+            color: '#59575A'
+            text: $sipAddress
+            verticalAlignment: Text.AlignVCenter
+
+            MouseArea {
+              anchors.fill: parent
+              cursorShape: Qt.PointingHandCursor
+              onClicked: accounts.currentIndex = index
             }
+          }
 
-            // Update presence.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 160
+          // Presence.
+          Icon {
+            Layout.preferredHeight: 20
+            Layout.preferredWidth: 20
+            icon: 'led_' + $presence
+          }
 
-              TransparentComboBox {
-                anchors.fill: parent
-                model: model2
-                textRole: 'key'
-              }
-            }
+          // Update presence.
+          TransparentComboBox {
+            Layout.preferredWidth: 160
+            model: model2 // TMP.
+            textRole: 'key'
           }
         }
       }
@@ -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'
     }
   }