From a0fc0ec570cab65dadab7b7590747aca5ea8809f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 30 Jun 2014 16:15:01 +0200 Subject: [PATCH] Filters refactor shared --- app/partials/issues.jade | 20 +++++++------ app/partials/views/modules/filters.jade | 33 ++++++++++++++++++++- app/styles/components/filter.scss | 14 ++++++++- app/styles/layout/issues.scss | 9 ++++++ app/styles/main.scss | 1 + app/styles/modules/filters.scss | 39 +++++++++++++++++++++++++ app/styles/modules/nav.scss | 3 +- 7 files changed, 107 insertions(+), 12 deletions(-) create mode 100644 app/styles/layout/issues.scss diff --git a/app/partials/issues.jade b/app/partials/issues.jade index 066baf25..bed9b41a 100644 --- a/app/partials/issues.jade +++ b/app/partials/issues.jade @@ -4,15 +4,17 @@ 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'") - sidebar.menu-secondary.sidebar.filters-container - // TODO: maybe everything related to this section - // should be done in one unique include? - header - h1 Filters - include views/modules/search-in - include views/modules/filter-tags + 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? + header + h1 Filters + include views/modules/search-in + include views/modules/filter-tags section.main.issues-page header include views/components/mainTitle diff --git a/app/partials/views/modules/filters.jade b/app/partials/views/modules/filters.jade index f14ae5d6..fc9bb976 100644 --- a/app/partials/views/modules/filters.jade +++ b/app/partials/views/modules/filters.jade @@ -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") diff --git a/app/styles/components/filter.scss b/app/styles/components/filter.scss index 0ddcddc3..a4d5b48d 100644 --- a/app/styles/components/filter.scss +++ b/app/styles/components/filter.scss @@ -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; + } + } } diff --git a/app/styles/layout/issues.scss b/app/styles/layout/issues.scss new file mode 100644 index 00000000..721744a6 --- /dev/null +++ b/app/styles/layout/issues.scss @@ -0,0 +1,9 @@ +.issues { + .filters-bar { + @include table-flex-child(1, 260px, 0, 260px); + } + .filters-inner { + opacity: 1; + padding: 2em 1em; + } +} \ No newline at end of file diff --git a/app/styles/main.scss b/app/styles/main.scss index 9b2c5bf3..f570308d 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -72,3 +72,4 @@ $prefix-for-spec: true; @import 'layout/admin-membership'; @import 'layout/project-colors'; @import 'layout/kanban'; +@import 'layout/issues'; diff --git a/app/styles/modules/filters.scss b/app/styles/modules/filters.scss index 9ed0d626..32c1b5a4 100644 --- a/app/styles/modules/filters.scss +++ b/app/styles/modules/filters.scss @@ -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; + } +} diff --git a/app/styles/modules/nav.scss b/app/styles/modules/nav.scss index 2aeb12ef..84df4d93 100644 --- a/app/styles/modules/nav.scss +++ b/app/styles/modules/nav.scss @@ -12,7 +12,8 @@ } .logo { - margin-bottom: 2rem; + line-height: inherit; + margin: .5rem 0 2rem; img { width: 100%; }