Skip to content

Commit edbcbc4

Browse files
pyphiliapyphilia
committed
feat: add tooltips on export and load selection screens
1 parent 703c067 commit edbcbc4

File tree

2 files changed

+105
-42
lines changed

2 files changed

+105
-42
lines changed

‎src/components/space/export/ExportSelectionScreen.js

+42-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import AppBar from '@material-ui/core/AppBar/AppBar';
4+
import Grid from '@material-ui/core/Grid';
45
import Toolbar from '@material-ui/core/Toolbar/Toolbar';
6+
import Tooltip from '@material-ui/core/Tooltip';
7+
import InfoIcon from '@material-ui/icons/Info';
58
import Box from '@material-ui/core/Box';
69
import { withRouter } from 'react-router';
710
import clsx from 'clsx';
811
import { withTranslation } from 'react-i18next';
9-
import FormGroup from '@material-ui/core/FormGroup';
1012
import FormControlLabel from '@material-ui/core/FormControlLabel';
1113
import Checkbox from '@material-ui/core/Checkbox';
1214
import Button from '@material-ui/core//Button';
@@ -188,16 +190,45 @@ class ExportSelectionScreen extends Component {
188190
</Typography>
189191

190192
<br />
191-
<FormGroup>
192-
<FormControlLabel
193-
control={resourcesCheckbox}
194-
label={t("This Space's User Inputs")}
195-
/>
196-
<FormControlLabel
197-
control={actionsCheckbox}
198-
label={t("This Space's Analytics")}
199-
/>
200-
</FormGroup>
193+
<Grid
194+
container
195+
alignItems="center"
196+
alignContent="center"
197+
justify="center"
198+
>
199+
<Grid item xs={7}>
200+
<FormControlLabel
201+
control={resourcesCheckbox}
202+
label={t("This Space's User Inputs")}
203+
/>
204+
</Grid>
205+
<Grid item xs={1}>
206+
<Tooltip
207+
title={t(
208+
'Actions are input a user save when using applications (ie. answer in Input Text App).'
209+
)}
210+
placement="right"
211+
>
212+
<InfoIcon color="primary" />
213+
</Tooltip>
214+
</Grid>
215+
<Grid item xs={7}>
216+
<FormControlLabel
217+
control={actionsCheckbox}
218+
label={t("This Space's Analytics")}
219+
/>
220+
</Grid>
221+
<Grid item xs={1}>
222+
<Tooltip
223+
title={t(
224+
'Analytics are various statistics and user data a user left while using Graasp Desktop.'
225+
)}
226+
placement="right"
227+
>
228+
<InfoIcon color="primary" />
229+
</Tooltip>
230+
</Grid>
231+
</Grid>
201232
<br />
202233
<div className={classes.buttonGroup}>
203234
<Button

‎src/components/space/load/LoadSelectionScreen.js

+63-31
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import { Map } from 'immutable';
55
import _ from 'lodash';
66
import AppBar from '@material-ui/core/AppBar/AppBar';
77
import Toolbar from '@material-ui/core/Toolbar/Toolbar';
8+
import Grid from '@material-ui/core/Grid';
89
import { withRouter } from 'react-router';
10+
import Tooltip from '@material-ui/core/Tooltip';
11+
import InfoIcon from '@material-ui/icons/Info';
912
import clsx from 'clsx';
1013
import { withTranslation } from 'react-i18next';
11-
import FormGroup from '@material-ui/core/FormGroup';
1214
import FormControlLabel from '@material-ui/core/FormControlLabel';
1315
import Checkbox from '@material-ui/core/Checkbox';
1416
import Button from '@material-ui/core//Button';
@@ -218,36 +220,66 @@ class LoadSelectionScreen extends Component {
218220
</Typography>
219221

220222
<br />
221-
<FormGroup>
222-
{this.renderCheckbox(
223-
t('space'),
224-
t('This Space'),
225-
isSpaceChecked,
226-
// space is always disabled:
227-
// when the space does not exist (force load)
228-
// when the space has change (force load)
229-
// when the space has no change (no load)
230-
true,
231-
t(`This file does not contain a space`)
232-
)}
233-
{this.renderSpaceHelperText()}
234-
235-
{this.renderCheckbox(
236-
t('resources'),
237-
t(`This Space's User Inputs`),
238-
isResourcesChecked,
239-
elements.get('resources').isEmpty(),
240-
t(`This file does not contain any user input`)
241-
)}
242-
243-
{this.renderCheckbox(
244-
t('actions'),
245-
t(`This Space's analytics`),
246-
isActionsChecked,
247-
elements.get('actions').isEmpty(),
248-
t(`This file does not contain any analytics`)
249-
)}
250-
</FormGroup>
223+
<Grid
224+
container
225+
alignItems="center"
226+
alignContent="center"
227+
justify="center"
228+
>
229+
<Grid item xs={7}>
230+
{this.renderCheckbox(
231+
t('space'),
232+
t('This Space'),
233+
isSpaceChecked,
234+
// space is always disabled:
235+
// when the space does not exist (force load)
236+
// when the space has change (force load)
237+
// when the space has no change (no load)
238+
true,
239+
t(`This file does not contain a space`)
240+
)}
241+
{this.renderSpaceHelperText()}
242+
</Grid>
243+
<Grid item xs={1} />
244+
<Grid item xs={7}>
245+
{this.renderCheckbox(
246+
t('resources'),
247+
t(`This Space's User Inputs`),
248+
isResourcesChecked,
249+
elements.get('resources').isEmpty(),
250+
t(`This file does not contain any user input`)
251+
)}
252+
</Grid>
253+
<Grid item xs={1}>
254+
<Tooltip
255+
title={t(
256+
'Resources are inputs a user save when using applications (ie. answer in Input Text App).'
257+
)}
258+
placement="right"
259+
>
260+
<InfoIcon color="primary" />
261+
</Tooltip>
262+
</Grid>
263+
<Grid item xs={7}>
264+
{this.renderCheckbox(
265+
t('actions'),
266+
t(`This Space's analytics`),
267+
isActionsChecked,
268+
elements.get('actions').isEmpty(),
269+
t(`This file does not contain any analytics`)
270+
)}
271+
</Grid>
272+
<Grid item xs={1}>
273+
<Tooltip
274+
title={t(
275+
'Analytics are various statistics and user data a user left while using Graasp Desktop.'
276+
)}
277+
placement="right"
278+
>
279+
<InfoIcon color="primary" />
280+
</Tooltip>
281+
</Grid>
282+
</Grid>
251283
<br />
252284
<div className={classes.buttonGroup}>
253285
<Button

0 commit comments

Comments
 (0)