feat(Contact): use style file

2026-01-30 10:29:24 +00:00 · 2016-09-29 14:31:16 +02:00 · 2016-09-29 14:31:16 +02:00 · dc38da1d6e
commit dc38da1d6e
parent 24ee1aa938
16 changed files with 272 additions and 285 deletions
--- a/tests/linphone.pro
+++ b/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 \
--- a/tests/resources.qrc
+++ b/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>
--- a/tests/ui/modules/Linphone/Collapse.qml
+++ b/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()
--- a/tests/ui/modules/Linphone/Contact/Avatar.qml
+++ b/tests/ui/modules/Linphone/Contact/Avatar.qml
@ -1,64 +1,69 @@
 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

-    // Image mask. (Circle)
-    Rectangle {
-        anchors.fill: parent
-        color: '#8F8F8F'
-        id: mask
-        radius: 50
+  function _computeInitials () {
+    var spaceIndex = username.indexOf(' ')
+    var firstLetter = username.charAt(0)
+
+    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
+  }
 }
--- a/tests/ui/modules/Linphone/Contact/Contact.qml
+++ b/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
+  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

-    id: contact
-    height: 50
+  height: ContactStyle.height

-    RowLayout {
-        anchors.fill: parent
-        anchors.leftMargin: 14
-        anchors.rightMargin: 14
-        spacing: 14
+  RowLayout {
+    anchors.fill: parent
+    anchors.leftMargin: ContactStyle.leftMargin
+    anchors.rightMargin: ContactStyle.rightMargin
+    spacing: ContactStyle.spacing

-        Avatar {
-            Layout.preferredHeight: 32
-            Layout.preferredWidth: 32
-            id: avatar
-            username: contact.username
-        }
+    Avatar {
+      id: avatar

-        ContactDescription {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            id: contactDescription
-            username: contact.username
-        }
-
-        ActionBar {
-            Layout.preferredHeight: 32
-            id: actionBar
-        }
+      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
+    }
+  }
 }
--- a/tests/ui/modules/Linphone/Contact/ContactDescription.qml
+++ b/tests/ui/modules/Linphone/Contact/ContactDescription.qml
@ -1,30 +1,35 @@
 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 {
-        clip: true
-        color: '#5A585B'
-        font.pointSize: 11
-        font.bold: true
-        height: parent.height / 2
-        id: username
-        verticalAlignment: Text.AlignBottom
-        width: parent.width
-    }
+  // Username.
+  Text {
+    id: username

-    // Sip address.
-    Text {
-        clip: true
-        color: '#5A585B'
-        height: parent.height / 2
-        id: sipAddress
-        verticalAlignment: Text.AlignTop
-        width: parent.width
-    }
+    clip: true
+    color: ContactDescriptionStyle.username.color
+    font.bold: true
+    font.pointSize: ContactDescriptionStyle.username.fontSize
+    height: parent.height / 2
+    verticalAlignment: Text.AlignBottom
+    width: parent.width
+  }
+
+  // Sip address.
+  Text {
+    id: sipAddress
+
+    clip: true
+    color: ContactDescriptionStyle.sipAddress.color
+    font.pointSize: ContactDescriptionStyle.sipAddress.fontSize
+    height: parent.height / 2
+    verticalAlignment: Text.AlignTop
+    width: parent.width
+  }
 }
--- a/tests/ui/modules/Linphone/Form/ListForm.qml
+++ b/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('')
    }
--- a/tests/ui/modules/Linphone/Menu.qml
+++ b/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'
            : ''
        }
      }
--- a/tests/ui/modules/Linphone/Styles/CollapseStyle.qml
+++ b/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.
--- a/tests/ui/modules/Linphone/Styles/Form/ListFormStyle.qml
+++ b/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'

--- a/tests/ui/modules/Linphone/Styles/MenuStyle.qml
+++ b/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
--- a/tests/ui/modules/Linphone/Styles/TimelineStyle.qml
+++ b/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 {
--- a/tests/ui/modules/Linphone/Styles/qmldir
+++ b/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
--- a/tests/ui/modules/Linphone/Timeline.qml
+++ b/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
    }

--- a/tests/ui/views/MainWindow/MainWindow.qml
+++ b/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'
+    }
+  }
 }
--- a/tests/ui/views/ManageAccounts.qml
+++ b/tests/ui/views/ManageAccounts.qml
@ -15,92 +15,65 @@ DialogPlus {
    onClicked: exit(0)
  }

-  Item {
+  // TODO: Compute list max.
+  ScrollableListView {
+    id: accounts
+
    anchors.fill: parent
+    model: model1 // TMP

-    // TODO: Compute list max.
-    ScrollableListView {
-      id: accounts
+    delegate: Item {
+      function isDefaultAccount () {
+        return accounts.currentIndex === index
+      }

-      anchors.fill: parent
+      height: 34
+      width: parent.width

-      // TODO: Remove, use C++ model instead.
-      model: model1
+      Rectangle {
+        anchors.fill: parent
+        color: isDefaultAccount() ? '#EAEAEA' : 'transparent'

-      delegate: Item {
-        function isDefaultAccount () {
-          return accounts.currentIndex === index
-        }
-
-        height: 34
-        width: parent.width
-
-        Rectangle {
+        RowLayout {
          anchors.fill: parent
-          color: isDefaultAccount() ? '#EAEAEA' : 'transparent'
-          id: accountLine
+          anchors.leftMargin: 15
+          anchors.rightMargin: 15
+          spacing: 15

-          RowLayout {
-            anchors.fill: parent
-            spacing: 15
-            anchors.leftMargin: 15
-            anchors.rightMargin: 15
+          // Is default account?
+          Icon {
+            Layout.preferredHeight: 20
+            Layout.preferredWidth: 20
+            icon: isDefaultAccount() ? 'valid' : ''
+          }

-            // Default account.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 20
+          // Sip account.
+          Text {
+            Layout.fillWidth: true
+            clip: true
+            color: '#59575A'
+            text: $sipAddress
+            verticalAlignment: Text.AlignVCenter

-              Image {
-                anchors.fill: parent
-                fillMode: Image.PreserveAspectFit
-                source: isDefaultAccount() ? 'qrc:/imgs/valid.svg' : ''
-              }
+            MouseArea {
+              anchors.fill: parent
+              cursorShape: Qt.PointingHandCursor
+              onClicked: accounts.currentIndex = index
            }
+          }

-            // Sip account.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.fillWidth: true
+          // Presence.
+          Icon {
+            Layout.preferredHeight: 20
+            Layout.preferredWidth: 20
+            icon: 'led_' + $presence
+          }

-              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
-
-              Image {
-                anchors.fill: parent
-                fillMode: Image.PreserveAspectFit
-                source: 'qrc:/imgs/led_' + presence + '.svg'
-              }
-            }
-
-            // Update presence.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 160
-
-              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'
    }
  }