diff --git a/apps/client/src/features/base/components/views/kanban/base-kanban.tsx b/apps/client/src/features/base/components/views/kanban/base-kanban.tsx index 66de3ec5e..2fa0fcb94 100644 --- a/apps/client/src/features/base/components/views/kanban/base-kanban.tsx +++ b/apps/client/src/features/base/components/views/kanban/base-kanban.tsx @@ -1,6 +1,7 @@ import { useCallback, useMemo } from "react"; import { Badge } from "@mantine/core"; import { IconPlus } from "@tabler/icons-react"; +import { useTranslation } from "react-i18next"; import { IBase, IBaseRow, @@ -36,6 +37,7 @@ export function BaseKanban({ effectiveView, onCardClick, }: BaseKanbanProps) { + const { t } = useTranslation(); const groupByPropertyId = effectiveView?.config?.groupByPropertyId; const property = useMemo( () => @@ -211,13 +213,13 @@ export function BaseKanban({ return hiddenIds .map((id) => id === NO_VALUE_CHOICE_ID - ? { id, name: "No value", color: null as string | null } + ? { id, name: t("No value"), color: null as string | null } : byId.get(id) ? { id, name: byId.get(id)!.name, color: byId.get(id)!.color as string | null } : null, ) .filter((c): c is { id: string; name: string; color: string | null } => c !== null); - }, [hiddenIds, isGroupable, property]); + }, [hiddenIds, isGroupable, property, t]); if (!isGroupable) { return ; @@ -226,13 +228,13 @@ export function BaseKanban({ return ( <> {hiddenChoices.length > 0 && ( -
+
{hiddenChoices.map((c) => ( handleShowColumn(c.id)} rightSection={} > diff --git a/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx b/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx index a44708bb7..bd6607728 100644 --- a/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx +++ b/apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx @@ -50,7 +50,7 @@ export function KanbanColumnHeader({
- + diff --git a/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts b/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts index 16e4cd667..7d100fe2f 100644 --- a/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts +++ b/apps/client/src/features/base/hooks/use-kanban-column-reorder.ts @@ -36,6 +36,16 @@ export function useKanbanColumnReorder({ return combine( draggable({ element: el, + canDrag: ({ input }) => { + // Don't start a drag when the user is interacting with a marked + // "no-drag" subtree (e.g. the column header's menu trigger). + const target = document.elementFromPoint( + input.clientX, + input.clientY, + ) as HTMLElement | null; + if (target?.closest("[data-no-drag]")) return false; + return true; + }, getInitialData: () => ({ type: "base-kanban-column", columnKey }), onDragStart: () => setIsDragging(true), onDrop: () => setIsDragging(false), diff --git a/apps/client/src/features/base/styles/kanban.module.css b/apps/client/src/features/base/styles/kanban.module.css index 9832303f6..3bd9a5b0f 100644 --- a/apps/client/src/features/base/styles/kanban.module.css +++ b/apps/client/src/features/base/styles/kanban.module.css @@ -91,3 +91,14 @@ font-size: var(--mantine-font-size-xs); color: var(--mantine-color-dimmed); } + +.hiddenStrip { + padding: 6px 12px; + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.hiddenChip { + cursor: pointer; +}