feat(MainWindow/Contacts): use new style

tests/ui/views/App/MainWindow/Contacts.qml

@@ -10,6 +10,31 @@ import App.Styles 1.0
 // ===================================================================
 
 ColumnLayout {
+  function _filter (text) {
+    Utils.assert(
+      contacts.setFilterFixedString != null,
+      '`contacts.setFilterFixedString` must be defined.'
+    )
+
+    Utils.assert(
+      contacts.invalidate != null,
+      '`contacts.invalidate` must be defined.'
+    )
+
+    contacts.setFilterFixedString(text)
+    contacts.invalidate()
+  }
+
+  function _removeContact (contact) {
+    Utils.openConfirmDialog(contact, {
+      descriptionText: qsTr('removeContactDescription'),
+      exitHandler: function (status) {
+        console.log('remove contact', status)
+      },
+      title: qsTr('removeContactTitle')
+    })
+  }
+
   spacing: 0
 
   // -----------------------------------------------------------------
@@ -20,24 +45,22 @@ ColumnLayout {
     Layout.fillWidth: true
     Layout.preferredHeight: ContactsStyle.bar.height
 
-    color: ContactsStyle.bar.color
+    color: ContactsStyle.bar.backgroundColor
 
     RowLayout {
-      anchors.fill: parent
-      anchors.leftMargin: ContactsStyle.bar.leftMargin
-      anchors.rightMargin: ContactsStyle.bar.rightMargin
-
-      spacing: 20
+      anchors {
+        fill: parent
+        leftMargin: ContactsStyle.bar.leftMargin
+        rightMargin: ContactsStyle.bar.rightMargin
+      }
+      spacing: ContactsStyle.spacing
 
       TextField {
         Layout.fillWidth: true
         icon: 'filter'
         placeholderText: qsTr('searchContactPlaceholder')
 
-        onTextChanged: {
-          contacts.setFilterFixedString(text)
-          contacts.invalidate()
-        }
+        onTextChanged: _filter(text)
       }
 
       ExclusiveButtons {
@@ -67,115 +90,134 @@ ColumnLayout {
 
     ScrollableListView {
       anchors.fill: parent
-      spacing: ContactsStyle.contacts.spacing
+      spacing: 0
 
       model: ContactsListModel {
         id: contacts
       }
 
-      delegate: Rectangle {
-        id: contact
-
-        color: '#FFFFFF'
-        height: 50
+      delegate: Borders {
+        borderColor: ContactsStyle.contact.border.color
+        bottomWidth: ContactsStyle.contact.border.width
+        height: ContactsStyle.contact.height
         width: parent.width
 
-        MouseArea {
-          anchors.fill: parent
-          hoverEnabled: true
-
-          onEntered: contact.state = 'hover'
-          onExited: contact.state = ''
-        }
+        Rectangle {
+          id: contact
 
-        Item {
-          anchors.verticalCenter: parent.verticalCenter
-          height: 30
-          width: parent.width
+          anchors.fill: parent
+          color: ContactsStyle.contact.backgroundColor.normal
 
           RowLayout {
-            anchors.fill: parent
-            anchors.leftMargin: 15
-            anchors.rightMargin: 25
-            spacing: 15
+            anchors {
+              fill: parent
+              leftMargin: ContactsStyle.contact.leftMargin
+              rightMargin: ContactsStyle.contact.rightMargin
+            }
+            spacing: ContactsStyle.contact.spacing
 
             // Avatar.
             Avatar {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 30
+              Layout.preferredHeight: ContactsStyle.contact.avatarSize
+              Layout.preferredWidth: ContactsStyle.contact.avatarSize
               image: $contact.avatar
               username: $contact.username
             }
 
-            // Presence.
-            Item {
-              Layout.fillHeight: parent.height
-              Layout.preferredWidth: 20
-
-              PresenceLevel {
-                anchors.fill: parent
-                level: $contact.presenceLevel
-              }
-            }
-
             // Username.
             Text {
-              Layout.fillHeight: parent.height
-              Layout.fillWidth: true
-              clip: true
-              color: '#5A585B'
+              Layout.preferredWidth: ContactsStyle.contact.username.width
+              color: ContactsStyle.contact.username.color
+              elide: Text.ElideRight
               font.bold: true
               text: $contact.username
-              verticalAlignment: Text.AlignVCenter
             }
 
-            // Actions.
-            Row {
-              id: actions
-
+            // Container.
+            Item {
+              Layout.fillWidth: true
               Layout.fillHeight: true
-              spacing: 50
-              visible: false
 
-              ActionBar {
-                iconSize: parent.height
+              Item {
+                id: container1
 
-                ActionButton {
-                  icon: 'video_call'
-                  onClicked: CallsWindow.show()
+                anchors.fill: parent
+
+                PresenceLevel {
+                  anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                  }
+                  height: ContactsStyle.contact.presenceLevelSize
+                  width: ContactsStyle.contact.presenceLevelSize
+
+                  level: $contact.presenceLevel
                 }
+              }
 
-                ActionButton {
-                  icon: 'call'
-                  onClicked: CallsWindow.show()
+              Item {
+                id: container2
+
+                anchors.fill: parent
+                visible: false
+
+                ActionBar {
+                  anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                  }
+                  iconSize: ContactsStyle.contact.actionButtonsSize
+
+                  ActionButton {
+                    icon: 'video_call'
+                    onClicked: CallsWindow.show()
+                  }
+
+                  ActionButton {
+                    icon: 'call'
+                    onClicked: CallsWindow.show()
+                  }
+
+                  ActionButton {
+                    icon: 'chat'
+                    onClicked: window.setView('Conversation')
+                  }
                 }
 
                 ActionButton {
-                  icon: 'chat'
-                  onClicked: window.setView('Conversation')
+                  anchors {
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                  }
+                  icon: 'delete'
+                  iconSize: ContactsStyle.contact.deleteButtonSize
+
+                  onClicked: _removeContact($contact)
                 }
               }
-
-              ActionButton {
-                iconSize: parent.height
-                icon: 'delete'
-
-                onClicked: Utils.openConfirmDialog(contact, {
-                  descriptionText: qsTr('removeContactDescription'),
-                  exitHandler: function (status) {
-                    console.log('remove contact', status)
-                  },
-                  title: qsTr('removeContactTitle')
-                })
-              }
             }
           }
-        }
 
-        states: State {
-          name: 'hover'
-          PropertyChanges { target: contact; color: '#D1D1D1' }
-          PropertyChanges { target: actions; visible: true }
+          MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+
+            onEntered: contact.state = 'hover'
+            onExited: contact.state = ''
+          }
+
+          // -----------------------------------------------------------
+
+          states: State {
+            name: 'hover'
+
+            PropertyChanges {
+              color: ContactsStyle.contact.backgroundColor.hovered
+              target: contact
+            }
+            PropertyChanges { target: container1; visible: false }
+            PropertyChanges { target: container2; visible: true }
+          }
         }
       }
     }

tests/ui/views/App/Styles/MainWindow/ContactsStyle.qml

@@ -7,15 +7,38 @@ import Common 1.0
 
 QtObject {
   property color backgroundColor: '#FFFFFF'
+  property int spacing: 20
 
   property QtObject bar: QtObject {
-    property color color: '#F3F3F3'
+    property color backgroundColor: '#F3F3F3'
     property int height: 60
     property int leftMargin: 18
     property int rightMargin: 18
   }
 
-  property QtObject contacts: QtObject {
-    property int spacing: 1
+  property QtObject contact: QtObject {
+    property int actionButtonsSize: 36
+    property int avatarSize: 30
+    property int deleteButtonSize: 16
+    property int height: 50
+    property int leftMargin: 15
+    property int presenceLevelSize: 12
+    property int rightMargin: 25
+    property int spacing: 15
+
+    property QtObject backgroundColor: QtObject {
+      property color normal: '#FFFFFF'
+      property color hovered: '#E2E9EF'
+    }
+
+    property QtObject border: QtObject {
+      property color color: '#E8E8E8'
+      property int width: 1
+    }
+
+    property QtObject username: QtObject {
+      property color color: '#4B5964'
+      property int width: 220
+    }
   }
 }