status-desktop/storybook/pages/DoubleFlickableWithFoldingP...

278 lines
7.3 KiB
QML
Raw Normal View History

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import Storybook 1.0
SplitView {
id: root
orientation: Qt.Vertical
readonly property int header1Size: 40
readonly property int header2Size: 40
function fillModel(model, count) {
const content = []
for (let i = 0; i < count; i++)
content.push({})
model.clear()
model.append(content)
}
function adjustModel(model, newCount) {
const countDiff = newCount - model.count
const randPos = () => Math.floor(Math.random() * model.count)
if (countDiff > 0) {
for (let i = 0; i < countDiff; i++)
model.insert(randPos(), {})
} else {
for (let i = 0; i < -countDiff; i++)
model.remove(randPos())
}
}
ListModel {
id: firstModel
Component.onCompleted: fillModel(this, firstSlider.value)
}
ListModel {
id: secondModel
Component.onCompleted: fillModel(this, secondSlider.value)
}
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
Rectangle {
id: frame
anchors.centerIn: parent
width: Math.round(parent.width / 2)
height: Math.round(parent.height / 2)
border.width: 1
color: "transparent"
DoubleFlickableWithFolding {
id: doubleFlickable
anchors.fill: parent
clip: clipCheckBox.checked
z: -1
ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn }
flickable1: GridView {
id: grid1
width: frame.width
model: firstModel
cellWidth: 120
cellHeight: 30
header: Item {
id: header1
height: root.header1Size
width: GridView.view.width
Rectangle {
parent: doubleFlickable.contentItem
y: doubleFlickable.gridHeader1YInContentItem
z: 1
width: header1.width
height: header1.height
color: "orange"
Label {
anchors.centerIn: parent
font.bold: true
text: (doubleFlickable.flickable1Folded ? "➡️" : "⬇")
+ " Community"
}
MouseArea {
anchors.fill: parent
onClicked: doubleFlickable.flip1Folding()
}
}
}
delegate: Rectangle {
width: grid1.cellWidth
height: grid1.cellHeight
border.color: "black"
color: "lightblue"
Text {
anchors.centerIn: parent
text: index
}
}
Rectangle {
border.color: "green"
border.width: 5
anchors.fill: parent
color: "transparent"
}
}
flickable2: GridView {
id: grid2
width: frame.width
model: secondModel
cellWidth: 100
cellHeight: 100
header: Item {
id: header2
height: root.header2Size
width: GridView.view.width
Rectangle {
parent: doubleFlickable.contentItem
y: doubleFlickable.gridHeader2YInContentItem
z: 1
width: header2.width
height: header2.height
color: "red"
Label {
anchors.centerIn: parent
font.bold: true
text: (doubleFlickable.flickable2Folded ? "➡️" : "⬇")
+ " Others"
}
MouseArea {
anchors.fill: parent
onClicked: doubleFlickable.flip2Folding()
}
}
}
delegate: Rectangle {
width: grid2.cellWidth
height: grid2.cellHeight
border.color: "black"
Text {
anchors.centerIn: parent
text: index
}
}
Rectangle {
border.color: "blue"
border.width: 5
anchors.fill: parent
color: "transparent"
}
}
}
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
SplitView.fillWidth: true
Column {
CheckBox {
id: clipCheckBox
text: "clip"
checked: true
}
RowLayout {
Label {
text: "first model:"
}
Slider {
id: firstSlider
from: 0
to: 200
stepSize: 1
value: 160
onValueChanged: adjustModel(firstModel, value)
}
RoundButton {
text: "-"
onClicked: firstSlider.decrease()
}
RoundButton {
text: "+"
onClicked: firstSlider.increase()
}
Label {
text: firstSlider.value
}
}
RowLayout {
Label {
text: "second model:"
}
Slider {
id: secondSlider
from: 0
to: 100
stepSize: 1
value: 90
onValueChanged: adjustModel(secondModel, value)
}
RoundButton {
text: "-"
onClicked: secondSlider.decrease()
}
RoundButton {
text: "+"
onClicked: secondSlider.increase()
}
Label {
text: secondSlider.value
}
}
}
}
}
// category: Components