taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Slide effect in filters

stable
Xavier Julián 2014-06-30 12:28:44 +02:00
parent 74fde653d3
commit 0ac71347b9
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffee/modules/backlog/main.coffee
View File

@ -319,7 +319,7 @@ BacklogDirective = ($repo, $rootscope) ->
$el.on "click", "#show-filters-button", (event) -> $el.on "click", "#show-filters-button", (event) ->
event.preventDefault() event.preventDefault()
target = angular.element(event.currentTarget) target = angular.element(event.currentTarget)
$el.find("sidebar.filters-bar").toggle() $el.find("sidebar.filters-bar").toggleClass("active")
target.toggleClass("active") target.toggleClass("active")
toggleText(target.find(".text"), ["Hide Filters", "Show Filters"]) # TODO: i18n toggleText(target.find(".text"), ["Hide Filters", "Show Filters"]) # TODO: i18n
$rootscope.$broadcast("resize") $rootscope.$broadcast("resize")

5
app/partials/views/modules/filters.jade
View File

@ -1,12 +1,11 @@
section.filters section.filters
header div.filters-inner
h1 filters h1 filters
form form
fieldset fieldset
input(type="text", placeholder="Filter Filters", ng-model="filtersSearch.$") input(type="text", placeholder="Filter Filters", ng-model="filtersSearch.$")
a.icon.icon-search(href="", title="search") a.icon.icon-search(href="", title="search")
div.filter-list div.filter-list
a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict" a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict" ng-class="{selected: tag.selected}")
ng-class="{selected: tag.selected}")
span.name(tg-bo-html="tag.name") span.name(tg-bo-html="tag.name")
span.number(tg-bo-html="tag.count") span.number(tg-bo-html="tag.count")

24
app/styles/modules/filters.scss
View File

@ -1,9 +1,29 @@
.filters-bar { .menu-secondary {
display: none; &.filters-bar {
@include table-flex-child(0, 1px, 0, 1px);
@include transition(all .3s linear);
padding: 0;
&.active {
@include table-flex-child(1, 260px, 0, 260px);
@include transition(all .3s linear);
padding: 2em 1em;
.filters-inner {
@include transition (all .5s ease-in);
opacity: 1;
}
}
}
} }
.filters { .filters {
form { form {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.filters-inner {
opacity: 0;
@include transition (all .1s ease-in);
}