shpaq/Prowlarr-Prowlarr
1
0
Fork 0
mirror of https://github.com/Prowlarr/Prowlarr.git synced 2025-09-17 17:14:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

New: Many UI Updates and Performance Tweaks

Browse Source
This commit is contained in:
Qstick
2019-04-12 23:25:58 -04:00
parent b24a40797f
commit 6275737ced
389 changed files with 7961 additions and 5635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/Components/Table/Cells/RelativeDateCell.css
View File

@@ -1,5 +1,5 @@
.cell {
composes: cell from './TableRowCell.css';
composes: cell from '~./TableRowCell.css';
width: 180px;
}

58
frontend/src/Components/Table/Cells/RelativeDateCell.js
View File

@@ -1,42 +1,48 @@
import PropTypes from 'prop-types';
import React from 'react';
import React, { PureComponent } from 'react';
import formatDateTime from 'Utilities/Date/formatDateTime';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import TableRowCell from './TableRowCell';
import styles from './RelativeDateCell.css';
function RelativeDateCell(props) {
const {
className,
date,
includeSeconds,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat,
component: Component,
dispatch,
...otherProps
} = props;
class RelativeDateCell extends PureComponent {
//
// Render
render() {
const {
className,
date,
includeSeconds,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat,
component: Component,
dispatch,
...otherProps
} = this.props;
if (!date) {
return (
<Component
className={className}
{...otherProps}
/>
);
}
if (!date) {
return (
<Component
className={className}
title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
{...otherProps}
/>
>
{getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })}
</Component>
);
}
return (
<Component
className={className}
title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })}
{...otherProps}
>
{getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })}
</Component>
);
}
RelativeDateCell.propTypes = {

4
frontend/src/Components/Table/Cells/TableRowCellButton.css
View File

@@ -1,4 +1,4 @@
.cell {
composes: cell from './TableRowCell.css';
composes: link from 'Components/Link/Link.css';
composes: cell from '~./TableRowCell.css';
composes: link from '~Components/Link/Link.css';
}

4
frontend/src/Components/Table/Cells/TableSelectCell.css
View File

@@ -1,11 +1,11 @@
.selectCell {
composes: cell from 'Components/Table/Cells/TableRowCell.css';
composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 30px;
}
.input {
composes: input from 'Components/Form/CheckInput.css';
composes: input from '~Components/Form/CheckInput.css';
margin: 0;
}

2
frontend/src/Components/Table/Cells/VirtualTableRowCell.css
View File

@@ -1,6 +1,6 @@
.cell {
@add-mixin truncate;
composes: cell from 'Components/Table/Cells/TableRowCell.css';
composes: cell from '~Components/Table/Cells/TableRowCell.css';
flex-grow: 0;
flex-shrink: 1;

4
frontend/src/Components/Table/Cells/VirtualTableSelectCell.css
View File

@@ -1,11 +1,11 @@
.cell {
composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
flex: 0 0 36px;
}
.input {
composes: input from 'Components/Form/CheckInput.css';
composes: input from '~Components/Form/CheckInput.css';
margin: 0;
}

182
frontend/src/Components/Table/TableOptions/TableOptionsModal.js
View File

@@ -131,105 +131,111 @@ class TableOptionsModal extends Component {
isOpen={isOpen}
onModalClose={onModalClose}
>
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{
isOpen ?
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
Table Options
</ModalHeader>
</ModalHeader>
<ModalBody>
<Form>
{
hasPageSize &&
<FormGroup>
<FormLabel>Page Size</FormLabel>
<ModalBody>
<Form>
{
hasPageSize ?
<FormGroup>
<FormLabel>Page Size</FormLabel>
<FormInputGroup
type={inputTypes.NUMBER}
name="pageSize"
value={pageSize || 0}
helpText="Number of items to show on each page"
errors={pageSizeError ? [{ message: pageSizeError }] : undefined}
onChange={this.onPageSizeChange}
/>
</FormGroup>
}
<FormInputGroup
type={inputTypes.NUMBER}
name="pageSize"
value={pageSize || 0}
helpText="Number of items to show on each page"
errors={pageSizeError ? [{ message: pageSizeError }] : undefined}
onChange={this.onPageSizeChange}
/>
</FormGroup> :
null
}
{
!!OptionsComponent &&
<OptionsComponent
onTableOptionChange={onTableOptionChange}
/>
}
{
OptionsComponent ?
<OptionsComponent
onTableOptionChange={onTableOptionChange}
/> : null
}
{
canModifyColumns &&
<FormGroup>
<FormLabel>Columns</FormLabel>
{
canModifyColumns ?
<FormGroup>
<FormLabel>Columns</FormLabel>
<div>
<FormInputHelpText
text="Choose which columns are visible and which order they appear in"
/>
<div>
<FormInputHelpText
text="Choose which columns are visible and which order they appear in"
/>
<div className={styles.columns}>
{
columns.map((column, index) => {
const {
name,
label,
columnLabel,
isVisible,
isModifiable
} = column;
<div className={styles.columns}>
{
columns.map((column, index) => {
const {
name,
label,
columnLabel,
isVisible,
isModifiable
} = column;
if (isModifiable !== false) {
return (
<TableOptionsColumnDragSource
key={name}
name={name}
label={label || columnLabel}
isVisible={isVisible}
isModifiable={true}
index={index}
isDragging={isDragging}
isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown}
onVisibleChange={this.onVisibleChange}
onColumnDragMove={this.onColumnDragMove}
onColumnDragEnd={this.onColumnDragEnd}
/>
);
if (isModifiable !== false) {
return (
<TableOptionsColumnDragSource
key={name}
name={name}
label={label || columnLabel}
isVisible={isVisible}
isModifiable={true}
index={index}
isDragging={isDragging}
isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown}
onVisibleChange={this.onVisibleChange}
onColumnDragMove={this.onColumnDragMove}
onColumnDragEnd={this.onColumnDragEnd}
/>
);
}
return (
<TableOptionsColumn
key={name}
name={name}
label={label || columnLabel}
isVisible={isVisible}
index={index}
isModifiable={false}
onVisibleChange={this.onVisibleChange}
/>
);
})
}
return (
<TableOptionsColumn
key={name}
name={name}
label={label || columnLabel}
isVisible={isVisible}
index={index}
isModifiable={false}
onVisibleChange={this.onVisibleChange}
/>
);
})
}
<TableOptionsColumnDragPreview />
</div>
</div>
</FormGroup>
}
</Form>
</ModalBody>
<ModalFooter>
<Button
onPress={onModalClose}
>
<TableOptionsColumnDragPreview />
</div>
</div>
</FormGroup> :
null
}
</Form>
</ModalBody>
<ModalFooter>
<Button
onPress={onModalClose}
>
Close
</Button>
</ModalFooter>
</ModalContent>
</Button>
</ModalFooter>
</ModalContent> :
null
}
</Modal>
);
}

