status-desktop/storybook/pages/DoubleFlickablePage.qml

239 lines
5.9 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 headerSize: 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"
DoubleFlickable {
id: doubleFlickable
anchors.fill: parent
clip: clipCheckBox.checked
z: -1
ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn }
flickable1: GridView {
width: frame.width
interactive: false
model: firstModel
cellWidth: 120
cellHeight: 30
header: Rectangle {
height: root.headerSize
width: GridView.view.width
color: "orange"
Label {
anchors.centerIn: parent
font.bold: true
text: "Community"
}
}
delegate: Rectangle {
width: GridView.view.cellWidth
height: GridView.view.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 {
width: frame.width
interactive: false
model: secondModel
cellWidth: 100
cellHeight: 100
header: Rectangle {
height: root.headerSize
width: GridView.view.width
color: "red"
Label {
anchors.centerIn: parent
font.bold: true
text: "Others"
}
}
delegate: Rectangle {
width: GridView.view.cellWidth
height: GridView.view.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