feat(views/App/MainWindow/ContactEdit): view in progress, use better lists

tests/assets/images/add_disabled.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>add_disabled</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="add_disabled" stroke="#D0D8DE">
+            <path d="M9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 Z" stroke-linejoin="round"></path>
+            <path d="M9.01666657,6 L9.01666657,11.8333333"></path>
+            <path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/add_hovered.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>add_over</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="add_over" stroke="#4B5964">
+            <path d="M9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 Z" stroke-linejoin="round"></path>
+            <path d="M9.01666657,6 L9.01666657,11.8333333"></path>
+            <path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/add_normal.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>add_default</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="add_default" stroke="#96A6B1">
+            <path d="M9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 Z" stroke-linejoin="round"></path>
+            <path d="M9.01666657,6 L9.01666657,11.8333333"></path>
+            <path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/assets/images/add_pressed.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>add_clic</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="add_clic" stroke="#FF5E00">
+            <path d="M17.5,9 C17.5,13.694125 13.694975,17.5 9,17.5 C4.305875,17.5 0.5,13.694125 0.5,9 C0.5,4.3056625 4.305875,0.5 9,0.5 C13.694975,0.5 17.5,4.3056625 17.5,9 L17.5,9 Z" stroke-linejoin="round"></path>
+            <path d="M9.01666657,6 L9.01666657,11.8333333"></path>
+            <path d="M6.0999999,8.91666667 L11.9333332,8.91666667"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

tests/resources.qrc

 <!DOCTYPE RCC><RCC version="1.0">
   <qresource prefix="/">
+    <file>assets/images/add_disabled.svg</file>
+    <file>assets/images/add_hovered.svg</file>
+    <file>assets/images/add_normal.svg</file>
+    <file>assets/images/add_pressed.svg</file>
     <file>assets/images/attachment_hovered.svg</file>
     <file>assets/images/attachment_normal.svg</file>
     <file>assets/images/attachment_pressed.svg</file>

tests/src/components/contacts/ContactModel.cpp

@@ -31,6 +31,15 @@ QString ContactModel::getUsername () const {
   );
 }
 
