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

Filters refactor shared

stable
Xavier Julián 2014-06-30 16:15:01 +02:00
parent 74167663a9
commit a0fc0ec570
7 changed files with 107 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/partials/issues.jade
View File

@ -4,8 +4,10 @@ block head
title Taiga Project management web application with scrum in mind!
block content
div.wrapper(tg-issues, ng-controller="IssuesController as ctrl",
ng-init="section='issues'")
div.wrapper.issues(tg-issues, ng-controller="IssuesController as ctrl", ng-init="section='issues'")
sidebar.menu-secondary.extrabar.filters-bar
include views/modules/filters
//
sidebar.menu-secondary.sidebar.filters-container
// TODO: maybe everything related to this section
// should be done in one unique include?

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

@ -1,10 +1,41 @@
section.filters
div.filters-inner
h1 filters
h1
a(href="", title="back to categories") filters
a.subfilter(href="", title="cat-name")
span.icon.icon-arrow-right
span status
form
fieldset
input(type="text", placeholder="Filter Filters", ng-model="filtersSearch.$")
a.icon.icon-search(href="", title="search")
//- First step for selecting category
div.filters-step-cat
//- $(.filters-applied) only visible when filters are being applied
div.filters-applied
a.single-filter.selected
span.name Filter23
span.icon.icon-delete
div.filters-cats
ul
li
a(href="", title="status")
span Status
span.icon.icon-arrow-right
li
a(href="", title="type")
span Type
span.icon.icon-arrow-right
li
a(href="", title="Severity")
span Severity
span.icon.icon-arrow-right
li
a(href="", title="blablabla")
span Blablabla
span.icon.icon-arrow-right
//- Second step for selecting single filters to apply
div.filter-list
a.single-filter(ng-repeat="tag in filters.tags|filter:filtersSearch:strict" ng-class="{selected: tag.selected}")
span.name(tg-bo-html="tag.name")

14
app/styles/components/filter.scss
View File

@ -13,7 +13,8 @@
color: $grayer;
opacity: 1;
}
&.selected {
&.selected,
&.active {
@include transition (opacity .2s linear);
color: $grayer;
opacity: 1;
@ -33,4 +34,15 @@
right: 0;
top: 0;
}
.icon-delete {
@include transition(color .3s linear);
color: $grayer;
position: absolute;
right: .5rem;
top: .5rem;
&:hover {
@include transition(color .3s linear);
color: $red;
}
}
}

9
app/styles/layout/issues.scss Normal file
View File

@ -0,0 +1,9 @@
.issues {
.filters-bar {
@include table-flex-child(1, 260px, 0, 260px);
}
.filters-inner {
opacity: 1;
padding: 2em 1em;
}
}

1
app/styles/main.scss
View File

@ -72,3 +72,4 @@ $prefix-for-spec: true;
@import 'layout/admin-membership';
@import 'layout/project-colors';
@import 'layout/kanban';
@import 'layout/issues';

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

@ -17,6 +17,18 @@
}
.filters {
h1 {
vertical-align: middle;
.subfilter {
@extend %large;
}
.icon {
margin: 0;
}
a {
vertical-align: middle;
}
}
form {
margin-bottom: 2rem;
.icon-search {
@ -31,3 +43,30 @@
opacity: 0;
@include transition (all .1s ease-in);
}
.filters-cats {
li {
border-bottom: 1px solid $gray-light;
text-transform: uppercase;
}
a {
@include transition (color .2s ease-in);
color: $grayer;
display: block;
padding: 1rem 0 1rem 1rem;
&:hover {
@include transition (color .2s ease-in);
color: $green-taiga;
.icon {
@include transition (opacity .2s ease-in);
opacity: 1;
}
}
}
.icon {
@include transition (opacity .2s ease-in);
color: $grayer;
float: right;
opacity: 0;
}
}

3
app/styles/modules/nav.scss
View File

@ -12,7 +12,8 @@
}
.logo {
margin-bottom: 2rem;
line-height: inherit;
margin: .5rem 0 2rem;
img {
width: 100%;
}