Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-28 16:06:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

add CircularProgressOptical

Browse Source
This commit is contained in:
Sidney Alcantara
2021-10-20 15:36:48 +11:00
parent e7f2253e4b
commit fdb1a5178a
12 changed files with 71 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/CircularProgressOptical.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { CircularProgress, CircularProgressProps } from "@mui/material";
export default function CircularProgressOptical({
size = 40,
...props
}: CircularProgressProps & { size?: number }) {
const DEFAULT_SIZE = 40;
const DEFAULT_THICKNESS = 3.6;
const linearThickness = (DEFAULT_SIZE / size) * DEFAULT_THICKNESS;
const opticalRatio = 1 - (1 - size / DEFAULT_SIZE) / 2;
return (
<CircularProgress
{...props}
size={size}
thickness={linearThickness * opticalRatio}
/>
);
}

12
src/components/Loading.tsx
View File

@@ -1,12 +1,8 @@
import { use100vh } from "react-div-100vh";
import {
Fade,
Stack,
StackProps,
CircularProgress,
Typography,
} from "@mui/material";
import { Fade, Stack, StackProps, Typography } from "@mui/material";
import CircularProgressOptical from "components/CircularProgressOptical";
interface ILoadingProps extends Partial<StackProps> {
message?: string;
fullScreen?: boolean;
@@ -33,7 +29,7 @@ export default function Loading({
...props.style,
}}
>
<CircularProgress />
<CircularProgressOptical />
<Typography
variant="subtitle1"
component="div"

10
src/components/Setup/SetupItem.tsx
View File

@@ -1,6 +1,7 @@
import { Stack, CircularProgress, Typography } from "@mui/material";
import { Stack, Typography } from "@mui/material";
import CheckIcon from "@mui/icons-material/Check";
import ArrowIcon from "@mui/icons-material/ArrowForward";
import CircularProgressOptical from "components/CircularProgressOptical";
export interface ISetupItemProps {
status: "complete" | "loading" | "incomplete";
@@ -25,12 +26,7 @@ export default function SetupItem({
{status === "complete" ? (
<CheckIcon aria-label="Item complete" color="action" />
) : status === "loading" ? (
<CircularProgress
id="progress"
size={20}
thickness={5}
sx={{ m: 0.25 }}
/>
<CircularProgressOptical id="progress" size={20} sx={{ m: 0.25 }} />
) : (
<ArrowIcon aria-label="Item" color="primary" />
)}

7
src/components/SnackbarProgress.tsx
View File

@@ -1,5 +1,7 @@
import { useState, Dispatch, SetStateAction, MutableRefObject } from "react";
import { Stack, CircularProgress } from "@mui/material";
import { Stack } from "@mui/material";
import CircularProgressOptical from "components/CircularProgressOptical";
export interface ISnackbarProgressRef {
setProgress: Dispatch<SetStateAction<number>>;
@@ -31,12 +33,11 @@ export default function SnackbarProgress({
{progress}/{target}
</span>
<CircularProgress
<CircularProgressOptical
value={(progress / target) * 100}
variant="determinate"
size={24}
color="inherit"
thickness={4}
/>
</Stack>
);

4
src/components/Table/TableHeader/ReExecute.tsx
View File

@@ -6,7 +6,7 @@ import LoopIcon from "@mui/icons-material/Loop";
import { useProjectContext } from "contexts/ProjectContext";
import { db } from "../../../firebase";
import { isCollectionGroup } from "utils/fns";
import CircularProgress from "@mui/material/CircularProgress";
import CircularProgressOptical from "components/CircularProgressOptical";
import Modal from "components/Modal";
@@ -61,7 +61,7 @@ export default function ReExecute() {
primary: {
children: "Confirm",
onClick: handleConfirm,
startIcon: updating && <CircularProgress size={16} />,
startIcon: updating && <CircularProgressOptical size={16} />,
disabled: updating,
},
secondary: {

11
src/components/Table/TableHeader/TableLogs.tsx
View File

@@ -12,7 +12,6 @@ import moment from "moment";
import {
Chip,
Stack,
CircularProgress,
Typography,
Box,
Tabs,
@@ -32,6 +31,7 @@ import CloseIcon from "@mui/icons-material/Close";
import TableHeaderButton from "./TableHeaderButton";
import Ansi from "ansi-to-react";
import EmptyState from "components/EmptyState";
import CircularProgressOptical from "components/CircularProgressOptical";
import PropTypes from "prop-types";
import routes from "constants/routes";
@@ -244,7 +244,7 @@ function LogPanel(props) {
})}
<div ref={liveStreamingRef} id="live-stream-target">
{status === "BUILDING" && (
<CircularProgress
<CircularProgressOptical
className={classes.logPanelProgress}
size={30}
/>
@@ -371,7 +371,7 @@ function SnackLog({ log, onClose, onOpenPanel }) {
})}
<div ref={liveStreamingRef} id="live-stream-target-snack">
{status === "BUILDING" && (
<CircularProgress
<CircularProgressOptical
className={classes.logPanelProgress}
size={30}
/>
@@ -427,10 +427,9 @@ export default function TableLogs() {
<>
<LogsIcon />
{latestStatus === "BUILDING" && (
<CircularProgress
<CircularProgressOptical
className={classes.toolbarStatusIcon}
size={12}
thickness={6}
style={{ padding: 1 }}
/>
)}
@@ -499,7 +498,7 @@ export default function TableLogs() {
style={{ textAlign: "left" }}
>
{logEntry.status === "BUILDING" && (
<CircularProgress size={24} />
<CircularProgressOptical size={24} />
)}
{logEntry.status === "SUCCESS" && <SuccessIcon />}
{logEntry.status === "FAIL" && <FailIcon />}

5
src/components/fields/Action/ActionFab.tsx
View File

@@ -2,10 +2,11 @@ import { useState } from "react";
import _get from "lodash/get";
import { useSnackbar } from "notistack";
import { Fab, FabProps, CircularProgress } from "@mui/material";
import { Fab, FabProps } from "@mui/material";
import PlayIcon from "@mui/icons-material/PlayArrow";
import RefreshIcon from "@mui/icons-material/Refresh";
import UndoIcon from "@mui/icons-material/Undo";
import CircularProgressOptical from "components/CircularProgressOptical";
import { useProjectContext } from "contexts/ProjectContext";
import { functions } from "@src/firebase";
@@ -159,7 +160,7 @@ export default function ActionFab({
{...props}
>
{isRunning ? (
<CircularProgress color="secondary" size={16} thickness={5.6} />
<CircularProgressOptical color="secondary" size={16} />
) : (
getStateIcon(actionState)
)}

6
src/components/fields/File/SideDrawerField.tsx
View File

@@ -15,12 +15,12 @@ import {
Grid,
Tooltip,
Chip,
CircularProgress,
} from "@mui/material";
import UploadIcon from "assets/icons/Upload";
import { FileIcon } from ".";
import Confirmation from "components/Confirmation";
import CircularProgressOptical from "components/CircularProgressOptical";
import { DATE_TIME_FORMAT } from "constants/dates";
import { useFieldStyles } from "components/SideDrawer/Form/utils";
@@ -148,9 +148,7 @@ function ControlledFileUploader({
<Chip
icon={<FileIcon />}
label={localFile}
deleteIcon={
<CircularProgress size={20} thickness={4.5} color="inherit" />
}
deleteIcon={<CircularProgressOptical size={20} color="inherit" />}
/>
</Grid>
)}

14
src/components/fields/File/TableCell.tsx
View File

@@ -6,17 +6,10 @@ import _findIndex from "lodash/findIndex";
import { format } from "date-fns";
import { makeStyles, createStyles } from "@mui/styles";
import {
alpha,
Stack,
Grid,
Tooltip,
Chip,
IconButton,
CircularProgress,
} from "@mui/material";
import { alpha, Stack, Grid, Tooltip, Chip, IconButton } from "@mui/material";
import UploadIcon from "assets/icons/Upload";
import ChipList from "components/Table/formatters/ChipList";
import CircularProgressOptical from "components/CircularProgressOptical";
import { useConfirmation } from "components/ConfirmationDialog";
import useUploader, { FileValue } from "hooks/useTable/useUploader";
@@ -184,11 +177,10 @@ export default function File_({
)
) : (
<div style={{ padding: 4 }}>
<CircularProgress
<CircularProgressOptical
size={24}
variant={progress === 0 ? "indeterminate" : "determinate"}
value={progress}
thickness={4}
style={{ display: "block" }}
/>
</div>

12
src/components/fields/Image/SideDrawerField.tsx
View File

@@ -7,14 +7,7 @@ import { useDropzone } from "react-dropzone";
import useUploader from "hooks/useTable/useUploader";
import { makeStyles, createStyles } from "@mui/styles";
import {
alpha,
ButtonBase,
Typography,
Grid,
CircularProgress,
Tooltip,
} from "@mui/material";
import { alpha, ButtonBase, Typography, Grid, Tooltip } from "@mui/material";
import AddIcon from "@mui/icons-material/AddAPhotoOutlined";
import DeleteIcon from "@mui/icons-material/DeleteOutlined";
@@ -22,6 +15,7 @@ import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
import { IMAGE_MIME_TYPES } from ".";
import Thumbnail from "components/Thumbnail";
import CircularProgressOptical from "components/CircularProgressOptical";
import { useConfirmation } from "components/ConfirmationDialog";
import { useProjectContext } from "contexts/ProjectContext";
@@ -247,7 +241,7 @@ function ControlledImageUploader({
alignItems="center"
className={classes.overlay}
>
<CircularProgress
<CircularProgressOptical
color="inherit"
size={48}
variant={progress === 0 ? "indeterminate" : "determinate"}

5
src/components/fields/Image/TableCell.tsx
View File

@@ -12,13 +12,13 @@ import {
Grid,
IconButton,
ButtonBase,
CircularProgress,
Tooltip,
} from "@mui/material";
import AddIcon from "@mui/icons-material/AddAPhotoOutlined";
import DeleteIcon from "@mui/icons-material/DeleteOutlined";
import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
import CircularProgressOptical from "components/CircularProgressOptical";
import { useConfirmation } from "components/ConfirmationDialog";
import useUploader, { FileValue } from "hooks/useTable/useUploader";
import { IMAGE_MIME_TYPES } from "./index";
@@ -272,11 +272,10 @@ export default function Image_({
)
) : (
<div style={{ padding: 4 }}>
<CircularProgress
<CircularProgressOptical
size={24}
variant={progress === 0 ? "indeterminate" : "determinate"}
value={progress}
thickness={4}
style={{ display: "block" }}
/>
</div>

22
src/pages/Test.tsx
View File

@@ -43,6 +43,7 @@ import { useConfirmation } from "components/ConfirmationDialog";
import SnackbarProgress, {
ISnackbarProgressRef,
} from "components/SnackbarProgress";
import CircularProgressOptical from "components/CircularProgressOptical";
const typographyVariants = [
"h1",
@@ -913,7 +914,26 @@ export default function TestView() {
</Button>
</Stack>
<CircularProgress />
<Stack spacing={1} direction="row" alignItems="flex-end">
{/* size 40 thickness 3.6 */}
<CircularProgress />
<CircularProgress size={30} thickness={4.2} />
<CircularProgress size={24} thickness={4.8} />
<CircularProgress size={20} thickness={5.4} />
<CircularProgress size={16} thickness={6.3} />
<CircularProgress size={12} thickness={7.8} />
</Stack>
<Stack spacing={1} direction="row" alignItems="flex-end">
{/* size 40 thickness 3.6 */}
<CircularProgressOptical />
<CircularProgressOptical size={30} />
<CircularProgressOptical size={24} />
<CircularProgressOptical size={20} />
<CircularProgressOptical size={16} />
<CircularProgressOptical size={12} />
</Stack>
<LinearProgress />
</Stack>
</Container>