diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 1a4ce20cf..f85eae6ce 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -19,6 +19,7 @@ export class ThumbnailNavigation extends Component {
this.scrollbarSize = 15;
this.spacing = 8; // 2 * (2px margin + 2px border + 2px padding + 2px padding)
this.calculateScaledSize = this.calculateScaledSize.bind(this);
+ this.calculateForItems = this.calculateForItems.bind(this);
this.itemCount = this.itemCount.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.nextCanvas = this.nextCanvas.bind(this);
@@ -94,6 +95,21 @@ export class ThumbnailNavigation extends Component {
}
}
+ /**
+ * This function sums up n thumbnails and adds a fixed spacing.
+ *
+ * @param {number} n - The number of thumbnail items
+ * @returns {number} - The total width of n items plus the spacing.
+ */
+ calculateForItems(n) {
+ let total = 0;
+ for (let i = 0; i < n; i += 1) {
+ total += this.calculateScaledSize(i);
+ }
+
+ return total + this.spacing;
+ }
+
/** */
calculatingWidth(canvasesLength) {
const { thumbnailNavigation } = this.props;
@@ -184,6 +200,7 @@ export class ThumbnailNavigation extends Component {
if (position === 'off') {
return null;
}
+
const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
const itemData = {
canvasGroupings,
@@ -215,20 +232,26 @@ export class ThumbnailNavigation extends Component {
defaultHeight={100}
defaultWidth={400}
>
- {({ height, width }) => (
-
- {ThumbnailCanvasGrouping}
-
- )}
+ {({ height, width }) => {
+ const calculatedHeight = (position === 'far-bottom') ? this.areaHeight(height) : this.calculateForItems(thumbnailNavigation.count ?? 1);
+ const calculatedWidth = (position === 'far-bottom') ? this.calculateForItems(thumbnailNavigation.count ?? 1) : width;
+ const layout = (position === 'far-bottom') ? 'horizontal' : 'vertical';
+
+ return (
+
+ {ThumbnailCanvasGrouping}
+
+ );
+ }}
diff --git a/src/config/settings.js b/src/config/settings.js
index cfcf232db..d58d71de9 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -511,6 +511,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
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"