UI Formatting Cleanup

This commit is contained in:
Qstick 2017-10-07 02:21:06 -04:00
parent b963f2aa82
commit 52e3d96f4a
110 changed files with 901 additions and 701 deletions

View file

@ -103,8 +103,7 @@ class CircularProgressBar extends Component {
strokeWidth,
strokeDashoffset
}}
>
</circle>
/>
</svg>
{

View file

@ -366,7 +366,7 @@ class EnhancedSelectInput extends Component {
}
</ModalBody>
</Modal>
}
}
</div>
);
}

View file

@ -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;

View file

@ -23,7 +23,8 @@ function FormInputHelpText(props) {
isError && styles.isError,
isWarning && styles.isWarning,
isCheckInput && styles.isCheckInput
)}>
)}
>
{text}
{

View file

@ -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;

View file

@ -21,7 +21,8 @@ function RootFolderSelectInputOption(props) {
<div className={classNames(
styles.optionText,
isMobile && styles.isMobile
)}>
)}
>
<div>{value}</div>
{

View file

@ -18,8 +18,8 @@ function RootFolderSelectInputSelectedValue(props) {
{...otherProps}
>
<div className={styles.path}>
{value
}</div>
{value}
</div>
{
freeSpace != null && includeFreeSpace &&

View file

@ -24,8 +24,7 @@ function Icon(props) {
style={{
fontSize: `${size}px`
}}
>
</i>
/>
);
}

View file

@ -83,7 +83,6 @@ class ClipboardButton extends Component {
...otherProps
} = this.props;
const {
showSuccess,
showError

View file

@ -10,7 +10,6 @@
cursor: pointer;
&:global(.isDisabled) {
/*color: $disabledColor;*/
pointer-events: none;
}
}

View file

@ -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 {

View file

@ -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 = {

View file

@ -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 = {

View file

@ -18,7 +18,7 @@ function ViewMenu(props) {
iconName={icons.VIEW}
text="View"
/>
{children}
{children}
</Menu>
);
}

View file

@ -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 = {

View file

@ -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;

View file

@ -43,7 +43,8 @@ function Message(props) {
<div className={classNames(
styles.message,
styles[type]
)}>
)}
>
<div className={styles.iconContainer}>
<Icon
name={getIconName(name)}

View file

@ -148,7 +148,8 @@ class PageToolbarSection extends Component {
<div className={classNames(
styles.section,
styles[alignContent]
)}>
)}
>
{
buttons.map((button) => {
return button;

View file

@ -8,7 +8,7 @@ class PageToolbarSeparator extends Component {
render() {
return (
<div className={styles.separator}></div>
<div className={styles.separator} />
);
}

View file

@ -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>
);
}

View file

@ -1,4 +1,5 @@
.scroller {
/* Placeholder */
}
.thumb {

View file

@ -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;

View file

@ -142,9 +142,9 @@ class VirtualTable extends Component {
{...otherProps}
/>
</Scroller>
);
);
}
}
}
</WindowScroller>
</Measure>
);

View file

@ -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 ?