+bool ContactModel::setUsername (const QString &username) {
+  if (username.length() == 0)
+    return false;
+
+  return !m_linphone_friend->setName(
+    Utils::qStringToLinphoneString(username)
+  );
+}
+
 QString ContactModel::getAvatar () const {
   // Find desktop avatar.
   list<shared_ptr<belcard::BelCardPhoto> > photos =

tests/src/components/contacts/ContactModel.hpp

@@ -17,6 +17,7 @@ class ContactModel : public QObject {
   Q_PROPERTY(
     QString username
     READ getUsername
+    WRITE setUsername
     NOTIFY contactUpdated
   );
 
@@ -56,6 +57,7 @@ signals:
 
 private:
   QString getUsername () const;
+  bool setUsername (const QString &username);
 
   QString getAvatar () const;
   bool setAvatar (const QString &path);

tests/ui/modules/Common/Form/ActionButton.qml

@@ -7,24 +7,32 @@ import Common 1.0
 // An animated (or not) button with image(s).
 // ===================================================================
 
-Button {
-  id: button
+Item {
+  id: wrappedButton
 
+  property bool enabled: true
   property bool useStates: true
   property int iconSize // Optionnal.
+  readonly property alias hovered: button.hovered
 
   // If `useStates` = true, the used icons are:
   // `icon`_pressed, `icon`_hovered and `icon`_normal.
   property string icon
 
+  signal clicked
+
   // -----------------------------------------------------------------
 
   function _getIcon () {
     if (!useStates) {
-      return button.icon
+      return wrappedButton.icon
+    }
+
+    if (!wrappedButton.enabled) {
+      return wrappedButton.icon + '_disabled'
     }
 
-    return button.icon + (
+    return wrappedButton.icon + (
       button.down
         ? '_pressed'
         : (button.hovered ? '_hovered' : '_normal')
@@ -33,21 +41,28 @@ Button {
 
   // -----------------------------------------------------------------
 
-  background: Rectangle {
-    color: 'transparent'
-  }
-  hoverEnabled: true
-
   height: iconSize || parent.iconSize || parent.height
   width: iconSize || parent.iconSize || parent.height
 
-  Icon {
-    id: icon
+  Button {
+    id: button
 
-    anchors.centerIn: parent
-    icon: _getIcon()
-    iconSize: parent.iconSize || (
-      parent.width > parent.height ? parent.height : parent.width
-    )
+    anchors.fill: parent
+    background: Rectangle {
+      color: 'transparent'
+    }
+    hoverEnabled: true
+
+    onClicked: wrappedButton.enabled && wrappedButton.clicked()
+
+    Icon {
+      id: icon
+
+      anchors.centerIn: parent
+      icon: _getIcon()
+      iconSize: parent.iconSize || (
+        parent.width > parent.height ? parent.height : parent.width
+      )
+    }
   }
 }

tests/ui/modules/Common/Form/ActionSwitch.qml

@@ -4,11 +4,10 @@ import QtQuick 2.7
 
 Item {
   property alias useStates: actionButton.useStates
+  property bool enabled: true
   property int iconSize // Optionnal.
   property string icon
 
-  property bool enabled: true
-
   signal clicked
 
   // -----------------------------------------------------------------

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

@@ -10,15 +10,16 @@ RowLayout {
   id: listForm
 
   property alias model: values.model
+  property alias placeholder: placeholder.text
   property alias title: text.text
-  property string placeholder
+
+  // -----------------------------------------------------------------
 
   function _addValue (value) {
-    if (
-      model.count === 0 ||
-      model.get(model.count - 1).$value.length !== 0
-    ) {
-      model.append({ $value: value })
+    model.append({ $value: value })
+
+    if (value.length === 0) {
+      addButton.enabled = false
     }
   }
 
@@ -28,86 +29,102 @@ RowLayout {
     } else {
       model.set(index, { $value: text })
     }
+
+    addButton.enabled = true
   }
 
+  // -----------------------------------------------------------------
+
   spacing: 0
 
+  // -----------------------------------------------------------------
   // Title area.
+  // -----------------------------------------------------------------
+
   RowLayout {
     Layout.alignment: Qt.AlignTop
     Layout.preferredHeight: ListFormStyle.lineHeight
     spacing: ListFormStyle.titleArea.spacing
 
-    // Button: Add item in list.
     ActionButton {
-      Layout.preferredHeight: ListFormStyle.titleArea.iconSize
-      Layout.preferredWidth: ListFormStyle.titleArea.iconSize
-      icon: 'add_field'
+      id: addButton
+
+      icon: 'add'
+      iconSize: ListFormStyle.titleArea.iconSize
 
       onClicked: _addValue('')
     }
 
-    // Title text.
     Text {
       id: text
 
       Layout.preferredWidth: ListFormStyle.titleArea.text.width
       color: ListFormStyle.titleArea.text.color
-      font.pointSize: ListFormStyle.titleArea.text.fontSize
+      elide: Text.ElideRight
+
+      font {
+        bold: true
+        pointSize: ListFormStyle.titleArea.text.fontSize
+      }
+    }
+  }
+
+  // -----------------------------------------------------------------
+  // Placeholder.
+  // -----------------------------------------------------------------
+
+  Text {
+    id: placeholder
+
+    Layout.fillWidth: true
+    Layout.preferredHeight: ListFormStyle.lineHeight
+    color: ListFormStyle.value.placeholder.color
+
+    font {
+      italic: true
+      pointSize: ListFormStyle.value.placeholder.fontSize
     }
+
+    padding:  ListFormStyle.value.text.padding
+    visible: model.count === 0
+    verticalAlignment: Text.AlignVCenter
   }
 
+  // -----------------------------------------------------------------
   // Values.
+  // -----------------------------------------------------------------
+
   ListView {
     id: values
 
     Layout.fillWidth: true
     Layout.preferredHeight: count * ListFormStyle.lineHeight
     interactive: false
+    visible: count > 0
 
     delegate: Item {
       implicitHeight: textEdit.height
       width: parent.width
 
-      // Background.
       Rectangle {
         color: textEdit.activeFocus
           ? ListFormStyle.value.backgroundColor.focused
           : ListFormStyle.value.backgroundColor.normal
-        implicitHeight: textEdit.height
-        implicitWidth: textEdit.width
-      }
-
-      // Placeholder.
-      Text {
         anchors.fill: textEdit
-        color: ListFormStyle.value.placeholder.color
-
-        font {
-          italic: true
-          pointSize: ListFormStyle.value.placeholder.fontSize
-        }
-
-        padding: textEdit.padding
-        text: textEdit.text.length === 0 && !textEdit.activeFocus
-          ? listForm.placeholder
-          : ''
-        verticalAlignment: Text.AlignVCenter
       }
 
-      // Input.
       TextEdit {
         id: textEdit
 
         color: activeFocus
           ? ListFormStyle.value.text.color.focused
           : ListFormStyle.value.text.color.normal
-        font.bold: !activeFocus
-        height: ListFormStyle.lineHeight
         padding: ListFormStyle.value.text.padding
         selectByMouse: true
         text: $value
         verticalAlignment: TextEdit.AlignVCenter
+
+        height: ListFormStyle.lineHeight
         width: !activeFocus
           ? parent.width
           : contentWidth + padding * 2
@@ -116,15 +133,18 @@ RowLayout {
         Keys.onReturnPressed: focus = false
 
         onEditingFinished: _handleEditionFinished(index, text)
-      }
 
-      // Handle click outside `TextEdit` instance.
-      InvertedMouseArea {
-        enabled: textEdit.activeFocus
-        height: textEdit.height
-        width: textEdit.width
+        InvertedMouseArea {
+          anchors.fill: parent
+          enabled: textEdit.activeFocus
+          onPressed: textEdit.focus = false
+        }
+      }
 
-        onPressed: textEdit.focus = false
+      Component.onCompleted: {
+        if ($value.length === 0) {
+          textEdit.forceActiveFocus()
+        }
       }
     }
   }

tests/ui/modules/Common/Image/RoundedImage.qml

@@ -6,9 +6,9 @@ Item {
   id: item
 
   property alias source: image.source
-  property alias status: image.status // READONLY!!!
   property color backgroundColor: '#00000000'
   property color foregroundColor: '#00000000'
+  readonly property alias status: image.status
 
   Item {
     id: imageContainer

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

@@ -15,7 +15,7 @@ QtObject {
     }
 
     property QtObject placeholder: QtObject {
-      property color color: Colors.d
+      property color color: Colors.w
       property int fontSize: 10
     }
 
@@ -24,18 +24,18 @@ QtObject {
 
       property QtObject color: QtObject {
         property color focused: Colors.l
-        property color normal: Colors.d
+        property color normal: Colors.r
       }
     }
   }
 
   property QtObject titleArea: QtObject  {
     property int spacing: 10
-    property int iconSize: 16
+    property int iconSize: 18
 
     property QtObject text: QtObject {
-      property color color: Colors.l
-      property int fontSize: 10
+      property color color: Colors.j
+      property int fontSize: 9
       property int width: 130
     }
   }

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

@@ -21,8 +21,6 @@ ColumnLayout  {
     sipAddress
   ) || sipAddress
 
-  property var _info: {}
-
   // -----------------------------------------------------------------
 
   function _removeContact () {
@@ -82,10 +80,8 @@ ColumnLayout  {
       spacing: ContactEditStyle.infoBar.spacing
 
       ActionButton {
-        Layout.preferredHeight: ContactEditStyle.infoBar.avatarSize
-        Layout.preferredWidth: ContactEditStyle.infoBar.avatarSize
-
         icon: 'contact_card_photo'
+        iconSize: ContactEditStyle.infoBar.avatarSize
 
         onClicked: avatarChooser.open()
 
@@ -141,6 +137,7 @@ ColumnLayout  {
   Flickable {
     Layout.fillHeight: true
     Layout.fillWidth: true
+    Layout.topMargin: 40
     ScrollBar.vertical: ForceScrollBar {}
 
     boundsBehavior: Flickable.StopAtBounds