fix search result ui bugs
This commit is contained in:
parent
2d8ece0dd4
commit
70ded03e63
|
@ -4,19 +4,8 @@ import constants from 'utils/strings/constants';
|
|||
export function CollectionInfo({ name, fileCount }) {
|
||||
return (
|
||||
<div>
|
||||
<Typography
|
||||
css={`
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
`}>
|
||||
{name}
|
||||
</Typography>
|
||||
<Typography
|
||||
css={`
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
`}>
|
||||
<Typography variant="subtitle">{name}</Typography>
|
||||
<Typography variant="body2">
|
||||
{constants.PHOTO_COUNT(fileCount)}
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
import { CollectionInfo } from './CollectionInfo';
|
||||
import React from 'react';
|
||||
import { Collection, CollectionSummary } from 'types/collection';
|
||||
import { CollectionSectionWrapper } from 'components/Collections/styledComponents';
|
||||
import {
|
||||
CollectionSectionWrapper,
|
||||
Hider,
|
||||
} from 'components/Collections/styledComponents';
|
||||
import CollectionOptions from 'components/Collections/CollectionOptions';
|
||||
import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer';
|
||||
import { SPECIAL_COLLECTION_TYPES } from 'constants/collection';
|
||||
|
@ -10,6 +13,7 @@ import { SpaceBetweenFlex } from 'components/Container';
|
|||
interface Iprops {
|
||||
activeCollection: Collection;
|
||||
collectionSummary: CollectionSummary;
|
||||
isInSearchMode: boolean;
|
||||
setCollectionNamerAttributes: SetCollectionNamerAttributes;
|
||||
showCollectionShareModal: () => void;
|
||||
redirectToAll: () => void;
|
||||
|
@ -25,13 +29,15 @@ export default function collectionInfoWithOptions({
|
|||
const { name, type, fileCount } = collectionSummary;
|
||||
|
||||
return (
|
||||
<CollectionSectionWrapper>
|
||||
<SpaceBetweenFlex>
|
||||
<CollectionInfo name={name} fileCount={fileCount} />
|
||||
{!SPECIAL_COLLECTION_TYPES.has(type) && (
|
||||
<CollectionOptions {...props} />
|
||||
)}
|
||||
</SpaceBetweenFlex>
|
||||
</CollectionSectionWrapper>
|
||||
<Hider hide={props.isInSearchMode}>
|
||||
<CollectionSectionWrapper>
|
||||
<SpaceBetweenFlex>
|
||||
<CollectionInfo name={name} fileCount={fileCount} />
|
||||
{!SPECIAL_COLLECTION_TYPES.has(type) && (
|
||||
<CollectionOptions {...props} />
|
||||
)}
|
||||
</SpaceBetweenFlex>
|
||||
</CollectionSectionWrapper>
|
||||
</Hider>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -60,6 +60,7 @@ export default function Collections(props: Iprops) {
|
|||
/>
|
||||
|
||||
<CollectionInfoWithOptions
|
||||
isInSearchMode={isInSearchMode}
|
||||
collectionSummary={collectionSummaries.get(activeCollectionID)}
|
||||
activeCollection={activeCollection.current}
|
||||
setCollectionNamerAttributes={setCollectionNamerAttributes}
|
||||
|
|
|
@ -2,7 +2,10 @@ import React from 'react';
|
|||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
export default function SidebarToggler({ openSidebar }) {
|
||||
interface Iprops {
|
||||
openSidebar: () => void;
|
||||
}
|
||||
export default function SidebarToggler({ openSidebar }: Iprops) {
|
||||
return (
|
||||
<IconButton onClick={openSidebar}>
|
||||
<MenuIcon />
|
||||
|
|
|
@ -1,26 +1,27 @@
|
|||
import React from 'react';
|
||||
import { CollectionSummary } from 'types/collection';
|
||||
import { CollectionInfo } from 'components/Collections/CollectionInfo';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { Typography } from '@mui/material';
|
||||
import { CollectionSectionWrapper } from 'components/Collections/styledComponents';
|
||||
import { SearchResultSummary } from 'types/search';
|
||||
|
||||
interface Iprops {
|
||||
searchResult: CollectionSummary;
|
||||
searchResultSummary: SearchResultSummary;
|
||||
}
|
||||
export default function SearchResultInfo({ searchResult }: Iprops) {
|
||||
if (!searchResult) {
|
||||
export default function SearchResultInfo({ searchResultSummary }: Iprops) {
|
||||
if (!searchResultSummary) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const { name, fileCount } = searchResult;
|
||||
const { optionName, fileCount } = searchResultSummary;
|
||||
|
||||
console.log(optionName, fileCount);
|
||||
return (
|
||||
<CollectionSectionWrapper>
|
||||
<Typography variant="subtitle" color="text.secondary">
|
||||
{constants.SEARCH_RESULTS}
|
||||
</Typography>
|
||||
<CollectionInfo name={name} fileCount={fileCount} />
|
||||
<CollectionInfo name={optionName} fileCount={fileCount} />
|
||||
</CollectionSectionWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ interface Props {
|
|||
isFirstFetch: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
setSearch: (search: Search) => void;
|
||||
setSearchResultInfo: SetSearchResultSummary;
|
||||
setSearchResultSummary: SetSearchResultSummary;
|
||||
collections: Collection[];
|
||||
setActiveCollection: (id: number) => void;
|
||||
files: EnteFile[];
|
||||
|
|
|
@ -22,7 +22,7 @@ interface Iprops {
|
|||
files: EnteFile[];
|
||||
collections: Collection[];
|
||||
setActiveCollection: (id: number) => void;
|
||||
setSearchResultInfo: SetSearchResultSummary;
|
||||
setSearchResultSummary: SetSearchResultSummary;
|
||||
}
|
||||
|
||||
export default function SearchInput(props: Iprops) {
|
||||
|
@ -78,7 +78,7 @@ export default function SearchInput(props: Iprops) {
|
|||
setValue(null);
|
||||
break;
|
||||
}
|
||||
props.setSearchResultInfo({
|
||||
props.setSearchResultSummary({
|
||||
optionName: selectedOption.label,
|
||||
fileCount: selectedOption.fileCount,
|
||||
});
|
||||
|
|
|
@ -6,7 +6,22 @@ import { getNonTrashedUniqueUserFiles } from 'utils/file';
|
|||
import SearchBar from 'components/Search';
|
||||
import { FluidContainer } from 'components/Container';
|
||||
import { EnteLogo } from 'components/EnteLogo';
|
||||
import { Collection } from 'types/collection';
|
||||
import { EnteFile } from 'types/file';
|
||||
import { Search, SearchResultSummary } from 'types/search';
|
||||
|
||||
interface Iprops {
|
||||
openSidebar: () => void;
|
||||
isFirstFetch: boolean;
|
||||
openUploader: () => void;
|
||||
isInSearchMode: boolean;
|
||||
setIsInSearchMode: (value: boolean) => void;
|
||||
collections: Collection[];
|
||||
files: EnteFile[];
|
||||
setActiveCollection: (id: number) => void;
|
||||
updateSearch: (search: Search) => void;
|
||||
setSearchResultSummary: (info: SearchResultSummary) => void;
|
||||
}
|
||||
export function GalleryNavbar({
|
||||
openSidebar,
|
||||
isFirstFetch,
|
||||
|
@ -17,8 +32,8 @@ export function GalleryNavbar({
|
|||
files,
|
||||
setActiveCollection,
|
||||
updateSearch,
|
||||
setSearchResultInfo,
|
||||
}) {
|
||||
setSearchResultSummary,
|
||||
}: Iprops) {
|
||||
return (
|
||||
<NavbarBase>
|
||||
{!isInSearchMode && <SidebarToggler openSidebar={openSidebar} />}
|
||||
|
@ -36,7 +51,7 @@ export function GalleryNavbar({
|
|||
files={getNonTrashedUniqueUserFiles(files)}
|
||||
setActiveCollection={setActiveCollection}
|
||||
setSearch={updateSearch}
|
||||
setSearchResultInfo={setSearchResultInfo}
|
||||
setSearchResultSummary={setSearchResultSummary}
|
||||
/>
|
||||
)}
|
||||
{!isInSearchMode && (
|
||||
|
|
|
@ -12,7 +12,12 @@ const Wrapper = styled.div<{ isDisabled: boolean }>`
|
|||
cursor: pointer;
|
||||
opacity: ${(props) => (props.isDisabled ? 0 : 1)};
|
||||
`;
|
||||
function UploadButton({ isFirstFetch, openUploader }) {
|
||||
|
||||
interface Iprops {
|
||||
isFirstFetch: boolean;
|
||||
openUploader: () => void;
|
||||
}
|
||||
function UploadButton({ isFirstFetch, openUploader }: Iprops) {
|
||||
return (
|
||||
<Wrapper onClick={openUploader} isDisabled={isFirstFetch}>
|
||||
<Button
|
||||
|
|
|
@ -90,11 +90,7 @@ import DeleteBtn from 'components/DeleteBtn';
|
|||
import FixCreationTime, {
|
||||
FixCreationTimeAttributes,
|
||||
} from 'components/FixCreationTime';
|
||||
import {
|
||||
Collection,
|
||||
CollectionSummaries,
|
||||
CollectionSummary,
|
||||
} from 'types/collection';
|
||||
import { Collection, CollectionSummaries } from 'types/collection';
|
||||
import { EnteFile } from 'types/file';
|
||||
import { GalleryContextType, SelectedState } from 'types/gallery';
|
||||
import { VISIBILITY_STATE } from 'types/magicMetadata';
|
||||
|
@ -103,7 +99,7 @@ import { ElectronFile } from 'types/upload';
|
|||
import importService from 'services/importService';
|
||||
import Collections from 'components/Collections';
|
||||
import { GalleryNavbar } from 'components/pages/gallery/Navbar';
|
||||
import { Search } from 'types/search';
|
||||
import { Search, SearchResultSummary } from 'types/search';
|
||||
import SearchResultInfo from 'components/Search/SearchResultInfo';
|
||||
import { NotificationAttributes } from 'types/Notification';
|
||||
|
||||
|
@ -173,7 +169,7 @@ export default function Gallery() {
|
|||
|
||||
const [isInSearchMode, setIsInSearchMode] = useState(false);
|
||||
const [searchResultSummary, setSetSearchResultSummary] =
|
||||
useState<CollectionSummary>(null);
|
||||
useState<SearchResultSummary>(null);
|
||||
const syncInProgress = useRef(true);
|
||||
const resync = useRef(false);
|
||||
const [deleted, setDeleted] = useState<number[]>([]);
|
||||
|
@ -635,7 +631,7 @@ export default function Gallery() {
|
|||
files={getNonTrashedUniqueUserFiles(files)}
|
||||
setActiveCollection={setActiveCollection}
|
||||
updateSearch={updateSearch}
|
||||
setSearchResultInfo={setSetSearchResultSummary}
|
||||
setSearchResultSummary={setSetSearchResultSummary}
|
||||
/>
|
||||
|
||||
<Collections
|
||||
|
@ -647,7 +643,9 @@ export default function Gallery() {
|
|||
setCollectionNamerAttributes={setCollectionNamerAttributes}
|
||||
/>
|
||||
{isInSearchMode && (
|
||||
<SearchResultInfo searchResult={searchResultSummary} />
|
||||
<SearchResultInfo
|
||||
searchResultSummary={searchResultSummary}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Upload
|
||||
|
|
Loading…
Reference in a new issue