diff options
| -rw-r--r-- | app/Template/board/filters.php | 4 | ||||
| -rw-r--r-- | assets/css/src/board.css | 20 | ||||
| -rw-r--r-- | assets/js/src/board.js | 39 |
3 files changed, 63 insertions, 0 deletions
diff --git a/app/Template/board/filters.php b/app/Template/board/filters.php index a0de5fd9..673cc1fd 100644 --- a/app/Template/board/filters.php +++ b/app/Template/board/filters.php @@ -14,6 +14,10 @@ </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'])) ?> </li> diff --git a/assets/css/src/board.css b/assets/css/src/board.css index a1aa268d..2f168322 100644 --- a/assets/css/src/board.css +++ b/assets/css/src/board.css @@ -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; diff --git a/assets/js/src/board.js b/assets/js/src/board.js index 75c44f2e..26d92c05 100644 --- a/assets/js/src/board.js +++ b/assets/js/src/board.js @@ -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(); + }); })(); |