add advanced filter form (without functionality)

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",

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

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(

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 {