From 6319f1ad17688d64b7696362cc1b9a56af828407 Mon Sep 17 00:00:00 2001 From: Adrian Cowan Date: Sun, 1 Jan 2023 15:18:59 +1100 Subject: [PATCH 1/4] website: Add drag handles to rank-able (drag-able) items to make it clear they can be dragged. The formatting changes to the SortableItem also had the side-effect of removing the dot points. --- website/src/components/Sortable/SortableItem.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx index 244fc313..c8a93075 100644 --- a/website/src/components/Sortable/SortableItem.tsx +++ b/website/src/components/Sortable/SortableItem.tsx @@ -1,6 +1,8 @@ import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; +import { RxDragHandleDots2 } from "react-icons/rx"; import { PropsWithChildren } from "react"; +import { Button } from "@chakra-ui/react"; export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }); @@ -13,12 +15,13 @@ export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }> return (
  • + {children}
    • ); From 64a7b9848a9ba1f9046906aa644f05fa4369f366 Mon Sep 17 00:00:00 2001 From: Adrian Cowan Date: Sun, 1 Jan 2023 15:56:20 +1100 Subject: [PATCH 2/4] website: Restrict ranking items to vertical motion to avoid breaking the webpage layout. When the items are drag-able outside the page boundary the viewport leaves the page boundary. This looks particularly unprofessionally on mobile. There is also another option to restrict to the page boundaries (restrictToWindowEdges) which might be better but it doesn't appear to work on mobile (firefox); the issue is that the items get stuck slightly off to the left edge of the viewport and can't be moved horizontally at all (even without restrictToVerticalAxis). --- website/package-lock.json | 23 ++++++++++++++++++++ website/package.json | 1 + website/src/components/Sortable/Sortable.tsx | 8 ++++++- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/website/package-lock.json b/website/package-lock.json index 9bc7cde1..1587c01e 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@chakra-ui/react": "^2.4.4", "@dnd-kit/core": "^6.0.6", + "@dnd-kit/modifiers": "^6.0.1", "@dnd-kit/sortable": "^7.0.1", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", @@ -3356,6 +3357,19 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@dnd-kit/modifiers": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz", + "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==", + "dependencies": { + "@dnd-kit/utilities": "^3.2.1", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@dnd-kit/core": "^6.0.6", + "react": ">=16.8.0" + } + }, "node_modules/@dnd-kit/sortable": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.1.tgz", @@ -30905,6 +30919,15 @@ "tslib": "^2.0.0" } }, + "@dnd-kit/modifiers": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz", + "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==", + "requires": { + "@dnd-kit/utilities": "^3.2.1", + "tslib": "^2.0.0" + } + }, "@dnd-kit/sortable": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.1.tgz", diff --git a/website/package.json b/website/package.json index c7532955..bc1f3b69 100644 --- a/website/package.json +++ b/website/package.json @@ -20,6 +20,7 @@ "dependencies": { "@chakra-ui/react": "^2.4.4", "@dnd-kit/core": "^6.0.6", + "@dnd-kit/modifiers": "^6.0.1", "@dnd-kit/sortable": "^7.0.1", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx index 74ff1bb2..7ca761df 100644 --- a/website/src/components/Sortable/Sortable.tsx +++ b/website/src/components/Sortable/Sortable.tsx @@ -2,6 +2,7 @@ import { Flex } from "@chakra-ui/react"; import { closestCenter, DndContext, PointerSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core"; import type { DragEndEvent } from "@dnd-kit/core/dist/types/events"; import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; +import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { ReactNode, useEffect, useState } from "react"; import { SortableItem } from "./SortableItem"; @@ -33,7 +34,12 @@ export const Sortable = ({ items, onChange }: SortableProps) => { const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor)); return ( - + {itemsWithIds.map(({ id, item }) => ( From ab8fbbecca941c5609cbbe1f07b068d1996a7bae Mon Sep 17 00:00:00 2001 From: Adrian Cowan Date: Sun, 1 Jan 2023 16:39:15 +1100 Subject: [PATCH 3/4] website: Add basic keyboard support for ranking items to improve accessibility --- website/src/components/Sortable/Sortable.tsx | 23 +++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx index 7ca761df..1ac95bf7 100644 --- a/website/src/components/Sortable/Sortable.tsx +++ b/website/src/components/Sortable/Sortable.tsx @@ -1,7 +1,20 @@ import { Flex } from "@chakra-ui/react"; -import { closestCenter, DndContext, PointerSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core"; +import { + closestCenter, + DndContext, + PointerSensor, + TouchSensor, + KeyboardSensor, + useSensor, + useSensors, +} from "@dnd-kit/core"; import type { DragEndEvent } from "@dnd-kit/core/dist/types/events"; -import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; +import { + arrayMove, + SortableContext, + sortableKeyboardCoordinates, + verticalListSortingStrategy, +} from "@dnd-kit/sortable"; import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { ReactNode, useEffect, useState } from "react"; @@ -31,7 +44,11 @@ export const Sortable = ({ items, onChange }: SortableProps) => { ); }, [items]); - const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor)); + const sensors = useSensors( + useSensor(PointerSensor), + useSensor(TouchSensor), + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) + ); return ( Date: Sun, 1 Jan 2023 17:16:05 +1100 Subject: [PATCH 4/4] website: Fix order of imports in Sortable/SortableItem --- website/src/components/Sortable/Sortable.tsx | 2 +- website/src/components/Sortable/SortableItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx index 1ac95bf7..615b0853 100644 --- a/website/src/components/Sortable/Sortable.tsx +++ b/website/src/components/Sortable/Sortable.tsx @@ -9,13 +9,13 @@ import { useSensors, } from "@dnd-kit/core"; import type { DragEndEvent } from "@dnd-kit/core/dist/types/events"; +import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, } from "@dnd-kit/sortable"; -import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { ReactNode, useEffect, useState } from "react"; import { SortableItem } from "./SortableItem"; diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx index c8a93075..834a854f 100644 --- a/website/src/components/Sortable/SortableItem.tsx +++ b/website/src/components/Sortable/SortableItem.tsx @@ -1,8 +1,8 @@ +import { Button } from "@chakra-ui/react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { RxDragHandleDots2 } from "react-icons/rx"; import { PropsWithChildren } from "react"; -import { Button } from "@chakra-ui/react"; export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });