Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5cccbef7d7 | |||
| 9b78882835 |
@@ -70,33 +70,3 @@
|
|||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(0, 0, 0, 0.35);
|
||||||
border-radius: 6px;
|
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()
|
public function getPluginVersion()
|
||||||
{
|
{
|
||||||
return '1.3.0';
|
return '1.3.1';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginHomepage()
|
public function getPluginHomepage()
|
||||||
|
|||||||
30
README.md
30
README.md
@@ -1,11 +1,13 @@
|
|||||||
# ShrinkVertically -- keep the board horizontal scrollbar visible
|
# ShrinkVertically -- keep the board horizontal scrollbar visible
|
||||||
|
|
||||||
A small Kanboard plugin focused on getting around the board horizontally. It fixes the
|
A small Kanboard plugin focused on the vertically-collapsed board view. It fixes the
|
||||||
vertically-collapsed board view so the bottom scrollbar stays on screen, can optionally
|
collapse so the bottom horizontal scrollbar stays on screen, and can optionally add a
|
||||||
add a second mirrored scrollbar above the columns, and can optionally let you drag the
|
second mirrored scrollbar above the columns. Configurable under
|
||||||
board background to scroll (like Trello). Everything is configurable under
|
|
||||||
"Settings -> Shrink Vertically".
|
"Settings -> Shrink Vertically".
|
||||||
|
|
||||||
|
Board drag/touch and column-gap options that used to live here have moved to the separate
|
||||||
|
`TweakDrag` plugin.
|
||||||
|
|
||||||
## The problem
|
## The problem
|
||||||
|
|
||||||
Kanboard's board gear menu has an "expand vertically / collapse vertically" toggle. When
|
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
|
strip above `#board-container` and keeps its scroll position in sync with the board both
|
||||||
ways.
|
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
|
## Settings
|
||||||
|
|
||||||
These settings are global (per Kanboard instance) and admin-only. Go to
|
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
|
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
|
is still clipped (for example with a taller theme header); decrease it to make the
|
||||||
collapsed columns taller. Default: 240.
|
collapsed columns taller. Default: 240.
|
||||||
- **Scrollbar thickness and column gap in pixels** -- a single value that sets both the
|
- **Top Horizontal Scrollbar thickness in pixels** -- thickness of the top scrollbar
|
||||||
thickness of the top scrollbar (Chromium/WebKit only) and the width of the column gap.
|
(Chromium/WebKit only). Injected as the `--sv-bar-size` CSS variable. Default: 25.
|
||||||
Injected as the `--sv-bar-size` CSS variable. Default: 25.
|
|
||||||
- **Add a top horizontal scrollbar to the board** -- toggles the mirrored top scrollbar
|
- **Add a top horizontal scrollbar to the board** -- toggles the mirrored top scrollbar
|
||||||
described above. Default: on.
|
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
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<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) ?>
|
<?= $this->form->number('shrink_vertically_bar_size', $values, $errors) ?>
|
||||||
<p class="form-help">
|
<p class="form-help">
|
||||||
<?= t('Thickness of the top horizontal scrollbar (Chromium/WebKit browsers only). Default: 25.') ?>
|
<?= 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-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px;
|
||||||
--sv-bar-size: <?= (int) $this->app->config('shrink_vertically_bar_size', 25) ?>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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user