coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Add 'done' icon when all tasks are complete

Browse Source
This commit is contained in:
Tom Moor
2021-07-28 19:55:46 -04:00
parent 36b8ae859e
commit 26da8c4165
3 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/DocumentTasks.js
View File

@ -1,8 +1,12 @@
// @flow // @flow
import { DoneIcon } from "outline-icons";
import * as React from "react"; import * as React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styled, { useTheme } from "styled-components";
import CircularProgressBar from "components/CircularProgressBar"; import CircularProgressBar from "components/CircularProgressBar";
import usePrevious from "../hooks/usePrevious";
import Document from "../models/Document"; import Document from "../models/Document";
import { bounceIn } from "styles/animations";
type Props = {| type Props = {|
document: Document, document: Document,
@ -24,16 +28,32 @@ function getMessage(t, total, completed) {
function DocumentTasks({ document }: Props) { function DocumentTasks({ document }: Props) {
const { tasks, tasksPercentage } = document; const { tasks, tasksPercentage } = document;
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme();
const { completed, total } = tasks; const { completed, total } = tasks;
const done = completed === total;
const previousDone = usePrevious(done);
const message = getMessage(t, total, completed); const message = getMessage(t, total, completed);
return ( return (
<> <>
<CircularProgressBar percentage={tasksPercentage} /> {completed === total ? (
<Done
color={theme.primary}
size={20}
$animated={done && previousDone === false}
/>
) : (
<CircularProgressBar percentage={tasksPercentage} />
)}
&nbsp;{message} &nbsp;{message}
</> </>
); );
} }
const Done = styled(DoneIcon)`
margin: -1px;
animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
transform-origin: center center;
`;
export default DocumentTasks; export default DocumentTasks;

2
package.json
View File

@ -111,7 +111,7 @@
"mobx-react": "^6.3.1", "mobx-react": "^6.3.1",
"natural-sort": "^1.0.0", "natural-sort": "^1.0.0",
"nodemailer": "^6.4.16", "nodemailer": "^6.4.16",
"outline-icons": "^1.27.2", "outline-icons": "^1.30.0",
"oy-vey": "^0.10.0", "oy-vey": "^0.10.0",
"passport": "^0.4.1", "passport": "^0.4.1",
"passport-google-oauth2": "^0.2.0", "passport-google-oauth2": "^0.2.0",

8
yarn.lock
View File

@ -9791,10 +9791,10 @@ os-name@^3.1.0:
macos-release "^2.2.0" macos-release "^2.2.0"
windows-release "^3.1.0" windows-release "^3.1.0"
outline-icons@^1.26.1, outline-icons@^1.27.2: outline-icons@^1.26.1, outline-icons@^1.30.0:
version "1.27.2" version "1.30.0"
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.27.2.tgz#9ff2ba209ba77a94f6a2a19ae0cbee403973d7c2" resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.30.0.tgz#e6bb779d43fc89df4b7bda8dfe886c28c72e494d"
integrity sha512-cvvJ3Ockcqsj5zphTCK5OzKGBMXmFVCe0OhuiNdtt1gVS+/yAE2fIs93RlW2ERIEIDsAlWrK6oBvDFpIgEHiQw== integrity sha512-JLL0hiBB7cKBrpQ7ejvLORUVYNpx2ULngoWJHL8vpsMwMha+ChF7z1MmJQ1dD6/yDX3dgIzeMfMASD8weVRloQ==
oy-vey@^0.10.0: oy-vey@^0.10.0:
version "0.10.0" version "0.10.0"