Add keyboard shortcuts to switch between board/calendar/list view

app/Template/config/about.php

@@ -42,6 +42,12 @@
     <h2><?= t('Keyboard shortcuts') ?></h2>
 </div>
 <div class="listing">
+    <h3><?= t('Board/Calendar/List view') ?></h3>
+    <ul>
+        <li><?= t('Switch to the board view') ?> = <strong>v b</strong></li>
+        <li><?= t('Switch to the calendar view') ?> = <strong>v c</strong></li>
+        <li><?= t('Switch to the list view') ?> = <strong>v l</strong></li>
+    </ul>
     <h3><?= t('Board view') ?></h3>
     <ul>
         <li><?= t('New task') ?> = <strong>n</strong></li>

app/Template/project/filters.php

@@ -6,18 +6,18 @@
                 <?php if (isset($is_board)): ?>
                 <li>
                     <span class="filter-collapse">
-                        <i class="fa fa-compress fa-fw"></i> <a href="#" class="filter-collapse-link"><?= t('Collapse tasks') ?></a>
+                        <i class="fa fa-compress fa-fw"></i> <a href="#" class="filter-collapse-link" title="<?= t('Keyboard shortcut: "%s"', 's') ?>"><?= t('Collapse tasks') ?></a>
                     </span>
                     <span class="filter-expand" style="display: none">
-                        <i class="fa fa-expand fa-fw"></i> <a href="#" class="filter-expand-link"><?= t('Expand tasks') ?></a>
+                        <i class="fa fa-expand fa-fw"></i> <a href="#" class="filter-expand-link" title="<?= t('Keyboard shortcut: "%s"', 's') ?>"><?= t('Expand tasks') ?></a>
                     </span>
                 </li>
                 <li>
                     <span class="filter-compact">
-                        <i class="fa fa-th fa-fw"></i> <a href="#" class="filter-toggle-scrolling"><?= t('Compact view') ?></a>
+                        <i class="fa fa-th fa-fw"></i> <a href="#" class="filter-toggle-scrolling" title="<?= t('Keyboard shortcut: "%s"', 'c') ?>"><?= t('Compact view') ?></a>
                     </span>
                     <span class="filter-wide" style="display: none">
-                        <i class="fa fa-arrows-h fa-fw"></i> <a href="#" class="filter-toggle-scrolling"><?= t('Horizontal scrolling') ?></a>
+                        <i class="fa fa-arrows-h fa-fw"></i> <a href="#" class="filter-toggle-scrolling" title="<?= t('Keyboard shortcut: "%s"', 'c') ?>"><?= t('Horizontal scrolling') ?></a>
                     </span>
                 </li>
                 <?php endif ?>
@@ -28,15 +28,15 @@
     <ul class="views">
         <li <?= $filters['controller'] === 'board' ? 'class="active"' : '' ?>>
             <i class="fa fa-th fa-fw"></i>
-            <?= $this->url->link(t('Board'), 'board', 'show', array('project_id' => $project['id'], 'search' => $filters['search'])) ?>
+            <?= $this->url->link(t('Board'), 'board', 'show', array('project_id' => $project['id'], 'search' => $filters['search']), false, 'view-board', t('Keyboard shortcut: "%s"', 'v b')) ?>
         </li>
         <li <?= $filters['controller'] === 'calendar' ? 'class="active"' : '' ?>>
             <i class="fa fa-calendar fa-fw"></i>
-            <?= $this->url->link(t('Calendar'), 'calendar', 'show', array('project_id' => $project['id'], 'search' => $filters['search'])) ?>
+            <?= $this->url->link(t('Calendar'), 'calendar', 'show', array('project_id' => $project['id'], 'search' => $filters['search']), false, 'view-calendar', t('Keyboard shortcut: "%s"', 'v c')) ?>
         </li>
         <li <?= $filters['controller'] === 'listing' ? 'class="active"' : '' ?>>
             <i class="fa fa-list fa-fw"></i>
-            <?= $this->url->link(t('List'), 'listing', 'show', array('project_id' => $project['id'], 'search' => $filters['search'])) ?>
+            <?= $this->url->link(t('List'), 'listing', 'show', array('project_id' => $project['id'], 'search' => $filters['search']), false, 'view-listing', t('Keyboard shortcut: "%s"', 'v l')) ?>
         </li>
     </ul>
     <form method="get" action="?" class="search">

assets/js/src/base.js

@@ -185,16 +185,18 @@ var Kanboard = (function() {
             // Check the session every 60s
             window.setInterval(Kanboard.CheckSession, 60000);
 
-            // Keyboard shortcuts
+            // Submit form
             Mousetrap.bindGlobal("mod+enter", function() {
                 $("form").submit();
             });
 
+            // Open board selector
             Mousetrap.bind("b", function(e) {
                 e.preventDefault();
                 $('#board-selector').trigger('chosen:open');
             });
 
+            // Focus to the search box
             Mousetrap.bind("f", function(e) {
                 e.preventDefault();
 
@@ -205,10 +207,46 @@ var Kanboard = (function() {
                 }
             });
 
+            // Switch view mode for projects: go to the board
+            Mousetrap.bind("v b", function(e) {
+                var link = $(".view-board");
+
+                if (link.length) {
+                    window.location = link.attr('href');
+                }
+            });
+
+            // Switch view mode for projects: go to the calendar
+            Mousetrap.bind("v c", function(e) {
+                var link = $(".view-calendar");
+
+                if (link.length) {
+                    window.location = link.attr('href');
+                }
+            });
+
+            // Switch view mode for projects: go to the listing
+            Mousetrap.bind("v l", function(e) {
+                var link = $(".view-listing");
+
+                if (link.length) {
+                    window.location = link.attr('href');
+                }
+            });
+
+            // Place cursor at the end when focusing on the search box
             $(document).on("focus", "#form-search", function() {
                 $(this).val($(this).val());
             });
 
+            // Filter helper for search
+            $(document).on("click", ".filter-helper", function (e) {
+               e.preventDefault();
+               $("#form-search").val($(this).data("filter"));
+               $("form.search").submit();
+            });
+
+            // Datepicker translation
             $.datepicker.setDefaults($.datepicker.regional[$("body").data("js-lang")]);
 
             Kanboard.InitAfterAjax();

assets/js/src/filter.js

@@ -1,12 +0,0 @@
-(function() {
-
-    jQuery(document).ready(function() {
-
-        $(document).on("click", ".filter-helper", function (e) {
-           e.preventDefault();
-           $("#form-search").val($(this).data("filter"));
-           $("form.search").submit();
-        });
-    });
-
-})();

scripts/make-assets.sh

@@ -4,7 +4,7 @@ print_css="print links table board task comment subtask markdown"
 app_css="base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive dropdown screenshot filters"
 vendor_css="jquery-ui.min chosen.min fullcalendar.min font-awesome.min c3.min"
 
-app_js="base board calendar analytic swimlane screenshot filter"
+app_js="base board calendar analytic swimlane screenshot"
 vendor_js="jquery-1.11.1.min jquery-ui.min jquery.ui.touch-punch.min chosen.jquery.min dropit.min moment.min fullcalendar.min mousetrap.min mousetrap-global-bind.min app.min"
 lang_js="da de es fi fr hu it ja nl pl pt-br ru sv sr th tr zh-cn"