Merge pull request #882 from ente-io/album-header-change

Album header change

src/components/Collections/CollectionInfo.tsx

@@ -11,13 +11,25 @@ interface Iprops {
 export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
     return (
         <div>
+            <Typography variant="h3">{name}</Typography>
+
             <FlexWrapper>
-                <Typography variant="subtitle">{name}</Typography>
-                {endIcon && <Box ml={1.5}>{endIcon}</Box>}
+                <Typography variant="body2" color="text.secondary">
+                    {constants.PHOTO_COUNT(fileCount)}
+                </Typography>
+                {endIcon && (
+                    <Box
+                        sx={{
+                            svg: {
+                                fontSize: '17px',
+                                color: 'text.secondary',
+                            },
+                        }}
+                        ml={1.5}>
+                        {endIcon}
+                    </Box>
+                )}
             </FlexWrapper>
-            <Typography variant="body2" color="text.secondary">
-                {constants.PHOTO_COUNT(fileCount)}
-            </Typography>
         </div>
     );
 }

src/components/Collections/CollectionInfoWithOptions.tsx

@@ -10,6 +10,8 @@ import { CollectionSummaryType } from 'constants/collection';
 import Favorite from '@mui/icons-material/FavoriteRounded';
 import Delete from '@mui/icons-material/Delete';
 import ArchiveOutlined from '@mui/icons-material/ArchiveOutlined';
