AS1024
/
Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a menu item and short key 'c' to toggle board view. View modes are compact (tries to stuff all columns in the window) and wide (scrollbar appears)

This commit is contained in:
ashbike 2015-02-28 14:31:20 +05:30
parent db59460da1 106f45258c
commit 621b979627
3 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Template/board/filters.php
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'])) ?>

20
assets/css/src/board.css
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;

37
assets/js/src/board.js
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,33 @@ 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()
{
if (Kanboard.GetStorageItem("compactview") == '1') {
$("#board-container").removeClass ("board-container-wide").addClass ("board-container-compact");
$("#board th,#board td").removeClass ("board-column-wide").addClass ("board-column-compact");
} else {
$("#board-container").removeClass ("board-container-compact").addClass ("board-container-wide");
$("#board th,#board td").removeClass ("board-column-compact").addClass ("board-column-wide");
}
}
jQuery(document).ready(function() {
if (Kanboard.Exists("board")) {
@ -358,7 +389,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();
});
})();