Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5cccbef7d7 | |||
| 9b78882835 |
@@ -70,33 +70,3 @@
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
|
||||
* "Drag the board background to scroll" setting is enabled). The .sv-drag-scroll class
|
||||
* is set on #board-container by the script, so these rules are inert when disabled.
|
||||
* A grab cursor advertises the empty background; cards keep the normal cursor since
|
||||
* pressing them does a card drag, not a pan.
|
||||
*/
|
||||
#board-container.sv-drag-scroll {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#board-container.sv-drag-scroll .task-board {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.sv-grabbing,
|
||||
.sv-grabbing * {
|
||||
cursor: grabbing !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Wider gutter between board columns is applied conditionally from
|
||||
* Template/layout/variable.php (only when the "Widen the gap between columns" setting is
|
||||
* on), using border-spacing with the --sv-bar-size value. border-spacing is the natural
|
||||
* control for the gap between table columns: it spreads them without shrinking the cards
|
||||
* and keeps each column header aligned with its task list. It is not in this static
|
||||
* stylesheet so it can be toggled per the setting.
|
||||
*/
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
/*
|
||||
* ShrinkVertically -- 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.
|
||||
*
|
||||
* 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() {
|
||||
var container = document.getElementById("board-container");
|
||||
|
||||
if (!container || container.getAttribute("data-sv-drag") === "1") {
|
||||
return;
|
||||
}
|
||||
|
||||
container.setAttribute("data-sv-drag", "1");
|
||||
container.classList.add("sv-drag-scroll");
|
||||
|
||||
var dragging = false;
|
||||
var startX = 0;
|
||||
var startScrollLeft = 0;
|
||||
|
||||
container.addEventListener("mousedown", function (e) {
|
||||
// Left button only, and only on empty board background.
|
||||
if (e.button !== 0 || isIgnored(e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
dragging = true;
|
||||
startX = e.clientX;
|
||||
startScrollLeft = container.scrollLeft;
|
||||
container.classList.add("sv-grabbing");
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener("mousemove", function (e) {
|
||||
if (!dragging) {
|
||||
return;
|
||||
}
|
||||
container.scrollLeft = startScrollLeft - (e.clientX - startX);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function stop() {
|
||||
if (!dragging) {
|
||||
return;
|
||||
}
|
||||
dragging = false;
|
||||
container.classList.remove("sv-grabbing");
|
||||
}
|
||||
|
||||
document.addEventListener("mouseup", stop);
|
||||
document.addEventListener("mouseleave", stop);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -51,7 +51,7 @@ class Plugin extends Base
|
||||
|
||||
public function getPluginVersion()
|
||||
{
|
||||
return '1.3.0';
|
||||
return '1.3.1';
|
||||
}
|
||||
|
||||
public function getPluginHomepage()
|
||||
|
||||
30
README.md
30
README.md
@@ -1,11 +1,13 @@
|
||||
# ShrinkVertically -- keep the board horizontal scrollbar visible
|
||||
|
||||
A small Kanboard plugin focused on getting around the board horizontally. It fixes the
|
||||
vertically-collapsed board view so the bottom scrollbar stays on screen, can optionally
|
||||
add a second mirrored scrollbar above the columns, and can optionally let you drag the
|
||||
board background to scroll (like Trello). Everything is configurable under
|
||||
A small Kanboard plugin focused on the vertically-collapsed board view. It fixes the
|
||||
collapse so the bottom horizontal scrollbar stays on screen, and can optionally add a
|
||||
second mirrored scrollbar above the columns. Configurable under
|
||||
"Settings -> Shrink Vertically".
|
||||
|
||||
Board drag/touch and column-gap options that used to live here have moved to the separate
|
||||
`TweakDrag` plugin.
|
||||
|
||||
## The problem
|
||||
|
||||
Kanboard's board gear menu has an "expand vertically / collapse vertically" toggle. When
|
||||
@@ -72,16 +74,6 @@ a second, mirrored scrollbar just above the columns. A small script
|
||||
strip above `#board-container` and keeps its scroll position in sync with the board both
|
||||
ways.
|
||||
|
||||
## Drag to scroll on Desktop (optional)
|
||||
|
||||
Kanboard has no way to pan the board by grabbing it; you must use the scrollbar. Enable
|
||||
"Drag the board background to scroll" to click and drag on the empty board background to
|
||||
scroll the columns sideways, like the Trello board canvas. 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.
|
||||
|
||||
## Settings
|
||||
|
||||
These settings are global (per Kanboard instance) and admin-only. Go to
|
||||
@@ -91,16 +83,10 @@ These settings are global (per Kanboard instance) and admin-only. Go to
|
||||
in the page head as the `--sv-shrink-offset` CSS variable. Increase it if the scrollbar
|
||||
is still clipped (for example with a taller theme header); decrease it to make the
|
||||
collapsed columns taller. Default: 240.
|
||||
- **Scrollbar thickness and column gap in pixels** -- a single value that sets both the
|
||||
thickness of the top scrollbar (Chromium/WebKit only) and the width of the column gap.
|
||||
Injected as the `--sv-bar-size` CSS variable. Default: 25.
|
||||
- **Top Horizontal Scrollbar thickness in pixels** -- thickness of the top scrollbar
|
||||
(Chromium/WebKit only). Injected as the `--sv-bar-size` CSS variable. Default: 25.
|
||||
- **Add a top horizontal scrollbar to the board** -- toggles the mirrored top scrollbar
|
||||
described above. Default: on.
|
||||
- **Widen the gap between columns** -- toggles the wider gap between board columns (sized
|
||||
by the value above). Also adds some spacing at the left and right edges of the board.
|
||||
Default: on.
|
||||
- **Drag the board background to scroll horizontally** -- toggles the Trello-style
|
||||
click-and-drag panning described above. Default: on.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<?= $this->form->label(t('Scrollbar thickness in pixels'), 'shrink_vertically_bar_size') ?>
|
||||
<?= $this->form->label(t('Top Horizontal Scrollbar thickness in pixels'), 'shrink_vertically_bar_size') ?>
|
||||
<?= $this->form->number('shrink_vertically_bar_size', $values, $errors) ?>
|
||||
<p class="form-help">
|
||||
<?= t('Thickness of the top horizontal scrollbar (Chromium/WebKit browsers only). Default: 25.') ?>
|
||||
|
||||
@@ -3,7 +3,4 @@
|
||||
--sv-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px;
|
||||
--sv-bar-size: <?= (int) $this->app->config('shrink_vertically_bar_size', 25) ?>px;
|
||||
}
|
||||
<?php if ((int) $this->app->config('shrink_vertically_column_gap', 1) === 1): ?>
|
||||
#board { border-collapse: separate !important; border-spacing: var(--sv-bar-size, 25px) 0 !important; }
|
||||
<?php endif ?>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user