From c87d3c49857eff3b4c393c12a3a22b554773414b Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Wed, 5 Oct 2016 15:42:38 +0200 Subject: [PATCH] feat(app): new Paned component --- tests/resources.qrc | 1 + tests/src/main.cpp | 7 +- tests/ui/modules/Linphone/Paned.qml | 110 ++++++++++++------ .../ui/modules/Linphone/Styles/PanedStyle.qml | 16 +++ tests/ui/modules/Linphone/Styles/qmldir | 1 + tests/ui/scripts/Utils/utils.js | 6 + tests/ui/views/Calls/Calls.qml | 22 +++- 7 files changed, 122 insertions(+), 41 deletions(-) create mode 100644 tests/ui/modules/Linphone/Styles/PanedStyle.qml diff --git a/tests/resources.qrc b/tests/resources.qrc index 1eb7b1d15..a091b7473 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -77,6 +77,7 @@ ui/modules/Linphone/Styles/Form/TextButtonBStyle.qml ui/modules/Linphone/Styles/Form/TransparentComboBoxStyle.qml ui/modules/Linphone/Styles/MenuStyle.qml + ui/modules/Linphone/Styles/PanedStyle.qml ui/modules/Linphone/Styles/PopupStyle.qml ui/modules/Linphone/Styles/qmldir ui/modules/Linphone/Styles/SearchBoxStyle.qml diff --git a/tests/src/main.cpp b/tests/src/main.cpp index 3382a2e50..c5c624ae1 100644 --- a/tests/src/main.cpp +++ b/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[]) { diff --git a/tests/ui/modules/Linphone/Paned.qml b/tests/ui/modules/Linphone/Paned.qml index ea14630f7..257cdd4d8 100644 --- a/tests/ui/modules/Linphone/Paned.qml +++ b/tests/ui/modules/Linphone/Paned.qml @@ -1,39 +1,83 @@ 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 - function updateContentA () { - // width(A) < minimum width(A) - if (contentA.width < handleLimitLeft) { - contentA.width = handleLimitLeft + // 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('%') + + 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 } } diff --git a/tests/ui/modules/Linphone/Styles/PanedStyle.qml b/tests/ui/modules/Linphone/Styles/PanedStyle.qml new file mode 100644 index 000000000..40ef15507 --- /dev/null +++ b/tests/ui/modules/Linphone/Styles/PanedStyle.qml @@ -0,0 +1,16 @@ +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' + } + } +} diff --git a/tests/ui/modules/Linphone/Styles/qmldir b/tests/ui/modules/Linphone/Styles/qmldir index 79765b9d5..3346a6756 100644 --- a/tests/ui/modules/Linphone/Styles/qmldir +++ b/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 diff --git a/tests/ui/scripts/Utils/utils.js b/tests/ui/scripts/Utils/utils.js index 9f890add2..5ef0b9caf 100644 --- a/tests/ui/scripts/Utils/utils.js +++ b/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 +} diff --git a/tests/ui/views/Calls/Calls.qml b/tests/ui/views/Calls/Calls.qml index 96d2504d1..4984e1630 100644 --- a/tests/ui/views/Calls/Calls.qml +++ b/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' + } } } }