thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-566] feat: Added text to empty color picker boxes and other fixes (#3867)

Browse Source 
* fix: z index issues with modals and on hover color in table item picker menu

* feat: added text indicators inside the table colors to give a gist of how text would look
This commit is contained in:
M. Palanikannan 2024-03-06 14:29:52 +05:30 committed by GitHub
parent 69fa1708cc
commit e1db39ffc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor/core/src/styles/table.css
View File

@ -98,7 +98,7 @@
top: 0; top: 0;
bottom: -2px; bottom: -2px;
width: 4px; width: 4px;
z-index: 99; z-index: 5;
background-color: #d9e4ff; background-color: #d9e4ff;
pointer-events: none; pointer-events: none;
} }
@ -111,7 +111,7 @@
.tableWrapper .tableControls .rowsControl { .tableWrapper .tableControls .rowsControl {
transition: opacity ease-in 100ms; transition: opacity ease-in 100ms;
position: absolute; position: absolute;
z-index: 99; z-index: 5;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -198,7 +198,7 @@
.tableWrapper .tableControls .tableToolbox .toolboxItem:hover, .tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover { .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
background-color: rgba(var(--color-background-100), 0.5); background-color: rgba(var(--color-background-80), 0.6);
} }
.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer, .tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,

7
packages/editor/core/src/ui/extensions/table/table/table-view.tsx
View File

@ -213,10 +213,11 @@ function createToolbox({
{ className: "colorPicker grid" }, { className: "colorPicker grid" },
Object.entries(colors).map(([colorName, colorValue]) => Object.entries(colors).map(([colorName, colorValue]) =>
h("div", { h("div", {
className: "colorPickerItem", className: "colorPickerItem flex items-center justify-center",
style: `background-color: ${colorValue.backgroundColor}; style: `background-color: ${colorValue.backgroundColor};
color: ${colorValue.textColor || "inherit"};`, color: ${colorValue.textColor || "inherit"};`,
innerHTML: colorValue?.icon || "", innerHTML:
colorValue.icon ?? `<span class="text-md" style:"color: ${colorValue.backgroundColor}>A</span>`,
onClick: () => onSelectColor(colorValue), onClick: () => onSelectColor(colorValue),
}) })
) )