beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source 
Album header change
This commit is contained in:
Abhinav Kumar 2023-01-25 13:51:12 +05:30 committed by GitHub
parent b763a436b7 7d0be86f38
commit cbee1c442b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 88 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/Collections/CollectionOptions/FavoritiesCollectionOption.tsx Normal file
View file

@ -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>
);
}

11
src/components/Collections/CollectionOptions/QuickOptions.tsx
View file

@ -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
)}
/>

57
src/components/Collections/CollectionOptions/index.tsx
View file

@ -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
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
ariaControls={'collection-options'}
triggerButtonIcon={<MoreHoriz />}
triggerButtonProps={{
sx: {
background: (theme) => theme.palette.fill.dark,
},
}}>
{collectionSummaryType === CollectionSummaryType.trash ? (
<TrashCollectionOption
handleCollectionAction={handleCollectionAction}
/>
) : collectionSummaryType ===
CollectionSummaryType.favorites ? (
<FavoritiesCollectionOption
handleCollectionAction={handleCollectionAction}
/>
) : collectionSummaryType ===
CollectionSummaryType.incomingShare ? (
<SharedCollectionOption
handleCollectionAction={handleCollectionAction}
/>
) : (
<AlbumCollectionOption
IsArchived={IsArchived(activeCollection)}
handleCollectionAction={handleCollectionAction}
/>
)}
</OverflowMenu>
</HorizontalFlex>
);
};

1
src/components/OverflowMenu/menu.tsx
View file

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

8
src/services/collectionService.ts
View file

@ -50,8 +50,8 @@ import { User } from 'types/user';
import {
getNonHiddenCollections,
isQuickLinkCollection,
isSharedByMe,
isSharedWithMe,
isOutgoingShare,
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

47
src/themes/darkThemeOptions.tsx
View file

@ -232,20 +232,7 @@ const darkThemeOptions = createTheme({
MuiSvgIcon: {
styleOverrides: {
root: ({ 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)',
};
}
return { ...setColor(ownerState) };
},
},
},
@ -253,21 +240,7 @@ const darkThemeOptions = createTheme({
MuiIconButton: {
styleOverrides: {
root: ({ ownerState }) => {
switch (ownerState.color) {
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)',
};
}
return { ...setColor(ownerState), padding: '12px' };
},
},
},
@ -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)',
};
}
}

4
src/utils/collection/index.ts
View file

@ -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) {