308 lines
8.0 KiB
QML
308 lines
8.0 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.15
|
|
import QtQml 2.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
|
|
|
|
readonly property int footerSize: 60
|
|
|
|
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: Rectangle {
|
|
z: 1
|
|
|
|
height: root.header1Size
|
|
width: GridView.view.width
|
|
|
|
color: "orange"
|
|
|
|
Label {
|
|
anchors.centerIn: parent
|
|
font.bold: true
|
|
text: (doubleFlickable.flickable1Folded ? "➡️" : "⬇")
|
|
+ " Community"
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
|
|
onClicked: doubleFlickable.flip1Folding()
|
|
}
|
|
}
|
|
|
|
footer: Rectangle {
|
|
z: 1
|
|
|
|
height: root.footerSize
|
|
width: grid1.width
|
|
|
|
Label {
|
|
anchors.centerIn: parent
|
|
text: "placeholder 1"
|
|
}
|
|
|
|
color: "yellow"
|
|
}
|
|
|
|
Binding {
|
|
target: grid1
|
|
property: "footer"
|
|
when: !grid1.model || grid1.count !== 0
|
|
//when: grid1.count !== 0
|
|
value: null
|
|
restoreMode: Binding.RestoreBindingOrValue
|
|
}
|
|
|
|
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: Rectangle {
|
|
z: 1
|
|
|
|
height: root.header2Size
|
|
width: GridView.view.width
|
|
|
|
color: "red"
|
|
|
|
Label {
|
|
anchors.centerIn: parent
|
|
font.bold: true
|
|
text: (doubleFlickable.flickable2Folded ? "➡️" : "⬇")
|
|
+ " Others"
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
|
|
onClicked: doubleFlickable.flip2Folding()
|
|
}
|
|
}
|
|
|
|
footer: Rectangle {
|
|
z: 1
|
|
|
|
height: root.footerSize
|
|
width: grid2.width
|
|
|
|
Label {
|
|
anchors.centerIn: parent
|
|
text: "placeholder 2"
|
|
}
|
|
|
|
color: "yellow"
|
|
}
|
|
|
|
Binding {
|
|
target: grid2
|
|
property: "footer"
|
|
when: !grid2.model || grid2.count !== 0
|
|
value: null
|
|
restoreMode: Binding.RestoreBindingOrValue
|
|
}
|
|
|
|
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
|