feat(app): new Paned component

tests/resources.qrc

@@ -77,6 +77,7 @@
     <file>ui/modules/Linphone/Styles/Form/TextButtonBStyle.qml</file>
     <file>ui/modules/Linphone/Styles/Form/TransparentComboBoxStyle.qml</file>
     <file>ui/modules/Linphone/Styles/MenuStyle.qml</file>
+    <file>ui/modules/Linphone/Styles/PanedStyle.qml</file>
     <file>ui/modules/Linphone/Styles/PopupStyle.qml</file>
     <file>ui/modules/Linphone/Styles/qmldir</file>
     <file>ui/modules/Linphone/Styles/SearchBoxStyle.qml</file>

tests/src/main.cpp

@@ -60,7 +60,12 @@ void addContextProperties (QQmlApplicationEngine &engine) {
   QQmlComponent component(&engine, QUrl("qrc:/ui/views/Calls/Calls.qml"));
 
   context->setContextProperty("Notification", new Notification());
-  context->setContextProperty("CallsWindow", component.create());
+
+  if (component.isError()) {
+    qWarning() << component.errors();
+  } else {
+    context->setContextProperty("CallsWindow", component.create());
+  }
 }
 
 int main (int argc, char *argv[]) {

tests/ui/modules/Linphone/Paned.qml

 import QtQuick 2.7
 
+import Linphone.Styles 1.0
+import Utils 1.0
+
+// ===================================================================
+//
+// Paned is one container divided in two areas.
+// The division between the areas can be modified with a handle.
+//
+// Each area can have a fixed or dynamic minimum width.
+// See `leftLimit` and `rightLimit` attributes.
+//
+// To create a dynamic minimum width, it's necessary to give
+// a percentage to `leftLimit` or `rightLimit` like:
+// `leftLimit: '0.66%'`.
+// The percentage is relative to the container width.
+//
+// ===================================================================
+
 Item {
   id: container
 
-  property int handleLimitLeft: 0
-  property int handleLimitRight: 0
   property alias childA: contentA.data
   property alias childB: contentB.data
 
-  property bool useDynamicLimits: true
+  // User limits: string or int values.
+  property var leftLimit: 0
+  property var rightLimit: 0
+
+  // Internal limits.
+  property var _leftLimit
+  property var _rightLimit
+
+  function _getLimitValue (limit) {
+    return limit.isDynamic
+      ? width * limit.value
+      : limit.value
+  }
+
+  function _parseLimit (limit) {
+    if (Utils.isString(limit)) {
+      var arr = limit.split('%')
 
-  function updateContentA () {
-    // width(A) < minimum width(A)
-    if (contentA.width < handleLimitLeft) {
-      contentA.width = handleLimitLeft
+      return {
+        isDynamic: arr[1] === '',
+        value: +arr[0]
+      }
     }
 
-    // width(B) < minimum width(B)
-    else if (width - contentA.width - handle.width < handleLimitRight) {
-      contentA.width = width - handle.width - handleLimitRight
+    return {
+      value: limit
     }
   }
 
-  onHandleLimitLeftChanged: updateContentA()
-  onHandleLimitRightChanged: updateContentA()
-  onWidthChanged: !useDynamicLimits && updateContentA()
+  onWidthChanged: {
+    var rightLimit = _getLimitValue(_rightLimit)
+    var leftLimit = _getLimitValue(_leftLimit)
+
+    // width(A) < minimum width(A).
+    if (contentA.width < leftLimit) {
+      contentA.width = leftLimit
+    }
+
+    // width(B) < minimum width(B).
+    else if (width - contentA.width - handle.width < rightLimit) {
+      contentA.width = width - handle.width - rightLimit
+    }
+  }
 
   Component.onCompleted: {
-    contentA.width = handleLimitLeft
+    _leftLimit = _parseLimit(leftLimit)
+    _rightLimit = _parseLimit(rightLimit)
+
+    contentA.width = _getLimitValue(_leftLimit)
   }
 
-  Rectangle {
+  Item {
     id: contentA
 
-    color: '#FFFFFF'
     height: parent.height
   }
 
@@ -46,7 +90,7 @@ Item {
     cursorShape: Qt.SplitHCursor
     height: parent.height
     hoverEnabled: true
-    width: 8
+    width: PanedStyle.handle.width
 
     onMouseXChanged: {
       // Necessary because `hoverEnabled` is used.
@@ -56,13 +100,16 @@ Item {
 
       var offset = mouseX - _mouseStart
 
-      // width(B) < minimum width(B)
-      if (container.width - offset - contentA.width - width < handleLimitRight) {
-        contentA.width = container.width - width - handleLimitRight
+      var rightLimit = _getLimitValue(_rightLimit)
+      var leftLimit = _getLimitValue(_leftLimit)
+
+      // width(B) < minimum width(B).
+      if (container.width - offset - contentA.width - width < rightLimit) {
+        contentA.width = container.width - width - rightLimit
       }
-      // width(A) < minimum width(A)
-      else if (contentA.width + offset < handleLimitLeft) {
-        contentA.width = handleLimitLeft
+      // width(A) < minimum width(A).
+      else if (contentA.width + offset < leftLimit) {
+        contentA.width = leftLimit
       }
       // Resize A/B.
       else {
@@ -75,24 +122,19 @@ Item {
     Rectangle {
       anchors.fill: parent
       color: parent.pressed
-        ? '#5E5E5E'
+        ? PanedStyle.handle.color.pressed
         : (parent.containsMouse
-           ? '#707070'
-           : '#C5C5C5'
-        )
+           ? PanedStyle.handle.color.hovered
+           : PanedStyle.handle.color.normal
+          )
     }
   }
 
-  Rectangle {
+  Item {
     id: contentB
 
     anchors.left: handle.right
-    color: '#EAEAEA'
     height: parent.height
-    width: {
-
-      console.log('toto',  container.width, contentA.width, container.width - contentA.width - handle.width)
-     return  container.width - contentA.width - handle.width
-    }
+    width: container.width - contentA.width - handle.width
   }
 }

tests/ui/modules/Linphone/Styles/PanedStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Linphone 1.0
+
+QtObject {
+  property QtObject handle: QtObject {
+    property int width: 8
+
+    property QtObject color: QtObject {
+      property color hovered: '#707070'
+      property color normal: '#C5C5C5'
+      property color pressed: '#5E5E5E'
+    }
+  }
+}

tests/ui/modules/Linphone/Styles/qmldir

@@ -7,6 +7,7 @@ singleton CollapseStyle            1.0 CollapseStyle.qml
 singleton DialogStyle              1.0 DialogStyle.qml
 singleton ForceScrollBarStyle      1.0 ForceScrollBarStyle.qml
 singleton MenuStyle                1.0 MenuStyle.qml
+singleton PanedStyle               1.0 PanedStyle.qml
 singleton PopupStyle               1.0 PopupStyle.qml
 singleton SearchBoxStyle           1.0 SearchBoxStyle.qml
 singleton TimelineStyle            1.0 TimelineStyle.qml

tests/ui/scripts/Utils/utils.js

@@ -99,3 +99,9 @@ function setTimeout (delay, cb) {
 function clearTimeout (timer) {
   timer.destroy() // Not necessary: `timer.stop()`
 }
+
+// -------------------------------------------------------------------
+
+function isString (string) {
+  return typeof string === 'string' || string instanceof String
+}

tests/ui/views/Calls/Calls.qml

@@ -13,15 +13,25 @@ Window {
 
   Paned {
     anchors.fill: parent
-    handleLimitLeft: parent.width *0.66
-    handleLimitRight: 50
+    rightLimit: 50
+    leftLimit: 100
 
-    childA: Text {
-      text: 'hello'
+    childA: Rectangle {
+
+      anchors.fill: parent
+      color: 'orange'
+
+      Text {
+        text: 'hello'
+      }
     }
 
-    childB: Text {
-      text: 'hello2'
+    childB: Rectangle {
+      anchors.fill: parent
+      color: 'green'
+      Text {
+        text: 'hello2'
+      }
     }
   }
 }