Added styling to public link share/manage in sidebar

2023-03-22 06:00:02 +05:30 · 2023-03-22 06:00:02 +05:30 · 215246ee24
parent cb0596b76a
commit 215246ee24
10 changed files with 128 additions and 55 deletions
--- a/src/components/Collections/CollectionShare/index.tsx
+++ b/src/components/Collections/CollectionShare/index.tsx
@ -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>
--- a/src/components/Collections/CollectionShare/publicShare/beforeShare.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/beforeShare.tsx
@ -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>
    );
 }
--- a/src/components/Collections/CollectionShare/publicShare/index.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/index.tsx
@ -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}
--- a/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
@ -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
--- a/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
@ -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 && (
--- a/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
@ -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
--- a/src/components/Collections/CollectionShare/publicShare/manage/linkPassword/index.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/manage/linkPassword/index.tsx
@ -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
--- a/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx
@ -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>
    );
 }
--- a/src/components/Menu/menuItem.tsx
+++ b/src/components/Menu/menuItem.tsx
@ -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>
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@ -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',