278 lines
7.3 KiB
QML
278 lines
7.3 KiB
QML
|
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
|