chore: group popup

This commit is contained in:
ascarbek 2023-04-07 16:52:34 +06:00
parent c3a7f94cb3
commit e467481b75
4 changed files with 75 additions and 43 deletions

View File

@ -45,121 +45,121 @@ export const TestColors = () => {
<h1 className={'mb-4 text-2xl'}>Icons</h1> <h1 className={'mb-4 text-2xl'}>Icons</h1>
<div className={'mb-8'}> <div className={'mb-8'}>
<div className={'flex flex-wrap items-center gap-4'}> <div className={'flex flex-wrap items-center gap-4'}>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'AddSvg'}>
<AddSvg></AddSvg> <AddSvg></AddSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'ArrowLeftSvg'}>
<ArrowLeftSvg></ArrowLeftSvg> <ArrowLeftSvg></ArrowLeftSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'ArrowRightSvg'}>
<ArrowRightSvg></ArrowRightSvg> <ArrowRightSvg></ArrowRightSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'BoardSvg'}>
<BoardSvg></BoardSvg> <BoardSvg></BoardSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'CheckboxSvg'}>
<CheckboxSvg></CheckboxSvg> <CheckboxSvg></CheckboxSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'ChecklistTypeSvg'}>
<ChecklistTypeSvg></ChecklistTypeSvg> <ChecklistTypeSvg></ChecklistTypeSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'CheckmarkSvg'}>
<CheckmarkSvg></CheckmarkSvg> <CheckmarkSvg></CheckmarkSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'ClockSvg'}>
<ClockSvg></ClockSvg> <ClockSvg></ClockSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'CloseSvg'}>
<CloseSvg></CloseSvg> <CloseSvg></CloseSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'CopySvg'}>
<CopySvg></CopySvg> <CopySvg></CopySvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'DateTypeSvg'}>
<DateTypeSvg></DateTypeSvg> <DateTypeSvg></DateTypeSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'Details2Svg'}>
<Details2Svg></Details2Svg> <Details2Svg></Details2Svg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'DocumentSvg'}>
<DocumentSvg></DocumentSvg> <DocumentSvg></DocumentSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'DropDownShowSvg'}>
<DropDownShowSvg></DropDownShowSvg> <DropDownShowSvg></DropDownShowSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'EarthSvg'}>
<EarthSvg></EarthSvg> <EarthSvg></EarthSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'EditorCheckSvg'}>
<EditorCheckSvg></EditorCheckSvg> <EditorCheckSvg></EditorCheckSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'EditorUncheckSvg'}>
<EditorUncheckSvg></EditorUncheckSvg> <EditorUncheckSvg></EditorUncheckSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'EditSvg'}>
<EditSvg></EditSvg> <EditSvg></EditSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'EyeClosedSvg'}>
<EyeClosedSvg></EyeClosedSvg> <EyeClosedSvg></EyeClosedSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'EyeOpenSvg'}>
<EyeOpenSvg></EyeOpenSvg> <EyeOpenSvg></EyeOpenSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'FilterSvg'}>
<FilterSvg></FilterSvg> <FilterSvg></FilterSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'GridSvg'}>
<GridSvg></GridSvg> <GridSvg></GridSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'GroupByFieldSvg'}>
<GroupByFieldSvg></GroupByFieldSvg> <GroupByFieldSvg></GroupByFieldSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'HideMenuSvg'}>
<HideMenuSvg></HideMenuSvg> <HideMenuSvg></HideMenuSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'InformationSvg'}>
<InformationSvg></InformationSvg> <InformationSvg></InformationSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'LogoutSvg'}>
<LogoutSvg></LogoutSvg> <LogoutSvg></LogoutSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'MoreSvg'}>
<MoreSvg></MoreSvg> <MoreSvg></MoreSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'MultiSelectTypeSvg'}>
<MultiSelectTypeSvg></MultiSelectTypeSvg> <MultiSelectTypeSvg></MultiSelectTypeSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'NumberTypeSvg'}>
<NumberTypeSvg></NumberTypeSvg> <NumberTypeSvg></NumberTypeSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'PropertiesSvg'}>
<PropertiesSvg></PropertiesSvg> <PropertiesSvg></PropertiesSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'SearchSvg'}>
<SearchSvg></SearchSvg> <SearchSvg></SearchSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'ShowMenuSvg'}>
<ShowMenuSvg></ShowMenuSvg> <ShowMenuSvg></ShowMenuSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'SingleSelectTypeSvg'}>
<SingleSelectTypeSvg></SingleSelectTypeSvg> <SingleSelectTypeSvg></SingleSelectTypeSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'SkipLeftSvg'}>
<SkipLeftSvg></SkipLeftSvg> <SkipLeftSvg></SkipLeftSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'SkipRightSvg'}>
<SkipRightSvg></SkipRightSvg> <SkipRightSvg></SkipRightSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'SortSvg'}>
<SortSvg></SortSvg> <SortSvg></SortSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'TextTypeSvg'}>
<TextTypeSvg></TextTypeSvg> <TextTypeSvg></TextTypeSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'TrashSvg'}>
<TrashSvg></TrashSvg> <TrashSvg></TrashSvg>
</i> </i>
<i className={'h-5 w-5'}> <i className={'h-5 w-5'} title={'UrlTypeSvg'}>
<UrlTypeSvg></UrlTypeSvg> <UrlTypeSvg></UrlTypeSvg>
</i> </i>
</div> </div>

