Skip to content

3873: feat configure number of thumbnails #3915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fstoe wants to merge 5 commits into
base: main
Choose a base branch
from
Open

3873: feat configure number of thumbnails #3915

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a3e76ae
feat: allow shown thumbnails to be limited
Jun 11, 2024
eea13de
chore: remove debugging comment
Jun 11, 2024
3fab1c4
fix: typo
Jun 11, 2024
f4a13ec
chore: resolve mr conflicts
Dec 19, 2024
81a2dd0
fix: update thumbnailNavigation to limit shown thumbnail
Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 30 additions & 14 deletions src/components/ThumbnailNavigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,16 @@ export function ThumbnailNavigation({
}
};

/** */
const calculateForItems = (n) => {
let total = 0;
for (let i = 0; i < n; i += 1) {
total += calculateScaledSize(i);
}

return total + spacing;
};

/** */
const calculatingWidth = (canvasesLength) => {
if (canvasesLength === 1) {
Expand Down Expand Up @@ -172,20 +182,26 @@ export function ThumbnailNavigation({
defaultHeight={100}
defaultWidth={400}
>
{({ height, width }) => (
<List
direction={htmlDir}
height={areaHeight(height)}
itemCount={itemCount()}
itemSize={calculateScaledSize}
width={width}
layout={(position === 'far-bottom') ? 'horizontal' : 'vertical'}
itemData={itemData}
ref={gridRef}
>
{ThumbnailCanvasGrouping}
</List>
)}
{({ height, width }) => {
const calculatedHeight = (position === 'far-bottom') ? areaHeight(height) : calculateForItems(thumbnailNavigation.count ?? 1);
const calculatedWidth = (position === 'far-bottom') ? calculateForItems(thumbnailNavigation.count ?? 1) : width;
const layout = (position === 'far-bottom') ? 'horizontal' : 'vertical';

return (
<List
direction={htmlDir}
height={thumbnailNavigation.limit ? calculatedHeight : areaHeight(height)}
itemCount={itemCount()}
itemSize={calculateScaledSize}
width={thumbnailNavigation.limit ? calculatedWidth : width}
layout={layout}
itemData={itemData}
ref={gridRef}
>
{ThumbnailCanvasGrouping}
</List>
);
} }
</AutoSizer>
)}
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/config/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,8 @@ export default {
preferredFormats: ['jpg', 'png', 'webp', 'tif'],
},
thumbnailNavigation: {
count: 5, // The amount of thumbnails to be shown
limit: false, // Limits the shown thumbnails in the thumbnail navigation
Copy link
Copy Markdown
Contributor

@lutzhelm lutzhelm Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Couldn't these two settings be reduced to a single setting? Something like, the count setting does only apply if it is >0. I think we should avoid cluttering the settings with too many options. In that case, the setting should be set to 0 as default.
  2. Is there a more precise name than count (or limit, for that matter)? Like maxNumberOfThumbnails, or something preferably shorter?
  3. Alphabetical order would be nice to make eslint happy.

Copy link
Copy Markdown
Contributor Author

@fstoe fstoe Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. I made the requested changes. Let me know if i should center the navigation or not :)

defaultPosition: 'off', // Which position for the thumbnail navigation to be be displayed. Other possible values are "far-bottom" or "far-right"
displaySettings: true, // Display the settings for this in WindowTopMenu
height: 130, // height of entire ThumbnailNavigation area when position is "far-bottom"
Expand Down