Backup_Repos/Readarr
1
0
Fork 0
mirror of https://github.com/Readarr/Readarr synced 2025-12-15 21:02:40 +01:00
Code Issues Projects Releases Wiki Activity

Fixed: Author/Book overview overflows

Browse source 
Bump react-measure to v2.5.2
This commit is contained in:
ta264 2021-04-08 08:55:16 +01:00
parent 106a1c339b
commit a84725f867
15 changed files with 921 additions and 821 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/Author/Details/AuthorDetails.css
View file

@ -67,13 +67,13 @@
.titleContainer {
display: flex;
margin-bottom: 5px;
margin-top: -5px;
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 50px;
line-height: 60px;
}
.toggleMonitoredContainer {
@ -99,6 +99,7 @@
.authorNavigationButtons {
position: absolute;
right: 0;
margin-top: 10px;
white-space: nowrap;
}
@ -142,7 +143,7 @@
}
.overview {
flex: 1 0 auto;
flex: 1 1 auto;
margin-top: 8px;
min-height: 0;
font-size: $intermediateFontSize;

40
frontend/src/Author/Details/AuthorDetails.js
View file

@ -14,6 +14,8 @@ import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
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';
@ -78,7 +80,9 @@ class AuthorDetails extends Component {
allExpanded: false,
allCollapsed: false,
expandedState: {},
selectedTabIndex: 0
selectedTabIndex: 0,
titleWidth: 0,
overviewHeight: 0
};
}
@ -155,6 +159,14 @@ class AuthorDetails extends Component {
this.setState({ selectedTabIndex: index });
}
onTitleMeasure = ({ width }) => {
this.setState({ titleWidth: width });
}
onOverviewMeasure = ({ height }) => {
this.setState({ overviewHeight: height });
}
//
// Render
@ -206,9 +218,13 @@ class AuthorDetails extends Component {
allExpanded,
allCollapsed,
expandedState,
selectedTabIndex
selectedTabIndex,
titleWidth,
overviewHeight
} = this.state;
const marqueeWidth = (titleWidth - 170);
const continuing = status === 'continuing';
let bookFilesCountMessage = 'No book files';
@ -315,7 +331,10 @@ class AuthorDetails extends Component {
/>
<div className={styles.info}>
<div className={styles.titleRow}>
<Measure
onMeasure={this.onTitleMeasure}
className={styles.titleRow}
>
<div className={styles.titleContainer}>
<div className={styles.toggleMonitoredContainer}>
<MonitorToggleButton
@ -327,8 +346,8 @@ class AuthorDetails extends Component {
/>
</div>
<div className={styles.title}>
{authorName}
<div className={styles.title} style={{ width: marqueeWidth }}>
<Marquee text={authorName} />
</div>
{
@ -374,7 +393,7 @@ class AuthorDetails extends Component {
to={`/author/${nextAuthor.titleSlug}`}
/>
</div>
</div>
</Measure>
<div className={styles.details}>
<div>
@ -515,12 +534,15 @@ class AuthorDetails extends Component {
}
</div>
<div className={styles.overview}>
<Measure
onMeasure={this.onOverviewMeasure}
className={styles.overview}
>
<TextTruncate
line={Math.floor(125 / (defaultFontSize * lineHeight))}
line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
text={stripHtml(overview)}
/>
</div>
</Measure>
</div>
</div>
</div>

1
frontend/src/Author/Index/Banners/AuthorIndexBanners.js
View file

@ -264,7 +264,6 @@ class AuthorIndexBanners extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller

1
frontend/src/Author/Index/Overview/AuthorIndexOverviews.js
View file

@ -204,7 +204,6 @@ class AuthorIndexOverviews extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller

1
frontend/src/Author/Index/Posters/AuthorIndexPosters.js
View file

@ -270,7 +270,6 @@ class AuthorIndexPosters extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller

8
frontend/src/Book/Details/BookDetails.css
View file

@ -54,13 +54,13 @@
.titleContainer {
display: flex;
margin-bottom: 5px;
margin-top: -5px
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 50px;
line-height: 60px;
}
.toggleMonitoredContainer {
@ -128,8 +128,8 @@
}
.overview {
flex: 1 0 auto;
margin-top: 8px;
flex: 1 1 auto;
margin-top: 4px;
min-height: 0;
font-size: $intermediateFontSize;
}

107
frontend/src/Book/Details/BookDetails.js
View file

@ -60,7 +60,8 @@ class BookDetails extends Component {
isEditBookModalOpen: false,
isDeleteBookModalOpen: false,
selectedTabIndex: 0,
titleWidth: 0
titleWidth: 0,
overviewHeight: 0
};
}
@ -110,6 +111,10 @@ class BookDetails extends Component {
this.setState({ titleWidth: width });
}
onOverviewMeasure = ({ height }) => {
this.setState({ overviewHeight: height });
}
//
// Render
@ -149,10 +154,11 @@ class BookDetails extends Component {
isEditBookModalOpen,
isDeleteBookModalOpen,
selectedTabIndex,
titleWidth
titleWidth,
overviewHeight
} = this.state;
const marqueeWidth = (titleWidth - 150);
const marqueeWidth = (titleWidth - 170);
return (
<PageContent title={title}>
@ -227,51 +233,52 @@ class BookDetails extends Component {
/>
<div className={styles.info}>
<Measure onMeasure={this.onTitleMeasure}>
<div className={styles.titleRow}>
<div className={styles.titleContainer}>
<Measure
onMeasure={this.onTitleMeasure}
className={styles.titleRow}
>
<div className={styles.titleContainer}>
<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 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>
</Measure>
@ -370,12 +377,15 @@ class BookDetails extends Component {
/>
</div>
<div className={styles.overview}>
<Measure
onMeasure={this.onOverviewMeasure}
className={styles.overview}
>
<TextTruncate
line={Math.floor(125 / (defaultFontSize * lineHeight))}
line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
text={stripHtml(overview)}
/>
</div>
</Measure>
</div>
</div>
</div>
@ -509,7 +519,6 @@ 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

1
frontend/src/Calendar/CalendarPage.js
View file

@ -149,7 +149,6 @@ class CalendarPage extends Component {
{
!authorError && authorIsPopulated && hasAuthor &&
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
{

33
frontend/src/Components/Measure.js
View file

@ -16,23 +16,46 @@ class Measure extends Component {
// Listeners
onMeasure = _.debounce((payload) => {
this.props.onMeasure(payload);
}, 250, { leading: true, trailing: false })
this.props.onMeasure(payload.bounds);
}, 250, { leading: true, trailing: true })
//
// Render
render() {
const {
className,
style,
onMeasure,
children,
...otherProps
} = this.props;
return (
<ReactMeasure
{...this.props}
/>
bounds={true}
onResize={this.onMeasure}
{...otherProps}
>
{({ measureRef }) => (
<div
ref={measureRef}
className={className}
style={style}
>
{children}
</div>
)}
</ReactMeasure>
);
}
}
Measure.propTypes = {
onMeasure: PropTypes.func.isRequired
className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
onMeasure: PropTypes.func.isRequired,
children: PropTypes.node
};
export default Measure;

26
frontend/src/Components/Page/PageJumpBar.js
View file

@ -123,22 +123,20 @@ class PageJumpBar extends Component {
return (
<div className={styles.jumpBar}>
<Measure
whitelist={['height']}
className={styles.jumpBarItems}
onMeasure={this.onMeasure}
>
<div className={styles.jumpBarItems}>
{
visibleItems.map((item) => {
return (
<PageJumpBarItem
key={item}
label={item}
onItemPress={onItemPress}
/>
);
})
}
</div>
{
visibleItems.map((item) => {
return (
<PageJumpBarItem
key={item}
label={item}
onItemPress={onItemPress}
/>
);
})
}
</Measure>
</div>
);

120
frontend/src/Components/Page/Toolbar/PageToolbarSection.js
View file

@ -133,73 +133,69 @@ class PageToolbarSection extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
className={styles.sectionContainer}
style={{
flexGrow: buttonCount
}}
>
<div
className={styles.sectionContainer}
style={{
flexGrow: buttonCount
}}
>
{
isMeasured ?
<div className={classNames(
styles.section,
styles[alignContent]
)}
>
{
buttons.map((button) => {
return button;
})
}
{
isMeasured ?
<div className={classNames(
styles.section,
styles[alignContent]
)}
>
{
buttons.map((button) => {
return button;
})
}
{
!!overflowItems.length &&
<Menu>
<ToolbarMenuButton
className={styles.overflowMenuButton}
iconName={icons.OVERFLOW}
text="More"
/>
{
!!overflowItems.length &&
<Menu>
<ToolbarMenuButton
className={styles.overflowMenuButton}
iconName={icons.OVERFLOW}
text="More"
/>
<MenuContent>
{
overflowItems.map((item) => {
const {
iconName,
spinningName,
label,
isDisabled,
isSpinning,
...otherProps
} = item;
<MenuContent>
{
overflowItems.map((item) => {
const {
iconName,
spinningName,
label,
isDisabled,
isSpinning,
...otherProps
} = item;
return (
<MenuItem
key={label}
isDisabled={isDisabled || isSpinning}
{...otherProps}
>
<SpinnerIcon
className={styles.overflowMenuItemIcon}
name={iconName}
spinningName={spinningName}
isSpinning={isSpinning}
/>
{label}
</MenuItem>
);
})
}
</MenuContent>
</Menu>
}
</div> :
null
}
</div>
return (
<MenuItem
key={label}
isDisabled={isDisabled || isSpinning}
{...otherProps}
>
<SpinnerIcon
className={styles.overflowMenuItemIcon}
name={iconName}
spinningName={spinningName}
isSpinning={isSpinning}
/>
{label}
</MenuItem>
);
})
}
</MenuContent>
</Menu>
}
</div> :
null
}
</Measure>
);
}

145
frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
View file

@ -113,8 +113,6 @@ class EditQualityProfileModalContent extends Component {
return (
<ModalContent onModalClose={onModalClose}>
<Measure
whitelist={['height']}
includeMargin={false}
onMeasure={this.onHeaderMeasure}
>
<ModalHeader>
@ -124,91 +122,86 @@ class EditQualityProfileModalContent extends Component {
<ModalBody>
<Measure
whitelist={['height']}
onMeasure={this.onBodyMeasure}
>
<div>
{
isFetching &&
<LoadingIndicator />
}
{
isFetching &&
<LoadingIndicator />
}
{
!isFetching && !!error &&
<div>Unable to add a new quality profile, please try again.</div>
}
{
!isFetching && !!error &&
<div>Unable to add a new quality profile, please try again.</div>
}
{
!isFetching && !error &&
<Form {...otherProps}>
<div className={styles.formGroupsContainer}>
<div className={styles.formGroupWrapper}>
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Name
</FormLabel>
{
!isFetching && !error &&
<Form {...otherProps}>
<div className={styles.formGroupsContainer}>
<div className={styles.formGroupWrapper}>
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Name
</FormLabel>
<FormInputGroup
type={inputTypes.TEXT}
name="name"
{...name}
onChange={onInputChange}
/>
</FormGroup>
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Upgrades Allowed
</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="upgradeAllowed"
{...upgradeAllowed}
helpText="If disabled qualities will not be upgraded"
onChange={onInputChange}
/>
</FormGroup>
{
upgradeAllowed.value &&
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Upgrade Until
</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="cutoff"
{...cutoff}
values={qualities}
helpText="Once this quality is reached Readarr will no longer download books"
onChange={onCutoffChange}
/>
</FormGroup>
}
</div>
<div className={styles.formGroupWrapper}>
<QualityProfileItems
editGroups={editGroups}
qualityProfileItems={items.value}
errors={items.errors}
warnings={items.warnings}
{...otherProps}
<FormInputGroup
type={inputTypes.TEXT}
name="name"
{...name}
onChange={onInputChange}
/>
</div>
</div>
</Form>
</FormGroup>
}
</div>
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Upgrades Allowed
</FormLabel>
<FormInputGroup
type={inputTypes.CHECK}
name="upgradeAllowed"
{...upgradeAllowed}
helpText="If disabled qualities will not be upgraded"
onChange={onInputChange}
/>
</FormGroup>
{
upgradeAllowed.value &&
<FormGroup size={sizes.EXTRA_SMALL}>
<FormLabel size={sizes.SMALL}>
Upgrade Until
</FormLabel>
<FormInputGroup
type={inputTypes.SELECT}
name="cutoff"
{...cutoff}
values={qualities}
helpText="Once this quality is reached Readarr will no longer download books"
onChange={onCutoffChange}
/>
</FormGroup>
}
</div>
<div className={styles.formGroupWrapper}>
<QualityProfileItems
editGroups={editGroups}
qualityProfileItems={items.value}
errors={items.errors}
warnings={items.warnings}
{...otherProps}
/>
</div>
</div>
</Form>
}
</Measure>
</ModalBody>
<Measure
whitelist={['height']}
includeMargin={false}
onMeasure={this.onFooterMeasure}
>
<ModalFooter>

54
frontend/src/Settings/Profiles/Quality/QualityProfileItems.js
View file

@ -121,40 +121,36 @@ class QualityProfileItems extends Component {
</Button>
<Measure
whitelist={['height']}
includeMargin={false}
onMeasure={this.onMeasure}
className={styles.qualities}
style={{ minHeight: `${minHeight}px` }}
>
<div
className={styles.qualities}
style={{ minHeight: `${minHeight}px` }}
>
{
qualityProfileItems.map(({ id, name, allowed, quality, items }, index) => {
const identifier = quality ? quality.id : id;
{
qualityProfileItems.map(({ id, name, allowed, quality, items }, index) => {
const identifier = quality ? quality.id : id;
return (
<QualityProfileItemDragSource
key={identifier}
editGroups={editGroups}
groupId={id}
qualityId={quality && quality.id}
name={quality ? quality.name : name}
allowed={allowed}
items={items}
qualityIndex={`${index + 1}`}
isInGroup={false}
isDragging={isDragging}
isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown}
{...otherProps}
/>
);
}).reverse()
}
return (
<QualityProfileItemDragSource
key={identifier}
editGroups={editGroups}
groupId={id}
qualityId={quality && quality.id}
name={quality ? quality.name : name}
allowed={allowed}
items={items}
qualityIndex={`${index + 1}`}
isInGroup={false}
isDragging={isDragging}
isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown}
{...otherProps}
/>
);
}).reverse()
}
<QualityProfileItemDragPreview />
</div>
<QualityProfileItemDragPreview />
</Measure>
</div>
</FormGroup>

2
package.json
View file

@ -104,7 +104,7 @@
"react-focus-lock": "2.4.1",
"react-google-recaptcha": "2.1.0",
"react-lazyload": "3.0.0",
"react-measure": "1.4.7",
"react-measure": "2.5.2",
"react-popper": "1.3.7",
"react-redux": "7.2.1",
"react-router": "5.2.0",

1196
yarn.lock
View file

File diff suppressed because it is too large Load diff