booru: page number

This commit is contained in:
end-4
2025-04-28 23:58:10 +02:00
parent 1f5ea7b983
commit f24cd8fa35
3 changed files with 101 additions and 40 deletions
@@ -15,6 +15,17 @@ Item {
property var panelWindow
property var inputField: tagInputField
Keys.onPressed: (event) => {
tagInputField.forceActiveFocus()
if (event.key === Qt.Key_PageUp) {
booruResponseListView.contentY = Math.max(0, booruResponseListView.contentY - booruResponseListView.height / 2)
event.accepted = true
} else if (event.key === Qt.Key_PageDown) {
booruResponseListView.contentY = Math.min(booruResponseListView.contentHeight - booruResponseListView.height, booruResponseListView.contentY + booruResponseListView.height / 2)
event.accepted = true
}
}
onFocusChanged: (focus) => {
if (focus) {
tagInputField.forceActiveFocus()
@@ -39,6 +50,14 @@ Item {
}
}
Behavior on contentY {
NumberAnimation {
id: scrollAnim
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
spacing: 10
model: ScriptModel {
values: Booru.responses
@@ -0,0 +1,44 @@
import "root:/"
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
Button {
id: root
property var imageData
property var rowHeight
padding: 0
PointingHandInteraction {}
background: Rectangle {
implicitWidth: imageData.width
implicitHeight: imageData.height
radius: Appearance.rounding.small
color: Appearance.colors.colLayer2
}
contentItem: Image {
id: imageData
anchors.fill: parent
sourceSize.width: imageRow.rowHeight * modelData.aspect_ratio
sourceSize.height: imageRow.rowHeight
fillMode: Image.PreserveAspectFit
source: modelData.preview_url
width: imageRow.rowHeight * modelData.aspect_ratio
height: imageRow.rowHeight
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: imageData.width
height: imageData.height
radius: Appearance.rounding.small
}
}
}
}
@@ -32,26 +32,45 @@ Rectangle {
ColumnLayout {
id: columnLayout
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: responsePadding
spacing: root.imageSpacing
// Header: provider name
Rectangle {
id: providerNameWrapper
color: Appearance.m3colors.m3secondaryContainer
radius: Appearance.rounding.small
// height: providerName.implicitHeight
implicitWidth: providerName.implicitWidth + 10 * 2
implicitHeight: Math.max(providerName.implicitHeight + 5 * 2, 30)
Layout.alignment: Qt.AlignLeft
// Provider name
RowLayout {
Rectangle {
id: providerNameWrapper
color: Appearance.m3colors.m3secondaryContainer
radius: Appearance.rounding.small
implicitWidth: providerName.implicitWidth + 10 * 2
implicitHeight: Math.max(providerName.implicitHeight + 5 * 2, 30)
Layout.alignment: Qt.AlignVCenter
StyledText {
id: providerName
anchors.centerIn: parent
font.pixelSize: Appearance.font.pixelSize.large
color: Appearance.m3colors.m3onSecondaryContainer
text: Booru.providers[root.responseData.provider].name
StyledText {
id: providerName
anchors.centerIn: parent
font.pixelSize: Appearance.font.pixelSize.large
color: Appearance.m3colors.m3onSecondaryContainer
text: Booru.providers[root.responseData.provider].name
}
}
Item { Layout.fillWidth: true }
Rectangle {
color: Appearance.colors.colLayer2
radius: Appearance.rounding.small
implicitWidth: Math.max(pageNumber.implicitWidth + 10 * 2, 20)
implicitHeight: pageNumber.implicitHeight + 5 * 2
Layout.alignment: Qt.AlignVCenter
StyledText {
id: pageNumber
anchors.centerIn: parent
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnLayer2
text: `Page ${root.responseData.page}`
}
}
}
@@ -155,30 +174,9 @@ Rectangle {
Repeater {
model: modelData.images
Rectangle {
implicitWidth: image.width
implicitHeight: image.height
radius: Appearance.rounding.small
color: Appearance.colors.colLayer2
Image {
id: image
anchors.fill: parent
sourceSize.width: imageRow.rowHeight * modelData.aspect_ratio
sourceSize.height: imageRow.rowHeight
fillMode: Image.PreserveAspectFit
source: modelData.preview_url
width: imageRow.rowHeight * modelData.aspect_ratio
height: imageRow.rowHeight
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: image.width
height: image.height
radius: Appearance.rounding.small
}
}
}
delegate: BooruImage {
imageData: modelData
rowHeight: imageRow.rowHeight
}
}
}