mirror of
https://github.com/lidarr/lidarr.git
synced 2025-07-08 05:51:47 -07:00
UI Formatting Cleanup
This commit is contained in:
parent
b963f2aa82
commit
52e3d96f4a
110 changed files with 901 additions and 701 deletions
|
@ -103,8 +103,7 @@ class CircularProgressBar extends Component {
|
|||
strokeWidth,
|
||||
strokeDashoffset
|
||||
}}
|
||||
>
|
||||
</circle>
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{
|
||||
|
|
|
@ -366,7 +366,7 @@ class EnhancedSelectInput extends Component {
|
|||
}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { icons, inputTypes } from 'Helpers/Props';
|
||||
import Icon from 'Components/Icon';
|
||||
import { inputTypes } from 'Helpers/Props';
|
||||
import Link from 'Components/Link/Link';
|
||||
import CaptchaInputConnector from './CaptchaInputConnector';
|
||||
import CheckInput from './CheckInput';
|
||||
|
@ -85,7 +84,7 @@ function FormInputGroup(props) {
|
|||
errors,
|
||||
warnings,
|
||||
...otherProps
|
||||
} = props;
|
||||
} = props;
|
||||
|
||||
const InputComponent = getComponent(type);
|
||||
const checkInput = type === inputTypes.CHECK;
|
||||
|
|
|
@ -23,7 +23,8 @@ function FormInputHelpText(props) {
|
|||
isError && styles.isError,
|
||||
isWarning && styles.isWarning,
|
||||
isCheckInput && styles.isCheckInput
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
|
||||
{
|
||||
|
|
|
@ -98,8 +98,13 @@ RootFolderSelectInput.propTypes = {
|
|||
values: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
isSaving: PropTypes.bool.isRequired,
|
||||
saveError: PropTypes.object,
|
||||
includeNoChange: PropTypes.bool.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onNewRootFolderSelect: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
RootFolderSelectInput.defaultProps = {
|
||||
includeNoChange: false
|
||||
};
|
||||
|
||||
export default RootFolderSelectInput;
|
||||
|
|
|
@ -21,7 +21,8 @@ function RootFolderSelectInputOption(props) {
|
|||
<div className={classNames(
|
||||
styles.optionText,
|
||||
isMobile && styles.isMobile
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
<div>{value}</div>
|
||||
|
||||
{
|
||||
|
|
|
@ -18,8 +18,8 @@ function RootFolderSelectInputSelectedValue(props) {
|
|||
{...otherProps}
|
||||
>
|
||||
<div className={styles.path}>
|
||||
{value
|
||||
}</div>
|
||||
{value}
|
||||
</div>
|
||||
|
||||
{
|
||||
freeSpace != null && includeFreeSpace &&
|
||||
|
|
|
@ -24,8 +24,7 @@ function Icon(props) {
|
|||
style={{
|
||||
fontSize: `${size}px`
|
||||
}}
|
||||
>
|
||||
</i>
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -83,7 +83,6 @@ class ClipboardButton extends Component {
|
|||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
|
||||
const {
|
||||
showSuccess,
|
||||
showError
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:global(.isDisabled) {
|
||||
/*color: $disabledColor;*/
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,24 +28,8 @@
|
|||
position: absolute;
|
||||
border: 2px solid #3a3f51;
|
||||
border-radius: 100%;
|
||||
animation-fill-mode: both;
|
||||
animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
|
||||
}
|
||||
|
||||
@-webkit-keyframes rippleContainer {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes rippleContainer {
|
||||
|
|
|
@ -1,35 +1,29 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import Menu from 'Components/Menu/Menu';
|
||||
import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
|
||||
import styles from './FilterMenu.css';
|
||||
|
||||
class FilterMenu extends Component {
|
||||
function FilterMenu(props) {
|
||||
const {
|
||||
className,
|
||||
children,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
children,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
className={className}
|
||||
{...otherProps}
|
||||
>
|
||||
<ToolbarMenuButton
|
||||
iconName={icons.FILTER}
|
||||
text="Filter"
|
||||
/>
|
||||
{children}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Menu
|
||||
className={className}
|
||||
{...otherProps}
|
||||
>
|
||||
<ToolbarMenuButton
|
||||
iconName={icons.FILTER}
|
||||
text="Filter"
|
||||
/>
|
||||
{children}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
FilterMenu.propTypes = {
|
||||
|
|
|
@ -1,34 +1,28 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import Menu from 'Components/Menu/Menu';
|
||||
import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
|
||||
|
||||
class SortMenu extends Component {
|
||||
function SortMenu(props) {
|
||||
const {
|
||||
className,
|
||||
children,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
children,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
className={className}
|
||||
{...otherProps}
|
||||
>
|
||||
<ToolbarMenuButton
|
||||
iconName={icons.SORT}
|
||||
text="Sort"
|
||||
/>
|
||||
{children}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Menu
|
||||
className={className}
|
||||
{...otherProps}
|
||||
>
|
||||
<ToolbarMenuButton
|
||||
iconName={icons.SORT}
|
||||
text="Sort"
|
||||
/>
|
||||
{children}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
SortMenu.propTypes = {
|
||||
|
|
|
@ -18,7 +18,7 @@ function ViewMenu(props) {
|
|||
iconName={icons.VIEW}
|
||||
text="View"
|
||||
/>
|
||||
{children}
|
||||
{children}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -40,7 +40,8 @@ PageContentBody.propTypes = {
|
|||
className: PropTypes.string,
|
||||
innerClassName: PropTypes.string,
|
||||
isSmallScreen: PropTypes.bool.isRequired,
|
||||
children: PropTypes.node.isRequired
|
||||
children: PropTypes.node.isRequired,
|
||||
dispatch: PropTypes.func
|
||||
};
|
||||
|
||||
PageContentBody.defaultProps = {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.jumpBar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
flex: 0 0 30px;
|
||||
|
|
|
@ -43,7 +43,8 @@ function Message(props) {
|
|||
<div className={classNames(
|
||||
styles.message,
|
||||
styles[type]
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
<div className={styles.iconContainer}>
|
||||
<Icon
|
||||
name={getIconName(name)}
|
||||
|
|
|
@ -148,7 +148,8 @@ class PageToolbarSection extends Component {
|
|||
<div className={classNames(
|
||||
styles.section,
|
||||
styles[alignContent]
|
||||
)}>
|
||||
)}
|
||||
>
|
||||
{
|
||||
buttons.map((button) => {
|
||||
return button;
|
||||
|
|
|
@ -8,7 +8,7 @@ class PageToolbarSeparator extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.separator}></div>
|
||||
<div className={styles.separator} />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -55,22 +55,22 @@ function ProgressBar(props) {
|
|||
aria-valuemax="100"
|
||||
style={{ width: progressPercent }}
|
||||
/>
|
||||
{
|
||||
showText &&
|
||||
{
|
||||
showText &&
|
||||
<div
|
||||
className={styles.frontTextContainer}
|
||||
style={{ width: progressPercent }}
|
||||
>
|
||||
<div
|
||||
className={styles.frontTextContainer}
|
||||
style={{ width: progressPercent }}
|
||||
className={styles.frontText}
|
||||
style={{ width: actualWidth }}
|
||||
>
|
||||
<div
|
||||
className={styles.frontText}
|
||||
style={{ width: actualWidth }}
|
||||
>
|
||||
<div>
|
||||
{progressText}
|
||||
</div>
|
||||
<div>
|
||||
{progressText}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
.scroller {
|
||||
/* Placeholder */
|
||||
}
|
||||
|
||||
.thumb {
|
||||
|
|
|
@ -5,7 +5,7 @@ import Link from 'Components/Link/Link';
|
|||
import Icon from 'Components/Icon';
|
||||
import styles from './TableHeaderCell.css';
|
||||
|
||||
class VirtualTableHeaderCell extends Component {
|
||||
class TableHeaderCell extends Component {
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
@ -43,8 +43,8 @@ class VirtualTableHeaderCell extends Component {
|
|||
|
||||
const isSorting = isSortable && sortKey === name;
|
||||
const sortIcon = sortDirection === sortDirections.ASCENDING ?
|
||||
icons.SORT_ASCENDING :
|
||||
icons.SORT_DESCENDING;
|
||||
icons.SORT_ASCENDING :
|
||||
icons.SORT_DESCENDING;
|
||||
|
||||
return (
|
||||
isSortable ?
|
||||
|
@ -72,7 +72,7 @@ class VirtualTableHeaderCell extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
VirtualTableHeaderCell.propTypes = {
|
||||
TableHeaderCell.propTypes = {
|
||||
className: PropTypes.string,
|
||||
name: PropTypes.string.isRequired,
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
|
@ -86,9 +86,9 @@ VirtualTableHeaderCell.propTypes = {
|
|||
onSortPress: PropTypes.func
|
||||
};
|
||||
|
||||
VirtualTableHeaderCell.defaultProps = {
|
||||
TableHeaderCell.defaultProps = {
|
||||
className: styles.headerCell,
|
||||
isSortable: false
|
||||
};
|
||||
|
||||
export default VirtualTableHeaderCell;
|
||||
export default TableHeaderCell;
|
||||
|
|
|
@ -142,9 +142,9 @@ class VirtualTable extends Component {
|
|||
{...otherProps}
|
||||
/>
|
||||
</Scroller>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</WindowScroller>
|
||||
</Measure>
|
||||
);
|
||||
|
|
|
@ -58,8 +58,8 @@ class VirtualTableHeaderCell extends Component {
|
|||
|
||||
const isSorting = isSortable && sortKey === name;
|
||||
const sortIcon = sortDirection === sortDirections.ASCENDING ?
|
||||
icons.SORT_ASCENDING :
|
||||
icons.SORT_DESCENDING;
|
||||
icons.SORT_ASCENDING :
|
||||
icons.SORT_DESCENDING;
|
||||
|
||||
return (
|
||||
isSortable ?
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue