diff --git a/imports/Spectral/Component/SplitView.qml b/imports/Spectral/Component/SplitView.qml new file mode 100644 index 000000000..fc553f933 --- /dev/null +++ b/imports/Spectral/Component/SplitView.qml @@ -0,0 +1,534 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or (at your option) the GNU General +** Public license version 3 or any later version approved by the KDE Free +** Qt Foundation. The licenses are as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 +** included in the packaging of this file. Please review the following +** information to ensure the GNU General Public License requirements will +** be met: https://www.gnu.org/licenses/gpl-2.0.html and +** https://www.gnu.org/licenses/gpl-3.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 +import QtQuick.Layouts 1.3 +import QtQuick.Window 2.1 + +Item { + id: root + + property int orientation: Qt.Horizontal + + /*! + This property holds the delegate that will be instantiated between each + child item. Inside the delegate the following properties are available: + + \table + \row \li readonly property bool styleData.index \li Specifies the index of the splitter handle. The handle + between the first and the second item will get index 0, + the next handle index 1 etc. + \row \li readonly property bool styleData.hovered \li The handle is being hovered. + \row \li readonly property bool styleData.pressed \li The handle is being pressed. + \row \li readonly property bool styleData.resizing \li The handle is being dragged. + \endtable + +*/ + property Component handleDelegate: Rectangle { + width: 1 + height: 1 + visible: false + } + + /*! + This propery is \c true when the user is resizing any of the items by + dragging on the splitter handles. + */ + property bool resizing: false + + /*! \internal */ + default property alias __contents: contents.data + /*! \internal */ + property alias __items: splitterItems.children + /*! \internal */ + property alias __handles: splitterHandles.children + + clip: true + Component.onCompleted: d.init() + onWidthChanged: d.updateLayout() + onHeightChanged: d.updateLayout() + onOrientationChanged: d.changeOrientation() + + /*! \qmlmethod void SplitView::addItem(Item item) + Add an item to the end of the view. + \since QtQuick.Controls 1.3 */ + function addItem(item) { + d.updateLayoutGuard = true + d.addItem_impl(item) + d.calculateImplicitSize() + d.updateLayoutGuard = false + d.updateFillIndex() + } + + /*! \qmlmethod void SplitView::removeItem(Item item) + Remove \a item from the view. + \since QtQuick.Controls 1.4 */ + function removeItem(item) { + d.updateLayoutGuard = true + var result = d.removeItem_impl(item) + if (result !== null) { + d.calculateImplicitSize() + d.updateLayoutGuard = false + d.updateFillIndex() + } + else { + d.updateLayoutGuard = false + } + } + + SystemPalette { id: pal } + + QtObject { + id: d + + readonly property string leftMargin: horizontal ? "leftMargin" : "topMargin" + readonly property string topMargin: horizontal ? "topMargin" : "leftMargin" + readonly property string rightMargin: horizontal ? "rightMargin" : "bottomMargin" + + property bool horizontal: orientation == Qt.Horizontal + readonly property string minimum: horizontal ? "minimumWidth" : "minimumHeight" + readonly property string maximum: horizontal ? "maximumWidth" : "maximumHeight" + readonly property string otherMinimum: horizontal ? "minimumHeight" : "minimumWidth" + readonly property string otherMaximum: horizontal ? "maximumHeight" : "maximumWidth" + readonly property string offset: horizontal ? "x" : "y" + readonly property string otherOffset: horizontal ? "y" : "x" + readonly property string size: horizontal ? "width" : "height" + readonly property string otherSize: horizontal ? "height" : "width" + readonly property string implicitSize: horizontal ? "implicitWidth" : "implicitHeight" + readonly property string implicitOtherSize: horizontal ? "implicitHeight" : "implicitWidth" + + property int fillIndex: -1 + property bool updateLayoutGuard: true + + function extraMarginSize(item, other) { + if (typeof(other) === 'undefined') + other = false; + if (other === horizontal) + // vertical + return item.Layout.topMargin + item.Layout.bottomMargin + return item.Layout.leftMargin + item.Layout.rightMargin + } + + function addItem_impl(item) + { + // temporarily set fillIndex to new item + fillIndex = __items.length + if (splitterItems.children.length > 0) + handleLoader.createObject(splitterHandles, {"__handleIndex":splitterItems.children.length - 1}) + + item.parent = splitterItems + d.initItemConnections(item) + } + + function initItemConnections(item) + { + // should match disconnections in terminateItemConnections + item.widthChanged.connect(d.updateLayout) + item.heightChanged.connect(d.updateLayout) + item.Layout.maximumWidthChanged.connect(d.updateLayout) + item.Layout.minimumWidthChanged.connect(d.updateLayout) + item.Layout.maximumHeightChanged.connect(d.updateLayout) + item.Layout.minimumHeightChanged.connect(d.updateLayout) + item.Layout.leftMarginChanged.connect(d.updateLayout) + item.Layout.topMarginChanged.connect(d.updateLayout) + item.Layout.rightMarginChanged.connect(d.updateLayout) + item.Layout.bottomMarginChanged.connect(d.updateLayout) + item.visibleChanged.connect(d.updateFillIndex) + item.Layout.fillWidthChanged.connect(d.updateFillIndex) + item.Layout.fillHeightChanged.connect(d.updateFillIndex) + } + + function terminateItemConnections(item) + { + // should match connections in initItemConnections + item.widthChanged.disconnect(d.updateLayout) + item.heightChanged.disconnect(d.updateLayout) + item.Layout.maximumWidthChanged.disconnect(d.updateLayout) + item.Layout.minimumWidthChanged.disconnect(d.updateLayout) + item.Layout.maximumHeightChanged.disconnect(d.updateLayout) + item.Layout.minimumHeightChanged.disconnect(d.updateLayout) + item.visibleChanged.disconnect(d.updateFillIndex) + item.Layout.fillWidthChanged.disconnect(d.updateFillIndex) + item.Layout.fillHeightChanged.disconnect(d.updateFillIndex) + } + + function removeItem_impl(item) + { + var pos = itemPos(item) + + // Check pos range + if (pos < 0 || pos >= __items.length) + return null + + // Temporary unset the fillIndex + fillIndex = __items.length - 1 + + // Remove the handle at the left/right of the item that + // is going to be removed + var handlePos = -1 + var hasPrevious = pos > 0 + var hasNext = (pos + 1) < __items.length + + if (hasPrevious) + handlePos = pos-1 + else if (hasNext) + handlePos = pos + if (handlePos >= 0) { + var handle = __handles[handlePos] + handle.visible = false + handle.parent = null + handle.destroy() + for (var i = handlePos; i < __handles.length; ++i) + __handles[i].__handleIndex = i + } + + // Remove the item. + // Disconnect the item to be removed + terminateItemConnections(item) + item.parent = null + + return item + } + + function itemPos(item) + { + for (var i = 0; i < __items.length; ++i) + if (item === __items[i]) + return i + return -1 + } + + function init() + { + for (var i=0; i<__contents.length; ++i) { + var item = __contents[i]; + if (!item.hasOwnProperty("x")) + continue + addItem_impl(item) + i-- // item was removed from list + } + + d.calculateImplicitSize() + d.updateLayoutGuard = false + d.updateFillIndex() + } + + function updateFillIndex() + { + if (lastItem.visible !== root.visible) + return + var policy = (root.orientation === Qt.Horizontal) ? "fillWidth" : "fillHeight" + for (var i=0; i<__items.length-1; ++i) { + if (__items[i].Layout[policy] === true) + break; + } + + d.fillIndex = i + d.updateLayout() + } + + function changeOrientation() + { + if (__items.length == 0) + return; + d.updateLayoutGuard = true + + // Swap width/height for items and handles: + for (var i=0; i<__items.length; ++i) { + var item = __items[i] + var tmp = item.x + item.x = item.y + item.y = tmp + tmp = item.width + item.width = item.height + item.height = tmp + + var handle = __handles[i] + if (handle) { + tmp = handle.x + handle.x = handle.y + handle.y = handle.x + tmp = handle.width + handle.width = handle.height + handle.height = tmp + } + } + + // Change d.horizontal explicit, since the binding will change too late: + d.horizontal = orientation == Qt.Horizontal + d.updateLayoutGuard = false + d.updateFillIndex() + } + + function calculateImplicitSize() + { + var implicitSize = 0 + var implicitOtherSize = 0 + + for (var i=0; i<__items.length; ++i) { + var item = __items[i]; + implicitSize += clampedMinMax(item[d.size], item.Layout[minimum], item.Layout[maximum]) + extraMarginSize(item) + var os = clampedMinMax(item[otherSize], item.Layout[otherMinimum], item.Layout[otherMaximum]) + extraMarginSize(item, true) + implicitOtherSize = Math.max(implicitOtherSize, os) + + var handle = __handles[i] + if (handle) + implicitSize += handle[d.size] //### Can handles have margins?? + } + + root[d.implicitSize] = implicitSize + root[d.implicitOtherSize] = implicitOtherSize + } + + function clampedMinMax(value, minimum, maximum) + { + if (value < minimum) + value = minimum + if (value > maximum) + value = maximum + return value + } + + function accumulatedSize(firstIndex, lastIndex, includeFillItemMinimum) + { + // Go through items and handles, and + // calculate their accummulated width. + var w = 0 + for (var i=firstIndex; i __handleIndex) + visible: __items[__handleIndex + (resizeLeftItem ? 0 : 1)].visible + sourceComponent: handleDelegate + onWidthChanged: d.updateLayout() + onHeightChanged: d.updateLayout() + onXChanged: moveHandle() + onYChanged: moveHandle() + + MouseArea { + id: mouseArea + anchors.fill: parent + property real defaultMargin: Screen.pixelDensity * 2 + anchors.leftMargin: (parent.width <= 1) ? -defaultMargin : 0 + anchors.rightMargin: (parent.width <= 1) ? -defaultMargin : 0 + anchors.topMargin: (parent.height <= 1) ? -defaultMargin : 0 + anchors.bottomMargin: (parent.height <= 1) ? -defaultMargin : 0 + hoverEnabled: true + drag.threshold: 0 + drag.target: parent + drag.axis: root.orientation === Qt.Horizontal ? Drag.XAxis : Drag.YAxis + cursorShape: root.orientation === Qt.Horizontal ? Qt.SplitHCursor : Qt.SplitVCursor + } + + function moveHandle() { + // Moving the handle means resizing an item. Which one, + // left or right, depends on where the fillItem is. + // 'updateLayout' will be overridden in case new width violates max/min. + // 'updateLayout' will be triggered when an item changes width. + if (d.updateLayoutGuard) + return + + var leftHandle, leftItem, rightItem, rightHandle + var leftEdge, rightEdge, newWidth, leftStopX, rightStopX + var i + + if (resizeLeftItem) { + // Ensure that the handle is not crossing other handles. So + // find the first visible handle to the left to determine the left edge: + leftEdge = 0 + for (i=__handleIndex-1; i>=0; --i) { + leftHandle = __handles[i] + if (leftHandle.visible) { + leftEdge = leftHandle[d.offset] + leftHandle[d.size] + break; + } + } + + // Ensure: leftStopX >= itemHandle[d.offset] >= rightStopX + var min = d.accumulatedSize(__handleIndex+1, __items.length, true) + rightStopX = root[d.size] - min - itemHandle[d.size] + leftStopX = Math.max(leftEdge, itemHandle[d.offset]) + itemHandle[d.offset] = Math.min(rightStopX, Math.max(leftStopX, itemHandle[d.offset])) + + newWidth = itemHandle[d.offset] - leftEdge + leftItem = __items[__handleIndex] + // The next line will trigger 'updateLayout': + leftItem[d.size] = newWidth + } else { + // Resize item to the right. + // Ensure that the handle is not crossing other handles. So + // find the first visible handle to the right to determine the right edge: + rightEdge = root[d.size] + for (i=__handleIndex+1; i<__handles.length; ++i) { + rightHandle = __handles[i] + if (rightHandle.visible) { + rightEdge = rightHandle[d.offset] + break; + } + } + + // Ensure: leftStopX <= itemHandle[d.offset] <= rightStopX + min = d.accumulatedSize(0, __handleIndex+1, true) + leftStopX = min - itemHandle[d.size] + rightStopX = Math.min((rightEdge - itemHandle[d.size]), itemHandle[d.offset]) + itemHandle[d.offset] = Math.max(leftStopX, Math.min(itemHandle[d.offset], rightStopX)) + + newWidth = rightEdge - (itemHandle[d.offset] + itemHandle[d.size]) + rightItem = __items[__handleIndex+1] + // The next line will trigger 'updateLayout': + rightItem[d.size] = newWidth + } + } + } + } + + Item { + id: contents + visible: false + anchors.fill: parent + } + Item { + id: splitterItems + anchors.fill: parent + } + Item { + id: splitterHandles + anchors.fill: parent + } + + Item { + id: lastItem + onVisibleChanged: d.updateFillIndex() + } + + Component.onDestruction: { + for (var i=0; iimports/Spectral/Page/SettingForm.ui.qml imports/Spectral/Page/SettingCategoryDelegate.qml imports/Spectral/Page/SettingAccountDelegate.qml - imports/Spectral/Page/RoomForm.ui.qml imports/Spectral/Page/LoginForm.ui.qml imports/Spectral/Panel/qmldir imports/Spectral/Panel/RoomDrawer.qml @@ -54,5 +53,6 @@ imports/Spectral/Component/Timeline/TimelineLabel.qml imports/Spectral/Component/AutoTextField.qml imports/Spectral/Panel/RoomPanelInput.qml + imports/Spectral/Component/SplitView.qml