feat(app): new `Borders` component

tests/resources.qrc

@@ -25,6 +25,7 @@
     <file>imgs/valid.svg</file>
     <file>languages/en.qm</file>
     <file>languages/fr.qm</file>
+    <file>ui/modules/Linphone/Borders.qml</file>
     <file>ui/modules/Linphone/Chat/Chat.qml</file>
     <file>ui/modules/Linphone/Chat/Event.qml</file>
     <file>ui/modules/Linphone/Chat/IncomingMessage.qml</file>
@@ -40,6 +41,7 @@
     <file>ui/modules/Linphone/Dialog/ConfirmDialog.qml</file>
     <file>ui/modules/Linphone/Dialog/DialogDescription.qml</file>
     <file>ui/modules/Linphone/Dialog/DialogPlus.qml</file>
+    <file>ui/modules/Linphone/DroppableTextArea.qml</file>
     <file>ui/modules/Linphone/DropZone.qml</file>
     <file>ui/modules/Linphone/ForceScrollBar.qml</file>
     <file>ui/modules/Linphone/Form/AbstractTextButton.qml</file>

tests/ui/modules/Linphone/Borders.qml

+import QtQuick 2.7
+
+// ===================================================================
+
+Item {
+  default property alias content: content.data
+
+  property var borderColor
+  property var borderWidth
+
+  property color bottomColor: 'transparent'
+  property color leftColor: 'transparent'
+  property color rightColor: 'transparent'
+  property color topColor: 'transparent'
+
+  property int bottomWidth: 0
+  property int leftWidth: 0
+  property int rightWidth: 0
+  property int topWidth: 0
+
+  Rectangle {
+    id: bottomBorder
+
+    anchors.bottom: parent.bottom
+    color: borderColor != null ? borderColor : bottomColor
+    height: borderWidth != null ? borderWidth : bottomWidth
+    width: parent.width
+  }
+
+  Rectangle {
+    id: leftBorder
+
+    anchors.left: parent.left
+    color: borderColor != null ? borderColor : leftColor
+    height: parent.height
+    width: borderWidth != null ? borderWidth : leftWidth
+  }
+
+  Rectangle {
+    id: rightBorder
+
+    anchors.right: parent.right
+    color: borderColor != null ? borderColor : rigthColor
+    height: parent.height
+    width: borderWidth != null ? borderWidth : rightWidth
+  }
+
+  Rectangle {
+    id: topBorder
+
+    anchors.top: parent.top
+    color: borderColor != null ? borderColor : topColor
+    height: borderWidth != null ? borderWidth : topWidth
+    width: parent.width
+  }
+
+  Item {
+    id: content
+
+    anchors {
+      fill: parent
+
+      bottomMargin: bottomBorder.height
+      leftMargin: leftBorder.width
+      rightMargin: rightBorder.width
+      topMargin: topBorder.height
+    }
+  }
+}

tests/ui/modules/Linphone/Constants.qml

 pragma Singleton
 import QtQuick 2.7
 
