forked from Shinonome/dots-hyprland
booru: images, clear, provider setting
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user