diff --git a/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml b/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml index b97943af..cdc890dc 100644 --- a/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml +++ b/.config/quickshell/modules/sidebarLeft/SidebarLeft.qml @@ -118,7 +118,6 @@ Scope { // Scope sidebarRoot.currentTab = (sidebarRoot.currentTab - 1 + root.tabButtonList.length) % root.tabButtonList.length; } else if (event.key === Qt.Key_O) { - console.log("Extending sidebar") sidebarRoot.extend = !sidebarRoot.extend; } event.accepted = true; diff --git a/.config/quickshell/modules/sidebarLeft/anime/BooruResponse.qml b/.config/quickshell/modules/sidebarLeft/anime/BooruResponse.qml index 098b73cf..e9fe244a 100644 --- a/.config/quickshell/modules/sidebarLeft/anime/BooruResponse.qml +++ b/.config/quickshell/modules/sidebarLeft/anime/BooruResponse.qml @@ -23,7 +23,7 @@ Rectangle { property string nsfwPath property real availableWidth: parent.width - property real rowTooShortThreshold: 185 + property real rowTooShortThreshold: 190 property real imageSpacing: 5 property real responsePadding: 5 @@ -103,7 +103,6 @@ Rectangle { visible: root.responseData.tags.length > 0 Layout.alignment: Qt.AlignLeft Layout.fillWidth: { - console.log(root.responseData) return true } implicitHeight: tagRowLayout.implicitHeight @@ -181,42 +180,59 @@ Rectangle { Repeater { model: ScriptModel { values: { - // 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 + // Greedily add images to a row as long as rowHeight >= rowTooShortThreshold let i = 0; let rows = []; const responseList = root.responseData.images; + const minRowHeight = rowTooShortThreshold; + const availableImageWidth = availableWidth - root.imageSpacing - (responsePadding * 2); + while (i < responseList.length) { let row = { height: 0, images: [], }; - const availableImageWidth = availableWidth - root.imageSpacing - (responsePadding * 2) - 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 = availableImageWidth / combinedAspect; - if (rowHeight >= rowTooShortThreshold) { - row.height = rowHeight; - row.images.push(img1); - row.images.push(img2); - rows.push(row); - i += 2; - continue; + let j = i; + let combinedAspect = 0; + let rowHeight = 0; + + // Try to add as many images as possible without going below minRowHeight + while (j < responseList.length) { + combinedAspect += responseList[j].aspect_ratio; + // Subtract imageSpacing for each gap between images in the row + let imagesInRow = j - i + 1; + let totalSpacing = root.imageSpacing * (imagesInRow - 1); + let rowAvailableWidth = availableImageWidth - totalSpacing; + rowHeight = rowAvailableWidth / combinedAspect; + if (rowHeight < minRowHeight) { + combinedAspect -= responseList[j].aspect_ratio; + imagesInRow -= 1; + totalSpacing = root.imageSpacing * (imagesInRow - 1); + rowAvailableWidth = availableImageWidth - totalSpacing; + rowHeight = rowAvailableWidth / combinedAspect; + break; } + j++; + } + + // If we couldn't add any image (shouldn't happen), add at least one + if (j === i) { + row.images.push(responseList[i]); + row.height = availableImageWidth / responseList[i].aspect_ratio; + rows.push(row); + i++; + } else { + for (let k = i; k < j; k++) { + row.images.push(responseList[k]); + } + // Recalculate spacing for the final row + let imagesInRow = j - i; + let totalSpacing = root.imageSpacing * (imagesInRow - 1); + let rowAvailableWidth = availableImageWidth - totalSpacing; + row.height = rowAvailableWidth / combinedAspect; + rows.push(row); + i = j; } - // 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; } return rows; }