Merge pull request #946 from maltee1/mobile_usersettings

Make UserSettingsPage fit on a phone screen
This commit is contained in:
DeepBlueV7.X 2022-02-21 00:25:06 +00:00 committed by GitHub
commit 8727b696fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -25,45 +25,30 @@ Rectangle {
palette: Nheko.colors palette: Nheko.colors
ScrollBar.horizontal.visible: false ScrollBar.horizontal.visible: false
anchors.fill: parent anchors.fill: parent
anchors.margins: Nheko.paddingLarge anchors.topMargin: (collapsed? backButton.height : 0)+Nheko.paddingLarge
leftPadding: collapsed? Nheko.paddingMedium : Nheko.paddingLarge
bottomPadding: Nheko.paddingLarge
contentWidth: availableWidth contentWidth: availableWidth
Timer { ColumnLayout {
id: deadTimer
interval: 500
}
Connections {
target: scroll.contentItem
function onContentYChanged() { deadTimer.restart(); }
}
GridLayout {
id: grid id: grid
columns: userSettingsDialog.collapsed ? 1 : 2 spacing: Nheko.paddingMedium
rowSpacing: Nheko.paddingMedium
columnSpacing: Nheko.paddingMedium
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: userSettingsDialog.collapsed ? Nheko.paddingLarge : (userSettingsDialog.width-userSettingsDialog.collapsePoint) * 0.4 anchors.leftMargin: userSettingsDialog.collapsed ? 0 : (userSettingsDialog.width-userSettingsDialog.collapsePoint) * 0.4 + Nheko.paddingLarge
anchors.rightMargin: anchors.leftMargin anchors.rightMargin: anchors.leftMargin
Repeater { Repeater {
model: UserSettingsModel model: UserSettingsModel
Layout.fillWidth:true
delegate: Item { delegate: GridLayout {
columns: collapsed? 1 : 2
rows: collapsed? 2: 1
required property var model required property var model
id: r id: r
Component.onCompleted: {
while (children.length) {
children[0].parent = grid;
}
}
Label { Label {
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true Layout.fillWidth: true
@ -72,7 +57,7 @@ Rectangle {
//Layout.column: 0 //Layout.column: 0
Layout.columnSpan: (model.type == UserSettingsModel.SectionTitle && !userSettingsDialog.collapsed) ? 2 : 1 Layout.columnSpan: (model.type == UserSettingsModel.SectionTitle && !userSettingsDialog.collapsed) ? 2 : 1
//Layout.row: model.index //Layout.row: model.index
Layout.minimumWidth: implicitWidth //Layout.minimumWidth: implicitWidth
Layout.leftMargin: model.type == UserSettingsModel.SectionTitle ? 0 : Nheko.paddingMedium Layout.leftMargin: model.type == UserSettingsModel.SectionTitle ? 0 : Nheko.paddingMedium
Layout.topMargin: model.type == UserSettingsModel.SectionTitle ? Nheko.paddingLarge : 0 Layout.topMargin: model.type == UserSettingsModel.SectionTitle ? Nheko.paddingLarge : 0
font.pointSize: 1.1 * fontMetrics.font.pointSize font.pointSize: 1.1 * fontMetrics.font.pointSize
@ -84,6 +69,7 @@ Rectangle {
ToolTip.visible: hovered.hovered && model.description ToolTip.visible: hovered.hovered && model.description
ToolTip.text: model.description ?? "" ToolTip.text: model.description ?? ""
ToolTip.delay: Nheko.tooltipDelay ToolTip.delay: Nheko.tooltipDelay
wrapMode: Text.Wrap
} }
DelegateChooser { DelegateChooser {
@ -95,6 +81,7 @@ Rectangle {
Layout.columnSpan: (model.type == UserSettingsModel.SectionTitle && !userSettingsDialog.collapsed) ? 2 : 1 Layout.columnSpan: (model.type == UserSettingsModel.SectionTitle && !userSettingsDialog.collapsed) ? 2 : 1
Layout.preferredHeight: child.height Layout.preferredHeight: child.height
Layout.preferredWidth: Math.min(child.implicitWidth, child.width || 1000) Layout.preferredWidth: Math.min(child.implicitWidth, child.width || 1000)
Layout.maximumWidth: model.type == UserSettingsModel.SectionTitle ? Number.POSITIVE_INFINITY : 400
Layout.fillWidth: model.type == UserSettingsModel.SectionTitle || model.type == UserSettingsModel.Options || model.type == UserSettingsModel.Number Layout.fillWidth: model.type == UserSettingsModel.SectionTitle || model.type == UserSettingsModel.Options || model.type == UserSettingsModel.Number
Layout.rightMargin: model.type == UserSettingsModel.SectionTitle ? 0 : Nheko.paddingMedium Layout.rightMargin: model.type == UserSettingsModel.SectionTitle ? 0 : Nheko.paddingMedium
@ -113,8 +100,9 @@ Rectangle {
width: Math.min(parent.width, implicitWidth) width: Math.min(parent.width, implicitWidth)
model: r.model.values model: r.model.values
currentIndex: r.model.value currentIndex: r.model.value
enabled: !deadTimer.running
onCurrentIndexChanged: r.model.value = currentIndex onCurrentIndexChanged: r.model.value = currentIndex
WheelHandler{} // suppress scrolling changing values
} }
} }
DelegateChoice { DelegateChoice {
@ -123,13 +111,14 @@ Rectangle {
SpinBox { SpinBox {
anchors.right: parent.right anchors.right: parent.right
width: Math.min(parent.width, implicitWidth) width: Math.min(parent.width, implicitWidth)
enabled: !deadTimer.running && model.enabled
from: model.valueLowerBound from: model.valueLowerBound
to: model.valueUpperBound to: model.valueUpperBound
stepSize: model.valueStep stepSize: model.valueStep
value: model.value value: model.value
onValueChanged: model.value = value onValueChanged: model.value = value
editable: true editable: true
WheelHandler{} // suppress scrolling changing values
} }
} }
DelegateChoice { DelegateChoice {
@ -143,7 +132,6 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
width: Math.min(parent.width, implicitWidth) width: Math.min(parent.width, implicitWidth)
enabled: !deadTimer.running && model.enabled
from: model.valueLowerBound * div from: model.valueLowerBound * div
to: model.valueUpperBound * div to: model.valueUpperBound * div
stepSize: model.valueStep * div stepSize: model.valueStep * div
@ -165,6 +153,8 @@ Rectangle {
valueFromText: function(text, locale) { valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text) * spinbox.div return Number.fromLocaleString(locale, text) * spinbox.div
} }
WheelHandler{} // suppress scrolling changing values
} }
} }
DelegateChoice { DelegateChoice {
@ -237,6 +227,7 @@ Rectangle {
} }
ImageButton { ImageButton {
id: backButton
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.margins: Nheko.paddingMedium anchors.margins: Nheko.paddingMedium