From 33cf589c05411f3c718af0a35bacd10f0992a569 Mon Sep 17 00:00:00 2001 From: helioguardabaxo Date: Tue, 15 Sep 2020 12:47:07 -0300 Subject: [PATCH] UI improvements in filter, multi-selection and rules --- client/components/rules/rules.styl | 2 ++ client/components/sidebar/sidebar.styl | 5 ++-- client/components/sidebar/sidebarFilters.jade | 26 ++++++++++++++++--- i18n/en.i18n.json | 7 +++++ 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/client/components/rules/rules.styl b/client/components/rules/rules.styl index 05302f7ff..1f973aae7 100644 --- a/client/components/rules/rules.styl +++ b/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 diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index c10472771..c11c5888f 100644 --- a/client/components/sidebar/sidebar.styl +++ b/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 diff --git a/client/components/sidebar/sidebarFilters.jade b/client/components/sidebar/sidebarFilters.jade index 6d899b700..f7dc5eb62 100644 --- a/client/components/sidebar/sidebarFilters.jade +++ b/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 diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index faf63917b..dfef806f2 100644 --- a/i18n/en.i18n.json +++ b/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",