View File

@ -1,6 +1,5 @@
import { useAppSelector } from '$app/stores/store'; import { useAppSelector } from '$app/stores/store';
import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon'; import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
import { Popup } from '$app/components/_shared/Popup';
import { useRef } from 'react'; import { useRef } from 'react';
import useOutsideClick from '$app/components/_shared/useOutsideClick'; import useOutsideClick from '$app/components/_shared/useOutsideClick';
import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg'; import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
@ -12,7 +11,7 @@ export const BoardFieldsPopup = ({ hidePopup }: { hidePopup: () => void }) => {
useOutsideClick(ref, () => hidePopup()); useOutsideClick(ref, () => hidePopup());
return ( return (
<div ref={ref} className={'absolute top-full left-full z-10 rounded-lg bg-white px-2 py-2 shadow-md'}> <div ref={ref} className={'absolute top-full left-full z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md'}>
{columns.map((column, index) => ( {columns.map((column, index) => (
<div <div
className={'flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 hover:bg-main-secondary'} className={'flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 hover:bg-main-secondary'}

View File

@ -1,3 +1,36 @@
import { useAppSelector } from '$app/stores/store';
import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
import { useRef } from 'react';
import useOutsideClick from '$app/components/_shared/useOutsideClick';
import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
export const BoardGroupFieldsPopup = ({ hidePopup }: { hidePopup: () => void }) => { export const BoardGroupFieldsPopup = ({ hidePopup }: { hidePopup: () => void }) => {
return <></>; const columns = useAppSelector((state) => state.database.columns);
const fields = useAppSelector((state) => state.database.fields);
const ref = useRef<HTMLDivElement>(null);
useOutsideClick(ref, () => hidePopup());
return (
<div ref={ref} className={'absolute top-full left-full z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md'}>
{columns.map((column, index) => (
<div
className={'flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 hover:bg-main-secondary'}
key={index}
>
<div className={'flex items-center gap-2 '}>
<i className={'flex h-5 w-5 flex-shrink-0 items-center justify-center'}>
<FieldTypeIcon fieldType={fields[column.fieldId].fieldType}></FieldTypeIcon>
</i>
<span className={'flex-shrink-0'}>{fields[column.fieldId].title}</span>
</div>
<div className={'ml-12'}>
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
</div>
</div>
))}
</div>
);
}; };

View File

@ -42,7 +42,7 @@ export const BoardSettingsPopup = ({
<Popup <Popup
onOutsideClick={() => hidePopup()} onOutsideClick={() => hidePopup()}
items={settingsItems} items={settingsItems}
className={'absolute top-full left-full z-10'} className={'absolute top-full left-full z-10 text-xs'}
></Popup> ></Popup>
); );
}; };