diff --git a/ui/StatusQ/src/StatusQ/Core/StatusCenteredFlow.qml b/ui/StatusQ/src/StatusQ/Core/StatusCenteredFlow.qml new file mode 100644 index 0000000000..7fe978ad53 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Core/StatusCenteredFlow.qml @@ -0,0 +1,140 @@ +import QtQuick 2.14 + +/*! + \qmltype StatusCenteredFlow + \inherits Item + \inqmlmodule StatusQ.Core + \since StatusQ.Core 0.1 + \brief Pure QML wrapper around Flow component allowing center alignment. + + The \c StatusCenteredFlow works similar to standard Flow component with several limitations: + + - Positioner attached property is unavailable for child items + - Statically declared items are positioned always before items coming from Repeater + - New items provided by Repeater are located always at the end (inserting to model is not supported) + + Example of how to use it: + + \qml + StatusCenteredFlow { + anchors.fill: parent + + Rectangle { + width: 20 + height: 30 + } + Rectangle { + width: 20 + height: 30 + } + } + \endqml + + With Repeater: + + \qml + StatusCenteredFlow { + anchors.fill: parent + + Repeater { + model: 10 + delegate: CheckBox { text: "check box " + index } + } + } + \endqml +*/ +Item { + id: root + + property alias spacing: flow.spacing + property alias padding: flow.padding + property alias bottomPadding: flow.bottomPadding + property alias leftPadding: flow.leftPadding + property alias rightPadding: flow.rightPadding + property alias topPadding: flow.topPadding + + property bool centered: true + + onCenteredChanged: flow.onPositioningComplete() + + Flow { + id: flow + + anchors.fill: parent + + onPositioningComplete: { + if (!root.centered || children.length === 0) + return + + const rows = [] + let row = [children[0]] + + for (let i = 1; i < children.length; i++) { + const prevChild = children[i - 1] + const child = children[i] + + if (prevChild.y === child.y) { + row.push(child) + } else { + rows.push(row) + row = [child] + } + } + + rows.push(row) + + rows.map(row => { + const firstInRow = row[0] + const lastInRow = row[row.length - 1] + + const beginX = firstInRow.x + const endX = lastInRow.x + lastInRow.width + + const offset = (flow.width - flow.rightPadding - flow.leftPadding - (endX - beginX)) / 2 + + row.map(item => { item.centeredX = item.x + offset }) + }) + } + } + + Component { + id: placeholder + + Item { + property int centeredX: 0 + } + } + + QtObject { + id: d + + property var registry: [] + } + + onChildrenChanged: { + for(let i = 0; i < children.length; i++){ + const child = children[i] + + if (child instanceof Repeater || child === flow + || d.registry.indexOf(child) !== -1) + continue + + d.registry.push(child) + + const placeholderProperties = { + parent: flow, + width: Qt.binding(() => child.width), + height: Qt.binding(() => child.height) + } + + const placeholderObj = placeholder.createObject(child, placeholderProperties) + + child.x = Qt.binding(() => root.centered ? placeholderObj.centeredX : placeholderObj.x) + child.y = Qt.binding(() => placeholderObj.y) + + const cleanup = () => { d.registry = d.registry.filter(value => value !== child) } + child.Component.destruction.connect(cleanup) + } + } +} + diff --git a/ui/StatusQ/src/StatusQ/Core/qmldir b/ui/StatusQ/src/StatusQ/Core/qmldir index fab4b45e1c..583e4c60a3 100644 --- a/ui/StatusQ/src/StatusQ/Core/qmldir +++ b/ui/StatusQ/src/StatusQ/Core/qmldir @@ -1,15 +1,16 @@ module StatusQ.Core -StatusBaseText 0.1 StatusBaseText.qml -StatusFontSettings 0.1 StatusFontSettings.qml -StatusIcon 0.1 StatusIcon.qml -StatusAssetSettings 0.1 StatusAssetSettings.qml -StatusIdenticonRingSettings 0.1 StatusIdenticonRingSettings.qml -StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml -StatusTooltipSettings 0.1 StatusTooltipSettings.qml -StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml StatusAnimatedStack 0.1 StatusAnimatedStack.qml -StatusScrollView 0.1 StatusScrollView.qml -StatusListView 0.1 StatusListView.qml +StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml +StatusAssetSettings 0.1 StatusAssetSettings.qml +StatusBaseText 0.1 StatusBaseText.qml +StatusCenteredFlow 0.1 StatusCenteredFlow.qml +StatusFontSettings 0.1 StatusFontSettings.qml StatusGridView 0.1 StatusGridView.qml +StatusIcon 0.1 StatusIcon.qml +StatusIdenticonRingSettings 0.1 StatusIdenticonRingSettings.qml +StatusListView 0.1 StatusListView.qml +StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml StatusProfileImageSettings 0.1 StatusProfileImageSettings.qml +StatusScrollView 0.1 StatusScrollView.qml +StatusTooltipSettings 0.1 StatusTooltipSettings.qml