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/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
-      }
     }
   }
 }