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

Album header change

src/components/Collections/CollectionOptions/FavoritiesCollectionOption.tsx

@@ -0,0 +1,26 @@
+import { OverflowMenuOption } from 'components/OverflowMenu/option';
+import React from 'react';
+
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import constants from 'utils/strings/constants';
+import { CollectionActions } from '.';
+
+interface Iprops {
+    handleCollectionAction: (
+        action: CollectionActions,
+        loader?: boolean
+    ) => (...args: any[]) => Promise<void>;
+}
+
+export function FavoritiesCollectionOption({ handleCollectionAction }: Iprops) {
+    return (
+        <OverflowMenuOption
+            startIcon={<FileDownloadOutlinedIcon />}
+            onClick={handleCollectionAction(
+                CollectionActions.CONFIRM_DOWNLOAD,
+                false
+            )}>
+            {constants.DOWNLOAD_COLLECTION}
+        </OverflowMenuOption>
+    );
+}

src/components/Collections/CollectionOptions/QuickOptions.tsx

@@ -24,16 +24,17 @@ export function QuickOptions({
         <FlexWrapper sx={{ gap: '16px' }}>
             {!(
                 collectionSummaryType === CollectionSummaryType.trash ||
-                collectionSummaryType === CollectionSummaryType.favorites
+                collectionSummaryType === CollectionSummaryType.favorites ||
+                collectionSummaryType === CollectionSummaryType.incomingShare
             ) && (
                 <Tooltip
                     title={
+                        /*: collectionSummaryType ===
+                            CollectionSummaryType.incomingShare
+                          ? constants.SHARING_DETAILS*/
                         collectionSummaryType ===
                         CollectionSummaryType.outgoingShare
                             ? constants.MODIFY_SHARING
-                            : collectionSummaryType ===
-                              CollectionSummaryType.incomingShare
-                            ? constants.SHARING_DETAILS
                             : constants.SHARE_COLLECTION
                     }>
                     <IconButton>
@@ -69,7 +70,7 @@ export function QuickOptions({
                     <IconButton>
                         <DeleteOutlinedIcon
                             onClick={handleCollectionAction(
-                                CollectionActions.CONFIRM_DELETE,
+                                CollectionActions.CONFIRM_EMPTY_TRASH,
                                 false
                             )}
                         />

src/components/Collections/CollectionOptions/index.tsx

@@ -18,6 +18,7 @@ import OverflowMenu from 'components/OverflowMenu/menu';
 import { CollectionSummaryType } from 'constants/collection';
 import { TrashCollectionOption } from './TrashCollectionOption';
 import { SharedCollectionOption } from './SharedCollectionOption';
+import { FavoritiesCollectionOption } from './FavoritiesCollectionOption';
 import { QuickOptions } from './QuickOptions';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import { HorizontalFlex } from 'components/Container';
@@ -239,32 +240,36 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
                 handleCollectionAction={handleCollectionAction}
                 collectionSummaryType={collectionSummaryType}
             />
-            {!(collectionSummaryType === CollectionSummaryType.favorites) && (
+
-                <OverflowMenu
+            <OverflowMenu
-                    ariaControls={'collection-options'}
+                ariaControls={'collection-options'}
-                    triggerButtonIcon={<MoreHoriz />}
+                triggerButtonIcon={<MoreHoriz />}
-                    triggerButtonProps={{
+                triggerButtonProps={{
-                        sx: {
+                    sx: {
-                            background: (theme) => theme.palette.fill.dark,
+                        background: (theme) => theme.palette.fill.dark,
-                        },
+                    },
-                    }}>
+                }}>
-                    {collectionSummaryType === CollectionSummaryType.trash ? (
+                {collectionSummaryType === CollectionSummaryType.trash ? (
-                        <TrashCollectionOption
+                    <TrashCollectionOption
-                            handleCollectionAction={handleCollectionAction}
+                        handleCollectionAction={handleCollectionAction}
-                        />
+                    />
-                    ) : collectionSummaryType ===
+                ) : collectionSummaryType ===
-                      CollectionSummaryType.incomingShare ? (
+                  CollectionSummaryType.favorites ? (
-                        <SharedCollectionOption
+                    <FavoritiesCollectionOption
-                            handleCollectionAction={handleCollectionAction}
+                        handleCollectionAction={handleCollectionAction}
-                        />
+                    />
-                    ) : (
+                ) : collectionSummaryType ===
-                        <AlbumCollectionOption
+                  CollectionSummaryType.incomingShare ? (
-                            IsArchived={IsArchived(activeCollection)}
+                    <SharedCollectionOption
-                            handleCollectionAction={handleCollectionAction}
+                        handleCollectionAction={handleCollectionAction}
-                        />
+                    />
-                    )}
+                ) : (
-                </OverflowMenu>
+                    <AlbumCollectionOption
-            )}
+                        IsArchived={IsArchived(activeCollection)}
+                        handleCollectionAction={handleCollectionAction}
+                    />
+                )}
+            </OverflowMenu>
         </HorizontalFlex>
     );
 };

src/components/OverflowMenu/menu.tsx

@@ -20,6 +20,7 @@ const StyledMenu = styled(Menu)`
     & .MuiList-root {
         padding: 0;
         border: none;
+        width: 220px;
     }
 `;
 

src/services/collectionService.ts

@@ -50,8 +50,8 @@ import { User } from 'types/user';
 import {
     getNonHiddenCollections,
     isQuickLinkCollection,
-    isSharedByMe,
+    isOutgoingShare,
-    isSharedWithMe,
+    isIncomingShare,
     isSharedOnlyViaLink,
 } from 'utils/collection';
 import ComlinkCryptoWorker from 'utils/comlink/ComlinkCryptoWorker';
@@ -827,9 +827,9 @@ export function getCollectionSummaries(
                 latestFile: collectionLatestFiles.get(collection.id),
                 fileCount: collectionFilesCount.get(collection.id),
                 updationTime: collection.updationTime,
-                type: isSharedWithMe(collection, user)
+                type: isIncomingShare(collection, user)
                     ? CollectionSummaryType.incomingShare
-                    : isSharedByMe(collection)
+                    : isOutgoingShare(collection)
                     ? CollectionSummaryType.outgoingShare
                     : isSharedOnlyViaLink(collection)
                     ? CollectionSummaryType.sharedOnlyViaLink

src/themes/darkThemeOptions.tsx

@@ -232,20 +232,7 @@ const darkThemeOptions = createTheme({
         MuiSvgIcon: {
             styleOverrides: {
                 root: ({ ownerState }) => {
-                    switch (ownerState.color) {
+                    return { ...setColor(ownerState) };
-                        case 'primary':
-                            return {
-                                color: '#ffffff',
-                            };
-                        case 'secondary':
-                            return {
-                                color: 'rgba(255,255,255,0.24)',
-                            };
-                        case 'disabled':
-                            return {
-                                color: 'rgba(255, 255, 255, 0.16)',
-                            };
-                    }
                 },
             },
         },
@@ -253,21 +240,7 @@ const darkThemeOptions = createTheme({
         MuiIconButton: {
             styleOverrides: {
                 root: ({ ownerState }) => {
-                    switch (ownerState.color) {
+                    return { ...setColor(ownerState), padding: '12px' };
-                        case 'primary':
-                            return {
-                                color: '#ffffff',
-                            };
-                        case 'secondary':
-                            return {
-                                color: 'rgba(255,255,255,0.24)',
-                            };
-                    }
-                    if (ownerState.disabled) {
-                        return {
-                            color: 'rgba(255, 255, 255, 0.16)',
-                        };
-                    }
                 },
             },
         },
@@ -403,3 +376,19 @@ const darkThemeOptions = createTheme({
 });
 
 export default darkThemeOptions;
+function setColor(ownerState) {
+    switch (ownerState.color) {
+        case 'primary':
+            return {
+                color: '#ffffff',
+            };
+        case 'secondary':
+            return {
+                color: 'rgba(255,255,255,0.24)',
+            };
+        case 'disabled':
+            return {
+                color: 'rgba(255, 255, 255, 0.16)',
+            };
+    }
+}

src/utils/collection/index.ts

@@ -242,10 +242,10 @@ export const isCollectionHidden = (collection: Collection) =>
 export const isQuickLinkCollection = (collection: Collection) =>
     collection.magicMetadata?.data.subType === SUB_TYPE.QUICK_LINK_COLLECTION;
 
-export function isSharedByMe(collection: Collection): boolean {
+export function isOutgoingShare(collection: Collection): boolean {
     return collection.sharees?.length > 0;
 }
-export function isSharedWithMe(collection: Collection, user: User) {
+export function isIncomingShare(collection: Collection, user: User) {
     return collection.owner.id !== user.id;
 }
 export function isSharedOnlyViaLink(collection: Collection) {