88 lines
4.8 KiB
Markdown
88 lines
4.8 KiB
Markdown
# TweakDrag -- board drag, touch and column-gap tweaks
|
|
|
|
A Kanboard plugin that groups board dragging and spacing tweaks, configurable under
|
|
"Settings -> Tweak Drag":
|
|
|
|
- **Drag the board background to scroll** (desktop) -- click and drag on the empty board
|
|
background to scroll the columns sideways, like the Trello board canvas.
|
|
- **Widen the gap between columns** -- spread the columns further apart, easier to tell
|
|
apart and to touch.
|
|
- **Mobile drag handle size** -- enlarge the card drag handle Kanboard shows on mobile so
|
|
it is easy to grab with a finger.
|
|
- **Drag auto-scroll** -- while dragging a card, the board scrolls when the pointer nears a
|
|
screen edge, so you can reach a column or row that is off screen. Horizontal scrolls the
|
|
board; vertical scrolls the page (when the vertical-collapse view is off). Works on
|
|
desktop and mobile.
|
|
|
|
These options were originally part of the ShrinkVertically plugin and moved here so that
|
|
drag/touch behaviour can grow on its own (planned: mobile drag-to-move cards, and a drag
|
|
movement threshold so ending a drag does not open the task) without bloating that plugin.
|
|
|
|
## How it works
|
|
|
|
- **Drag to scroll**: a small script (`Asset/js/drag-scroll.js`, loaded only when the
|
|
option is on) starts a horizontal pan on `#board-container` only when the press lands on
|
|
empty background -- pressing a task card, a drag handle or any control is ignored, so
|
|
Kanboard's own card and column drag-and-drop keep working unchanged.
|
|
- **Column gap**: the board is a table, so the gap is set with `border-spacing` (injected
|
|
in the page head from `Template/layout/variable.php` only when the option is on), sized
|
|
by the `--td-column-gap` CSS variable. This spreads the columns without shrinking the
|
|
cards and keeps each column header aligned with its list. It also adds some spacing at
|
|
the left and right edges of the board.
|
|
- **Mobile drag handle size**: Kanboard already supports dragging cards on mobile, but only
|
|
via a small handle (a FontAwesome `fa-arrows-alt` glyph it reveals on touch devices) that
|
|
is hard to grab. FontAwesome icons are sized by `font-size`, so a single rule scales the
|
|
handle from the `--td-handle-size` CSS variable. It is inert on desktop, where Kanboard
|
|
keeps the handle hidden.
|
|
- **Drag auto-scroll**: a script (`Asset/js/drag-autoscroll.js`) listens for jQuery UI
|
|
sortable's `sortstart`/`sortstop` (which also fire on touch via Kanboard's bundled Touch
|
|
Punch) and, while a card drag is active, scrolls toward whichever edge the pointer nears:
|
|
the board (`#board-container`) horizontally, and the window/page vertically (for the
|
|
collapse-off view; a no-op when the page does not scroll). Speed ramps up smoothly toward
|
|
the edge. The edge zone is 15% of each axis, clamped to 30-160px, so it adapts to screen
|
|
size and orientation. After each scroll step it dispatches a synthetic `mousemove` so
|
|
jQuery UI moves the drop placeholder onto the newly revealed area. It only acts during an
|
|
active drag, so it is idle otherwise.
|
|
|
|
## Requirements
|
|
|
|
- Kanboard >= 1.2.0
|
|
|
|
## Installation
|
|
|
|
Copy this folder into your Kanboard installation as `plugins/TweakDrag/`. The directory
|
|
name must be exactly `TweakDrag` (Kanboard derives the plugin namespace from the folder
|
|
name). No build step and no database migration.
|
|
|
|
## Settings
|
|
|
|
These settings are global (per Kanboard instance) and admin-only. Go to
|
|
"Settings -> Tweak Drag":
|
|
|
|
- **Column gap in pixels** -- width of the column gap (`--td-column-gap`). Default: 25.
|
|
- **Widen the gap between columns** -- toggles the wider gap. Default: on.
|
|
- **Drag the board background to scroll horizontally** -- toggles the Trello-style
|
|
click-and-drag panning. Desktop (mouse) for now. Default: on.
|
|
- **Mobile drag handle size in pixels** -- size of the mobile card drag handle
|
|
(`--td-handle-size`). No effect on desktop. Default: 20.
|
|
|
|
## License
|
|
|
|
AGPL-3.0. See LICENSE.
|
|
|
|
## More Kanboard plugins by Ruben (drbeco)
|
|
|
|
All free and AGPL-3.0, at [code.beco.cc](https://code.beco.cc/beco):
|
|
|
|
- **[RecoReco](https://code.beco.cc/beco/RecoReco)** -- calendar-scheduled recurring cards (yearly,
|
|
monthly, weekly, daily), driven by the card due date.
|
|
- **[FinanceBuddy](https://code.beco.cc/beco/FinanceBuddy)** -- attach a money value (debit/credit
|
|
and installments) to cards, shown on the card and totalled per column.
|
|
- **[OrganonTweaks](https://code.beco.cc/beco/OrganonTweaks)** -- an umbrella of small
|
|
quality-of-life board tweaks: remove an empty column, always show the comment icon, emphasize due
|
|
dates, extra search keywords and shared board filters, and more.
|
|
- **[BulkMoveTasks](https://code.beco.cc/beco/BulkMoveTasks)** -- move every task from one board
|
|
column to another in a single action.
|
|
- **[ShrinkVertically](https://code.beco.cc/beco/ShrinkVertically)** -- shrink vertically-collapsed
|
|
board columns so the horizontal scrollbar stays within reach.
|