status-desktop/ui/app/AppLayouts/Profile/views/ScrollingModal.qml

151 lines
4.3 KiB
QML

import QtQuick 2.15
import QtQml 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups.Dialog 0.1
import shared.popups 1.0
import shared.controls 1.0
import utils 1.0
StatusDialog {
id: root
destroyOnClose: false
property bool isCustomScrollingEnabled: false
property real initialVelocity
property real initialDeceleration
signal velocityChanged(real value)
signal decelerationChanged(real value)
signal customScrollingChanged(bool enabled)
footer.visible: false
implicitHeight: 610 // see contentColumn.height's comment
ColumnLayout {
id: contentColumn
// contentColumn will spread radio buttons evenly across all height if their height
// is less than contentColumn's. And we want to maintain dialog's constant height, so
// binding it to root's height when custom scrolling
height: root.isCustomScrollingEnabled ? parent.implicitHeight : implicitHeight
width: parent.width
spacing: Theme.padding
ButtonGroup { id: scrollSettingsGroup }
RadioButtonSelector {
Layout.fillWidth: true
title: qsTr("System")
buttonGroup: scrollSettingsGroup
checked: !root.isCustomScrollingEnabled
onClicked: {
root.customScrollingChanged(false)
}
}
RadioButtonSelector {
Layout.fillWidth: true
title: qsTr("Custom")
buttonGroup: scrollSettingsGroup
checked: root.isCustomScrollingEnabled
onClicked: {
root.customScrollingChanged(true)
}
}
ColumnLayout {
visible: root.isCustomScrollingEnabled
spacing: Theme.padding
Rectangle {
id: scrollSeparator
Layout.fillWidth: true
height: 1
color: Theme.palette.separator
}
StatusBaseText {
color: Theme.palette.secondaryText
font.pixelSize: Theme.secondaryTextFontSize
text: qsTr("Velocity")
}
StatusSlider {
id: scrollVelocitySlider
Layout.fillWidth: true
from: 0
to: 1000
stepSize: 1
readonly property int scaleFactor: 10
value: root.initialVelocity / scaleFactor
onMoved: {
root.velocityChanged(value * scaleFactor)
}
}
StatusBaseText {
color: Theme.palette.secondaryText
font.pixelSize: Theme.secondaryTextFontSize
text: qsTr("Deceleration")
}
StatusSlider {
id: scrollDecelerationSlider
Layout.fillWidth: true
from: 0
to: 2000
stepSize: 1
readonly property int scaleFactor: 10
value: initialDeceleration / scaleFactor
onMoved: {
root.decelerationChanged(value * scaleFactor)
}
}
StatusBaseText {
color: Theme.palette.secondaryText
font.pixelSize: Theme.secondaryTextFontSize
text: qsTr("Test scrolling")
}
StatusListView {
model: 100
Layout.fillWidth: true
Layout.preferredHeight: 170 // Bad, but setting fillHeight instead causes height being 0
delegate: StatusListItem {
title: modelData
}
Binding on flickDeceleration {
when: root.isCustomScrollingEnabled
value: scrollDecelerationSlider.value * scrollDecelerationSlider.scaleFactor
restoreMode: Binding.RestoreBindingOrValue
}
Binding on maximumFlickVelocity {
when: root.isCustomScrollingEnabled
value: scrollVelocitySlider.value * scrollVelocitySlider.scaleFactor
restoreMode: Binding.RestoreBindingOrValue
}
}
}
}
}