Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-15 19:41:11 +10:00
Code Issues Packages Projects Releases Wiki Activity

background colors

Browse Source
This commit is contained in:
Philipinho
2025-07-14 13:00:41 -07:00
parent 82a2fc997d
commit ad1c692e14
1 changed files with 19 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/client/src/features/editor/components/table/table-background-color.tsx
View File

@ -22,32 +22,14 @@ interface TableBackgroundColorProps {
} }
const TABLE_COLORS: TableColorItem[] = [ const TABLE_COLORS: TableColorItem[] = [
// First row - grays
{ name: "Default", color: "" }, { name: "Default", color: "" },
{ name: "Light blue", color: "#E6E9FF" }, { name: "Blue", color: "#b4d5ff" },
{ name: "Light cyan", color: "#E0F2FE" }, { name: "Green", color: "#acf5d2" },
{ name: "Light teal", color: "#CCFBF1" }, { name: "Yellow", color: "#fef1b4" },
{ name: "Light yellow", color: "#FEF3C7" }, { name: "Red", color: "#ffbead" },
{ name: "Light pink", color: "#FCE7F3" }, { name: "Pink", color: "#ffc7fe" },
{ name: "Light purple", color: "#EDE9FE" }, { name: "Gray", color: "#eaecef" },
{ name: "Purple", color: "#c1b7f2" },
// Second row - light colors
{ name: "Gray", color: "#F3F4F6" },
{ name: "Blue", color: "#BFDBFE" },
{ name: "Cyan", color: "#A5F3FC" },
{ name: "Teal", color: "#99F6E4" },
{ name: "Yellow", color: "#FDE68A" },
{ name: "Pink", color: "#FBCFE8" },
{ name: "Purple", color: "#DDD6FE" },
// Third row - bold colors
{ name: "Dark gray", color: "#9CA3AF" },
{ name: "Bold blue", color: "#60A5FA" },
{ name: "Bold cyan", color: "#22D3EE" },
{ name: "Bold teal", color: "#2DD4BF" },
{ name: "Bold orange", color: "#FB923C" },
{ name: "Bold red", color: "#F87171" },
{ name: "Bold purple", color: "#A78BFA" },
]; ];
export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
@ -82,13 +64,13 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
const currentColor = getCurrentColor(); const currentColor = getCurrentColor();
return ( return (
<Popover <Popover
width={280} width={150}
position="bottom" position="bottom"
opened={opened} opened={opened}
onChange={setOpened} onChange={setOpened}
withArrow withArrow
transitionProps={{ transition: 'pop' }} transitionProps={{ transition: "pop" }}
> >
<Popover.Target> <Popover.Target>
<Tooltip label={t("Background color")} withArrow> <Tooltip label={t("Background color")} withArrow>
@ -108,11 +90,11 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
<Text size="sm" c="dimmed"> <Text size="sm" c="dimmed">
{t("Background color")} {t("Background color")}
</Text> </Text>
<div <div
style={{ style={{
display: "grid", display: "grid",
gridTemplateColumns: "repeat(7, 1fr)", gridTemplateColumns: "repeat(4, 1fr)",
gap: "8px", gap: "8px",
}} }}
> >
@ -139,9 +121,10 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
<IconCheck <IconCheck
size={18} size={18}
style={{ style={{
color: item.color === "" || item.color.startsWith("#F") color:
? "#000000" item.color === "" || item.color.startsWith("#F")
: "#ffffff", ? "#000000"
: "#ffffff",
}} }}
/> />
)} )}
@ -153,4 +136,4 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
); );
}; };