From f4fde0219385095b054edbef372b4fc23948b945 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 28 Jun 2022 12:31:47 +0530 Subject: [PATCH 1/6] update CollectionBarTileText overlay --- src/components/Collections/styledComponents.ts | 3 +-- src/components/TruncateText.tsx | 12 ++++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Collections/styledComponents.ts b/src/components/Collections/styledComponents.ts index 005567d1f..87ea283da 100644 --- a/src/components/Collections/styledComponents.ts +++ b/src/components/Collections/styledComponents.ts @@ -82,12 +82,11 @@ export const ResultPreviewTile = styled(CollectionTile)` export const CollectionBarTileText = styled(Overlay)` padding: 4px; background: linear-gradient( - 180deg, + 0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 86.46% ); display: flex; - align-items: flex-end; `; export const AllCollectionTileText = styled(Overlay)` diff --git a/src/components/TruncateText.tsx b/src/components/TruncateText.tsx index f20ea2627..f50fb921b 100644 --- a/src/components/TruncateText.tsx +++ b/src/components/TruncateText.tsx @@ -1,16 +1,20 @@ import Tooltip from '@mui/material/Tooltip'; import React from 'react'; -import { styled, Typography } from '@mui/material'; +import { Box, styled, Typography } from '@mui/material'; export const EllipseText = styled(Typography)` - white-space: nowrap; + /* white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; */ + word-break: break-word; `; export default function TruncateText({ text }) { return ( - {text} + + {/* todo add ellipsis */} + {text} + ); } From 4c2bca8e58a921e5ac54686c354e21d536956cc4 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 28 Jun 2022 14:44:01 +0530 Subject: [PATCH 2/6] update structuring --- src/components/TruncateText.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/TruncateText.tsx b/src/components/TruncateText.tsx index f50fb921b..7032b35a4 100644 --- a/src/components/TruncateText.tsx +++ b/src/components/TruncateText.tsx @@ -1,19 +1,15 @@ import Tooltip from '@mui/material/Tooltip'; import React from 'react'; -import { Box, styled, Typography } from '@mui/material'; -export const EllipseText = styled(Typography)` - /* white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; */ - word-break: break-word; -`; +import { Box, Typography } from '@mui/material'; export default function TruncateText({ text }) { return ( {/* todo add ellipsis */} - {text} + + {text} + ); From 96c122f64e28d52f532456a7e774ec9e56f1715b Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 28 Jun 2022 15:13:45 +0530 Subject: [PATCH 3/6] seperate collection summary type from collection type and add new archived collection summary type --- src/constants/collection/index.ts | 44 ++++++++++++++++++------------- src/services/collectionService.ts | 13 +++++---- src/types/collection/index.ts | 11 ++------ src/utils/collection/index.ts | 9 ++++--- 4 files changed, 40 insertions(+), 37 deletions(-) diff --git a/src/constants/collection/index.ts b/src/constants/collection/index.ts index 3b95173a1..6bce182e1 100644 --- a/src/constants/collection/index.ts +++ b/src/constants/collection/index.ts @@ -6,12 +6,18 @@ export enum CollectionType { folder = 'folder', favorites = 'favorites', album = 'album', +} + +export enum CollectionSummaryType { + folder = 'folder', + favorites = 'favorites', + album = 'album', archive = 'archive', trash = 'trash', all = 'all', shared = 'shared', + archived = 'archived', } - export enum COLLECTION_SORT_BY { NAME, CREATION_TIME_ASCENDING, @@ -24,34 +30,34 @@ export const COLLECTION_SHARE_DEFAULT_VALID_DURATION = export const COLLECTION_SHARE_DEFAULT_DEVICE_LIMIT = 4; export const COLLECTION_SORT_ORDER = new Map([ - [CollectionType.all, 0], - [CollectionType.favorites, 1], - [CollectionType.album, 2], - [CollectionType.folder, 2], - [CollectionType.shared, 2], - [CollectionType.archive, 3], - [CollectionType.trash, 4], + [CollectionSummaryType.all, 0], + [CollectionSummaryType.favorites, 1], + [CollectionSummaryType.album, 2], + [CollectionSummaryType.folder, 2], + [CollectionSummaryType.shared, 2], + [CollectionSummaryType.archive, 3], + [CollectionSummaryType.trash, 4], ]); export const SYSTEM_COLLECTION_TYPES = new Set([ - CollectionType.all, - CollectionType.archive, - CollectionType.trash, + CollectionSummaryType.all, + CollectionSummaryType.archive, + CollectionSummaryType.trash, ]); export const UPLOAD_ALLOWED_COLLECTION_TYPES = new Set([ - CollectionType.album, - CollectionType.folder, - CollectionType.favorites, + CollectionSummaryType.album, + CollectionSummaryType.folder, + CollectionSummaryType.favorites, ]); export const OPTIONS_HAVING_COLLECTION_TYPES = new Set([ - CollectionType.folder, - CollectionType.album, - CollectionType.trash, + CollectionSummaryType.folder, + CollectionSummaryType.album, + CollectionSummaryType.trash, ]); export const HIDE_FROM_COLLECTION_BAR_TYPES = new Set([ - CollectionType.trash, - CollectionType.archive, + CollectionSummaryType.trash, + CollectionSummaryType.archive, ]); diff --git a/src/services/collectionService.ts b/src/services/collectionService.ts index 8c5929014..08962ddb5 100644 --- a/src/services/collectionService.ts +++ b/src/services/collectionService.ts @@ -32,6 +32,7 @@ import { TRASH_SECTION, COLLECTION_SORT_ORDER, ALL_SECTION, + CollectionSummaryType, } from 'constants/collection'; import { UpdateMagicMetadataRequest } from 'types/magicMetadata'; import { EncryptionResult } from 'types/upload'; @@ -786,8 +787,10 @@ export function getCollectionSummaries( updationTime: collection.updationTime, type: collection.owner.id !== user.id - ? CollectionType.shared - : collection.type, + ? CollectionSummaryType.shared + : IsArchived(collection) + ? CollectionSummaryType.archived + : CollectionSummaryType[collection.type], }); } } @@ -853,7 +856,7 @@ function getAllCollectionSummaries( return { id: ALL_SECTION, name: constants.ALL_SECTION_NAME, - type: CollectionType.all, + type: CollectionSummaryType.all, latestFile: collectionsLatestFile.get(ALL_SECTION), fileCount: allSectionFileCount, updationTime: collectionsLatestFile.get(ALL_SECTION)?.updationTime, @@ -867,7 +870,7 @@ function getArchivedCollectionSummaries( return { id: ARCHIVE_SECTION, name: constants.ARCHIVE_SECTION_NAME, - type: CollectionType.archive, + type: CollectionSummaryType.archive, latestFile: collectionsLatestFile.get(ARCHIVE_SECTION), fileCount: collectionFilesCount.get(ARCHIVE_SECTION) ?? 0, updationTime: collectionsLatestFile.get(ARCHIVE_SECTION)?.updationTime, @@ -881,7 +884,7 @@ function getTrashedCollectionSummaries( return { id: TRASH_SECTION, name: constants.TRASH, - type: CollectionType.trash, + type: CollectionSummaryType.trash, latestFile: collectionsLatestFile.get(TRASH_SECTION), fileCount: collectionFilesCount.get(TRASH_SECTION) ?? 0, updationTime: collectionsLatestFile.get(TRASH_SECTION)?.updationTime, diff --git a/src/types/collection/index.ts b/src/types/collection/index.ts index 5860a4641..73925bbfe 100644 --- a/src/types/collection/index.ts +++ b/src/types/collection/index.ts @@ -1,6 +1,6 @@ import { User } from 'types/user'; import { EnteFile } from 'types/file'; -import { CollectionType } from 'constants/collection'; +import { CollectionSummaryType, CollectionType } from 'constants/collection'; import { MagicMetadataCore, VISIBILITY_STATE } from 'types/magicMetadata'; export interface Collection { @@ -91,7 +91,7 @@ export interface CollectionMagicMetadata export interface CollectionSummary { id: number; name: string; - type: CollectionType; + type: CollectionSummaryType; latestFile: EnteFile; fileCount: number; updationTime: number; @@ -99,10 +99,3 @@ export interface CollectionSummary { export type CollectionSummaries = Map; export type CollectionFilesCount = Map; - -export interface CollectionInfo { - id: number; - name: string; - fileCount: number; - type: CollectionType; -} diff --git a/src/utils/collection/index.ts b/src/utils/collection/index.ts index 05cc7a94a..0793c5da1 100644 --- a/src/utils/collection/index.ts +++ b/src/utils/collection/index.ts @@ -20,6 +20,7 @@ import { CollectionSummaries, } from 'types/collection'; import { + CollectionSummaryType, CollectionType, HIDE_FROM_COLLECTION_BAR_TYPES, OPTIONS_HAVING_COLLECTION_TYPES, @@ -208,18 +209,18 @@ export const hasNonEmptyCollections = ( return collectionSummaries?.size <= 3; }; -export const isUploadAllowedCollection = (type: CollectionType) => { +export const isUploadAllowedCollection = (type: CollectionSummaryType) => { return UPLOAD_ALLOWED_COLLECTION_TYPES.has(type); }; -export const isSystemCollection = (type: CollectionType) => { +export const isSystemCollection = (type: CollectionSummaryType) => { return SYSTEM_COLLECTION_TYPES.has(type); }; -export const isOptionsHavingCollection = (type: CollectionType) => { +export const isOptionsHavingCollection = (type: CollectionSummaryType) => { return OPTIONS_HAVING_COLLECTION_TYPES.has(type); }; -export const shouldBeShownOnCollectionBar = (type: CollectionType) => { +export const shouldBeShownOnCollectionBar = (type: CollectionSummaryType) => { return !HIDE_FROM_COLLECTION_BAR_TYPES.has(type); }; From 403a1e9083732169b363e19b3c6190f59bd31a8a Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 28 Jun 2022 15:22:21 +0530 Subject: [PATCH 4/6] udpate collection summary filter utils --- .../Collections/CollectionInfoWithOptions.tsx | 6 ++---- src/constants/collection/index.ts | 19 +++++++++++-------- src/utils/collection/index.ts | 10 +++++----- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/Collections/CollectionInfoWithOptions.tsx b/src/components/Collections/CollectionInfoWithOptions.tsx index bb74d6f80..946d4086b 100644 --- a/src/components/Collections/CollectionInfoWithOptions.tsx +++ b/src/components/Collections/CollectionInfoWithOptions.tsx @@ -5,7 +5,7 @@ import CollectionOptions from 'components/Collections/CollectionOptions'; import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer'; import { SpaceBetweenFlex } from 'components/Container'; import { CollectionInfoBarWrapper } from './styledComponents'; -import { isOptionsHavingCollection } from 'utils/collection'; +import { shouldShowOptions } from 'utils/collection'; interface Iprops { activeCollection: Collection; @@ -37,9 +37,7 @@ export default function CollectionInfoWithOptions({ - {isOptionsHavingCollection(type) && ( - - )} + {shouldShowOptions(type) && } ); diff --git a/src/constants/collection/index.ts b/src/constants/collection/index.ts index 6bce182e1..da4fe3d94 100644 --- a/src/constants/collection/index.ts +++ b/src/constants/collection/index.ts @@ -35,6 +35,7 @@ export const COLLECTION_SORT_ORDER = new Map([ [CollectionSummaryType.album, 2], [CollectionSummaryType.folder, 2], [CollectionSummaryType.shared, 2], + [CollectionSummaryType.archived, 2], [CollectionSummaryType.archive, 3], [CollectionSummaryType.trash, 4], ]); @@ -45,16 +46,18 @@ export const SYSTEM_COLLECTION_TYPES = new Set([ CollectionSummaryType.trash, ]); -export const UPLOAD_ALLOWED_COLLECTION_TYPES = new Set([ - CollectionSummaryType.album, - CollectionSummaryType.folder, - CollectionSummaryType.favorites, +export const UPLOAD_NOT_ALLOWED_COLLECTION_TYPES = new Set([ + CollectionSummaryType.all, + CollectionSummaryType.archive, + CollectionSummaryType.shared, + CollectionSummaryType.trash, ]); -export const OPTIONS_HAVING_COLLECTION_TYPES = new Set([ - CollectionSummaryType.folder, - CollectionSummaryType.album, - CollectionSummaryType.trash, +export const OPTIONS_NOT_HAVING_COLLECTION_TYPES = new Set([ + CollectionSummaryType.all, + CollectionSummaryType.archive, + CollectionSummaryType.shared, + CollectionSummaryType.favorites, ]); export const HIDE_FROM_COLLECTION_BAR_TYPES = new Set([ diff --git a/src/utils/collection/index.ts b/src/utils/collection/index.ts index 0793c5da1..94ec5daff 100644 --- a/src/utils/collection/index.ts +++ b/src/utils/collection/index.ts @@ -23,9 +23,9 @@ import { CollectionSummaryType, CollectionType, HIDE_FROM_COLLECTION_BAR_TYPES, - OPTIONS_HAVING_COLLECTION_TYPES, + OPTIONS_NOT_HAVING_COLLECTION_TYPES, SYSTEM_COLLECTION_TYPES, - UPLOAD_ALLOWED_COLLECTION_TYPES, + UPLOAD_NOT_ALLOWED_COLLECTION_TYPES, } from 'constants/collection'; import { getAlbumSiteHost } from 'constants/pages'; import { getUnixTimeInMicroSecondsWithDelta } from 'utils/time'; @@ -210,15 +210,15 @@ export const hasNonEmptyCollections = ( }; export const isUploadAllowedCollection = (type: CollectionSummaryType) => { - return UPLOAD_ALLOWED_COLLECTION_TYPES.has(type); + return !UPLOAD_NOT_ALLOWED_COLLECTION_TYPES.has(type); }; export const isSystemCollection = (type: CollectionSummaryType) => { return SYSTEM_COLLECTION_TYPES.has(type); }; -export const isOptionsHavingCollection = (type: CollectionSummaryType) => { - return OPTIONS_HAVING_COLLECTION_TYPES.has(type); +export const shouldShowOptions = (type: CollectionSummaryType) => { + return !OPTIONS_NOT_HAVING_COLLECTION_TYPES.has(type); }; export const shouldBeShownOnCollectionBar = (type: CollectionSummaryType) => { From ed7ac4288e17fcc122f80b1559657935d11e6782 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 28 Jun 2022 15:23:14 +0530 Subject: [PATCH 5/6] add collection bar tile icon --- .../CollectionListBar/CollectionCard.tsx | 31 ++++++++++++++++--- .../Collections/CollectionListBar/index.tsx | 1 + .../Collections/styledComponents.ts | 9 ++++++ 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/components/Collections/CollectionListBar/CollectionCard.tsx b/src/components/Collections/CollectionListBar/CollectionCard.tsx index 27d1db3d7..d2c8942e7 100644 --- a/src/components/Collections/CollectionListBar/CollectionCard.tsx +++ b/src/components/Collections/CollectionListBar/CollectionCard.tsx @@ -3,28 +3,32 @@ import { EnteFile } from 'types/file'; import { ActiveIndicator, CollectionBarTile, + CollectionBarTileIcon, CollectionBarTileText, } from '../styledComponents'; import CollectionCard from '../CollectionCard'; import TruncateText from 'components/TruncateText'; import { Box } from '@mui/material'; +import { CollectionSummaryType } from 'constants/collection'; +import Favorite from '@mui/icons-material/Favorite'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; interface Iprops { active: boolean; latestFile: EnteFile; collectionName: string; + collectionType: CollectionSummaryType; onClick: () => void; } const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => { - const { active, collectionName, ...others } = props; + const { active, collectionName, collectionType, ...others } = props; return ( - - - + + {active && } @@ -32,3 +36,22 @@ const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => { }); export default CollectionListBarCard; + +function CollectionCardText({ collectionName }) { + return ( + + + + ); +} + +function CollectionCardIcon({ collectionType }) { + return ( + + {collectionType === CollectionSummaryType.favorites && } + {collectionType === CollectionSummaryType.archived && ( + + )} + + ); +} diff --git a/src/components/Collections/CollectionListBar/index.tsx b/src/components/Collections/CollectionListBar/index.tsx index d35db9b60..f6dfb85fc 100644 --- a/src/components/Collections/CollectionListBar/index.tsx +++ b/src/components/Collections/CollectionListBar/index.tsx @@ -99,6 +99,7 @@ export default function CollectionListBar(props: IProps) { ref={collectionChipsRef[item.id]} active={activeCollection === item.id} onClick={clickHandler(item.id)} + collectionType={item.type} collectionName={item.name} /> ))} diff --git a/src/components/Collections/styledComponents.ts b/src/components/Collections/styledComponents.ts index 87ea283da..b63db6819 100644 --- a/src/components/Collections/styledComponents.ts +++ b/src/components/Collections/styledComponents.ts @@ -86,7 +86,16 @@ export const CollectionBarTileText = styled(Overlay)` rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 86.46% ); +`; + +export const CollectionBarTileIcon = styled(Overlay)` + padding: 4px; display: flex; + justify-content: flex-end; + align-items: flex-end; + & > .MuiSvgIcon-root { + font-size: 20px; + } `; export const AllCollectionTileText = styled(Overlay)` From 4e209b776f3f910f8a9f7b9a78e1b0a8d3447549 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 28 Jun 2022 15:35:04 +0530 Subject: [PATCH 6/6] add icon to special collections --- src/components/Collections/CollectionInfo.tsx | 16 ++++++++++--- .../Collections/CollectionInfoWithOptions.tsx | 23 ++++++++++++++++++- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/components/Collections/CollectionInfo.tsx b/src/components/Collections/CollectionInfo.tsx index f2db32c17..bb316e17e 100644 --- a/src/components/Collections/CollectionInfo.tsx +++ b/src/components/Collections/CollectionInfo.tsx @@ -1,10 +1,20 @@ -import { Typography } from '@mui/material'; +import { Box, Typography } from '@mui/material'; +import { FlexWrapper } from 'components/Container'; import React from 'react'; import constants from 'utils/strings/constants'; -export function CollectionInfo({ name, fileCount }) { +interface Iprops { + name: string; + fileCount: number; + endIcon?: React.ReactNode; +} + +export function CollectionInfo({ name, fileCount, endIcon }: Iprops) { return (
- {name} + + {name} + {endIcon && {endIcon}} + {constants.PHOTO_COUNT(fileCount)} diff --git a/src/components/Collections/CollectionInfoWithOptions.tsx b/src/components/Collections/CollectionInfoWithOptions.tsx index 946d4086b..7f6609254 100644 --- a/src/components/Collections/CollectionInfoWithOptions.tsx +++ b/src/components/Collections/CollectionInfoWithOptions.tsx @@ -6,6 +6,10 @@ import { SetCollectionNamerAttributes } from 'components/Collections/CollectionN import { SpaceBetweenFlex } from 'components/Container'; import { CollectionInfoBarWrapper } from './styledComponents'; import { shouldShowOptions } from 'utils/collection'; +import { CollectionSummaryType } from 'constants/collection'; +import Favorite from '@mui/icons-material/Favorite'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; +import Delete from '@mui/icons-material/Delete'; interface Iprops { activeCollection: Collection; @@ -33,10 +37,27 @@ export default function CollectionInfoWithOptions({ const { name, type, fileCount } = collectionSummary; + const EndIcon = ({ type }: { type: CollectionSummaryType }) => { + switch (type) { + case CollectionSummaryType.favorites: + return ; + case CollectionSummaryType.archived: + case CollectionSummaryType.archive: + return ; + case CollectionSummaryType.trash: + return ; + default: + return <>; + } + }; return ( - + } + /> {shouldShowOptions(type) && }