Add filters helper for search form

This commit is contained in:
Frederic Guillot 2015-07-04 14:23:45 -04:00
parent b01eb12a6c
commit cf8aeea6af
10 changed files with 115 additions and 25 deletions

View File

@ -0,0 +1,21 @@
<div class="dropdown filters">
<span>
<i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Filters') ?></a>
<ul>
<li><a href="#" class="filter-helper" data-filter="<?= isset($reset) ? $reset : '' ?>"><?= t('Reset filters') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="status:open assignee:me"><?= t('My tasks') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="status:open assignee:me due:tomorrow"><?= t('My tasks due tomorrow') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="due:today"><?= t('Tasks due today') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="due:tomorrow"><?= t('Tasks due tomorrow') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="due:yesterday"><?= t('Tasks due yesterday') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="status:closed"><?= t('Closed tasks') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="status:open"><?= t('Open tasks') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="assignee:nobody"><?= t('Not assigned') ?></a></li>
<li><a href="#" class="filter-helper" data-filter="category:none"><?= t('No category') ?></a></li>
<li>
<i class="fa fa-external-link"></i>
<a href="http://kanboard.net/documentation/search" target="_blank"><?= t('View advanced search syntax') ?></a>
</li>
</ul>
</span>
</div>

View File

@ -1,9 +1,12 @@
<form method="get" action="?" autocomplete="off">
<?= $this->form->hidden('controller', array('controller' => 'search')) ?>
<?= $this->form->hidden('action', array('controller' => 'index')) ?>
<?= $this->form->text('search', array(), array(), array('placeholder="'.t('Search').'"'), 'form-input-large') ?>
<input type="submit" value="<?= t('Search') ?>" class="btn btn-blue"/>
</form>
<div class="search">
<form method="get" action="?" class="search">
<?= $this->form->hidden('controller', array('controller' => 'search')) ?>
<?= $this->form->hidden('action', array('controller' => 'index')) ?>
<?= $this->form->text('search', array(), array(), array('placeholder="'.t('Search').'"'), 'form-input-large') ?>
</form>
<?= $this->render('app/filters_helper') ?>
</div>
<?= $this->render('app/projects', array('paginator' => $project_paginator)) ?>
<?= $this->render('app/tasks', array('paginator' => $task_paginator)) ?>

View File

@ -45,4 +45,5 @@
<?= $this->form->hidden('action', $filters) ?>
<?= $this->form->text('search', $filters, array(), array('placeholder="'.t('Filter').'"'), 'form-input-large') ?>
</form>
<?= $this->render('app/filters_helper', array('reset' => 'status:open')) ?>
</div>

View File

@ -8,12 +8,15 @@
</ul>
</div>
<form method="get" action="?" autocomplete="off">
<?= $this->form->hidden('controller', $values) ?>
<?= $this->form->hidden('action', $values) ?>
<?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'required', 'placeholder="'.t('Search').'"'), 'form-input-large') ?>
<input type="submit" value="<?= t('Search') ?>" class="btn btn-blue"/>
</form>
<div class="search">
<form method="get" action="?" class="search">
<?= $this->form->hidden('controller', $values) ?>
<?= $this->form->hidden('action', $values) ?>
<?= $this->form->text('search', $values, array(), array(empty($values['search']) ? 'autofocus' : '', 'placeholder="'.t('Search').'"'), 'form-input-large') ?>
</form>
<?= $this->render('app/filters_helper') ?>
</div>
<?php if (empty($values['search'])): ?>
<div class="listing">
@ -28,7 +31,7 @@
<li><?= t('Search by description: ') ?><strong>description:"Something to find"</strong></li>
<li><?= t('Search by due date: ') ?><strong>due:2015-07-01</strong></li>
</ul>
<p><a href="http://kanboard.net/documentation/search" target="_blank"><?= t('More examples in the documentation') ?></a></p>
<p><i class="fa fa-external-link fa-fw"></i><a href="http://kanboard.net/documentation/search" target="_blank"><?= t('More examples in the documentation') ?></a></p>
</div>
<?php elseif (! empty($values['search']) && $paginator->isEmpty()): ?>
<p class="alert"><?= t('Nothing found.') ?></p>

View File

@ -750,10 +750,6 @@ nav .active a {
font-size: 0.9em;
}
.page-header form {
display: inline;
}
@media only screen and (max-width: 640px) {
.page-header-mobile li {
@ -1633,6 +1629,7 @@ td li.dropit-trigger {
border: 2px solid #333;
}.views {
display: inline-block;
margin-right: 10px;
}
.views li {
@ -1659,4 +1656,32 @@ td li.dropit-trigger {
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
.filters {
display: inline-block;
border: 1px solid #eee;
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10px;
}
.filters ul {
font-size: 0.8em;
}
.page-header .filters ul {
font-size: 0.9em;
}
form.search {
display: inline;
}
div.search {
margin-bottom: 20px;
}

View File

@ -1,5 +1,6 @@
.views {
display: inline-block;
margin-right: 10px;
}
.views li {
@ -26,4 +27,32 @@
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
.filters {
display: inline-block;
border: 1px solid #eee;
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10px;
}
.filters ul {
font-size: 0.8em;
}
.page-header .filters ul {
font-size: 0.9em;
}
form.search {
display: inline;
}
div.search {
margin-bottom: 20px;
}

View File

@ -97,10 +97,6 @@ nav .active a {
font-size: 0.9em;
}
.page-header form {
display: inline;
}
@media only screen and (max-width: 640px) {
.page-header-mobile li {

File diff suppressed because one or more lines are too long

12
assets/js/src/filter.js Normal file
View File

@ -0,0 +1,12 @@
(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"
app_js="base board calendar analytic swimlane screenshot filter"
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"