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

Fix about window #326

Merged
merged 22 commits into from
Dec 21, 2023
Merged

Fix about window #326

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
ba36191
Modules not visible by default
Tristan-WorkGH Dec 14, 2023
f9affbc
remove dialog borders
Tristan-WorkGH Dec 14, 2023
39cbaaa
Wait end animation before reset values
Tristan-WorkGH Dec 14, 2023
bd3d00c
more detailed tooltip
Tristan-WorkGH Dec 14, 2023
2cc90d0
tags already visible when long
Tristan-WorkGH Dec 14, 2023
574b8a3
fix "moving" main version after loading finish
Tristan-WorkGH Dec 14, 2023
96520e0
rename styles variable
Tristan-WorkGH Dec 14, 2023
cbc8b53
Minor CSS changes
Dec 15, 2023
be51e7f
review
Tristan-WorkGH Dec 15, 2023
7d93b09
Merge remote-tracking branch 'origin/fix_about_window' into fix_about…
Tristan-WorkGH Dec 15, 2023
1235c48
use promises to have natural flow of data
Tristan-WorkGH Dec 19, 2023
c0ea485
Add missing translations for demo
Tristan-WorkGH Dec 19, 2023
533a871
fix version display and prettier
Dec 19, 2023
9ce41e0
move reset code in handle close, one hook less
Tristan-WorkGH Dec 19, 2023
0cfa51b
fix warning
Tristan-WorkGH Dec 19, 2023
e02c5c7
use transition listeners to manage state
Tristan-WorkGH Dec 19, 2023
8290039
Move styles in const + add comments
Tristan-WorkGH Dec 19, 2023
1de5269
We don't need `<Grid/>` anymore, and we must manage loading state fully
Tristan-WorkGH Dec 19, 2023
c463028
Merge remote-tracking branch 'origin/main' into fix_about_window
Tristan-WorkGH Dec 21, 2023
0ad870c
review
Tristan-WorkGH Dec 21, 2023
ba9e690
happy charly??
Tristan-WorkGH Dec 21, 2023
101e832
review
Tristan-WorkGH Dec 21, 2023
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
2 changes: 1 addition & 1 deletion demo/src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ const AppContent = ({ language, onLanguageClick }) => {
{
type: 'app',
name: 'My application with a long name',
version: 'v0.0.1',
version: 'v0.0.1-long-tag',
},
{ type: 'other', name: 'Something', version: 'none' },
{
Expand Down
258 changes: 165 additions & 93 deletions src/components/TopBar/AboutDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Fade,
Grid,
Stack,
Tooltip,
tooltipClasses,
Typography,
useMediaQuery,
useTheme,
Zoom,
} from '@mui/material';
import { LoadingButton } from '@mui/lab';
import {
Expand Down Expand Up @@ -116,6 +117,17 @@ const AboutDialog = ({
} else {
setModules([currentApp]);
}
} else {
// we wait the end of the fade animation of the dialog before reset content
setTimeout(
(setModules, setActualGlobalVersion) => {
setModules(null);
setActualGlobalVersion(null);
},
195 + 5,
Tristan-WorkGH marked this conversation as resolved.
Show resolved Hide resolved
setModules,
setActualGlobalVersion
);
}
}, [
open,
Expand All @@ -130,8 +142,6 @@ const AboutDialog = ({
if (onClose) {
onClose();
}
setModules(null);
setActualGlobalVersion(null);
}, [onClose]);

return (
Expand All @@ -143,43 +153,40 @@ const AboutDialog = ({
fullScreen={useMediaQuery(theme.breakpoints.down('md'))}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
transitionDuration={{ exit: 195 }}
>
<DialogTitle id="alert-dialog-title">
<FormattedMessage id={'about-dialog/title'} />
</DialogTitle>
<DialogContent dividers id="alert-dialog-description">
<Box>
{startingGlobalVersion !== undefined &&
startingGlobalVersion !== null &&
actualGlobalVersion !== null &&
startingGlobalVersion !== actualGlobalVersion && (
<Collapse in={open}>
<Alert
severity="warning"
variant="outlined"
action={
<LoadingButton
color="inherit"
size="small"
startIcon={
<Refresh fontSize="small" />
}
loadingPosition="start"
loading={isRefreshing}
onClick={() => {
setRefreshState(true);
window.location.reload();
}}
>
<FormattedMessage id="refresh" />
</LoadingButton>
}
sx={{ marginBottom: 1 }}
>
<FormattedMessage id="about-dialog/alert-running-old-version-msg" />
</Alert>
</Collapse>
)}
{startingGlobalVersion !== undefined &&
startingGlobalVersion !== null &&
actualGlobalVersion !== null &&
startingGlobalVersion !== actualGlobalVersion && (
<Collapse in={open}>
<Alert
severity="warning"
variant="outlined"
action={
<LoadingButton
color="inherit"
size="small"
startIcon={<Refresh fontSize="small" />}
loadingPosition="start"
loading={isRefreshing}
onClick={() => {
setRefreshState(true);
window.location.reload();
}}
>
<FormattedMessage id="refresh" />
</LoadingButton>
}
sx={{ marginBottom: 2 }}
>
<FormattedMessage id="about-dialog/alert-running-old-version-msg" />
</Alert>
</Collapse>
)}
<Box sx={{ height: '5em' }}>
<Box
sx={{
display: 'flex',
Expand All @@ -192,57 +199,48 @@ const AboutDialog = ({
appColor={theme.palette.grey['500']}
/>
</Box>
<Box
<Grid
container
component="dl"
sx={{
textAlign: 'center',
marginTop: 0,
'dt, dd': {
display: 'inline',
margin: 0,
},
dt: {
marginRight: '0.5em',
'&:after': {
content: '" :"',
},
'&:before': {
content: "'\\A'",
whiteSpace: 'pre',
},
'&:first-child': {
'&:before': {
content: "''",
},
},
},
}}
columnSpacing={1}
justifyContent="center"
alignItems="center"
>
<dt>
<FormattedMessage id="about-dialog/version" />
</dt>
<dd>
{loadingGlobalVersion ? (
'…'
) : actualGlobalVersion ? (
<b style={{ fontSize: '1.5em' }}>
{actualGlobalVersion}
</b>
) : (
<i>unknown</i>
)}
</dd>
<Fade
in={loadingGlobalVersion}
style={{ transitionDelay: '500ms' }}
unmountOnExit
>
<CircularProgress size="1rem" />
</Fade>
</Box>
{loadingGlobalVersion && (
<CircularProgress size="1.2rem" />
)}
{!loadingGlobalVersion && (
<Grid
item
sx={{
display: 'flex',
alignItems: 'baseline',
}}
>
<FormattedMessage
id="about-dialog/version"
sx={{
display: 'inline-block',
lineHeight: '1',
fontSize: '1em',
}}
/>
<Box
sx={{
display: 'inline-block',
lineHeight: '1',
fontSize: '1.3em',
fontWeight: 'bold',
}}
>
&nbsp;{actualGlobalVersion}
</Box>
</Grid>
)}
</Grid>
</Box>

{/* TODO found how to scroll only in this box, to keep logo and global version always visible */}
</DialogTitle>
<DialogContent id="alert-dialog-description">
<Box
sx={{
'.MuiAccordion-root': {
Expand Down Expand Up @@ -282,7 +280,6 @@ const AboutDialog = ({
<Accordion
disableGutters
variant="outlined"
defaultExpanded
TransitionProps={{ unmountOnExit: true }}
>
<AccordionSummary
Expand Down Expand Up @@ -314,10 +311,8 @@ const AboutDialog = ({
key={`module-${idx}`}
type={module.type}
name={module.name}
version={
module.gitTag ||
module.version
}
version={module.version}
gitTag={module.gitTag}
license={module.license}
/>
))}
Expand Down Expand Up @@ -371,6 +366,27 @@ const style = {
alignSelf: 'flex-end',
flexShrink: 0,
},
tooltip: (theme) => ({
[`& .${tooltipClasses.tooltip}`]: {
border: '1px solid #dadde9',
boxShadow: theme.shadows[1],
},
}),
tooltipDetails: {
display: 'grid',
gridTemplateColumns: 'max-content auto',
margin: 0,
dt: {
gridColumnStart: 1,
'&:after': {
content: '" :"',
},
},
dd: {
gridColumnStart: 2,
paddingLeft: '0.5em',
},
},
};

const ModuleTypesIcons = {
Expand All @@ -379,7 +395,7 @@ const ModuleTypesIcons = {
other: <QuestionMark sx={style.icons} fontSize="small" />,
};

const Module = ({ type, name, version, license }) => {
const Module = ({ type, name, version, gitTag, license }) => {
return (
<Grid
item
Expand All @@ -392,7 +408,62 @@ const Module = ({ type, name, version, license }) => {
},
}}
>
<Tooltip title={(name || '<?>') + ' ' + (version || '')}>
<Tooltip
TransitionComponent={Zoom}
enterDelay={2500}
Copy link
Contributor

Choose a reason for hiding this comment

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

It's so slow... 1000 maximum

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That wanted, because it spam the view if you're juste scrolling in the list

Copy link
Contributor Author

@Tristan-WorkGH Tristan-WorkGH Dec 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

but @EstherDarkish have reduced this already, it was >3s before

Copy link
Contributor

Choose a reason for hiding this comment

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

I could see 500 by the way...

Copy link
Contributor

Choose a reason for hiding this comment

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

Better ask Stéphane about this

enterNextDelay={350}
leaveDelay={200}
placement="bottom-start"
arrow
sx={style.tooltip}
title={
<>
<Typography variant="body1">{name || '<?>'}</Typography>
<Box component="dl" sx={style.tooltipDetails}>
<Typography variant="body2" component="dt">
<FormattedMessage id="about-dialog/label-type" />
</Typography>
<Typography variant="body2" component="dd">
<FormattedMessage
id={`about-dialog/module-tooltip-${
'app'.localeCompare(type, undefined, {
sensitivity: 'base',
}) === 0
? 'app'
: 'server'.localeCompare(
type,
undefined,
{ sensitivity: 'base' }
) === 0
? 'server'
: 'other'
}`}
Tristan-WorkGH marked this conversation as resolved.
Show resolved Hide resolved
/>
</Typography>
{version && (
<>
<Typography variant="body2" component="dt">
<FormattedMessage id="about-dialog/version" />
</Typography>
<Typography variant="body2" component="dd">
{version}
</Typography>
</>
)}
{gitTag && (
<>
<Typography variant="body2" component="dt">
<FormattedMessage id="about-dialog/git-version" />
</Typography>
<Typography variant="body2" component="dd">
{gitTag}
</Typography>
</>
)}
</Box>
</>
}
>
<Stack
direction="row"
justifyContent="flex-start"
Expand All @@ -410,7 +481,7 @@ const Module = ({ type, name, version, license }) => {
noWrap
sx={style.version}
>
{version || null}
{gitTag || version || null}
</Typography>
</Stack>
</Tooltip>
Expand All @@ -421,5 +492,6 @@ Module.propTypes = {
type: PropTypes.string,
name: PropTypes.string,
version: PropTypes.string,
gitTag: PropTypes.string,
license: PropTypes.string,
};
4 changes: 4 additions & 0 deletions src/components/translations/top-bar-en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const top_bar_en = {
'about-dialog/license': 'License',
'about-dialog/modules-section': 'Modules details',
'about-dialog/git-version': 'Tag',
'about-dialog/label-type': 'Type',
'about-dialog/module-tooltip-app': 'application',
'about-dialog/module-tooltip-server': 'server',
'about-dialog/module-tooltip-other': 'other',
};

export default top_bar_en;
4 changes: 4 additions & 0 deletions src/components/translations/top-bar-fr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const top_bar_fr = {
'about-dialog/license': 'Licence',
'about-dialog/modules-section': 'Détails des modules',
'about-dialog/git-version': 'Tag',
'about-dialog/label-type': 'Type',
'about-dialog/module-tooltip-app': 'application',
'about-dialog/module-tooltip-server': 'serveur',
'about-dialog/module-tooltip-other': 'autre',
};

export default top_bar_fr;
Loading