Added styling to public link share/manage in sidebar
This commit is contained in:
parent
cb0596b76a
commit
215246ee24
|
@ -6,9 +6,10 @@ import DialogTitleWithCloseButton, {
|
|||
dialogCloseHandler,
|
||||
} from 'components/DialogBox/TitleWithCloseButton';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import { Divider } from '@mui/material';
|
||||
import { Typography } from '@mui/material';
|
||||
import { EnteDrawer } from 'components/EnteDrawer';
|
||||
import PublicShare from './publicShare';
|
||||
import WorkspacesIcon from '@mui/icons-material/Workspaces';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
|
@ -32,8 +33,13 @@ function CollectionShare(props: Props) {
|
|||
{constants.SHARE_COLLECTION}
|
||||
</DialogTitleWithCloseButton>
|
||||
<DialogContent>
|
||||
<Typography color="text.secondary" variant="body2">
|
||||
<WorkspacesIcon
|
||||
style={{ fontSize: 17, marginRight: 8 }}
|
||||
/>
|
||||
{constants.ADD_EMAIL_TITLE}
|
||||
</Typography>
|
||||
<EmailShare collection={props.collection} />
|
||||
<Divider />
|
||||
<PublicShare collection={props.collection} />
|
||||
</DialogContent>
|
||||
</EnteDrawer>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Box, Typography } from '@mui/material';
|
||||
import { Stack, Typography } from '@mui/material';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
import { AppContext } from 'pages/_app';
|
||||
import React, { useContext, useState } from 'react';
|
||||
|
@ -11,6 +11,7 @@ import { Collection, PublicURL, UpdatePublicURL } from 'types/collection';
|
|||
import { handleSharingErrors } from 'utils/error/ui';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { EnteMenuItem } from 'components/Menu/menuItem';
|
||||
import PublicIcon from '@mui/icons-material/Public';
|
||||
interface Iprops {
|
||||
publicShareProp;
|
||||
collection: Collection;
|
||||
|
@ -111,17 +112,23 @@ export default function BeforeShare({
|
|||
}
|
||||
};
|
||||
return (
|
||||
<Box mt={3}>
|
||||
<Stack>
|
||||
<Typography color="text.secondary" variant="body2" padding={1}>
|
||||
<PublicIcon style={{ fontSize: 17, marginRight: 8 }} />
|
||||
{constants.LINK_SHARE_TITLE}
|
||||
</Typography>
|
||||
<EnteMenuItem
|
||||
startIcon={<LinkIcon />}
|
||||
color="primary"
|
||||
onClick={handleCollectionPublicSharing}>
|
||||
onClick={handleCollectionPublicSharing}
|
||||
isTopOfList={true}>
|
||||
{constants.CREATE_PUBLIC_SHARING}
|
||||
</EnteMenuItem>
|
||||
<EnteMenuItem
|
||||
startIcon={<LinkIcon />}
|
||||
color="primary"
|
||||
onClick={handleCollecPhotosPublicSharing}>
|
||||
onClick={handleCollecPhotosPublicSharing}
|
||||
isBottomOfList={true}>
|
||||
{constants.COLLECT_PHOTOS}
|
||||
</EnteMenuItem>
|
||||
{sharableLinkError && (
|
||||
|
@ -135,6 +142,6 @@ export default function BeforeShare({
|
|||
{sharableLinkError}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,7 +5,16 @@ import BeforeShare from './beforeShare';
|
|||
import PublicShareManage from './manage';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopyOutlined';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { Dialog, DialogTitle, DialogActions, Button } from '@mui/material';
|
||||
import PublicIcon from '@mui/icons-material/Public';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogActions,
|
||||
Button,
|
||||
Stack,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import LinkIcon from '@mui/icons-material/Link';
|
||||
import { EnteMenuItem } from 'components/Menu/menuItem';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
|
@ -64,18 +73,30 @@ export default function PublicShare({
|
|||
<>
|
||||
{publicShareProp ? (
|
||||
<>
|
||||
<EnteMenuItem
|
||||
startIcon={<ContentCopyIcon />}
|
||||
onClick={copyToClipboardHelper(publicShareUrl)}>
|
||||
{constants.COPY_LINK}
|
||||
</EnteMenuItem>
|
||||
|
||||
<EnteMenuItem
|
||||
startIcon={<LinkIcon />}
|
||||
endIcon={<ChevronRightIcon />}
|
||||
onClick={openManageShare}>
|
||||
{constants.MANAGE_LINK}
|
||||
</EnteMenuItem>
|
||||
<Stack>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
padding={1}>
|
||||
<PublicIcon
|
||||
style={{ fontSize: 17, marginRight: 8 }}
|
||||
/>
|
||||
{constants.PUBLIC_LINK_ENABLED}
|
||||
</Typography>
|
||||
<EnteMenuItem
|
||||
startIcon={<ContentCopyIcon />}
|
||||
onClick={copyToClipboardHelper(publicShareUrl)}
|
||||
isTopOfList={true}>
|
||||
{constants.COPY_LINK}
|
||||
</EnteMenuItem>
|
||||
<EnteMenuItem
|
||||
startIcon={<LinkIcon />}
|
||||
endIcon={<ChevronRightIcon />}
|
||||
onClick={openManageShare}
|
||||
isBottomOfList={true}>
|
||||
{constants.MANAGE_LINK}
|
||||
</EnteMenuItem>
|
||||
</Stack>
|
||||
<PublicShareManage
|
||||
open={manageShareModalView}
|
||||
onClose={closeManageShare}
|
||||
|
|
|
@ -45,7 +45,8 @@ export function ManageDeviceLimit({
|
|||
<EnteMenuItem
|
||||
onClick={openShareExpiryOptionsModalView}
|
||||
endIcon={<ChevronRight />}
|
||||
subText={String(shareDeviceLimitValue)}>
|
||||
subText={String(shareDeviceLimitValue)}
|
||||
isTopOfList={true}>
|
||||
{constants.LINK_DEVICE_LIMIT}
|
||||
</EnteMenuItem>
|
||||
<EnteDrawer
|
||||
|
|
|
@ -73,7 +73,7 @@ export default function PublicShareManage({
|
|||
{constants.SHARE_COLLECTION}
|
||||
</DialogTitleWithCloseButton>
|
||||
<DialogContent>
|
||||
<Stack spacing={1.5}>
|
||||
<Stack spacing={3}>
|
||||
<ManagePublicCollect
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
|
@ -88,36 +88,43 @@ export default function PublicShareManage({
|
|||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
<ManageDeviceLimit
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
updatePublicShareURLHelper={
|
||||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
<ManageDownloadAccess
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
updatePublicShareURLHelper={
|
||||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
<ManageLinkPassword
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
updatePublicShareURLHelper={
|
||||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
<Stack>
|
||||
<ManageDeviceLimit
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
updatePublicShareURLHelper={
|
||||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
<ManageDownloadAccess
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
updatePublicShareURLHelper={
|
||||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
<ManageLinkPassword
|
||||
collection={collection}
|
||||
publicShareProp={publicShareProp}
|
||||
updatePublicShareURLHelper={
|
||||
updatePublicShareURLHelper
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<EnteMenuItem
|
||||
startIcon={<ContentCopyIcon />}
|
||||
onClick={copyToClipboardHelper(publicShareUrl)}>
|
||||
onClick={copyToClipboardHelper(publicShareUrl)}
|
||||
isTopOfList={true}
|
||||
isBottomOfList={true}>
|
||||
{constants.COPY_LINK}
|
||||
</EnteMenuItem>
|
||||
<EnteMenuItem
|
||||
color="danger"
|
||||
startIcon={<RemoveCircleOutline />}
|
||||
onClick={disablePublicSharing}>
|
||||
{constants.DELETE}
|
||||
onClick={disablePublicSharing}
|
||||
isTopOfList={true}
|
||||
isBottomOfList={true}>
|
||||
{constants.REMOVE_LINK}
|
||||
</EnteMenuItem>
|
||||
</Stack>
|
||||
{sharableLinkError && (
|
||||
|
|
|
@ -55,7 +55,9 @@ export function ManageLinkExpiry({
|
|||
<EnteMenuItem
|
||||
onClick={openShareExpiryOptionsModalView}
|
||||
endIcon={<ChevronRight />}
|
||||
subText={labelText}>
|
||||
subText={labelText}
|
||||
isTopOfList={true}
|
||||
isBottomOfList={true}>
|
||||
{constants.LINK_EXPIRY}
|
||||
</EnteMenuItem>
|
||||
<EnteDrawer
|
||||
|
|
|
@ -51,7 +51,8 @@ export function ManageLinkPassword({
|
|||
<EnteMenuItem
|
||||
onClick={handlePasswordChangeSetting}
|
||||
checked={!!publicShareProp?.passwordEnabled}
|
||||
hasSwitch={true}>
|
||||
hasSwitch={true}
|
||||
isBottomOfList={true}>
|
||||
{constants.LINK_PASSWORD_LOCK}
|
||||
</EnteMenuItem>
|
||||
<PublicLinkSetPassword
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { Stack, Typography } from '@mui/material';
|
||||
import { EnteMenuItem } from 'components/Menu/menuItem';
|
||||
import React from 'react';
|
||||
import { PublicURL, Collection, UpdatePublicURL } from 'types/collection';
|
||||
|
@ -22,12 +23,24 @@ export function ManagePublicCollect({
|
|||
};
|
||||
|
||||
return (
|
||||
<EnteMenuItem
|
||||
onClick={handleFileDownloadSetting}
|
||||
color="primary"
|
||||
hasSwitch={true}
|
||||
checked={publicShareProp?.enableCollect}>
|
||||
{constants.PUBLIC_COLLECT}
|
||||
</EnteMenuItem>
|
||||
<Stack>
|
||||
<EnteMenuItem
|
||||
onClick={handleFileDownloadSetting}
|
||||
color="primary"
|
||||
hasSwitch={true}
|
||||
checked={publicShareProp?.enableCollect}
|
||||
isTopOfList={true}
|
||||
isBottomOfList={true}>
|
||||
{constants.PUBLIC_COLLECT}
|
||||
</EnteMenuItem>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
paddingLeft={1.75}
|
||||
paddingTop={0.75}
|
||||
paddingBottom={0.75}>
|
||||
{constants.PUBLIC_COLLECT_SUBTEXT}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -19,6 +19,8 @@ interface Iprops {
|
|||
children?: any;
|
||||
hasSwitch?: boolean;
|
||||
checked?: boolean;
|
||||
isTopOfList?: boolean;
|
||||
isBottomOfList?: boolean;
|
||||
}
|
||||
export function EnteMenuItem({
|
||||
onClick,
|
||||
|
@ -30,6 +32,8 @@ export function EnteMenuItem({
|
|||
children,
|
||||
hasSwitch = false,
|
||||
checked,
|
||||
isTopOfList = false,
|
||||
isBottomOfList = false,
|
||||
}: Iprops) {
|
||||
const menuContext = useContext(OverflowMenuContext);
|
||||
// const [buttonState, setButtonState] = useState<
|
||||
|
@ -52,10 +56,15 @@ export function EnteMenuItem({
|
|||
sx={{
|
||||
minWidth: 220,
|
||||
color: (theme) => theme.palette[color].main,
|
||||
backgroundColor: (theme) => theme.palette.background.overPaper,
|
||||
padding: 1.5,
|
||||
'& .MuiSvgIcon-root': {
|
||||
fontSize: '20px',
|
||||
},
|
||||
borderTopLeftRadius: isTopOfList ? 8 : 0,
|
||||
borderTopRightRadius: isTopOfList ? 8 : 0,
|
||||
borderBottomLeftRadius: isBottomOfList ? 8 : 0,
|
||||
borderBottomRightRadius: isBottomOfList ? 8 : 0,
|
||||
}}>
|
||||
<SpaceBetweenFlex>
|
||||
<HorizontalFlex>
|
||||
|
|
|
@ -390,6 +390,8 @@ const englishConstants = {
|
|||
KEEP_PHOTOS: 'Keep photos',
|
||||
SHARE: 'Share',
|
||||
SHARE_COLLECTION: 'Share album',
|
||||
ADD_EMAIL_TITLE: 'Share with specific people',
|
||||
LINK_SHARE_TITLE: 'Or share a link',
|
||||
SHARE_WITH_PEOPLE: 'Share with your loved ones',
|
||||
SHAREES: 'Shared with',
|
||||
PUBLIC_URL: 'Public link',
|
||||
|
@ -629,6 +631,7 @@ const englishConstants = {
|
|||
ADD: 'Add',
|
||||
SORT: 'Sort',
|
||||
REMOVE: 'Remove',
|
||||
REMOVE_LINK: 'Remove link',
|
||||
YES_REMOVE: 'Yes, remove',
|
||||
CONFIRM_REMOVE: 'Confirm removal',
|
||||
REMOVE_FROM_COLLECTION: 'Remove from album',
|
||||
|
@ -725,6 +728,7 @@ const englishConstants = {
|
|||
ALBUM_URL: 'Album url',
|
||||
CREATE_PUBLIC_SHARING: 'Create public link',
|
||||
PUBLIC_LINK_CREATED: 'Public link created',
|
||||
PUBLIC_LINK_ENABLED: 'Public link enabled',
|
||||
COLLECT_PHOTOS: 'Collect photos',
|
||||
SHARING_DETAILS: 'Sharing details',
|
||||
MODIFY_SHARING: 'Modify sharing',
|
||||
|
@ -739,6 +743,8 @@ const englishConstants = {
|
|||
FILE_DOWNLOAD: 'Allow downloads',
|
||||
LINK_PASSWORD_LOCK: 'Password lock',
|
||||
PUBLIC_COLLECT: 'Allow adding photos',
|
||||
PUBLIC_COLLECT_SUBTEXT:
|
||||
'Allow people with the link to also add photos to the shared album.',
|
||||
LINK_DEVICE_LIMIT: 'Device limit',
|
||||
LINK_EXPIRY: 'Link expiry',
|
||||
LINK_EXPIRY_NEVER: 'Never',
|
||||
|
|
Loading…
Reference in a new issue