github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki 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;
bottom: -2px;
width: 4px;
z-index: 99;
z-index: 5;
background-color: #d9e4ff;
pointer-events: none;
}
@ -111,7 +111,7 @@
.tableWrapper .tableControls .rowsControl {
transition: opacity ease-in 100ms;
position: absolute;
z-index: 99;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
@ -198,7 +198,7 @@
.tableWrapper .tableControls .tableToolbox .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,

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

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