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

18
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 { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element"; import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { AlertCircle } from "lucide-react";
//types //types
import { import {
TGroupedIssues, TGroupedIssues,
@ -192,7 +193,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
<div <div
//column overlay when issues are not sorted by manual //column overlay when issues are not sorted by manual
className={cn( 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, "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
}, },
@ -202,20 +203,27 @@ export const KanbanGroup = (props: IKanbanGroup) => {
> >
<div <div
className={cn( 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 ? ( {dropErrorMessage ? (
<div className="flex items-center">
<AlertCircle width={13} height={13} /> &nbsp;
<span>{dropErrorMessage}</span> <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> <span>Drop here to move the issue.</span>
</> </>
)} )}