booru: images, clear, provider setting

This commit is contained in:
end-4
2025-04-28 23:24:11 +02:00
parent 160a55d859
commit 1f5ea7b983
6 changed files with 380 additions and 36 deletions
@@ -55,6 +55,17 @@ Singleton {
}
}
property QtObject sidebar: QtObject {
property QtObject booru: QtObject {
property bool allowNsfw: false
property string defaultProvider: "yandere"
property int limit: 20 // Images per page
property QtObject zerochan: QtObject {
// property string username
}
}
}
property QtObject hacks: QtObject {
property int arbitraryRaceConditionDelay: 10 // milliseconds
}
@@ -5,15 +5,16 @@ import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
import Qt5Compat.GraphicalEffects
Item {
id: root
property var panelWindow
property var inputField: tagInputField
onFocusChanged: (focus) => {
if (focus) {
tagInputField.forceActiveFocus()
@@ -21,6 +22,7 @@ Item {
}
ColumnLayout {
id: columnLayout
anchors.fill: parent
ListView { // Booru responses
@@ -28,21 +30,33 @@ Item {
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
model: Booru.responses
delegate: StyledText {
id: booruResponseText
text: JSON.stringify(modelData)
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: swipeView.width
height: swipeView.height
radius: Appearance.rounding.small
}
}
spacing: 10
model: ScriptModel {
values: Booru.responses
}
delegate: BooruResponse {
responseData: modelData
tagInputField: root.inputField
}
}
Rectangle {
id: tagInputFieldContainer
Layout.fillWidth: true
radius: Appearance.rounding.small
border.width: 1
border.color: Appearance.m3colors.m3outlineVariant
color: "transparent"
color: Appearance.colors.colLayer1
implicitWidth: tagInputField.implicitWidth
implicitHeight: tagInputField.implicitHeight
implicitHeight: Math.max(tagInputField.implicitHeight, 45)
clip: true
Behavior on implicitHeight {
NumberAnimation {
@@ -53,7 +67,9 @@ Item {
TextArea {
id: tagInputField
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
wrapMode: TextArea.Wrap
padding: 10
@@ -71,9 +87,32 @@ Item {
tagInputField.insert(tagInputField.cursorPosition, "\n")
event.accepted = true
} else {
// Submit on Enter or Ctrl+Enter
const tagList = tagInputField.text.split(/\s+/);
Booru.makeRequest(tagList);
const inputText = tagInputField.text
if (inputText.startsWith("/")) {
// Handle special commands
const command = inputText.split(" ")[0].substring(1);
if (command === "clear") {
Booru.clearResponses();
}
else if (command === "mode") {
const newProvider = inputText.split(" ")[1];
Booru.setProvider(newProvider);
Booru.addSystemMessage(`Provider set to ${Booru.providers[newProvider].name}`);
}
}
else {
// Create tag list
const tagList = inputText.split(/\s+/);
let pageIndex = 1;
for (let i = 0; i < tagList.length; ++i) { // Detect page number
if (/^\d+$/.test(tagList[i])) {
pageIndex = parseInt(tagList[i], 10);
tagList.splice(i, 1);
break;
}
}
Booru.makeRequest(tagList, ConfigOptions.sidebar.booru.allowNsfw, ConfigOptions.sidebar.booru.limit, pageIndex);
}
tagInputField.clear()
event.accepted = true
}
@@ -0,0 +1,187 @@
import "root:/"
import "root:/services"
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
import Qt5Compat.GraphicalEffects
Rectangle {
id: root
property var responseData
property var tagInputField
property real availableWidth: parent?.width
property real rowTooShortThreshold: 100
property real imageSpacing: 5
property real responsePadding: 5
anchors.left: parent?.left
anchors.right: parent?.right
implicitHeight: columnLayout.implicitHeight + root.responsePadding * 2
radius: Appearance.rounding.normal
color: Appearance.colors.colLayer1
ColumnLayout {
id: columnLayout
anchors.fill: parent
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
StyledText {
id: providerName
anchors.centerIn: parent
font.pixelSize: Appearance.font.pixelSize.large
color: Appearance.m3colors.m3onSecondaryContainer
text: Booru.providers[root.responseData.provider].name
}
}
// Tags
Flickable {
id: tagsFlickable
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: {
console.log(root.responseData)
return true
}
implicitHeight: tagRowLayout.implicitHeight
// height: tagRowLayout.implicitHeight
contentWidth: tagRowLayout.implicitWidth
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: tagsFlickable.width
height: tagsFlickable.height
radius: Appearance.rounding.small
}
}
Behavior on height {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
Behavior on implicitHeight {
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
RowLayout {
id: tagRowLayout
Layout.alignment: Qt.AlignBottom
Repeater {
id: tagRepeater
model: root.responseData.tags
BooruTagButton {
Layout.fillWidth: false
buttonText: modelData
onClicked: {
root.tagInputField.text += " " + modelData
}
}
}
}
}
Repeater {
model: {
// Group two images every row, ensuring they are of the same height
// If the height ends up being too small, put one image in the row and continue
// In other words, this is similar to Android's gallery layout at largest zoom level
let i = 0;
let rows = [];
const responseList = root.responseData.images;
while (i < responseList.length) {
let row = {
height: 0,
images: [],
};
if (i + 1 < responseList.length) {
const img1 = responseList[i];
const img2 = responseList[i + 1];
// Calculate combined height if both are in the same row
// Let h = row height, w1 = h * aspect1, w2 = h * aspect2
// w1 + w2 = availableWidth => h = availableWidth / (aspect1 + aspect2)
const combinedAspect = img1.aspect_ratio + img2.aspect_ratio;
const rowHeight = (availableWidth - root.imageSpacing - responsePadding * 2) / combinedAspect;
if (rowHeight >= rowTooShortThreshold) {
row.height = rowHeight;
row.images.push(img1);
row.images.push(img2);
rows.push(row);
i += 2;
continue;
}
}
// Otherwise, put only one image in the row
rows.push({
height: availableWidth / responseList[i].aspect_ratio,
images: [responseList[i]],
});
i += 1;
}
return rows;
}
delegate: RowLayout {
id: imageRow
property var rowHeight: modelData.height
spacing: root.imageSpacing
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
}
}
}
}
}
}
}
}
}
@@ -0,0 +1,34 @@
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/services"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import Quickshell.Services.Notifications
Button {
id: button
property string buttonText
implicitHeight: 30
leftPadding: 10
rightPadding: 10
// PointingHandInteraction {}
background: Rectangle {
radius: Appearance.rounding.small
color: (button.down ? Appearance.colors.colSurfaceContainerHighestActive :
button.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
Appearance.m3colors.m3surfaceContainerHighest)
}
contentItem: StyledText {
horizontalAlignment: Text.AlignHCenter
text: buttonText
color: Appearance.m3colors.m3onSurface
}
}
@@ -5,12 +5,12 @@ import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
import Qt5Compat.GraphicalEffects
Scope { // Scope
id: root
@@ -136,7 +136,9 @@ Scope { // Scope
text: "To be implemented"
horizontalAlignment: Text.AlignHCenter
}
Anime {}
Anime {
panelWindow: sidebarRoot
}
}
}