redesigned watch modal
This commit is contained in:
parent
1c2491dcbb
commit
3c7eb0797b
|
@ -1,4 +1,3 @@
|
||||||
/* eslint-disable */
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
@ -6,26 +5,30 @@ import {
|
||||||
Dialog,
|
Dialog,
|
||||||
Icon,
|
Icon,
|
||||||
IconButton,
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import watchService from 'services/watchService';
|
import watchService from 'services/watchService';
|
||||||
import { MdDelete } from 'react-icons/md';
|
|
||||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
|
||||||
import Close from '@mui/icons-material/Close';
|
import Close from '@mui/icons-material/Close';
|
||||||
import { CenteredFlex, SpaceBetweenFlex } from 'components/Container';
|
import { CenteredFlex, SpaceBetweenFlex } from 'components/Container';
|
||||||
import { WatchMapping } from 'types/watch';
|
import { WatchMapping } from 'types/watch';
|
||||||
import { AppContext } from 'pages/_app';
|
import { AppContext } from 'pages/_app';
|
||||||
import CheckIcon from '@mui/icons-material/Check';
|
import CheckIcon from '@mui/icons-material/Check';
|
||||||
import FolderIcon from '@mui/icons-material/Folder';
|
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
|
||||||
|
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
|
||||||
|
import DoNotDisturbOutlinedIcon from '@mui/icons-material/DoNotDisturbOutlined';
|
||||||
import { default as MuiStyled } from '@mui/styled-engine';
|
import { default as MuiStyled } from '@mui/styled-engine';
|
||||||
import { Box } from '@mui/system';
|
import { Box } from '@mui/system';
|
||||||
|
import DialogBox from './DialogBox';
|
||||||
|
|
||||||
const ModalHeading = MuiStyled('h3')({
|
const ModalHeading = MuiStyled('h3')({
|
||||||
fontSize: '28px',
|
fontSize: '28px',
|
||||||
marginBottom: '24px',
|
marginBottom: '24px',
|
||||||
fontWeight: 'bold',
|
fontWeight: 600,
|
||||||
});
|
});
|
||||||
|
|
||||||
const FullWidthButton = MuiStyled(Button)({
|
const FullWidthButtonWithTopMargin = MuiStyled(Button)({
|
||||||
|
marginTop: '16px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
});
|
});
|
||||||
|
@ -42,22 +45,74 @@ const FixedHeightContainer = MuiStyled(Box)({
|
||||||
alignItems: 'space-between',
|
alignItems: 'space-between',
|
||||||
});
|
});
|
||||||
|
|
||||||
const VerticallyCentered = MuiStyled(Box)({
|
const FullHeightVerticallyCentered = MuiStyled(Box)({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
height: '100%',
|
||||||
|
overflowY: 'auto',
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
listStyle: 'none',
|
||||||
|
'&::-webkit-scrollbar': {
|
||||||
|
width: '6px',
|
||||||
|
},
|
||||||
|
'&::-webkit-scrollbar-thumb': {
|
||||||
|
backgroundColor: 'slategrey',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const NoFoldersTitleText = MuiStyled('h4')({
|
const NoFoldersTitleText = MuiStyled('h4')({
|
||||||
fontSize: '24px',
|
fontSize: '24px',
|
||||||
marginBottom: '16px',
|
marginBottom: '16px',
|
||||||
fontWeight: 'bold',
|
fontWeight: 600,
|
||||||
});
|
});
|
||||||
|
|
||||||
const BottomMarginSpacer = MuiStyled(Box)({
|
const BottomMarginSpacer = MuiStyled(Box)({
|
||||||
marginBottom: '10px',
|
marginBottom: '10px',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const HorizontalFlex = MuiStyled(Box)({
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
});
|
||||||
|
|
||||||
|
const VerticalFlex = MuiStyled(Box)({
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
});
|
||||||
|
|
||||||
|
const MappingEntryTitle = MuiStyled(Box)({
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 500,
|
||||||
|
marginLeft: '12px',
|
||||||
|
marginRight: '6px',
|
||||||
|
});
|
||||||
|
|
||||||
|
const MappingEntryFolder = MuiStyled(Box)({
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
marginTop: '2px',
|
||||||
|
marginLeft: '12px',
|
||||||
|
marginRight: '6px',
|
||||||
|
marginBottom: '6px',
|
||||||
|
lineHeight: '18px',
|
||||||
|
});
|
||||||
|
|
||||||
|
const DialogBoxHeading = MuiStyled('h4')({
|
||||||
|
fontSize: '24px',
|
||||||
|
marginBottom: '16px',
|
||||||
|
fontWeight: 600,
|
||||||
|
});
|
||||||
|
|
||||||
|
const DialogBoxText = MuiStyled('p')({
|
||||||
|
fontWeight: 500,
|
||||||
|
});
|
||||||
|
|
||||||
|
const DialogBoxButton = MuiStyled(Button)({
|
||||||
|
width: '140px',
|
||||||
|
});
|
||||||
|
|
||||||
function CheckmarkIcon() {
|
function CheckmarkIcon() {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
|
@ -79,25 +134,26 @@ function WatchModal({
|
||||||
setWatchModalView: (watchModalView: boolean) => void;
|
setWatchModalView: (watchModalView: boolean) => void;
|
||||||
}) {
|
}) {
|
||||||
const [mappings, setMappings] = useState<WatchMapping[]>([]);
|
const [mappings, setMappings] = useState<WatchMapping[]>([]);
|
||||||
const [inputFolderPath, setInputFolderPath] = useState('');
|
|
||||||
const appContext = React.useContext(AppContext);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMappings(watchService.getWatchMappings());
|
setMappings(watchService.getWatchMappings());
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleFolderSelection = async () => {
|
const handleAddFolderClick = async () => {
|
||||||
const folderPath = await watchService.selectFolder();
|
await handleFolderSelection();
|
||||||
setInputFolderPath(folderPath);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAddWatchMapping = async () => {
|
const handleFolderSelection = async () => {
|
||||||
if (inputFolderPath.length > 0) {
|
const folderPath = await watchService.selectFolder();
|
||||||
|
await handleAddWatchMapping(folderPath);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddWatchMapping = async (inputFolderPath: string) => {
|
||||||
|
if (inputFolderPath?.length > 0) {
|
||||||
await watchService.addWatchMapping(
|
await watchService.addWatchMapping(
|
||||||
inputFolderPath.substring(inputFolderPath.lastIndexOf('/') + 1),
|
inputFolderPath.substring(inputFolderPath.lastIndexOf('/') + 1),
|
||||||
inputFolderPath
|
inputFolderPath
|
||||||
);
|
);
|
||||||
setInputFolderPath('');
|
|
||||||
setMappings(watchService.getWatchMappings());
|
setMappings(watchService.getWatchMappings());
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -107,11 +163,11 @@ function WatchModal({
|
||||||
setMappings(watchService.getWatchMappings());
|
setMappings(watchService.getWatchMappings());
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSyncProgressClick = () => {
|
// const handleSyncProgressClick = () => {
|
||||||
if (watchService.isUploadRunning()) {
|
// if (watchService.isUploadRunning()) {
|
||||||
watchService.showProgressView();
|
// watchService.showProgressView();
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setWatchModalView(false);
|
setWatchModalView(false);
|
||||||
|
@ -137,9 +193,9 @@ function WatchModal({
|
||||||
</SpaceBetweenFlex>
|
</SpaceBetweenFlex>
|
||||||
|
|
||||||
{mappings.length === 0 ? (
|
{mappings.length === 0 ? (
|
||||||
<VerticallyCentered
|
<FullHeightVerticallyCentered
|
||||||
sx={{
|
sx={{
|
||||||
height: '100%',
|
justifyContent: 'center',
|
||||||
}}>
|
}}>
|
||||||
<NoFoldersTitleText>
|
<NoFoldersTitleText>
|
||||||
No folders added yet!
|
No folders added yet!
|
||||||
|
@ -153,18 +209,34 @@ function WatchModal({
|
||||||
<span>
|
<span>
|
||||||
<CheckmarkIcon /> Remove deleted files from ente
|
<CheckmarkIcon /> Remove deleted files from ente
|
||||||
</span>
|
</span>
|
||||||
</VerticallyCentered>
|
</FullHeightVerticallyCentered>
|
||||||
) : null}
|
) : (
|
||||||
|
<FullHeightVerticallyCentered>
|
||||||
|
{mappings.map((mapping: WatchMapping) => {
|
||||||
|
return (
|
||||||
|
<MappingEntry
|
||||||
|
key={mapping.collectionName}
|
||||||
|
mapping={mapping}
|
||||||
|
handleRemoveMapping={
|
||||||
|
handleRemoveWatchMapping
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</FullHeightVerticallyCentered>
|
||||||
|
)}
|
||||||
|
|
||||||
<CenteredFlex>
|
<CenteredFlex>
|
||||||
<FullWidthButton color="accent">
|
<FullWidthButtonWithTopMargin
|
||||||
|
color="accent"
|
||||||
|
onClick={handleAddFolderClick}>
|
||||||
+
|
+
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
marginLeft: '8px',
|
marginLeft: '8px',
|
||||||
}}></span>
|
}}></span>
|
||||||
Add folder
|
Add folder
|
||||||
</FullWidthButton>
|
</FullWidthButtonWithTopMargin>
|
||||||
</CenteredFlex>
|
</CenteredFlex>
|
||||||
</FixedHeightContainer>
|
</FixedHeightContainer>
|
||||||
</PaddedContainer>
|
</PaddedContainer>
|
||||||
|
@ -172,4 +244,120 @@ function WatchModal({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function MappingEntry({
|
||||||
|
mapping,
|
||||||
|
handleRemoveMapping,
|
||||||
|
}: {
|
||||||
|
mapping: WatchMapping;
|
||||||
|
handleRemoveMapping: (mapping: WatchMapping) => void;
|
||||||
|
}) {
|
||||||
|
const appContext = React.useContext(AppContext);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(appContext.watchServiceIsRunning);
|
||||||
|
}, [appContext.watchServiceIsRunning]);
|
||||||
|
|
||||||
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
|
const [dialogBoxOpen, setDialogBoxOpen] = useState(false);
|
||||||
|
const open = Boolean(anchorEl);
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SpaceBetweenFlex>
|
||||||
|
<HorizontalFlex>
|
||||||
|
<FolderOpenIcon />
|
||||||
|
<VerticalFlex>
|
||||||
|
<MappingEntryTitle>
|
||||||
|
{mapping.collectionName}
|
||||||
|
{appContext.watchServiceIsRunning &&
|
||||||
|
watchService.currentEvent?.collectionName ===
|
||||||
|
mapping.collectionName && (
|
||||||
|
<CircularProgress
|
||||||
|
size={12}
|
||||||
|
sx={{
|
||||||
|
marginLeft: '6px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</MappingEntryTitle>
|
||||||
|
<MappingEntryFolder
|
||||||
|
sx={{
|
||||||
|
color: (theme) => theme.palette.grey[500],
|
||||||
|
}}>
|
||||||
|
{mapping.folderPath}
|
||||||
|
</MappingEntryFolder>
|
||||||
|
</VerticalFlex>
|
||||||
|
</HorizontalFlex>
|
||||||
|
<IconButton onClick={handleClick}>
|
||||||
|
<MoreHorizIcon />
|
||||||
|
</IconButton>
|
||||||
|
</SpaceBetweenFlex>
|
||||||
|
<Menu
|
||||||
|
id="basic-menu"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
MenuListProps={{
|
||||||
|
'aria-labelledby': 'basic-button',
|
||||||
|
}}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'bottom',
|
||||||
|
horizontal: 'left',
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'center',
|
||||||
|
horizontal: 'center',
|
||||||
|
}}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => setDialogBoxOpen(true)}
|
||||||
|
sx={{
|
||||||
|
fontWeight: 600,
|
||||||
|
color: (theme) => theme.palette.danger.main,
|
||||||
|
}}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
marginRight: '6px',
|
||||||
|
}}>
|
||||||
|
<DoNotDisturbOutlinedIcon />
|
||||||
|
</span>{' '}
|
||||||
|
Stop watching
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<DialogBox
|
||||||
|
size="xs"
|
||||||
|
PaperProps={{
|
||||||
|
style: {
|
||||||
|
width: '350px',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
open={dialogBoxOpen}
|
||||||
|
onClose={() => setDialogBoxOpen(false)}
|
||||||
|
attributes={{}}>
|
||||||
|
<DialogBoxHeading>Stop watching folder?</DialogBoxHeading>
|
||||||
|
<DialogBoxText>
|
||||||
|
Your existing files will not be deleted, but ente will stop
|
||||||
|
automatically updating the linked ente album on changes in
|
||||||
|
this folder.
|
||||||
|
</DialogBoxText>
|
||||||
|
<HorizontalFlex>
|
||||||
|
<DialogBoxButton onClick={() => setDialogBoxOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</DialogBoxButton>
|
||||||
|
<DialogBoxButton
|
||||||
|
color="danger"
|
||||||
|
onClick={() => handleRemoveMapping(mapping)}>
|
||||||
|
Yes, stop
|
||||||
|
</DialogBoxButton>
|
||||||
|
</HorizontalFlex>
|
||||||
|
</DialogBox>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default WatchModal;
|
export default WatchModal;
|
||||||
|
|
|
@ -149,6 +149,7 @@ const darkThemeOptions = createTheme({
|
||||||
A100: '#ccc',
|
A100: '#ccc',
|
||||||
A200: 'rgba(256, 256, 256, 0.24)',
|
A200: 'rgba(256, 256, 256, 0.24)',
|
||||||
A400: '#434343',
|
A400: '#434343',
|
||||||
|
500: 'rgba(256, 256, 256, 0.5)',
|
||||||
},
|
},
|
||||||
divider: 'rgba(256, 256, 256, 0.12)',
|
divider: 'rgba(256, 256, 256, 0.12)',
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue