diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json index ad30643d..a304d9d8 100644 --- a/app/locales/taiga/locale-en.json +++ b/app/locales/taiga/locale-en.json @@ -215,6 +215,11 @@ "ACTION_SAVE_CUSTOM_FILTER": "save as custom filter", "PLACEHOLDER_FILTER_NAME": "Write the filter name and press enter", "APPLIED_FILTERS_NUM": "filters applied", + "TITLE_ADVANCED_FILTER": "Advanced", + "ADVANCED_FILTERS": { + "INCLUDE": "Include", + "EXCLUDE": "Exclude" + }, "CATEGORIES": { "TYPE": "Type", "STATUS": "Status", diff --git a/app/modules/components/filter/filter.controller.coffee b/app/modules/components/filter/filter.controller.coffee index cd0a9b04..853b9c18 100644 --- a/app/modules/components/filter/filter.controller.coffee +++ b/app/modules/components/filter/filter.controller.coffee @@ -18,13 +18,23 @@ ### class FilterController - @.$inject = [] + @.$inject = ['$translate'] - constructor: () -> + constructor: (@translate) -> @.opened = null + @.filterModeOptions = ["include", "exclude"] + @.filterModeLabels = { + "include": @translate.instant("COMMON.FILTERS.ADVANCED_FILTERS.INCLUDE"), + "exclude": @translate.instant("COMMON.FILTERS.ADVANCED_FILTERS.EXCLUDE"), + } + @.filterMode = 'include' + @.showAdvancedFilter = false @.customFilterForm = false @.customFilterName = '' + toggleAdvancedFilter: () -> + @.showAdvancedFilter = !@.showAdvancedFilter + toggleFilterCategory: (filterName) -> if @.opened == filterName @.opened = null diff --git a/app/modules/components/filter/filter.jade b/app/modules/components/filter/filter.jade index 590d65b8..494e6770 100644 --- a/app/modules/components/filter/filter.jade +++ b/app/modules/components/filter/filter.jade @@ -52,6 +52,35 @@ form(name="vm.filtersForm") placeholder="{{'COMMON.FILTERS.PLACEHOLDER_FILTER_NAME' | translate}}" ) + .filters-advanced + a( + ng-click="vm.toggleAdvancedFilter()" + href="" + ) + span {{'COMMON.FILTERS.TITLE_ADVANCED_FILTER' | translate}} + tg-svg.ng-animate-disabled( + ng-if="!vm.showAdvancedFilter" + svg-icon="icon-arrow-right" + ) + tg-svg.ng-animate-disabled( + ng-if="vm.showAdvancedFilter" + svg-icon="icon-arrow-down" + ) + + .filters-advanced-form(ng-show="vm.showAdvancedFilter") + .custom-radio(ng-repeat="option in vm.filterModeOptions") + input( + type="radio" + name="filter-mode" + id="filter-mode-{{option}}" + value="{{option}}" + ng-model="vm.filterMode" + ) + label.filter-mode(for="filter-mode-{{option}}", class="{{option}}", ng-class="{active: vm.filterMode == option}") + span.radio-mark + span.radio-mark-inner(class="{{option}}") + span {{vm.filterModeLabels[option]}} + .filters-cats ul li( diff --git a/app/modules/components/filter/filter.scss b/app/modules/components/filter/filter.scss index 5b2228a6..bd906f53 100644 --- a/app/modules/components/filter/filter.scss +++ b/app/modules/components/filter/filter.scss @@ -21,6 +21,76 @@ tg-filter { } } } + .filters-advanced { + @include font-type(light); + @include font-size(xsmall); + padding: 0 1rem 1rem; + + a .icon { + margin-left: 5px; + vertical-align: bottom; + width: .5rem; + } + + .filters-advanced-form { + padding: .5rem 0; + text-align: center; + } + + .custom-radio { + display: inline; + + input[type=radio] { + display: none; + } + } + + .filter-mode { + cursor: pointer; + &.include { + margin-right: .75rem; + } + &.active .radio-mark-inner { + opacity: 1; + } + &.active.include { + color: $primary; + } + &.active.exclude { + color: $red-light; + } + } + + .radio-mark, + .radio-mark-inner { + border-radius: 50%; + display: inline-block; + } + + .radio-mark { + background: $whitish; + height: 18px; + margin-right: 3px; + text-align: center; + width: 18px; + } + + .radio-mark-inner { + height: 12px; + margin-top: 3px; + opacity: 0; + width: 12px; + + &.include { + background: $primary; + } + + &.exclude { + background: $red-light; + } + } + } + h1, form { padding: 0 1rem; @@ -55,6 +125,7 @@ tg-filter { .filters-cats { ul { + border-top: 1px solid $gray-light; margin-bottom: 0; } li {