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

This commit is contained in:
Frederic Guillot 2015-07-04 15:04:41 -04:00
parent 4f3088a331
commit ad23b4961a
6 changed files with 59 additions and 26 deletions

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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