1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import { useCallback } from 'react';
import styled from 'styled-components';
import { messages } from '../../shared/gettext';
import { useAppContext } from '../context';
import { useBoolean } from '../lib/utilityHooks';
import { useSelector } from '../redux/store';
import * as AppButton from './AppButton';
import { hugeText, smallText } from './common-styles';
import { ModalAlert, ModalMessage } from './Modal';
const StyledTitle = styled.h1(hugeText, {
textAlign: 'center',
margin: '7px 0 4px',
});
const StyledSubTitle = styled.span(smallText, {
marginTop: '10px',
fontWeight: 700,
});
const StyledList = styled.ul({
listStyle: 'disc outside',
marginLeft: '20px',
});
const StyledMessage = styled(ModalMessage)({
fontSize: '12px',
marginTop: '6px',
});
export function Changelog() {
const currentVersion = useSelector((state) => state.version.current);
const changelogDisplayedForVersion = useSelector(
(state) => state.settings.guiSettings.changelogDisplayedForVersion,
);
const changelog = useSelector((state) => state.userInterface.changelog);
const initialForceShowChanges = useSelector((state) => state.userInterface.forceShowChanges);
const { setDisplayedChangelog } = useAppContext();
const [forceShowChanges, , stopForceShowChanges] = useBoolean(initialForceShowChanges);
const close = useCallback(() => {
setDisplayedChangelog();
stopForceShowChanges();
}, []);
const visible =
forceShowChanges ||
(changelogDisplayedForVersion !== currentVersion &&
changelog.length > 0 &&
!window.env.development &&
!/-dev-[0-9a-f]{6}$/.test(currentVersion));
return (
<ModalAlert
isOpen={visible}
buttons={[
<AppButton.BlueButton key="close" onClick={close}>
{
// TRANSLATORS: This is a button which closes a dialog.
messages.gettext('Got it!')
}
</AppButton.BlueButton>,
]}>
<StyledTitle>{currentVersion}</StyledTitle>
<StyledSubTitle>{messages.pgettext('changelog', 'Changes in this version:')}</StyledSubTitle>
<StyledMessage>
<StyledList>
{changelog.map((item, i) => (
<li key={i}>{item}</li>
))}
</StyledList>
</StyledMessage>
</ModalAlert>
);
}
|
