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

make shared-album collection info header scrollable

Browse source
This commit is contained in:
Abhinav 2022-06-26 11:55:57 +05:30
parent 48e37e1160
commit 0097c99bcc
6 changed files with 46 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Collections/index.tsx
View file

@ -69,7 +69,7 @@ export default function Collections(props: Iprops) {
}
/>
),
itemType: ITEM_TYPE.STATIC,
itemType: ITEM_TYPE.OTHER,
height: 68,
}),
[collectionSummaries, activeCollectionID, shouldBeHidden]

27
src/components/PhotoList.tsx
View file

@ -30,7 +30,7 @@ export enum ITEM_TYPE {
TIME = 'TIME',
FILE = 'FILE',
SIZE_AND_COUNT = 'SIZE_AND_COUNT',
STATIC = 'static',
OTHER = 'OTHER',
}
export interface TimeStampListItem {
@ -141,6 +141,7 @@ export function PhotoList({
resetFetching,
}: Props) {
const galleryContext = useContext(GalleryContext);
const timeStampListRef = useRef([]);
const timeStampList = timeStampListRef?.current ?? [];
const filteredDataCopyRef = useRef([]);
@ -170,7 +171,15 @@ export function PhotoList({
let timeStampList: TimeStampListItem[] = [];
if (galleryContext.photoListHeader) {
timeStampList.push(getPhotoListHeader());
timeStampList.push(
getPhotoListHeader(galleryContext.photoListHeader)
);
} else if (publicCollectionGalleryContext.photoListHeader) {
timeStampList.push(
getPhotoListHeader(
publicCollectionGalleryContext.photoListHeader
)
);
}
if (deduplicateContext.isOnDeduplicatePage) {
skipMerge = true;
@ -303,12 +312,12 @@ export function PhotoList({
first.getMonth() === second.getMonth() &&
first.getDate() === second.getDate();
const getPhotoListHeader = () => {
const getPhotoListHeader = (photoListHeader) => {
return {
...galleryContext.photoListHeader,
...photoListHeader,
item: (
<ListItemContainer span={columns}>
{galleryContext.photoListHeader.item}
{photoListHeader.item}
</ListItemContainer>
),
};
@ -316,7 +325,7 @@ export function PhotoList({
const getEmptyListItem = () => {
return {
itemType: ITEM_TYPE.STATIC,
itemType: ITEM_TYPE.OTHER,
item: (
<NothingContainer span={columns}>
<div>{constants.NOTHING_HERE}</div>
@ -339,7 +348,7 @@ export function PhotoList({
return sum;
})();
return {
itemType: ITEM_TYPE.STATIC,
itemType: ITEM_TYPE.OTHER,
item: <></>,
height: Math.max(height - photoFrameHeight - FOOTER_HEIGHT, 0),
};
@ -347,7 +356,7 @@ export function PhotoList({
const getAppDownloadFooter = () => {
return {
itemType: ITEM_TYPE.STATIC,
itemType: ITEM_TYPE.OTHER,
height: FOOTER_HEIGHT,
item: (
<FooterContainer span={columns}>
@ -359,7 +368,7 @@ export function PhotoList({
const getAlbumsFooter = () => {
return {
itemType: ITEM_TYPE.STATIC,
itemType: ITEM_TYPE.OTHER,
height: FOOTER_HEIGHT,
item: (
<FooterContainer span={columns}>

2
src/pages/gallery/index.tsx
View file

@ -317,7 +317,7 @@ export default function Gallery() {
searchResultSummary={searchResultSummary}
/>
),
itemType: ITEM_TYPE.STATIC,
itemType: ITEM_TYPE.OTHER,
});
}
}, [isInSearchMode, searchResultSummary]);

29
src/pages/shared-albums/index.tsx
View file

@ -35,6 +35,7 @@ import { logError } from 'utils/sentry';
import SharedAlbumNavbar from 'components/pages/sharedAlbum/Navbar';
import { CollectionInfo } from 'components/Collections/CollectionInfo';
import { CollectionInfoBarWrapper } from 'components/Collections/styledComponents';
import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
const Loader = () => (
<VerticallyCentered>
@ -61,6 +62,8 @@ export default function PublicCollectionGallery() {
const router = useRouter();
const [isPasswordProtected, setIsPasswordProtected] =
useState<boolean>(false);
const [photoListHeader, setPhotoListHeader] =
useState<TimeStampListItem>(null);
useEffect(() => {
const currentURL = new URL(window.location.href);
@ -120,6 +123,25 @@ export default function PublicCollectionGallery() {
main();
}, []);
useEffect(
() =>
publicCollection &&
publicFiles &&
setPhotoListHeader({
item: (
<CollectionInfoBarWrapper>
<CollectionInfo
name={publicCollection.name}
fileCount={publicFiles.length}
/>
</CollectionInfoBarWrapper>
),
itemType: ITEM_TYPE.OTHER,
height: 68,
}),
[publicCollection, publicFiles]
);
const syncWithRemote = async () => {
const collectionUID = getPublicCollectionUID(token.current);
try {
@ -278,14 +300,9 @@ export default function PublicCollectionGallery() {
passwordToken: passwordJWTToken.current,
accessedThroughSharedURL: true,
openReportForm,
photoListHeader,
}}>
<SharedAlbumNavbar />
<CollectionInfoBarWrapper>
<CollectionInfo
name={publicCollection.name}
fileCount={publicFiles.length}
/>
</CollectionInfoBarWrapper>
<PhotoFrame
files={publicFiles}
setFiles={setPublicFiles}

2
src/types/publicCollection/index.ts
View file

@ -1,3 +1,4 @@
import { TimeStampListItem } from 'components/PhotoList';
import { REPORT_REASON } from 'constants/publicCollection';
import { EnteFile } from 'types/file';
@ -6,6 +7,7 @@ export interface PublicCollectionGalleryContextType {
passwordToken: string;
accessedThroughSharedURL: boolean;
openReportForm: () => void;
photoListHeader: TimeStampListItem;
}
export interface LocalSavedPublicCollectionFiles {

1
src/utils/publicCollectionGallery/index.ts
View file

@ -7,6 +7,7 @@ export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryConte
passwordToken: null,
accessedThroughSharedURL: false,
openReportForm: () => null,
photoListHeader: null,
};
export const PublicCollectionGalleryContext =