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:
ashbike 2015-02-25 12:05:14 +05:30
parent 11d1314fbe
commit 88444e8b3e
3 changed files with 63 additions and 0 deletions

View File

@ -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'])) ?>

View File

@ -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;

View File

@ -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();
});
})();