From 50b7ad1c91577c0b632e891eada35da547959e21 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Fri, 15 Mar 2019 18:08:11 -0700
Subject: [PATCH] Fix truncating viewer info; fixes #2212
---
__tests__/src/components/ViewerInfo.test.js | 7 +++++--
src/components/ViewerInfo.js | 6 ++++--
src/styles/index.scss | 13 ++++++-------
3 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/__tests__/src/components/ViewerInfo.test.js b/__tests__/src/components/ViewerInfo.test.js
index 357d0392d..287b68ae2 100644
--- a/__tests__/src/components/ViewerInfo.test.js
+++ b/__tests__/src/components/ViewerInfo.test.js
@@ -21,8 +21,11 @@ describe('ViewerNavigation', () => {
it('renders the component', () => {
wrapper = createWrapper();
- expect(wrapper.find(Typography).length).toBe(1);
+
+ expect(wrapper.find(Typography).length).toBe(2);
expect(wrapper.find(Typography).at(0)
- .matchesElement(<Typography>3 of 8 • testLabel</Typography>)).toBe(true);
+ .matchesElement(<Typography>3 of 8</Typography>)).toBe(true);
+ expect(wrapper.find(Typography).at(1)
+ .matchesElement(<Typography> • testLabel</Typography>)).toBe(true);
});
});
diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js
index 94c1b361f..ac677a575 100644
--- a/src/components/ViewerInfo.js
+++ b/src/components/ViewerInfo.js
@@ -18,9 +18,11 @@ export class ViewerInfo extends Component {
return (
<div className={ns('osd-info')}>
- <Typography variant="caption" className={ns('canvas-label')}>
+ <Typography inline variant="caption" className={ns('canvas-count')}>
{`${canvasIndex + 1} ${t('of')} ${canvasCount}`}
- {canvasLabel && ` ${String.fromCharCode(8226)} ${canvasLabel}`}
+ </Typography>
+ <Typography inline variant="caption" className={ns('canvas-label')}>
+ {canvasLabel && ` • ${canvasLabel}`}
</Typography>
</div>
);
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f98a75a15..86a7c4890 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -124,7 +124,12 @@
}
&-osd-info {
- order: 2
+ order: 2;
+ overflow: hidden;
+ padding-bottom: 3px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
}
&-canvas-nav {
@@ -135,12 +140,6 @@
text-align: center;
}
- &-canvas-label {
- width: 100%;
- text-overflow: ellipsis;
- padding-bottom: 3px;
- }
-
&-thumb-navigation {
.mirador-thumbnail-nav-canvas {
--
GitLab