Skip to content
This repository was archived by the owner on Mar 23, 2019. It is now read-only.

Commit f7ffe25

Browse files
helfi92helfi92
authored
Remove usage of animations in scopes,roles,clients (#254)
1 parent e234b54 commit f7ffe25

File tree

5 files changed

+99
-58
lines changed

5 files changed

+99
-58
lines changed

‎src/components/ClientScopesTable/index.jsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@ import {
1414
} from 'ramda';
1515
import memoize from 'fast-memoize';
1616
import { withStyles } from '@material-ui/core/styles';
17-
import ListItemText from '@material-ui/core/ListItemText';
17+
import Typography from '@material-ui/core/Typography';
1818
import TableRow from '@material-ui/core/TableRow';
1919
import TableCell from '@material-ui/core/TableCell';
2020
import LinkIcon from 'mdi-react/LinkIcon';
21-
import TableCellListItem from '../TableCellListItem';
2221
import ConnectionDataTable from '../ConnectionDataTable';
2322
import sort from '../../utils/sort';
2423
import { VIEW_CLIENT_SCOPES_INSPECT_SIZE } from '../../utils/constants';
@@ -29,11 +28,18 @@ const sorted = pipe(
2928
map(({ node: { clientId } }) => clientId)
3029
);
3130

32-
@withStyles({
31+
@withStyles(theme => ({
32+
tableCell: {
33+
textDecoration: 'none',
34+
},
3335
listItemCell: {
36+
display: 'flex',
37+
justifyContent: 'space-between',
3438
width: '100%',
39+
padding: theme.spacing.unit,
40+
...theme.mixins.hover,
3541
},
36-
})
42+
}))
3743
export default class ClientScopesTable extends Component {
3844
static defaultProps = {
3945
searchTerm: null,
@@ -107,19 +113,19 @@ export default class ClientScopesTable extends Component {
107113
map(node => (
108114
<TableRow key={node}>
109115
<TableCell padding="dense">
110-
<TableCellListItem
111-
className={classes.listItemCell}
112-
button
113-
component={Link}
116+
<Link
117+
className={classes.tableCell}
114118
to={
115119
selectedScope
116120
? `/auth/clients/${encodeURIComponent(node)}`
117121
: `/auth/scopes/${encodeURIComponent(node)}`
118122
}
119123
>
120-
<ListItemText disableTypography primary={node} />
121-
<LinkIcon size={16} />
122-
</TableCellListItem>
124+
<div className={classes.listItemCell}>
125+
<Typography>{node}</Typography>
126+
<LinkIcon size={16} />
127+
</div>
128+
</Link>
123129
</TableCell>
124130
</TableRow>
125131
))
@@ -128,6 +134,7 @@ export default class ClientScopesTable extends Component {
128134

129135
render() {
130136
const {
137+
classes,
131138
clientsConnection,
132139
selectedScope,
133140
searchProperty,

‎src/components/ClientsTable/index.jsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import { shape, func, arrayOf } from 'prop-types';
44
import { pipe, map, sort as rSort } from 'ramda';
55
import memoize from 'fast-memoize';
66
import { camelCase } from 'change-case/change-case';
7+
import { withStyles } from '@material-ui/core/styles';
78
import TableRow from '@material-ui/core/TableRow';
89
import TableCell from '@material-ui/core/TableCell';
9-
import ListItemText from '@material-ui/core/ListItemText';
1010
import Typography from '@material-ui/core/Typography';
1111
import LinkIcon from 'mdi-react/LinkIcon';
1212
import ConnectionDataTable from '../ConnectionDataTable';
1313
import DateDistance from '../DateDistance';
14-
import TableCellListItem from '../TableCellListItem';
1514
import { VIEW_CLIENTS_PAGE_SIZE } from '../../utils/constants';
1615
import { pageInfo, client } from '../../utils/prop-types';
1716
import sort from '../../utils/sort';
@@ -21,6 +20,18 @@ const sorted = pipe(
2120
map(({ node: { clientId } }) => clientId)
2221
);
2322

23+
@withStyles(theme => ({
24+
tableCell: {
25+
textDecoration: 'none',
26+
},
27+
listItemCell: {
28+
display: 'flex',
29+
justifyContent: 'space-between',
30+
width: '100%',
31+
padding: theme.spacing.unit,
32+
...theme.mixins.hover,
33+
},
34+
}))
2435
export default class ClientsTable extends Component {
2536
static propTypes = {
2637
clientsConnection: shape({
@@ -76,7 +87,7 @@ export default class ClientsTable extends Component {
7687
};
7788

7889
render() {
79-
const { onPageChange, clientsConnection } = this.props;
90+
const { classes, onPageChange, clientsConnection } = this.props;
8091
const { sortBy, sortDirection } = this.state;
8192
const iconSize = 16;
8293

@@ -95,19 +106,16 @@ export default class ClientsTable extends Component {
95106
onPageChange={onPageChange}
96107
renderRow={({ node: client }) => (
97108
<TableRow key={client.clientId}>
98-
<TableCell>
99-
<TableCellListItem
100-
dense
101-
button
102-
component={Link}
109+
<TableCell padding="dense">
110+
<Link
111+
className={classes.tableCell}
103112
to={`/auth/clients/${encodeURIComponent(client.clientId)}`}
104113
>
105-
<ListItemText
106-
disableTypography
107-
primary={<Typography>{client.clientId}</Typography>}
108-
/>
109-
<LinkIcon size={iconSize} />
110-
</TableCellListItem>
114+
<div className={classes.listItemCell}>
115+
<Typography>{client.clientId}</Typography>
116+
<LinkIcon size={iconSize} />
117+
</div>
118+
</Link>
111119
</TableCell>
112120
<TableCell>
113121
<DateDistance from={client.lastDateUsed} />

‎src/components/RoleScopesTable/index.jsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@ import {
1414
} from 'ramda';
1515
import memoize from 'fast-memoize';
1616
import { withStyles } from '@material-ui/core/styles';
17-
import ListItemText from '@material-ui/core/ListItemText';
17+
import Typography from '@material-ui/core/Typography';
1818
import TableRow from '@material-ui/core/TableRow';
1919
import TableCell from '@material-ui/core/TableCell';
2020
import LinkIcon from 'mdi-react/LinkIcon';
21-
import TableCellListItem from '../TableCellListItem';
2221
import DataTable from '../DataTable';
2322
import sort from '../../utils/sort';
2423
import { role, scopeExpansionLevel } from '../../utils/prop-types';
@@ -29,11 +28,18 @@ const sorted = pipe(
2928
);
3029

3130
@withRouter
32-
@withStyles({
31+
@withStyles(theme => ({
32+
tableCell: {
33+
textDecoration: 'none',
34+
},
3335
listItemCell: {
36+
display: 'flex',
37+
justifyContent: 'space-between',
3438
width: '100%',
39+
padding: theme.spacing.unit,
40+
...theme.mixins.hover,
3541
},
36-
})
42+
}))
3743
export default class RoleScopesTable extends Component {
3844
static defaultProps = {
3945
searchTerm: null,
@@ -84,19 +90,19 @@ export default class RoleScopesTable extends Component {
8490
return (
8591
<TableRow key={node}>
8692
<TableCell padding="dense">
87-
<TableCellListItem
88-
className={classes.listItemCell}
89-
button
90-
component={Link}
93+
<Link
94+
className={classes.tableCell}
9195
to={
9296
selectedScope
9397
? `/auth/roles/${encodeURIComponent(node)}`
9498
: `/auth/scopes/${encodeURIComponent(node)}`
9599
}
96100
>
97-
<ListItemText disableTypography primary={node} />
98-
<LinkIcon size={iconSize} />
99-
</TableCellListItem>
101+
<div className={classes.listItemCell}>
102+
<Typography>{node}</Typography>
103+
<LinkIcon size={iconSize} />
104+
</div>
105+
</Link>
100106
</TableCell>
101107
</TableRow>
102108
);

‎src/theme.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createMuiTheme } from '@material-ui/core/styles';
2-
import { lighten } from '@material-ui/core/styles/colorManipulator';
2+
import { fade, lighten } from '@material-ui/core/styles/colorManipulator';
33
import transitions from '@material-ui/core/styles/transitions';
44
import red from '@material-ui/core/colors/red';
55
import amber from '@material-ui/core/colors/amber';
@@ -111,6 +111,22 @@ const createTheme = isDarkTheme => ({
111111
fill: isDarkTheme ? THEME.PRIMARY_TEXT_DARK : THEME.PRIMARY_TEXT_LIGHT,
112112
},
113113
},
114+
hover: {
115+
'&:hover': {
116+
textDecoration: 'none',
117+
backgroundColor: fade(
118+
isDarkTheme ? THEME.PRIMARY_TEXT_DARK : THEME.PRIMARY_TEXT_LIGHT,
119+
0.08
120+
),
121+
// Reset on touch devices, it doesn't add specificity
122+
'@media (hover: none)': {
123+
backgroundColor: 'transparent',
124+
},
125+
'&$disabled': {
126+
backgroundColor: 'transparent',
127+
},
128+
},
129+
},
114130
fab: {
115131
position: 'fixed',
116132
bottom: 16,

‎src/views/Scopes/ListScopes/index.jsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -99,28 +99,32 @@ export default class ListScopes extends PureComponent {
9999
>
100100
<Fragment>
101101
<ErrorPanel error={error} />
102-
<Tabs
103-
className={classes.tabs}
104-
fullWidth
105-
value={currentTabIndex}
106-
onChange={this.handleTabChange}
107-
>
108-
<Tab label="Roles" />
109-
<Tab label="Clients" />
110-
</Tabs>
111102
{loading && <Spinner loading />}
112-
{roles &&
113-
currentTabIndex === 0 && (
114-
<RoleScopesTable roles={roles} searchTerm={searchTerm} />
115-
)}
116-
{clients &&
117-
currentTabIndex === 1 && (
118-
<ClientScopesTable
119-
searchTerm={searchTerm}
120-
onPageChange={this.handleClientsPageChange}
121-
clientsConnection={clients}
122-
/>
123-
)}
103+
{!loading && (
104+
<Fragment>
105+
<Tabs
106+
className={classes.tabs}
107+
fullWidth
108+
value={currentTabIndex}
109+
onChange={this.handleTabChange}
110+
>
111+
<Tab label="Roles" />
112+
<Tab label="Clients" />
113+
</Tabs>
114+
{roles &&
115+
currentTabIndex === 0 && (
116+
<RoleScopesTable roles={roles} searchTerm={searchTerm} />
117+
)}
118+
{clients &&
119+
currentTabIndex === 1 && (
120+
<ClientScopesTable
121+
searchTerm={searchTerm}
122+
onPageChange={this.handleClientsPageChange}
123+
clientsConnection={clients}
124+
/>
125+
)}
126+
</Fragment>
127+
)}
124128
</Fragment>
125129
</Dashboard>
126130
);

0 commit comments

Comments
 (0)