Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFR] Fix design of icon loaders #3276

Merged
merged 6 commits into from
May 27, 2019
Merged

[RFR] Fix design of icon loaders #3276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1a63da2
Improve loader style in LoginForm
Luwangel May 23, 2019
2afce04
Prettier format
Luwangel May 24, 2019
9769766
Use same CircularProgress in SaveButton than in Login Form
Luwangel May 24, 2019
9edc555
Fix style
Luwangel May 24, 2019
b17af73
Fix Cannot find name 'Theme'
Luwangel May 24, 2019
3a6c712
Fix styles of Circular Progress icons
Luwangel May 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions packages/ra-ui-materialui/src/auth/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ import CardActions from '@material-ui/core/CardActions';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';
import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
import {
withStyles,
createStyles,
WithStyles,
Theme,
} from '@material-ui/core/styles';
import {
withTranslate,
userLogin,
Expand All @@ -31,7 +36,7 @@ interface EnhancedProps
isLoading: boolean;
}

const styles = () =>
const styles = ({ spacing }: Theme) =>
createStyles({
form: {
padding: '0 1em 1em 1em',
Expand All @@ -42,6 +47,9 @@ const styles = () =>
button: {
width: '100%',
},
icon: {
marginRight: spacing.unit,
},
});

// see http://redux-form.com/6.4.3/examples/material-ui/
Expand Down Expand Up @@ -98,7 +106,13 @@ const LoginForm: SFC<Props & EnhancedProps> = ({
disabled={isLoading}
className={classes.button}
>
{isLoading && <CircularProgress size={25} thickness={2} />}
{isLoading && (
<CircularProgress
className={classes.icon}
size={18}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why set the size if you also set the width in css?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, the duplication is not useful. I've made changes.

thickness={2}
/>
)}
{translate('ra.auth.sign_in')}
</Button>
</CardActions>
Expand Down
26 changes: 15 additions & 11 deletions packages/ra-ui-materialui/src/button/SaveButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,18 @@ import ContentSave from '@material-ui/icons/Save';
import classnames from 'classnames';
import { showNotification, translate } from 'ra-core';

const styles = createStyles({
button: {
position: 'relative',
},
iconPaddingStyle: {
marginRight: '0.5em',
},
});
const styles = ({ spacing }) =>
createStyles({
button: {
position: 'relative',
},
leftIcon: {
marginRight: spacing.unit,
},
icon: {
fontSize: 18,
},
});

const sanitizeRestProps = ({
basePath,
Expand Down Expand Up @@ -123,13 +127,13 @@ export class SaveButton extends Component {
>
{saving && saving.redirect === redirect ? (
<CircularProgress
size={25}
size={18}
thickness={2}
className={classes.iconPaddingStyle}
className={classes.leftIcon}
/>
) : (
React.cloneElement(icon, {
className: classes.iconPaddingStyle,
className: classnames(classes.leftIcon, classes.icon),
})
)}
{label && translate(label, { _: label })}
Expand Down