Commit c87d3c49 authored by Ronan's avatar Ronan
Browse files

feat(app): new Paned component

parent 97e81ff1
......@@ -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>
......
......@@ -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[]) {
......
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
}
}
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'
}
}
}
......@@ -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
......
......@@ -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
}
......@@ -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'
}
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment