diff --git a/src/ViewerToolbar.tsx b/src/ViewerToolbar.tsx index df35460f..974ce15b 100644 --- a/src/ViewerToolbar.tsx +++ b/src/ViewerToolbar.tsx @@ -120,15 +120,18 @@ export default function ViewerToolbar(props: ViewerToolbarProps) { ); } + const totalLabel = `${props.activeIndex + 1} ${props.totalName} ${props.count}`; let attributeNode = props.attribute ? ( -
- {props.alt && `${props.alt}`} - {props.noImgDetails || - {`(${props.width} x ${props.height})`} - } +
+ + {props.alt && `${props.alt}`} + {props.noImgDetails || + {`(${props.width} x ${props.height})`} + } + {props.showTotal && - {`${props.activeIndex + 1} ${props.totalName} ${props.count}`}} + {totalLabel}}
) : null; let toolbars = props.toolbars; diff --git a/src/style/index.less b/src/style/index.less index 0bc053f4..e27f0561 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -117,6 +117,8 @@ } &-attribute { + display: flex; + align-items: center; margin: 0 20px; margin-bottom: 6px; opacity: .8; @@ -124,8 +126,27 @@ font-size: 15px; } + // Match the counter's width on the left without duplicating visible text. + &-attribute[data-total]::before { + content: attr(data-total); + visibility: hidden; + margin-right: 8px; + } + + &-attribute[data-total]::before, &-showTotal { + flex: 0 0 auto; + max-width: 25%; + word-wrap: break-word; + } + + &-caption { + flex: 1; + min-width: 0; + word-wrap: break-word; + } + &-showTotal { - float: right; + margin-left: 8px; } @toolbarHeight: 28px;