diff --git a/.config/quickshell/modules/sidebarLeft/Anime.qml b/.config/quickshell/modules/sidebarLeft/Anime.qml index 2db36420d..da64020cd 100644 --- a/.config/quickshell/modules/sidebarLeft/Anime.qml +++ b/.config/quickshell/modules/sidebarLeft/Anime.qml @@ -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 diff --git a/.config/quickshell/modules/sidebarLeft/BooruImage.qml b/.config/quickshell/modules/sidebarLeft/BooruImage.qml new file mode 100644 index 000000000..7d5297791 --- /dev/null +++ b/.config/quickshell/modules/sidebarLeft/BooruImage.qml @@ -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 + } + } + } +} \ No newline at end of file diff --git a/.config/quickshell/modules/sidebarLeft/BooruResponse.qml b/.config/quickshell/modules/sidebarLeft/BooruResponse.qml index 9c4925f7c..6dd5c3498 100644 --- a/.config/quickshell/modules/sidebarLeft/BooruResponse.qml +++ b/.config/quickshell/modules/sidebarLeft/BooruResponse.qml @@ -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 } } }