4
frontend/src/Components/Table/TablePager.css
View File

@@ -21,7 +21,7 @@
}
.loading {
composes: loading from 'Components/Loading/LoadingIndicator.css';
composes: loading from '~Components/Loading/LoadingIndicator.css';
margin: 0;
margin-left: 5px;
@@ -54,7 +54,7 @@
}
.pageSelect {
composes: select from 'Components/Form/SelectInput.css';
composes: select from '~Components/Form/SelectInput.css';
padding: 0 2px;
height: 25px;

4
frontend/src/Components/Table/TableRowButton.css
View File

@@ -1,4 +1,4 @@
.row {
composes: link from 'Components/Link/Link.css';
composes: row from './TableRow.css';
composes: link from '~Components/Link/Link.css';
composes: row from '~./TableRow.css';
}

4
frontend/src/Components/Table/TableSelectAllHeaderCell.css
View File

@@ -1,11 +1,11 @@
.selectAllHeaderCell {
composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
width: 30px;
}
.input {
composes: input from 'Components/Form/CheckInput.css';
composes: input from '~Components/Form/CheckInput.css';
margin: 0;
}

4
frontend/src/Components/Table/VirtualTableSelectAllHeaderCell.css
View File

@@ -1,11 +1,11 @@
.selectAllHeaderCell {
composes: headerCell from 'Components/Table/TableHeaderCell.css';
composes: headerCell from '~Components/Table/TableHeaderCell.css';
flex: 0 0 36px;
}
.input {
composes: input from 'Components/Form/CheckInput.css';
composes: input from '~Components/Form/CheckInput.css';
margin: 0;
}