diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/block.tsx index 1f5d55d..7a0e945 100644 --- a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/block.tsx +++ b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/block.tsx @@ -23,7 +23,12 @@ import { ControlLink, DropIndicator } from "@plane/ui"; import { cn, generateWorkItemLink } from "@plane/utils"; // components import RenderIfVisible from "@/components/core/render-if-visible-HOC"; -import { HIGHLIGHT_CLASS, getIssueBlockId } from "@/components/issues/issue-layouts/utils"; +import { + HIGHLIGHT_CLASS, + HIGHLIGHT_WITH_LINE, + NODEDC_DROP_FILL_HIGHLIGHT_CLASS, + getIssueBlockId, +} from "@/components/issues/issue-layouts/utils"; // helpers // hooks import { useIssueDetail } from "@/hooks/store/use-issue-detail"; @@ -87,9 +92,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props: const { isMobile } = usePlatformOS(); const customActionButton = ( -
+
); @@ -226,7 +229,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB }); useOutsideClickDetector(cardRef, () => { - cardRef?.current?.classList?.remove(HIGHLIGHT_CLASS); + cardRef?.current?.classList?.remove(HIGHLIGHT_CLASS, HIGHLIGHT_WITH_LINE, NODEDC_DROP_FILL_HIGHLIGHT_CLASS); }); // Make Issue block both as as Draggable and, @@ -297,15 +300,16 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB className={cn( "block w-full text-13 transition-all", cardVariant === "internal-contour" - ? "rounded-[28px] border-0 p-0 shadow-none outline-none ring-0 hover:border-0 hover:outline-none hover:ring-0" + ? "rounded-[28px] border-0 p-0 shadow-none ring-0 outline-none hover:border-0 hover:ring-0 hover:outline-none focus:!ring-0 focus:!outline-none focus-visible:!ring-0 focus-visible:!outline-none active:!outline-none" : "rounded-lg border border-subtle bg-layer-2 p-3 shadow-raised-100 outline-[0.5px] outline-transparent hover:border-strong hover:shadow-raised-200", { "hover:cursor-pointer": isDragAllowed }, { "border border-accent-strong hover:border-accent-strong": cardVariant !== "internal-contour" && isPeeked, }, { "z-[100] bg-layer-1": isCurrentBlockDragging && cardVariant !== "internal-contour" }, - { "z-[100] bg-[rgb(var(--nodedc-card-active-rgb))]": isCurrentBlockDragging && cardVariant === "internal-contour" } + { "z-[100]": isCurrentBlockDragging && cardVariant === "internal-contour" } )} + data-card-variant={cardVariant} onClick={() => handleIssuePeekOverview(issue)} disabled={!!issue?.tempId} > @@ -325,7 +329,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB quickActions={quickActions} isReadOnly={!canEditIssueProperties} isEpic={isEpic} - isActive={isPeeked} + isActive={isPeeked || (cardVariant === "internal-contour" && isCurrentBlockDragging)} cardVariant={cardVariant} /> diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/shared/nodedc-work-item-card.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/shared/nodedc-work-item-card.tsx index 0dd1a89..380048f 100644 --- a/plane-src/apps/web/core/components/issues/issue-layouts/shared/nodedc-work-item-card.tsx +++ b/plane-src/apps/web/core/components/issues/issue-layouts/shared/nodedc-work-item-card.tsx @@ -25,7 +25,9 @@ export const getNodedcWorkItemCardAppearance = (isActive: boolean) => ({ surfaceClassName: isActive ? "bg-[rgb(var(--nodedc-card-active-rgb))] text-[rgb(var(--nodedc-on-card-active-rgb))]" : "bg-[rgb(var(--nodedc-card-passive-rgb))] text-white", - foregroundClasses: isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" : "text-[rgb(var(--nodedc-on-card-passive-rgb))]", + foregroundClasses: isActive + ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" + : "text-[rgb(var(--nodedc-on-card-passive-rgb))]", subtleTextClasses: isActive ? "text-[#2F4721]" : "text-[#B3B3B8]", pillBackgroundClasses: isActive ? "bg-black/10 text-[rgb(var(--nodedc-on-card-active-rgb))]" @@ -51,7 +53,7 @@ export const NodedcWorkItemCard = ({ return (
{header} {subtitle && ( -
+
{subtitle}
)}
-
{title}
+
{title}
{footer}
diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/utils.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/utils.tsx index e4efb15..718322b 100644 --- a/plane-src/apps/web/core/components/issues/issue-layouts/utils.tsx +++ b/plane-src/apps/web/core/components/issues/issue-layouts/utils.tsx @@ -46,6 +46,7 @@ import { DEFAULT_DISPLAY_PROPERTIES } from "@/store/issue/issue-details/sub_issu export const HIGHLIGHT_CLASS = "highlight"; export const HIGHLIGHT_WITH_LINE = "highlight-with-line"; +export const NODEDC_DROP_FILL_HIGHLIGHT_CLASS = "nodedc-drop-fill-highlight"; const getAllItemsGroupLabel = (isEpic: boolean): string => { const locale = @@ -355,6 +356,18 @@ export const highlightIssueOnDrop = ( setTimeout(async () => { const sourceElementId = elementId ?? ""; const sourceElement = document.getElementById(sourceElementId); + + if (sourceElement?.dataset.cardVariant === "internal-contour") { + sourceElement.classList.remove(HIGHLIGHT_CLASS, HIGHLIGHT_WITH_LINE); + sourceElement.classList.add(NODEDC_DROP_FILL_HIGHLIGHT_CLASS); + window.setTimeout(() => sourceElement.classList.remove(NODEDC_DROP_FILL_HIGHLIGHT_CLASS), 1600); + + if (shouldScrollIntoView) + await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 }); + + return; + } + sourceElement?.classList?.add(shouldHighLightWithLine ? HIGHLIGHT_WITH_LINE : HIGHLIGHT_CLASS); if (shouldScrollIntoView && sourceElement) await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 }); diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css index 71055ee..65ef011 100644 --- a/plane-src/apps/web/styles/globals.css +++ b/plane-src/apps/web/styles/globals.css @@ -190,6 +190,31 @@ } } +@keyframes nodedcDropFillHighlight { + 0%, + 72% { + background-color: rgb(var(--nodedc-card-active-rgb)); + color: rgb(var(--nodedc-on-card-active-rgb)); + } + 100% { + background-color: rgb(var(--nodedc-card-passive-rgb)); + color: rgb(var(--nodedc-on-card-passive-rgb)); + } +} + +[data-card-variant="internal-contour"].nodedc-drop-fill-highlight { + border: 0 !important; + outline: none !important; + box-shadow: none !important; +} + +[data-card-variant="internal-contour"].nodedc-drop-fill-highlight .nodedc-work-item-card { + border: 0 !important; + outline: none !important; + box-shadow: none !important; + animation: nodedcDropFillHighlight 1.6s ease-out; +} + /* Progress Bar Styles */ :root { --bprogress-color: var(--background-color-accent-primary);