+import PeopleIcon from '@mui/icons-material/People';
+import LinkIcon from '@mui/icons-material/Link';
 
 interface Iprops {
     activeCollection: Collection;
@@ -46,6 +48,12 @@ export default function CollectionInfoWithOptions({
                 return <ArchiveOutlined />;
             case CollectionSummaryType.trash:
                 return <Delete />;
+            case CollectionSummaryType.incomingShare:
+                return <PeopleIcon />;
+            case CollectionSummaryType.outgoingShare:
+                return <PeopleIcon />;
+            case CollectionSummaryType.sharedOnlyViaLink:
+                return <LinkIcon />;
             default:
                 return <></>;
         }

src/components/Collections/CollectionOptions/AlbumCollectionOption.tsx

@@ -2,8 +2,7 @@ import { OverflowMenuOption } from 'components/OverflowMenu/option';
 import React from 'react';
 
 import EditIcon from '@mui/icons-material/Edit';
-import IosShareIcon from '@mui/icons-material/IosShare';
-import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import PeopleIcon from '@mui/icons-material/People';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import constants from 'utils/strings/constants';
 import { CollectionActions } from '.';
@@ -24,29 +23,13 @@ export function AlbumCollectionOption({
 }: Iprops) {
     return (
         <>
-            <OverflowMenuOption
-                onClick={handleCollectionAction(
-                    CollectionActions.SHOW_SHARE_DIALOG,
-                    false
-                )}
-                startIcon={<IosShareIcon />}>
-                {constants.SHARE}
-            </OverflowMenuOption>
-            <OverflowMenuOption
-                onClick={handleCollectionAction(
-                    CollectionActions.CONFIRM_DOWNLOAD,
-                    false
-                )}
-                startIcon={<FileDownloadOutlinedIcon />}>
-                {constants.DOWNLOAD}
-            </OverflowMenuOption>
             <OverflowMenuOption
                 onClick={handleCollectionAction(
                     CollectionActions.SHOW_RENAME_DIALOG,
                     false
                 )}
                 startIcon={<EditIcon />}>
-                {constants.RENAME}
+                {constants.RENAME_COLLECTION}
             </OverflowMenuOption>
             {IsArchived ? (
                 <OverflowMenuOption
@@ -54,13 +37,13 @@ export function AlbumCollectionOption({
                         CollectionActions.UNARCHIVE
                     )}
                     startIcon={<Unarchive />}>
-                    {constants.UNARCHIVE}
+                    {constants.UNARCHIVE_COLLECTION}
                 </OverflowMenuOption>
             ) : (
                 <OverflowMenuOption
                     onClick={handleCollectionAction(CollectionActions.ARCHIVE)}
                     startIcon={<ArchiveOutlined />}>
-                    {constants.ARCHIVE}
+                    {constants.ARCHIVE_COLLECTION}
                 </OverflowMenuOption>
             )}
             <OverflowMenuOption
@@ -69,7 +52,15 @@ export function AlbumCollectionOption({
                     CollectionActions.CONFIRM_DELETE,
                     false
                 )}>
-                {constants.DELETE}
+                {constants.DELETE_COLLECTION}
+            </OverflowMenuOption>
+            <OverflowMenuOption
+                onClick={handleCollectionAction(
+                    CollectionActions.SHOW_SHARE_DIALOG,
+                    false
+                )}
+                startIcon={<PeopleIcon />}>
+                {constants.SHARE_COLLECTION}
             </OverflowMenuOption>
         </>
     );

src/components/Collections/CollectionOptions/QuickOptions.tsx

@@ -0,0 +1,81 @@
+import { CollectionActions } from '.';
+import React from 'react';
+import { CollectionSummaryType } from 'constants/collection';
+import PeopleIcon from '@mui/icons-material/People';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import { FlexWrapper } from 'components/Container';
+import { IconButton, Tooltip } from '@mui/material';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import constants from 'utils/strings/constants';
+
+interface Iprops {
+    handleCollectionAction: (
+        action: CollectionActions,
+        loader?: boolean
+    ) => (...args: any[]) => Promise<void>;
+    collectionSummaryType: CollectionSummaryType;
+}
+
+export function QuickOptions({
+    handleCollectionAction,
+    collectionSummaryType,
+}: Iprops) {
+    return (
+        <FlexWrapper sx={{ gap: '16px' }}>
+            {!(
+                collectionSummaryType === CollectionSummaryType.trash ||
+                collectionSummaryType === CollectionSummaryType.favorites
+            ) && (
+                <Tooltip
+                    title={
+                        collectionSummaryType ===
+                        CollectionSummaryType.outgoingShare
+                            ? constants.MODIFY_SHARING
+                            : collectionSummaryType ===
+                              CollectionSummaryType.incomingShare
+                            ? constants.SHARING_DETAILS
+                            : constants.SHARE_COLLECTION
+                    }>
+                    <IconButton>
+                        <PeopleIcon
+                            onClick={handleCollectionAction(
+                                CollectionActions.SHOW_SHARE_DIALOG,
+                                false
+                            )}
+                        />
+                    </IconButton>
+                </Tooltip>
+            )}
+            {!(collectionSummaryType === CollectionSummaryType.trash) && (
+                <Tooltip
+                    title={
+                        collectionSummaryType ===
+                        CollectionSummaryType.favorites
+                            ? constants.DOWNLOAD_FAVOURITES
+                            : constants.DOWNLOAD_COLLECTION
+                    }>
+                    <IconButton>
+                        <FileDownloadOutlinedIcon
+                            onClick={handleCollectionAction(
+                                CollectionActions.CONFIRM_DOWNLOAD,
+                                false
+                            )}
+                        />
+                    </IconButton>
+                </Tooltip>
+            )}
+            {collectionSummaryType === CollectionSummaryType.trash && (
+                <Tooltip title={constants.EMPTY_TRASH}>
+                    <IconButton>
+                        <DeleteOutlinedIcon
+                            onClick={handleCollectionAction(
+                                CollectionActions.CONFIRM_DELETE,
+                                false
+                            )}
+                        />
+                    </IconButton>
+                </Tooltip>
+            )}
+        </FlexWrapper>
+    );
+}

src/components/Collections/CollectionOptions/index.tsx

@@ -18,7 +18,9 @@ import OverflowMenu from 'components/OverflowMenu/menu';
 import { CollectionSummaryType } from 'constants/collection';
 import { TrashCollectionOption } from './TrashCollectionOption';
 import { SharedCollectionOption } from './SharedCollectionOption';
+import { QuickOptions } from './QuickOptions';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
+import { HorizontalFlex } from 'components/Container';
 
 interface CollectionOptionsProps {
     setCollectionNamerAttributes: SetCollectionNamerAttributes;
@@ -188,7 +190,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
 
     const confirmDownloadCollection = () => {
         setDialogMessage({
-            title: constants.CONFIRM_DOWNLOAD_COLLECTION,
+            title: constants.DOWNLOAD_COLLECTION,
             content: constants.DOWNLOAD_COLLECTION_MESSAGE(),
             proceed: {
                 text: constants.DOWNLOAD,
@@ -232,30 +234,38 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
     };
 
     return (
-        <OverflowMenu
-            ariaControls={'collection-options'}
-            triggerButtonIcon={<MoreHoriz />}
-            triggerButtonProps={{
-                sx: {
-                    background: (theme) => theme.palette.fill.dark,
-                },
-            }}>
-            {collectionSummaryType === CollectionSummaryType.trash ? (
-                <TrashCollectionOption
-                    handleCollectionAction={handleCollectionAction}
-                />
-            ) : collectionSummaryType ===
-              CollectionSummaryType.incomingShare ? (
-                <SharedCollectionOption
-                    handleCollectionAction={handleCollectionAction}
-                />
-            ) : (
-                <AlbumCollectionOption
-                    IsArchived={IsArchived(activeCollection)}
-                    handleCollectionAction={handleCollectionAction}
-                />
+        <HorizontalFlex sx={{ display: 'inline-flex', gap: '16px' }}>
+            <QuickOptions
+                handleCollectionAction={handleCollectionAction}
+                collectionSummaryType={collectionSummaryType}
+            />
+            {!(collectionSummaryType === CollectionSummaryType.favorites) && (
+                <OverflowMenu
+                    ariaControls={'collection-options'}
+                    triggerButtonIcon={<MoreHoriz />}
+                    triggerButtonProps={{
+                        sx: {
+                            background: (theme) => theme.palette.fill.dark,
+                        },
+                    }}>
+                    {collectionSummaryType === CollectionSummaryType.trash ? (
+                        <TrashCollectionOption
+                            handleCollectionAction={handleCollectionAction}
+                        />
+                    ) : collectionSummaryType ===
+                      CollectionSummaryType.incomingShare ? (
+                        <SharedCollectionOption
+                            handleCollectionAction={handleCollectionAction}
+                        />
+                    ) : (
+                        <AlbumCollectionOption
+                            IsArchived={IsArchived(activeCollection)}
+                            handleCollectionAction={handleCollectionAction}
+                        />
+                    )}
+                </OverflowMenu>
             )}
-        </OverflowMenu>
+        </HorizontalFlex>
     );
 };
 

src/constants/collection/index.ts

@@ -61,7 +61,6 @@ export const UPLOAD_NOT_ALLOWED_COLLECTION_TYPES = new Set([
 export const OPTIONS_NOT_HAVING_COLLECTION_TYPES = new Set([
     CollectionSummaryType.all,
     CollectionSummaryType.archive,
-    CollectionSummaryType.favorites,
 ]);
 
 export const HIDE_FROM_COLLECTION_BAR_TYPES = new Set([

src/utils/strings/englishConstants.tsx

@@ -140,6 +140,7 @@ const englishConstants = {
     CREATE: 'Create',
     DOWNLOAD: 'Download',
     DOWNLOAD_OPTION: 'Download (D)',
+    DOWNLOAD_FAVOURITES: 'Download favourites',
     COPY_OPTION: 'Copy as PNG (Ctrl/Cmd - C)',
     TOGGLE_FULLSCREEN: 'Toggle fullscreen (F)',
     ZOOM_IN_OUT: 'Zoom in/out',
@@ -379,7 +380,7 @@ const englishConstants = {
         `Oops, you're already sharing this with ${email}`,
     SHARING_BAD_REQUEST_ERROR: 'Sharing album not allowed',
     SHARING_DISABLED_FOR_FREE_ACCOUNTS: 'Sharing is disabled for free accounts',
-    CONFIRM_DOWNLOAD_COLLECTION: 'Download album',
+    DOWNLOAD_COLLECTION: 'Download album',
     DOWNLOAD_COLLECTION_MESSAGE: () => (
         <>
             <p>Are you sure you want to download the complete album?</p>
@@ -587,10 +588,12 @@ const englishConstants = {
         'These files were uploaded, but unfortunately we could not generate the thumbnails for them.',
     UPLOAD_TO_COLLECTION: 'Upload to album',
     ARCHIVE: 'Archive',
+    ARCHIVE_COLLECTION: 'Archive album',
     ARCHIVE_SECTION_NAME: 'Archive',
     ALL_SECTION_NAME: 'All',
     MOVE_TO_COLLECTION: 'Move to album',
     UNARCHIVE: 'Unarchive',
+    UNARCHIVE_COLLECTION: 'Unarchive album',
     MOVE: 'Move',
     ADD: 'Add',
     SORT: 'Sort',
@@ -680,6 +683,8 @@ const englishConstants = {
     INSTALL: 'Install',
     ALBUM_URL: 'Album url',
     PUBLIC_SHARING: 'Public link',
+    SHARING_DETAILS: 'Sharing details',
+    MODIFY_SHARING: 'Modify sharing',
     NOT_FOUND: '404 - not found',
     LINK_EXPIRED: 'Link expired',
     LINK_EXPIRED_MESSAGE: 'This link has either expired or been disabled!',