+// ===================================================================
+
 QtObject {
   property int zPopup: 999
   property int zMax: 999999

tests/ui/modules/Linphone/DropZone.qml

@@ -4,64 +4,64 @@ import QtQuick.Dialogs 1.2
 // ===================================================================
 
 Rectangle {
-    signal dropped (var files)
+  signal dropped (var files)
 
-    color: '#DDDDDD'
-    id: dropZone
+  color: '#DDDDDD'
+  id: dropZone
 
-    function emitFiles (files) {
-        // Filtering files, urls are forbidden.
-        files = files.reduce(function (files, file) {
-            var result = file.match(/^file:\/\/(.*)/)
+  function emitFiles (files) {
+    // Filtering files, urls are forbidden.
+    files = files.reduce(function (files, file) {
+      var result = file.match(/^file:\/\/(.*)/)
 
-            if (result) {
-                files.push(result[1])
-            }
+      if (result) {
+        files.push(result[1])
+      }
 
-            return files
-        }, [])
+      return files
+    }, [])
 
-        if (files.length > 0) {
-            dropped(files)
-        }
+    if (files.length > 0) {
+      dropped(files)
     }
+  }
 
-    DropArea {
-        anchors.fill: parent
+  DropArea {
+    anchors.fill: parent
 
-        onDropped: {
-            dropZone.state = ''
-            if (drop.hasUrls) {
-                emitFiles(drop.urls)
-            }
-        }
-        onEntered: dropZone.state = 'hover'
-        onExited: dropZone.state = ''
+    onDropped: {
+      dropZone.state = ''
+      if (drop.hasUrls) {
+        emitFiles(drop.urls)
+      }
     }
+    onEntered: dropZone.state = 'hover'
+    onExited: dropZone.state = ''
+  }
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: fileDialog.visible = true
-    }
+  MouseArea {
+    anchors.fill: parent
+    onClicked: fileDialog.visible = true
+  }
 
-    Image {
-        anchors.centerIn: parent
-        fillMode: Image.PreserveAspectFit
-        height: parent.height
-        source: 'qrc:/imgs/chat_attachment.svg'
-        width: parent.width
-    }
+  Image {
+    anchors.centerIn: parent
+    fillMode: Image.PreserveAspectFit
+    height: parent.height
+    source: 'qrc:/imgs/chat_attachment.svg'
+    width: parent.width
+  }
 
-    FileDialog {
-        folder: shortcuts.home
-        id: fileDialog
-        title: qsTr('fileChooserTitle')
+  FileDialog {
+    folder: shortcuts.home
+    id: fileDialog
+    title: qsTr('fileChooserTitle')
 
-        onAccepted: emitFiles(fileDialog.fileUrls)
-    }
+    onAccepted: emitFiles(fileDialog.fileUrls)
+  }
 
-    states: State {
-        name: 'hover'
-        PropertyChanges { target: dropZone; color: '#BBBBBB' }
-    }
+  states: State {
+    name: 'hover'
+    PropertyChanges { target: dropZone; color: '#BBBBBB' }
+  }
 }

tests/ui/modules/Linphone/DroppableTextArea.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+
+RowLayout {
+  property alias placeholderText: textArea.placeholderText
+
+  Flickable {
+    Layout.preferredHeight: parent.height
+    Layout.fillWidth: true
+    ScrollBar.vertical: ScrollBar { }
+    TextArea.flickable: TextArea {
+      id: textArea
+
+      wrapMode: TextArea.Wrap
+    }
+  }
+
+  DropZone {
+    Layout.preferredHeight: parent.height
+    Layout.preferredWidth: 40
+  }
+}

tests/ui/modules/Linphone/qmldir

@@ -11,6 +11,9 @@ singleton Constants  1.0 Constants.qml
 
 # Components ---------------------------------------------------------
 
+# Chat
+Borders              1.0 Borders.qml
+
 # Chat
 Chat                 1.0 Chat/Chat.qml
 
@@ -29,6 +32,9 @@ DialogPlus           1.0 Dialog/DialogPlus.qml
 # DropZone
 DropZone             1.0 DropZone.qml
 
+# DroppableTextArea
+DroppableTextArea    1.0 DroppableTextArea.qml
+
 # ForceScrollBar
 ForceScrollBar       1.0 ForceScrollBar.qml
 

tests/ui/views/MainWindow/Conversation.qml

@@ -105,47 +105,29 @@ ColumnLayout  {
     }
   }
 
-  Rectangle {
+  Borders {
     Layout.fillHeight: true
     Layout.fillWidth: true
-    border.color: '#C7C7C7'
-    border.width: 1
-    id: messagesArea
+    borderColor: '#C7C7C7'
+    bottomWidth: 1
+    leftWidth: 1
+    topWidth: 1
 
     Chat {
       ScrollBar.vertical: ForceScrollBar { }
-      anchors.bottomMargin: messagesArea.border.width
       anchors.fill: parent
-      anchors.topMargin: messagesArea.border.width
     }
   }
 
-  // Send area.
-  Rectangle {
+  Borders {
     Layout.fillWidth: true
     Layout.preferredHeight: 70
-    border.color: textArea.activeFocus ? '#8E8E8E' : '#C7C7C7'
-    border.width: 1
-    id: newMessageArea
+    borderColor: '#C7C7C7'
+    leftWidth: 1
 
-    RowLayout {
+    DroppableTextArea {
       anchors.fill: parent
-
-      Flickable {
-        Layout.preferredHeight: parent.height
-        Layout.fillWidth: true
-        ScrollBar.vertical: ScrollBar { }
-        TextArea.flickable: TextArea {
-          id: textArea
-          placeholderText: qsTr('newMessagePlaceholder')
-          wrapMode: TextArea.Wrap
-        }
-      }
-
-      DropZone {
-        Layout.preferredHeight: parent.height - newMessageArea.border.width * 2
-        Layout.preferredWidth: 40
-      }
+      placeholderText: qsTr('newMessagePlaceholder')
     }
   }
 }