random refactoring
This commit is contained in:
parent
4cd9cad5b8
commit
42f7cad252
|
@ -1,29 +1,29 @@
|
|||
import { Box } from '@mui/material';
|
||||
import { Typography } from '@mui/material';
|
||||
import constants from 'utils/strings/constants';
|
||||
import React from 'react';
|
||||
import CollectionCard from '../CollectionCard';
|
||||
import { CollectionSummary } from 'types/collection';
|
||||
import { AllCollectionTileText } from '../styledComponents';
|
||||
import { AllCollectionTile, AllCollectionTileText } from '../styledComponents';
|
||||
|
||||
interface Iprops {
|
||||
collectionTile: any;
|
||||
collectionSummary: CollectionSummary;
|
||||
onCollectionClick: (collectionID: number) => void;
|
||||
}
|
||||
|
||||
export default function AllCollectionCard({
|
||||
collectionTile,
|
||||
onCollectionClick,
|
||||
collectionSummary,
|
||||
}: Iprops) {
|
||||
return (
|
||||
<CollectionCard
|
||||
collectionTile={collectionTile}
|
||||
collectionTile={AllCollectionTile}
|
||||
latestFile={collectionSummary.latestFile}
|
||||
onClick={() => onCollectionClick(collectionSummary.id)}>
|
||||
<AllCollectionTileText zIndex={1}>
|
||||
<Box fontWeight={'bold'}>{collectionSummary.name}</Box>
|
||||
<Box>{constants.PHOTO_COUNT(collectionSummary.fileCount)}</Box>
|
||||
<Typography>{collectionSummary.name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{constants.PHOTO_COUNT(collectionSummary.fileCount)}
|
||||
</Typography>
|
||||
</AllCollectionTileText>
|
||||
</CollectionCard>
|
||||
);
|
||||
|
|
|
@ -1,36 +0,0 @@
|
|||
import React from 'react';
|
||||
import { EnteFile } from 'types/file';
|
||||
import {
|
||||
CollectionTileWrapper,
|
||||
ActiveIndicator,
|
||||
CollectionBarTile,
|
||||
CollectionBarTileText,
|
||||
} from '../styledComponents';
|
||||
import CollectionCard from '../CollectionCard';
|
||||
import TruncateText from 'components/TruncateText';
|
||||
|
||||
interface Iprops {
|
||||
active: boolean;
|
||||
latestFile: EnteFile;
|
||||
collectionName: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const CollectionCardWithActiveIndicator = React.forwardRef(
|
||||
(props: Iprops, ref: any) => {
|
||||
const { active, collectionName, ...others } = props;
|
||||
|
||||
return (
|
||||
<CollectionTileWrapper ref={ref}>
|
||||
<CollectionCard collectionTile={CollectionBarTile} {...others}>
|
||||
<CollectionBarTileText>
|
||||
<TruncateText text={collectionName} />
|
||||
</CollectionBarTileText>
|
||||
</CollectionCard>
|
||||
{active && <ActiveIndicator />}
|
||||
</CollectionTileWrapper>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default CollectionCardWithActiveIndicator;
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react';
|
||||
import { EnteFile } from 'types/file';
|
||||
import {
|
||||
ActiveIndicator,
|
||||
CollectionBarTile,
|
||||
CollectionBarTileText,
|
||||
} from '../styledComponents';
|
||||
import CollectionCard from '../CollectionCard';
|
||||
import TruncateText from 'components/TruncateText';
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
interface Iprops {
|
||||
active: boolean;
|
||||
latestFile: EnteFile;
|
||||
collectionName: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
|
||||
const { active, collectionName, ...others } = props;
|
||||
|
||||
return (
|
||||
<Box ref={ref}>
|
||||
<CollectionCard collectionTile={CollectionBarTile} {...others}>
|
||||
<CollectionBarTileText zIndex={1}>
|
||||
<TruncateText text={collectionName} />
|
||||
</CollectionBarTileText>
|
||||
</CollectionCard>
|
||||
{active && <ActiveIndicator />}
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
export default CollectionListBarCard;
|
|
@ -15,7 +15,7 @@ const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
|
|||
|
||||
border-radius: 50%;
|
||||
background-color: ${({ theme }) => theme.palette.background.paper};
|
||||
color: ${({ theme }) => theme.palette.text.primary};
|
||||
color: ${({ theme }) => theme.palette.primary.main};
|
||||
|
||||
${(props) =>
|
||||
props.direction === SCROLL_DIRECTION.LEFT
|
|
@ -1,4 +1,4 @@
|
|||
import ScrollButton from 'components/Collections/CollectionBar/ScrollButton';
|
||||
import ScrollButton from 'components/Collections/CollectionListBar/ScrollButton';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { CollectionSummaries } from 'types/collection';
|
||||
import constants from 'utils/strings/constants';
|
||||
|
@ -9,7 +9,7 @@ import {
|
|||
ScrollContainer,
|
||||
CollectionListWrapper,
|
||||
} from 'components/Collections/styledComponents';
|
||||
import CollectionCardWithActiveIndicator from 'components/Collections/CollectionBar/CollectionCardWithActiveIndicator';
|
||||
import CollectionListBarCard from 'components/Collections/CollectionListBar/CollectionCard';
|
||||
import useComponentScroll, { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
|
||||
import useWindowSize from 'hooks/useWindowSize';
|
||||
import LinkButton from 'components/pages/gallery/LinkButton';
|
||||
|
@ -92,7 +92,7 @@ export default function CollectionListBar(props: IProps) {
|
|||
)}
|
||||
<ScrollContainer ref={componentRef}>
|
||||
{sortedCollectionSummary.map((item) => (
|
||||
<CollectionCardWithActiveIndicator
|
||||
<CollectionListBarCard
|
||||
key={item.id}
|
||||
latestFile={item.latestFile}
|
||||
ref={collectionChipsRef[item.id]}
|
|
@ -12,15 +12,15 @@ import PublicShare from './publicShare';
|
|||
import { AppContext } from 'pages/_app';
|
||||
|
||||
interface Props {
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
collection: Collection;
|
||||
}
|
||||
|
||||
function CollectionShare(props: Props) {
|
||||
const { isMobile } = useContext(AppContext);
|
||||
const handleClose = dialogCloseHandler({
|
||||
onClose: props.onHide,
|
||||
onClose: props.onClose,
|
||||
});
|
||||
|
||||
if (!props.collection) {
|
||||
|
@ -30,7 +30,7 @@ function CollectionShare(props: Props) {
|
|||
return (
|
||||
<>
|
||||
<CollectionShareContainer
|
||||
open={props.show}
|
||||
open={props.open}
|
||||
onClose={handleClose}
|
||||
fullScreen={isMobile}>
|
||||
<DialogTitleWithCloseButton onClose={handleClose}>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Collection, CollectionSummaries } from 'types/collection';
|
||||
import CollectionListBar from 'components/Collections/CollectionBar';
|
||||
import CollectionListBar from 'components/Collections/CollectionListBar';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import AllCollections from 'components/Collections/AllCollections';
|
||||
import CollectionInfoWithOptions from 'components/Collections/CollectionInfoWithOptions';
|
||||
|
@ -79,25 +79,29 @@ export default function Collections(props: Iprops) {
|
|||
return <></>;
|
||||
}
|
||||
|
||||
const closeAllCollections = () => setAllCollectionView(false);
|
||||
const openAllCollections = () => setAllCollectionView(true);
|
||||
const closeCollectionShare = () => setCollectionShareModalView(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CollectionListBar
|
||||
activeCollection={activeCollectionID}
|
||||
setActiveCollection={setActiveCollectionID}
|
||||
collectionSummaries={collectionSummaries}
|
||||
showAllCollections={() => setAllCollectionView(true)}
|
||||
showAllCollections={openAllCollections}
|
||||
/>
|
||||
|
||||
<AllCollections
|
||||
open={allCollectionView}
|
||||
onClose={() => setAllCollectionView(false)}
|
||||
onClose={closeAllCollections}
|
||||
collectionSummaries={collectionSummaries}
|
||||
setActiveCollection={setActiveCollectionID}
|
||||
/>
|
||||
|
||||
<CollectionShare
|
||||
show={collectionShareModalView}
|
||||
onHide={() => setCollectionShareModalView(false)}
|
||||
open={collectionShareModalView}
|
||||
onClose={closeCollectionShare}
|
||||
collection={activeCollection.current}
|
||||
/>
|
||||
</>
|
||||
|
|
|
@ -27,6 +27,9 @@ export const ScrollContainer = styled('div')`
|
|||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
display: flex;
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CollectionTile = styled('div')`
|
||||
|
@ -44,13 +47,9 @@ export const CollectionTile = styled('div')`
|
|||
}
|
||||
`;
|
||||
|
||||
export const CollectionTileWrapper = styled('div')`
|
||||
margin-right: 4px;
|
||||
`;
|
||||
|
||||
export const ActiveIndicator = styled('div')`
|
||||
height: 3px;
|
||||
background-color: ${({ theme }) => theme.palette.text.primary};
|
||||
background-color: ${({ theme }) => theme.palette.primary.main};
|
||||
margin-top: 18px;
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
@ -81,9 +80,7 @@ export const ResultPreviewTile = styled(CollectionTile)`
|
|||
`;
|
||||
|
||||
export const CollectionTileTextOverlay = styled(Overlay)`
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 4px 6px;
|
||||
padding: 8px;
|
||||
`;
|
||||
|
||||
export const CollectionBarTileText = styled(CollectionTileTextOverlay)`
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import Tooltip from '@mui/material/Tooltip';
|
||||
import React from 'react';
|
||||
import { styled } from '@mui/material';
|
||||
export const EllipseText = styled('div')`
|
||||
import { styled, Typography } from '@mui/material';
|
||||
export const EllipseText = styled(Typography)`
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -10,7 +10,7 @@ export const EllipseText = styled('div')`
|
|||
export default function TruncateText({ text }) {
|
||||
return (
|
||||
<Tooltip title={text}>
|
||||
<EllipseText>{text}</EllipseText>
|
||||
<EllipseText variant="body2">{text}</EllipseText>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { SetCollectionSelectorAttributes } from './CollectionSelector';
|
||||
import { SetCollectionSelectorAttributes } from 'types/gallery';
|
||||
import { FluidContainer } from 'components/Container';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { COLLECTION_OPS_TYPE } from 'utils/collection';
|
||||
|
|
|
@ -6,7 +6,7 @@ import UploadProgress from '../../UploadProgress';
|
|||
|
||||
import UploadStrategyChoiceModal from './UploadStrategyChoiceModal';
|
||||
import { SetCollectionNamerAttributes } from '../../Collections/CollectionNamer';
|
||||
import { SetCollectionSelectorAttributes } from './CollectionSelector';
|
||||
import { SetCollectionSelectorAttributes } from 'types/gallery';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
import { AppContext } from 'pages/_app';
|
||||
import { logError } from 'utils/sentry';
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { CollectionSelectorAttributes } from 'components/Collections/CollectionSelector';
|
||||
import { TimeStampListItem } from 'components/PhotoList';
|
||||
import { Collection } from 'types/collection';
|
||||
import { EnteFile } from 'types/file';
|
||||
|
@ -11,6 +12,9 @@ export type SelectedState = {
|
|||
export type SetFiles = React.Dispatch<React.SetStateAction<EnteFile[]>>;
|
||||
export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
|
||||
export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
|
||||
export type SetCollectionSelectorAttributes = React.Dispatch<
|
||||
React.SetStateAction<CollectionSelectorAttributes>
|
||||
>;
|
||||
|
||||
export type GalleryContextType = {
|
||||
thumbs: Map<number, string>;
|
||||
|
|
Loading…
Reference in a new issue