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

[WEB-1249] chore: New Kanban column design changes (#4509)

Browse Source 
* new Kanban column design changes

* fix minor build error
This commit is contained in:
rahulramesha 2024-05-20 11:38:28 +05:30 committed by GitHub
parent fe4dea1474
commit edf8109735
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/tailwind-config-custom/tailwind.config.js
View File

@ -1,4 +1,6 @@
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
const convertToRGBA = (variableName, alpha) =>
`rgba(var(${variableName}), ${alpha})`;
/** @type {import('tailwindcss').Config} */
module.exports = {
@ -87,6 +89,7 @@ module.exports = {
800: convertToRGB("--color-background-800"),
900: convertToRGB("--color-background-900"),
1000: "rgb(0, 0, 0)",
overlay: convertToRGBA("--color-background-80", 0.95),
primary: convertToRGB(" --color-background-primary"),
error: convertToRGB(" --color-background-error"),
DEFAULT: convertToRGB("--color-background-100"),

20
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@ -2,6 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { AlertCircle } from "lucide-react";
//types
import {
TGroupedIssues,
@ -192,7 +193,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
<div
//column overlay when issues are not sorted by manual
className={cn(
"absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded transparent",
"absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay",
{
"flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
},
@ -202,20 +203,27 @@ export const KanbanGroup = (props: IKanbanGroup) => {
>
<div
className={cn(
"p-3 mt-8 flex flex-col border-[1px] rounded items-center",
"p-3 mt-8 flex flex-col rounded items-center",
{
"bg-custom-background-primary border-custom-border-primary text-custom-text-primary": shouldOverlay,
"text-custom-text-200": shouldOverlay,
},
{
"bg-custom-background-error border-custom-border-error text-custom-text-error": isDropDisabled,
"text-custom-text-error": isDropDisabled,
}
)}
>
{dropErrorMessage ? (
<span>{dropErrorMessage}</span>
<div className="flex items-center">
<AlertCircle width={13} height={13} /> &nbsp;
<span>{dropErrorMessage}</span>
</div>
) : (
<>
{readableOrderBy && <span>The layout is ordered by {readableOrderBy}.</span>}
{readableOrderBy && (
<span>
The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
</span>
)}
<span>Drop here to move the issue.</span>
</>
)}