tedkulp/Readarr
1
0
Fork 0
mirror of https://github.com/Readarr/Readarr.git synced 2026-04-18 21:34:28 -04:00
Code Issues Projects Releases Wiki Activity

New: Scroll long book titles

Browse Source
This commit is contained in:
ta264
2021-04-07 17:53:39 +01:00
parent 72de94308b
commit 106a1c339b
2 changed files with 237 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/Book/Details/BookDetails.js
View File

@@ -14,6 +14,8 @@ import Icon from 'Components/Icon';
import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Marquee from 'Components/Marquee';
import Measure from 'Components/Measure';
import MonitorToggleButton from 'Components/MonitorToggleButton';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
@@ -57,7 +59,8 @@ class BookDetails extends Component {
isRetagModalOpen: false,
isEditBookModalOpen: false,
isDeleteBookModalOpen: false,
selectedTabIndex: 0
selectedTabIndex: 0,
titleWidth: 0
};
}
@@ -103,6 +106,10 @@ class BookDetails extends Component {
this.setState({ selectedTabIndex: index });
}
onTitleMeasure = ({ width }) => {
this.setState({ titleWidth: width });
}
//
// Render
@@ -141,9 +148,12 @@ class BookDetails extends Component {
isRetagModalOpen,
isEditBookModalOpen,
isDeleteBookModalOpen,
selectedTabIndex
selectedTabIndex,
titleWidth
} = this.state;
const marqueeWidth = (titleWidth - 150);
return (
<PageContent title={title}>
<PageToolbar>
@@ -217,51 +227,53 @@ class BookDetails extends Component {
/>
<div className={styles.info}>
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<Measure onMeasure={this.onTitleMeasure}>
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<div className={styles.toggleMonitoredContainer}>
<MonitorToggleButton
className={styles.monitorToggleButton}
monitored={monitored}
isSaving={isSaving}
size={40}
onPress={onMonitorTogglePress}
<div className={styles.toggleMonitoredContainer}>
<MonitorToggleButton
className={styles.monitorToggleButton}
monitored={monitored}
isSaving={isSaving}
size={40}
onPress={onMonitorTogglePress}
/>
</div>
<div className={styles.title} style={{ width: marqueeWidth }}>
<Marquee text={title} />
</div>
</div>
<div className={styles.bookNavigationButtons}>
<IconButton
className={styles.bookNavigationButton}
name={icons.ARROW_LEFT}
size={30}
title={`Go to ${previousBook.title}`}
to={`/book/${previousBook.titleSlug}`}
/>
<IconButton
className={styles.bookNavigationButton}
name={icons.ARROW_UP}
size={30}
title={`Go to ${author.authorName}`}
to={`/author/${author.titleSlug}`}
/>
<IconButton
className={styles.bookNavigationButton}
name={icons.ARROW_RIGHT}
size={30}
title={`Go to ${nextBook.title}`}
to={`/book/${nextBook.titleSlug}`}
/>
</div>
<div className={styles.title}>
{title}
</div>
</div>
<div className={styles.bookNavigationButtons}>
<IconButton
className={styles.bookNavigationButton}
name={icons.ARROW_LEFT}
size={30}
title={`Go to ${previousBook.title}`}
to={`/book/${previousBook.titleSlug}`}
/>
<IconButton
className={styles.bookNavigationButton}
name={icons.ARROW_UP}
size={30}
title={`Go to ${author.authorName}`}
to={`/author/${author.titleSlug}`}
/>
<IconButton
className={styles.bookNavigationButton}
name={icons.ARROW_RIGHT}
size={30}
title={`Go to ${nextBook.title}`}
to={`/book/${nextBook.titleSlug}`}
/>
</div>
</div>
</Measure>
<div className={styles.details}>
<div>
@@ -497,6 +509,7 @@ BookDetails.propTypes = {
author: PropTypes.object,
previousBook: PropTypes.object,
nextBook: PropTypes.object,
isSmallScreen: PropTypes.bool.isRequired,
onMonitorTogglePress: PropTypes.func.isRequired,
onRefreshPress: PropTypes.func,
onSearchPress: PropTypes.func.isRequired