Compare commits
11 Commits
b39ef1ebbe
...
v1.1
| Author | SHA1 | Date | |
|---|---|---|---|
| 8760377927 | |||
| 7f9235dbdc | |||
| bb3ac1c946 | |||
| 924e287aee | |||
| 4e48e33b26 | |||
| 57bab4650b | |||
| 99fa73433a | |||
| c6f7ee297b | |||
| 29ed19b4cb | |||
| 2f739c8b75 | |||
| 99ff483e44 |
1
Asset/css/skeleton.css
vendored
1
Asset/css/skeleton.css
vendored
@@ -1 +0,0 @@
|
|||||||
/* Skeleton plugin styles -- add CSS here. Loaded via template:layout:css. */
|
|
||||||
41
Asset/css/tweak-drag.css
Normal file
41
Asset/css/tweak-drag.css
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
* TweakDrag -- board drag/touch and column-gap tweaks.
|
||||||
|
*
|
||||||
|
* The wider column gap is applied conditionally from Template/layout/variable.php (only
|
||||||
|
* when the "Widen the gap between columns" setting is on), using border-spacing with the
|
||||||
|
* --td-column-gap value, so it is not in this static stylesheet.
|
||||||
|
*
|
||||||
|
* Below: click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
|
||||||
|
* "Drag the board background to scroll" setting is enabled). The .td-drag-scroll marker is
|
||||||
|
* set on <body> by the script (not on #board-container, which Kanboard replaces on every
|
||||||
|
* card move), so these rules are inert when disabled and survive board rebuilds. A grab
|
||||||
|
* cursor advertises the empty background; cards keep the normal cursor since pressing them
|
||||||
|
* does a card drag, not a pan.
|
||||||
|
*/
|
||||||
|
body.td-drag-scroll #board-container {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.td-drag-scroll #board-container .task-board {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-grabbing,
|
||||||
|
.td-grabbing * {
|
||||||
|
cursor: grabbing !important;
|
||||||
|
user-select: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Enlarge the mobile card drag handle so it is a usable touch target.
|
||||||
|
* Kanboard reveals the .task-board-sort-handle (a FontAwesome fa-arrows-alt glyph) only
|
||||||
|
* on mobile (isMobile.any) and restricts card dragging to it; by default the glyph is
|
||||||
|
* tiny and hard to grab with a finger. FontAwesome icons are sized by font-size, so this
|
||||||
|
* is a pure font-size bump; it is inert on desktop where the handle stays display:none.
|
||||||
|
* Size comes from the --td-handle-size variable (Settings -> Tweak Drag), injected in the
|
||||||
|
* page head; falls back to 20px.
|
||||||
|
*/
|
||||||
|
.task-board-sort-handle,
|
||||||
|
.task-board-sort-handle i {
|
||||||
|
font-size: var(--td-handle-size, 20px);
|
||||||
|
}
|
||||||
119
Asset/js/drag-autoscroll.js
Normal file
119
Asset/js/drag-autoscroll.js
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
/*
|
||||||
|
* TweakDrag -- auto-scroll the board while dragging a card near a screen edge.
|
||||||
|
*
|
||||||
|
* Kanboard drags cards with jQuery UI sortable. The board does not scroll during a drag
|
||||||
|
* (jQuery UI's autoscroll is unreliable horizontally, and on touch the bundled Touch Punch
|
||||||
|
* shim suppresses native scrolling while a card is held), so you can only drop onto columns
|
||||||
|
* already on screen. This scrolls #board-container while a card drag is active and the
|
||||||
|
* pointer nears the left/right edge, with a smooth continuous speed that grows toward the
|
||||||
|
* edge -- so you can drag a card to the edge and roll the board to a far column.
|
||||||
|
*
|
||||||
|
* It only acts during an active card drag near an edge, so it is harmless when idle. Works
|
||||||
|
* on desktop (mouse) and mobile (touch, via Touch Punch). No core changes.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var EDGE_ZONE = 50; // px from the board edge where auto-scroll begins
|
||||||
|
var MAX_SPEED = 22; // px per animation frame at the very edge
|
||||||
|
var EASE = 1; // 1 = linear ramp, 2 = gentle-then-fast
|
||||||
|
|
||||||
|
var jq = window.jQuery;
|
||||||
|
if (!jq) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var container = null;
|
||||||
|
var dragging = false;
|
||||||
|
var rafId = 0;
|
||||||
|
var lastX = 0;
|
||||||
|
var lastY = 0;
|
||||||
|
|
||||||
|
function onMove(e) {
|
||||||
|
if (e.touches && e.touches.length) {
|
||||||
|
lastX = e.touches[0].clientX;
|
||||||
|
lastY = e.touches[0].clientY;
|
||||||
|
} else {
|
||||||
|
lastX = e.clientX;
|
||||||
|
lastY = e.clientY;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Distance is px from the edge; returns 0 at the zone border up to MAX_SPEED at the edge.
|
||||||
|
function speedFor(distance) {
|
||||||
|
var p = (EDGE_ZONE - distance) / EDGE_ZONE;
|
||||||
|
if (p <= 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
if (p > 1) {
|
||||||
|
p = 1;
|
||||||
|
}
|
||||||
|
if (EASE !== 1) {
|
||||||
|
p = Math.pow(p, EASE);
|
||||||
|
}
|
||||||
|
return MAX_SPEED * p;
|
||||||
|
}
|
||||||
|
|
||||||
|
function step() {
|
||||||
|
if (!dragging || !container) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var rect = container.getBoundingClientRect();
|
||||||
|
var dLeft = lastX - rect.left;
|
||||||
|
var dRight = rect.right - lastX;
|
||||||
|
var speed = 0;
|
||||||
|
|
||||||
|
if (dLeft < EDGE_ZONE) {
|
||||||
|
speed = -speedFor(dLeft);
|
||||||
|
} else if (dRight < EDGE_ZONE) {
|
||||||
|
speed = speedFor(dRight);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (speed !== 0) {
|
||||||
|
var before = container.scrollLeft;
|
||||||
|
container.scrollLeft = before + speed;
|
||||||
|
|
||||||
|
// Only when the board actually moved: nudge jQuery UI to recompute drop
|
||||||
|
// positions so the placeholder follows onto the newly revealed column.
|
||||||
|
if (container.scrollLeft !== before) {
|
||||||
|
document.dispatchEvent(new MouseEvent("mousemove", {
|
||||||
|
clientX: lastX,
|
||||||
|
clientY: lastY,
|
||||||
|
bubbles: true
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rafId = window.requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startLoop() {
|
||||||
|
container = document.getElementById("board-container");
|
||||||
|
if (!container) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dragging = true;
|
||||||
|
if (!rafId) {
|
||||||
|
rafId = window.requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopLoop() {
|
||||||
|
dragging = false;
|
||||||
|
if (rafId) {
|
||||||
|
window.cancelAnimationFrame(rafId);
|
||||||
|
rafId = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Track the pointer at all times (cheap; only used while dragging).
|
||||||
|
document.addEventListener("mousemove", onMove, true);
|
||||||
|
document.addEventListener("touchmove", onMove, true);
|
||||||
|
document.addEventListener("pointermove", onMove, true);
|
||||||
|
|
||||||
|
// A card drag started / stopped. jQuery UI sortable fires these (on touch too, via
|
||||||
|
// Touch Punch); delegated on the document so board redraws need no rebinding.
|
||||||
|
jq(document).on("sortstart", startLoop);
|
||||||
|
jq(document).on("sortstop", stopLoop);
|
||||||
|
})();
|
||||||
89
Asset/js/drag-scroll.js
Normal file
89
Asset/js/drag-scroll.js
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
/*
|
||||||
|
* TweakDrag -- optional click-and-drag horizontal scrolling of the board.
|
||||||
|
*
|
||||||
|
* Like the Trello board canvas: press the empty board background and drag left/right
|
||||||
|
* to scroll #board-container horizontally. The pan only starts on empty background --
|
||||||
|
* pressing a task card, a drag handle, or any interactive control is ignored, so this
|
||||||
|
* never interferes with Kanboard's own card and column drag-and-drop.
|
||||||
|
*
|
||||||
|
* Resilience note: after a card drag Kanboard rebuilds the board with
|
||||||
|
* `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh), destroying the
|
||||||
|
* element. So we must NOT bind to #board-container directly: we listen on `document` and
|
||||||
|
* re-resolve the container on each press, and the grab-cursor marker lives on <body>
|
||||||
|
* (which is never replaced). Previously the mousedown listener and the cursor class were
|
||||||
|
* on the container, so background dragging stopped working after every card move.
|
||||||
|
*
|
||||||
|
* Loaded only when the "Drag the board background to scroll" setting is enabled.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Pressing any of these (or their descendants) must NOT start a background pan.
|
||||||
|
var IGNORE = "a, button, input, textarea, select, label, " +
|
||||||
|
".task-board, [data-task-id], .task-board-sort-handle, " +
|
||||||
|
".draggable-row-handle, .dropdown, .ui-sortable-handle";
|
||||||
|
|
||||||
|
function isIgnored(el) {
|
||||||
|
return !!(el && el.closest && el.closest(IGNORE));
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
if (!document.getElementById("board-container") || document.body.getAttribute("data-td-drag") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marker on <body> (stable) enables the grab cursor via CSS, surviving board rebuilds.
|
||||||
|
document.body.setAttribute("data-td-drag", "1");
|
||||||
|
document.body.classList.add("td-drag-scroll");
|
||||||
|
|
||||||
|
var dragging = false;
|
||||||
|
var container = null;
|
||||||
|
var startX = 0;
|
||||||
|
var startScrollLeft = 0;
|
||||||
|
|
||||||
|
document.addEventListener("mousedown", function (e) {
|
||||||
|
if (e.button !== 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-resolve the current container and only act on its empty background.
|
||||||
|
var c = document.getElementById("board-container");
|
||||||
|
if (!c || !c.contains(e.target) || isIgnored(e.target)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container = c;
|
||||||
|
dragging = true;
|
||||||
|
startX = e.clientX;
|
||||||
|
startScrollLeft = c.scrollLeft;
|
||||||
|
document.body.classList.add("td-grabbing");
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", function (e) {
|
||||||
|
if (!dragging || !container) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
container.scrollLeft = startScrollLeft - (e.clientX - startX);
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
function stop() {
|
||||||
|
if (!dragging) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
container = null;
|
||||||
|
document.body.classList.remove("td-grabbing");
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("mouseup", stop);
|
||||||
|
document.addEventListener("mouseleave", stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", init);
|
||||||
|
} else {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
})();
|
||||||
@@ -1 +0,0 @@
|
|||||||
// Skeleton plugin script -- add JS here. Loaded via template:layout:js.
|
|
||||||
65
Controller/ConfigController.php
Normal file
65
Controller/ConfigController.php
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Kanboard\Plugin\TweakDrag\Controller;
|
||||||
|
|
||||||
|
use Kanboard\Controller\BaseController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Settings page for the TweakDrag plugin: board drag/touch and column-gap options.
|
||||||
|
*/
|
||||||
|
class ConfigController extends BaseController
|
||||||
|
{
|
||||||
|
const DEFAULT_GAP_SIZE = 25;
|
||||||
|
const MIN_GAP_SIZE = 0;
|
||||||
|
const MAX_GAP_SIZE = 200;
|
||||||
|
|
||||||
|
const DEFAULT_HANDLE_SIZE = 20;
|
||||||
|
const MIN_HANDLE_SIZE = 8;
|
||||||
|
const MAX_HANDLE_SIZE = 200;
|
||||||
|
|
||||||
|
public function show()
|
||||||
|
{
|
||||||
|
$gapSize = (int) $this->configModel->get('tweakdrag_column_gap_size', self::DEFAULT_GAP_SIZE);
|
||||||
|
$columnGap = (int) $this->configModel->get('tweakdrag_column_gap', 1);
|
||||||
|
$dragScroll = (int) $this->configModel->get('tweakdrag_drag_scroll', 1);
|
||||||
|
$handleSize = (int) $this->configModel->get('tweakdrag_handle_size', self::DEFAULT_HANDLE_SIZE);
|
||||||
|
|
||||||
|
$this->response->html($this->helper->layout->config('tweakDrag:config/show', array(
|
||||||
|
'title' => t('Settings').' > '.t('Tweak Drag'),
|
||||||
|
'values' => array(
|
||||||
|
'tweakdrag_column_gap_size' => $gapSize,
|
||||||
|
'tweakdrag_column_gap' => $columnGap,
|
||||||
|
'tweakdrag_drag_scroll' => $dragScroll,
|
||||||
|
'tweakdrag_handle_size' => $handleSize,
|
||||||
|
),
|
||||||
|
'errors' => array(),
|
||||||
|
)));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function save()
|
||||||
|
{
|
||||||
|
$values = $this->request->getValues();
|
||||||
|
|
||||||
|
$gapSize = isset($values['tweakdrag_column_gap_size']) ? (int) $values['tweakdrag_column_gap_size'] : self::DEFAULT_GAP_SIZE;
|
||||||
|
$gapSize = max(self::MIN_GAP_SIZE, min(self::MAX_GAP_SIZE, $gapSize));
|
||||||
|
|
||||||
|
$columnGap = isset($values['tweakdrag_column_gap']) ? 1 : 0;
|
||||||
|
$dragScroll = isset($values['tweakdrag_drag_scroll']) ? 1 : 0;
|
||||||
|
|
||||||
|
$handleSize = isset($values['tweakdrag_handle_size']) ? (int) $values['tweakdrag_handle_size'] : self::DEFAULT_HANDLE_SIZE;
|
||||||
|
$handleSize = max(self::MIN_HANDLE_SIZE, min(self::MAX_HANDLE_SIZE, $handleSize));
|
||||||
|
|
||||||
|
if ($this->configModel->save(array(
|
||||||
|
'tweakdrag_column_gap_size' => $gapSize,
|
||||||
|
'tweakdrag_column_gap' => $columnGap,
|
||||||
|
'tweakdrag_drag_scroll' => $dragScroll,
|
||||||
|
'tweakdrag_handle_size' => $handleSize,
|
||||||
|
))) {
|
||||||
|
$this->flash->success(t('Settings saved successfully.'));
|
||||||
|
} else {
|
||||||
|
$this->flash->failure(t('Unable to save your settings.'));
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->response->redirect($this->helper->url->to('ConfigController', 'show', array('plugin' => 'TweakDrag')));
|
||||||
|
}
|
||||||
|
}
|
||||||
35
Plugin.php
35
Plugin.php
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
namespace Kanboard\Plugin\Skeleton;
|
namespace Kanboard\Plugin\TweakDrag;
|
||||||
|
|
||||||
use Kanboard\Core\Plugin\Base;
|
use Kanboard\Core\Plugin\Base;
|
||||||
|
|
||||||
@@ -8,28 +8,39 @@ class Plugin extends Base
|
|||||||
{
|
{
|
||||||
public function initialize()
|
public function initialize()
|
||||||
{
|
{
|
||||||
// 1. Render a visible word at the top of every page (the demo output).
|
// Load the plugin stylesheet (drag cursor styling; inert until enabled).
|
||||||
$this->template->hook->attach('template:layout:top', 'skeleton:layout/header');
|
|
||||||
|
|
||||||
// 2. Load the plugin stylesheet (currently empty -- proves the CSS hook fires).
|
|
||||||
$this->hook->on('template:layout:css', array(
|
$this->hook->on('template:layout:css', array(
|
||||||
'template' => 'plugins/Skeleton/Asset/css/skeleton.css',
|
'template' => 'plugins/TweakDrag/Asset/css/tweak-drag.css',
|
||||||
));
|
));
|
||||||
|
|
||||||
// 3. Load the plugin script (currently empty -- proves the JS hook fires).
|
// Inject the column-gap CSS variable and, when enabled, the gap rule.
|
||||||
|
$this->template->hook->attach('template:layout:head', 'tweakDrag:layout/variable');
|
||||||
|
|
||||||
|
// Add a "Tweak Drag" entry to the Settings sidebar.
|
||||||
|
$this->template->hook->attach('template:config:sidebar', 'tweakDrag:config/sidebar');
|
||||||
|
|
||||||
|
// Optional: click-and-drag the board background to scroll horizontally.
|
||||||
|
if ((int) $this->configModel->get('tweakdrag_drag_scroll', 1) === 1) {
|
||||||
|
$this->hook->on('template:layout:js', array(
|
||||||
|
'template' => 'plugins/TweakDrag/Asset/js/drag-scroll.js',
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-scroll the board while dragging a card near a screen edge. Always loaded;
|
||||||
|
// it only acts during an active card drag.
|
||||||
$this->hook->on('template:layout:js', array(
|
$this->hook->on('template:layout:js', array(
|
||||||
'template' => 'plugins/Skeleton/Asset/js/skeleton.js',
|
'template' => 'plugins/TweakDrag/Asset/js/drag-autoscroll.js',
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginName()
|
public function getPluginName()
|
||||||
{
|
{
|
||||||
return 'Skeleton';
|
return 'TweakDrag';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginDescription()
|
public function getPluginDescription()
|
||||||
{
|
{
|
||||||
return t('Reusable skeleton/template for building Kanboard plugins.');
|
return t('Board drag, touch and column-gap tweaks (drag-to-scroll, wider column gap).');
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginAuthor()
|
public function getPluginAuthor()
|
||||||
@@ -39,12 +50,12 @@ class Plugin extends Base
|
|||||||
|
|
||||||
public function getPluginVersion()
|
public function getPluginVersion()
|
||||||
{
|
{
|
||||||
return '0.1.0';
|
return '1.1.0';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginHomepage()
|
public function getPluginHomepage()
|
||||||
{
|
{
|
||||||
return 'https://code.beco.cc/beco/kanboard-plugin-skeleton';
|
return 'https://code.beco.cc/beco/TweakDrag';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getCompatibleVersion()
|
public function getCompatibleVersion()
|
||||||
|
|||||||
98
README.md
98
README.md
@@ -1,19 +1,43 @@
|
|||||||
# Skeleton -- a Kanboard plugin template
|
# TweakDrag -- board drag, touch and column-gap tweaks
|
||||||
|
|
||||||
A minimal, working Kanboard plugin that you copy and rename as the starting point for a
|
A Kanboard plugin that groups board dragging and spacing tweaks, configurable under
|
||||||
real plugin. By itself it does only one trivial thing: it renders the word "Skeleton" at
|
"Settings -> Tweak Drag":
|
||||||
the top of every page. It changes no data and runs no database migration.
|
|
||||||
|
|
||||||
## What it demonstrates
|
- **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 that is off screen (desktop and mobile).
|
||||||
|
|
||||||
- A complete `Plugin.php` registration class with all the metadata Kanboard shows in
|
These options were originally part of the ShrinkVertically plugin and moved here so that
|
||||||
Settings -> Plugins (name, description, author, version, homepage, compatible version).
|
drag/touch behaviour can grow on its own (planned: mobile drag-to-move cards, and a drag
|
||||||
- A template hook (`template:layout:top`) that injects a template into the page.
|
movement threshold so ending a drag does not open the task) without bloating that plugin.
|
||||||
- Asset hooks (`template:layout:css` and `template:layout:js`) that load a stylesheet and
|
|
||||||
a script. They are empty for now but prove the injection path works -- handy when a real
|
## How it works
|
||||||
plugin needs custom CSS or JS.
|
|
||||||
- The standard plugin directory layout, with stub folders (`Controller/`, `Model/`,
|
- **Drag to scroll**: a small script (`Asset/js/drag-scroll.js`, loaded only when the
|
||||||
`Schema/`, `Locale/`, `Test/`) ready to grow into.
|
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 `#board-container` when the pointer nears
|
||||||
|
its left/right edge. Speed ramps up smoothly toward the edge. After each scroll step it
|
||||||
|
dispatches a synthetic `mousemove` so jQuery UI moves the drop placeholder onto the newly
|
||||||
|
revealed column. It only acts during an active drag, so it is idle otherwise.
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
|
|
||||||
@@ -21,45 +45,21 @@ the top of every page. It changes no data and runs no database migration.
|
|||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
No build step and no dependencies.
|
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.
|
||||||
|
|
||||||
1. Copy this folder into your Kanboard installation as `plugins/Skeleton/`.
|
## Settings
|
||||||
2. Reload any page. The word "Skeleton" appears at the top.
|
|
||||||
3. Confirm it under Settings -> Plugins.
|
|
||||||
|
|
||||||
To uninstall, delete `plugins/Skeleton/`. Nothing else is left behind.
|
These settings are global (per Kanboard instance) and admin-only. Go to
|
||||||
|
"Settings -> Tweak Drag":
|
||||||
|
|
||||||
## Directory layout
|
- **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
|
||||||
Skeleton/
|
click-and-drag panning. Desktop (mouse) for now. Default: on.
|
||||||
Plugin.php Registration and hook wiring (the only required file).
|
- **Mobile drag handle size in pixels** -- size of the mobile card drag handle
|
||||||
README.md
|
(`--td-handle-size`). No effect on desktop. Default: 20.
|
||||||
LICENSE AGPL-3.0.
|
|
||||||
Template/
|
|
||||||
layout/header.php The visible "Skeleton" word.
|
|
||||||
Asset/
|
|
||||||
css/skeleton.css Loaded via template:layout:css.
|
|
||||||
js/skeleton.js Loaded via template:layout:js.
|
|
||||||
Controller/ Stub for future request handlers.
|
|
||||||
Model/ Stub for future business logic / DB access.
|
|
||||||
Schema/ Stub for future database migrations.
|
|
||||||
Locale/ Stub for future translations (e.g. pt_BR/, fr_FR/).
|
|
||||||
Test/ Stub for future unit tests.
|
|
||||||
```
|
|
||||||
|
|
||||||
## How to fork this into a new plugin
|
|
||||||
|
|
||||||
1. Copy the folder and rename it, e.g. `plugins/MyPlugin/`. The folder name must match the
|
|
||||||
namespace and start with a capital letter.
|
|
||||||
2. In `Plugin.php`, change the namespace from `Kanboard\Plugin\Skeleton` to
|
|
||||||
`Kanboard\Plugin\MyPlugin`.
|
|
||||||
3. Update the metadata methods (`getPluginName`, `getPluginDescription`, `getPluginAuthor`,
|
|
||||||
`getPluginVersion`, `getPluginHomepage`, `getCompatibleVersion`).
|
|
||||||
4. Update the hook target paths: the lowercase prefix in `'skeleton:layout/header'` and the
|
|
||||||
`plugins/Skeleton/Asset/...` asset paths must match the new plugin name.
|
|
||||||
5. Replace `Template/layout/header.php` with your real template, or attach to a different
|
|
||||||
hook. See the Kanboard plugin hooks documentation for the full list of hook points.
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
41
Template/config/show.php
Normal file
41
Template/config/show.php
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<div class="page-header">
|
||||||
|
<h2><?= t('Tweak Drag') ?></h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="post" action="<?= $this->url->href('ConfigController', 'save', array('plugin' => 'TweakDrag')) ?>" autocomplete="off">
|
||||||
|
<?= $this->form->csrf() ?>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<?= $this->form->label(t('Column gap in pixels'), 'tweakdrag_column_gap_size') ?>
|
||||||
|
<?= $this->form->number('tweakdrag_column_gap_size', $values, $errors) ?>
|
||||||
|
<p class="form-help">
|
||||||
|
<?= t('Width of the gap between board columns when the option below is on. Default: 25.') ?>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<?= $this->form->checkbox('tweakdrag_column_gap', t('Widen the gap between columns'), 1, isset($values['tweakdrag_column_gap']) && $values['tweakdrag_column_gap'] == 1) ?>
|
||||||
|
<p class="form-help">
|
||||||
|
<?= t('Spreads the board columns further apart (by the pixel value above), easier to tell apart and to touch. Also adds some spacing at the left and right edges of the board.') ?>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<?= $this->form->checkbox('tweakdrag_drag_scroll', t('Drag the board background to scroll horizontally'), 1, isset($values['tweakdrag_drag_scroll']) && $values['tweakdrag_drag_scroll'] == 1) ?>
|
||||||
|
<p class="form-help">
|
||||||
|
<?= t('Like Trello: click and drag on the empty board background to scroll the columns sideways. Dragging a task card or a handle still works as usual.') ?>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<?= $this->form->label(t('Mobile drag handle size in pixels'), 'tweakdrag_handle_size') ?>
|
||||||
|
<?= $this->form->number('tweakdrag_handle_size', $values, $errors) ?>
|
||||||
|
<p class="form-help">
|
||||||
|
<?= t('Size of the card drag handle that Kanboard shows on mobile, so it is easy to grab with a finger. No effect on desktop. Default: 20.') ?>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
3
Template/config/sidebar.php
Normal file
3
Template/config/sidebar.php
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<li <?= $this->app->checkMenuSelection('ConfigController', 'show', 'TweakDrag') ?>>
|
||||||
|
<?= $this->url->link(t('Tweak Drag'), 'ConfigController', 'show', array('plugin' => 'TweakDrag')) ?>
|
||||||
|
</li>
|
||||||
@@ -1 +0,0 @@
|
|||||||
<div class="skeleton-plugin-marker">Skeleton</div>
|
|
||||||
9
Template/layout/variable.php
Normal file
9
Template/layout/variable.php
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
:root {
|
||||||
|
--td-column-gap: <?= (int) $this->app->config('tweakdrag_column_gap_size', 25) ?>px;
|
||||||
|
--td-handle-size: <?= (int) $this->app->config('tweakdrag_handle_size', 20) ?>px;
|
||||||
|
}
|
||||||
|
<?php if ((int) $this->app->config('tweakdrag_column_gap', 1) === 1): ?>
|
||||||
|
#board { border-collapse: separate !important; border-spacing: var(--td-column-gap, 25px) 0 !important; }
|
||||||
|
<?php endif ?>
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user