A small patch which enables scroll view toggling.
If there are many columns, the board adds a horizontal scrollbar. However, This looses the full board visibility. Now there is a menu item on the Board, Action > Toggle view which switches. This can also be toggled by 'c' keypress.
This commit is contained in:
parent
11d1314fbe
commit
88444e8b3e
|
|
@ -13,6 +13,10 @@
|
|||
<i class="fa fa-expand fa-fw"></i> <a href="#" class="filter-expand-link"><?= t('Expand tasks') ?></a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-th"></i>
|
||||
<a href="#" class="compactview-toggle"><?= t('Toggle view') ?></a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-search fa-fw"></i>
|
||||
<?= $this->a(t('Search'), 'project', 'search', array('project_id' => $project['id'])) ?>
|
||||
|
|
|
|||
|
|
@ -20,16 +20,36 @@
|
|||
|
||||
/* board table */
|
||||
#board-container {
|
||||
/* Will set the style from JS depending upon wide/compact view */
|
||||
}
|
||||
|
||||
/* Board container classes for wide/compact view */
|
||||
#board-container-wide {
|
||||
overflow-x: scroll;
|
||||
padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
|
||||
}
|
||||
|
||||
.board-container-compact {
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
|
||||
}
|
||||
|
||||
#board td,
|
||||
#board th {
|
||||
/* Will set the style from JS depending upon wide/compact view */
|
||||
}
|
||||
|
||||
/* Board table column for wide/compact view */
|
||||
.board-column-wide {
|
||||
min-width: 240px;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.board-column-compact {
|
||||
min-width: 0px;
|
||||
max-width: 0px;
|
||||
}
|
||||
|
||||
#board th a {
|
||||
text-decoration: none;
|
||||
color: #3366CC;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@ Kanboard.Board = (function() {
|
|||
Mousetrap.bind("s", function() {
|
||||
stack_toggle();
|
||||
});
|
||||
|
||||
Mousetrap.bind("c", function() {
|
||||
compactview_toggle();
|
||||
});
|
||||
}
|
||||
|
||||
// Collapse/Expand tasks
|
||||
|
|
@ -351,6 +355,35 @@ Kanboard.Board = (function() {
|
|||
filter_apply();
|
||||
}
|
||||
|
||||
// Toggle compact view. It will try to stuff all columns in the window
|
||||
jQuery(document).on('click', ".compactview-toggle", function(e) {
|
||||
e.preventDefault();
|
||||
compactview_toggle();
|
||||
});
|
||||
|
||||
function compactview_toggle() {
|
||||
var compactview = Kanboard.GetStorageItem("compactview");
|
||||
if (compactview == '1') {
|
||||
Kanboard.SetStorageItem("compactview",'0');
|
||||
} else {
|
||||
Kanboard.SetStorageItem("compactview",'1');
|
||||
}
|
||||
compactview_reload ();
|
||||
}
|
||||
|
||||
function compactview_reload()
|
||||
{
|
||||
var compactview = Kanboard.GetStorageItem("compactview");
|
||||
$("#board-container,#board th,#board td").removeClass ();
|
||||
if (compactview == '1') {
|
||||
$('#board-container').addClass ('board-container-compact');
|
||||
$("#board th,#board td").addClass ('board-column-compact');
|
||||
} else {
|
||||
$('#board-container').addClass ('board-container-wide');
|
||||
$("#board th,#board td").addClass ('board-column-wide');
|
||||
}
|
||||
}
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
if (Kanboard.Exists("board")) {
|
||||
|
|
@ -358,7 +391,13 @@ Kanboard.Board = (function() {
|
|||
filter_load_events();
|
||||
stack_load_events();
|
||||
keyboard_shortcuts();
|
||||
compactview_reload();
|
||||
}
|
||||
});
|
||||
|
||||
// Reload the compactview states (shown/hidden) after an ajax call
|
||||
jQuery(document).ajaxComplete(function() {
|
||||
compactview_reload();
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue