UI improvements in filter, multi-selection and rules

client/components/rules/rules.styl

@@ -2,10 +2,12 @@
   overflow:hidden
   overflow-y:scroll
   max-height: 400px
+  padding-right: 5px
 .rules-lists-item
   display: block
   position: relative
   overflow: auto
+  border-bottom: 1px solid #bfbfbf
   p
   	display: inline-block
   	float: left

client/components/sidebar/sidebar.styl

@@ -34,6 +34,7 @@
       color: darken(white, 50%)
       font-size: 1em
       margin-bottom: 10px
+      font-weight: bold
 
       i.fa
         margin-right: 3px
@@ -167,8 +168,8 @@
   button
     float: right
     margin: 0
-    margin-bottom: 5px
-    padding: 0 2px 0 10px
+    margin: 0 0 5px 5px
+    padding: 0 10px 0 10px
 
 @media screen and (max-width: 800px)
   .board-sidebar

client/components/sidebar/sidebarFilters.jade

@@ -4,10 +4,14 @@
   and #each x in y constructors to fix this.
 
 template(name="filterSidebar")
+  h3 {{_ 'list-filter-label'}}
   ul.sidebar-list
-    span {{_ 'list-filter-label'}}
     form.js-list-filter
       input(type="text")
+  hr
+  h3
+    i.fa.fa-tags
+    {{_ 'filter-labels-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.labelIds.isSelected undefined}}active{{/if}}")
           a.name.js-toggle-label-filter
@@ -27,6 +31,9 @@ template(name="filterSidebar")
           if Filter.labelIds.isSelected _id
             i.fa.fa-check
   hr
+  h3
+    i.fa.fa-users
+    {{_ 'filter-member-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.members.isSelected undefined}}active{{/if}}")
           a.name.js-toggle-member-filter
@@ -45,6 +52,9 @@ template(name="filterSidebar")
             if Filter.members.isSelected _id
               i.fa.fa-check
   hr
+  h3
+    i.fa.fa-user
+    {{_ 'filter-assignee-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.assignees.isSelected undefined}}active{{/if}}")
       a.name.js-toggle-assignee-filter
@@ -63,6 +73,9 @@ template(name="filterSidebar")
             if Filter.assignees.isSelected _id
               i.fa.fa-check
   hr
+  h3
+    i.fa.fa-list-alt
+    {{_ 'filter-custom-fields-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.customFields.isSelected undefined}}active{{/if}}")
           a.name.js-toggle-custom-fields-filter
@@ -78,6 +91,8 @@ template(name="filterSidebar")
           if Filter.customFields.isSelected _id
             i.fa.fa-check
   hr
+  h3
+    {{_ 'other-filters-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.archive.isSelected _id}}active{{/if}}")
       a.name.js-toggle-archive-filter
@@ -85,7 +100,6 @@ template(name="filterSidebar")
           | {{_ 'filter-show-archive'}}
         if Filter.archive.isSelected _id
           i.fa.fa-check
-  hr
   ul.sidebar-list
     li(class="{{#if Filter.hideEmpty.isSelected _id}}active{{/if}}")
       a.name.js-toggle-hideEmpty-filter
@@ -94,7 +108,7 @@ template(name="filterSidebar")
         if Filter.hideEmpty.isSelected _id
           i.fa.fa-check
   hr
-  span {{_ 'advanced-filter-label'}}
+  h3 {{_ 'advanced-filter-label'}}
   input.js-field-advanced-filter(type="text")
   span {{_ 'advanced-filter-description'}}
   if Filter.isActive
@@ -107,6 +121,9 @@ template(name="filterSidebar")
       span {{_ 'filter-to-selection'}}
 
 template(name="multiselectionSidebar")
+  h3
+    i.fa.fa-tags
+    {{_ 'multi-selection-label'}}
   ul.sidebar-list
     each currentBoard.labels
       li
@@ -122,6 +139,9 @@ template(name="multiselectionSidebar")
           else if someSelectedElementHave 'label' _id
             i.fa.fa-ellipsis-h
   hr
+  h3
+    i.fa.fa-users
+    {{_ 'multi-selection-member'}}
   ul.sidebar-list
     each currentBoard.activeMembers
       with getUser userId

i18n/en.i18n.json

@@ -337,15 +337,20 @@
   "filter-cards": "Filter Cards or Lists",
   "list-filter-label": "Filter List by Title",
   "filter-clear": "Clear filter",
+  "filter-labels-label": "Filter by label",
   "filter-no-label": "No label",
+  "filter-member-label": "Filter by member",
   "filter-no-member": "No member",
+  "filter-assignee-label": "Filter by assignee",
   "filter-no-assignee": "No assignee",
+  "filter-custom-fields-label": "Filter by Custom Fields",
   "filter-no-custom-fields": "No Custom Fields",
   "filter-show-archive": "Show archived lists",
   "filter-hide-empty": "Hide empty lists",
   "filter-on": "Filter is on",
   "filter-on-desc": "You are filtering cards on this board. Click here to edit filter.",
   "filter-to-selection": "Filter to selection",
+  "other-filters-label": "Other Filters",
   "advanced-filter-label": "Advanced Filter",
   "advanced-filter-description": "Advanced Filter allows to write a string containing following operators: == != <= >= && || ( ) A space is used as a separator between the Operators. You can filter for all Custom Fields by typing their names and values. For Example: Field1 == Value1. Note: If fields or values contains spaces, you need to encapsulate them into single quotes. For Example: 'Field 1' == 'Value 1'. For single control characters (' \\/) to be skipped, you can use \\. For example: Field1 == I\\'m. Also you can combine multiple conditions. For Example: F1 == V1 || F1 == V2. Normally all operators are interpreted from left to right. You can change the order by placing brackets. For Example: F1 == V1 && ( F2 == V2 || F2 == V3 ). Also you can search text fields using regex: F1 == /Tes.*/i",
   "fullname": "Full Name",
@@ -420,6 +425,8 @@
   "moveCardToTop-title": "Move to Top",
   "moveSelectionPopup-title": "Move selection",
   "multi-selection": "Multi-Selection",
+  "multi-selection-label": "Set label for selection",
+  "multi-selection-member": "Set member for selection",
   "multi-selection-on": "Multi-Selection is on",
   "muted": "Muted",
   "muted-info": "You will never be notified of any changes in this board",