Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: color item

Browse Source
This commit is contained in:
ascarbek 2023-04-11 22:10:28 +06:00
parent 73c4a33191
commit 125eaf49a9
1 changed files with 74 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx
View File

@ -105,134 +105,91 @@ export const EditCellOptionPopup = ({
<div className={'-mx-4 h-[1px] bg-shade-6'}></div> <div className={'-mx-4 h-[1px] bg-shade-6'}></div>
<div className={'my-2 font-medium text-shade-3'}>{t('grid.selectOption.colorPanelTitle')}</div> <div className={'my-2 font-medium text-shade-3'}>{t('grid.selectOption.colorPanelTitle')}</div>
<div className={'flex flex-col'}> <div className={'flex flex-col'}>
<div <ColorItem
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'} title={t('grid.selectOption.purpleColor')}
onClick={() => onColorClick(SelectOptionColorPB.Purple)} onClick={() => onColorClick(SelectOptionColorPB.Purple)}
> bgColor={getBgColor(SelectOptionColorPB.Purple)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Purple}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Purple)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.purpleColor')}</span> <ColorItem
</div> title={t('grid.selectOption.pinkColor')}
{editingSelectOption.color === SelectOptionColorPB.Purple && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Pink)} onClick={() => onColorClick(SelectOptionColorPB.Pink)}
> bgColor={getBgColor(SelectOptionColorPB.Pink)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Pink}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Pink)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.pinkColor')}</span> <ColorItem
</div> title={t('grid.selectOption.lightPinkColor')}
{editingSelectOption.color === SelectOptionColorPB.Pink && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.LightPink)} onClick={() => onColorClick(SelectOptionColorPB.LightPink)}
> bgColor={getBgColor(SelectOptionColorPB.LightPink)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.LightPink}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.LightPink)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.lightPinkColor')}</span> <ColorItem
</div> title={t('grid.selectOption.orangeColor')}
{editingSelectOption.color === SelectOptionColorPB.LightPink && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Orange)} onClick={() => onColorClick(SelectOptionColorPB.Orange)}
> bgColor={getBgColor(SelectOptionColorPB.Orange)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Orange}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Orange)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.orangeColor')}</span> <ColorItem
</div> title={t('grid.selectOption.yellowColor')}
{editingSelectOption.color === SelectOptionColorPB.Orange && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Yellow)} onClick={() => onColorClick(SelectOptionColorPB.Yellow)}
> bgColor={getBgColor(SelectOptionColorPB.Yellow)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Yellow}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Yellow)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.yellowColor')}</span> <ColorItem
</div> title={t('grid.selectOption.limeColor')}
{editingSelectOption.color === SelectOptionColorPB.Yellow && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Lime)} onClick={() => onColorClick(SelectOptionColorPB.Lime)}
> bgColor={getBgColor(SelectOptionColorPB.Lime)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Lime}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Lime)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.limeColor')}</span> <ColorItem
</div> title={t('grid.selectOption.greenColor')}
{editingSelectOption.color === SelectOptionColorPB.Lime && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Green)} onClick={() => onColorClick(SelectOptionColorPB.Green)}
> bgColor={getBgColor(SelectOptionColorPB.Green)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Green}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Green)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.greenColor')}</span> <ColorItem
</div> title={t('grid.selectOption.aquaColor')}
{editingSelectOption.color === SelectOptionColorPB.Green && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Aqua)} onClick={() => onColorClick(SelectOptionColorPB.Aqua)}
> bgColor={getBgColor(SelectOptionColorPB.Aqua)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Aqua}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Aqua)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.aquaColor')}</span> <ColorItem
</div> title={t('grid.selectOption.blueColor')}
{editingSelectOption.color === SelectOptionColorPB.Aqua && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onColorClick(SelectOptionColorPB.Blue)} onClick={() => onColorClick(SelectOptionColorPB.Blue)}
> bgColor={getBgColor(SelectOptionColorPB.Blue)}
<div className={'flex items-center gap-2'}> checked={editingSelectOption.color === SelectOptionColorPB.Blue}
<div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Blue)}`}></div> ></ColorItem>
<span>{t('grid.selectOption.blueColor')}</span>
</div>
{editingSelectOption.color === SelectOptionColorPB.Blue && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
</div> </div>
</div> </div>
</PopupWindow> </PopupWindow>
); );
}; };
const ColorItem = ({
title,
bgColor,
onClick,
checked,
}: {
title: string;
bgColor: string;
onClick: () => void;
checked: boolean;
}) => {
return (
<div
className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
onClick={() => onClick()}
>
<div className={'flex items-center gap-2'}>
<div className={`h-4 w-4 rounded-full ${bgColor}`}></div>
<span>{title}</span>
</div>
{checked && (
<i className={'block h-3 w-3'}>
<CheckmarkSvg></CheckmarkSvg>
</i>
)}
</div>
);
};