forked from Shinonome/dots-hyprland
booru: prevent GOAWAY on sidebar resize
This commit is contained in:
@@ -22,7 +22,7 @@ Rectangle {
|
|||||||
property string downloadPath
|
property string downloadPath
|
||||||
property string nsfwPath
|
property string nsfwPath
|
||||||
|
|
||||||
property real availableWidth: parent.width ?? 0
|
property real availableWidth: parent.width
|
||||||
property real rowTooShortThreshold: 185
|
property real rowTooShortThreshold: 185
|
||||||
property real imageSpacing: 5
|
property real imageSpacing: 5
|
||||||
property real responsePadding: 5
|
property real responsePadding: 5
|
||||||
@@ -31,6 +31,26 @@ Rectangle {
|
|||||||
anchors.right: parent?.right
|
anchors.right: parent?.right
|
||||||
implicitHeight: columnLayout.implicitHeight + root.responsePadding * 2
|
implicitHeight: columnLayout.implicitHeight + root.responsePadding * 2
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
// Break property bind to prevent aggressive updates
|
||||||
|
availableWidth = parent.width
|
||||||
|
}
|
||||||
|
|
||||||
|
Connections {
|
||||||
|
target: parent
|
||||||
|
function onWidthChanged() {
|
||||||
|
updateWidthTimer.restart()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Timer {
|
||||||
|
id: updateWidthTimer
|
||||||
|
interval: 100
|
||||||
|
onTriggered: {
|
||||||
|
availableWidth = parent.width
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
radius: Appearance.rounding.normal
|
radius: Appearance.rounding.normal
|
||||||
color: Appearance.colors.colLayer1
|
color: Appearance.colors.colLayer1
|
||||||
|
|
||||||
@@ -159,45 +179,47 @@ Rectangle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Repeater {
|
Repeater {
|
||||||
model: {
|
model: ScriptModel {
|
||||||
// Group two images every row, ensuring they are of the same height
|
values: {
|
||||||
// If the height ends up being too small, put one image in the row and continue
|
// Group two images every row, ensuring they are of the same height
|
||||||
// In other words, this is similar to Android's gallery layout at largest zoom level
|
// If the height ends up being too small, put one image in the row and continue
|
||||||
let i = 0;
|
// In other words, this is similar to Android's gallery layout at largest zoom level
|
||||||
let rows = [];
|
let i = 0;
|
||||||
const responseList = root.responseData.images;
|
let rows = [];
|
||||||
while (i < responseList.length) {
|
const responseList = root.responseData.images;
|
||||||
let row = {
|
while (i < responseList.length) {
|
||||||
height: 0,
|
let row = {
|
||||||
images: [],
|
height: 0,
|
||||||
};
|
images: [],
|
||||||
const availableImageWidth = availableWidth - root.imageSpacing - (responsePadding * 2)
|
};
|
||||||
if (i + 1 < responseList.length) {
|
const availableImageWidth = availableWidth - root.imageSpacing - (responsePadding * 2)
|
||||||
const img1 = responseList[i];
|
if (i + 1 < responseList.length) {
|
||||||
const img2 = responseList[i + 1];
|
const img1 = responseList[i];
|
||||||
// Calculate combined height if both are in the same row
|
const img2 = responseList[i + 1];
|
||||||
// Let h = row height, w1 = h * aspect1, w2 = h * aspect2
|
// Calculate combined height if both are in the same row
|
||||||
// w1 + w2 = availableWidth => h = availableWidth / (aspect1 + aspect2)
|
// Let h = row height, w1 = h * aspect1, w2 = h * aspect2
|
||||||
const combinedAspect = img1.aspect_ratio + img2.aspect_ratio;
|
// w1 + w2 = availableWidth => h = availableWidth / (aspect1 + aspect2)
|
||||||
const rowHeight = availableImageWidth / combinedAspect;
|
const combinedAspect = img1.aspect_ratio + img2.aspect_ratio;
|
||||||
if (rowHeight >= rowTooShortThreshold) {
|
const rowHeight = availableImageWidth / combinedAspect;
|
||||||
row.height = rowHeight;
|
if (rowHeight >= rowTooShortThreshold) {
|
||||||
row.images.push(img1);
|
row.height = rowHeight;
|
||||||
row.images.push(img2);
|
row.images.push(img1);
|
||||||
rows.push(row);
|
row.images.push(img2);
|
||||||
i += 2;
|
rows.push(row);
|
||||||
continue;
|
i += 2;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
// Otherwise, put only one image in the row
|
||||||
|
const rowHeight = (availableWidth - (responsePadding * 2)) / responseList[i].aspect_ratio;
|
||||||
|
rows.push({
|
||||||
|
height: rowHeight,
|
||||||
|
images: [responseList[i]],
|
||||||
|
});
|
||||||
|
i += 1;
|
||||||
}
|
}
|
||||||
// Otherwise, put only one image in the row
|
return rows;
|
||||||
const rowHeight = (availableWidth - (responsePadding * 2)) / responseList[i].aspect_ratio;
|
|
||||||
rows.push({
|
|
||||||
height: rowHeight,
|
|
||||||
images: [responseList[i]],
|
|
||||||
});
|
|
||||||
i += 1;
|
|
||||||
}
|
}
|
||||||
return rows;
|
|
||||||
}
|
}
|
||||||
delegate: RowLayout {
|
delegate: RowLayout {
|
||||||
id: imageRow
|
id: imageRow
|
||||||
|
|||||||
Reference in New Issue
Block a user