Tweak history menu UI

Show search icon for search history elements and provide a separate entries for the default and saved filter.
Default & saved filter are always rendered on the bottom, if they are non-empty.
This commit is contained in:
Łukasz Mierzwa
2017-08-13 10:37:31 -07:00
parent 256453ccaf
commit 9ba23d1658
4 changed files with 40 additions and 25 deletions

View File

@@ -1,7 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`appended filtes should be present in history 1`] = `
"<li class=\\"history-menu\\">
"<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default
@@ -22,7 +25,7 @@ exports[`appended filtes should be present in history 2`] = `
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -35,7 +38,9 @@ exports[`appended filtes should be present in history 2`] = `
<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
@@ -57,7 +62,7 @@ exports[`appended filtes should be present in history 3`] = `
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -79,7 +84,7 @@ exports[`appended filtes should be present in history 3`] = `
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -92,7 +97,9 @@ exports[`appended filtes should be present in history 3`] = `
<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
@@ -114,7 +121,7 @@ exports[`appended filtes should be present in history 4`] = `
<span class=\\"rawFilter hidden\\">
default,bar,@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -140,7 +147,7 @@ exports[`appended filtes should be present in history 4`] = `
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -162,7 +169,7 @@ exports[`appended filtes should be present in history 4`] = `
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -175,7 +182,9 @@ exports[`appended filtes should be present in history 4`] = `
<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
@@ -197,7 +206,7 @@ exports[`appended filtes should be present in history 5`] = `
<span class=\\"rawFilter hidden\\">
default,bar,@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -223,7 +232,7 @@ exports[`appended filtes should be present in history 5`] = `
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -245,7 +254,7 @@ exports[`appended filtes should be present in history 5`] = `
<span class=\\"rawFilter hidden\\">
default
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -258,7 +267,9 @@ exports[`appended filtes should be present in history 5`] = `
<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
@@ -280,7 +291,7 @@ exports[`appended filtes should be present in history 6`] = `
<span class=\\"rawFilter hidden\\">
@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
@state=active
@@ -298,7 +309,7 @@ exports[`appended filtes should be present in history 6`] = `
<span class=\\"rawFilter hidden\\">
default,bar,@state=active
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -324,7 +335,7 @@ exports[`appended filtes should be present in history 6`] = `
<span class=\\"rawFilter hidden\\">
default,bar
</span>
<i class=\\"fa fa-circle-o transparent\\"></i>
<i class=\\"fa fa-search\\"></i>
<span class=\\"label-list label label-info\\">
default
@@ -341,7 +352,9 @@ exports[`appended filtes should be present in history 6`] = `
<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
@@ -358,7 +371,10 @@ exports[`appended filtes should be present in history 6`] = `
`;
exports[`default filter should be in history after setting filter to foo 1`] = `
"<li class=\\"history-menu\\">
"<li role=\\"separator\\" class=\\"divider\\"></li>
<li class=\\"history-menu\\">
<a class=\\"cursor-pointer history-menu-item\\">
<span class=\\"rawFilter hidden\\">
default

View File

@@ -501,10 +501,6 @@ a[aria-expanded=false] .fa-chevron-down {
margin-bottom: 4px;
}
.transparent {
opacity: 0;
}
li.history-menu > a.history-menu-item {
padding-left: 10px;
padding-right: 4px;

View File

@@ -110,7 +110,7 @@ function appendFilterToHistory(text) {
}
// truncate the history to up to 11 elements
const filterListTrunc = Array.from(filterList).slice(0, 11);
const filterListTrunc = Array.from(filterList).slice(0, 10);
historyStorage.setItem(historyKey, filterListTrunc.join("\n"));
}

View File

@@ -2,15 +2,18 @@
<% if (filters.length) { %>
<% _.each(filters, function(filter) { %>
<% if (filter !== activeFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: filter, icon: "fa fa-circle-o transparent"}) %>
<%= renderTemplate("historyMenuItem", {filter: filter, icon: "fa fa-search"}) %>
<% } %>
<% }) %>
<% } %>
<% if (defaultFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: defaultFilter, icon: "fa fa-home"}) %>
<% } %>
<% if (savedFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: savedFilter, icon: "fa fa-floppy-o"}) %>
<% if (defaultFilter || savedFilter) { %>
<li role="separator" class="divider"></li>
<% if (defaultFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: defaultFilter, icon: "fa fa-home"}) %>
<% } %>
<% if (savedFilter) { %>
<%= renderTemplate("historyMenuItem", {filter: savedFilter, icon: "fa fa-floppy-o"}) %>
<% } %>
<% } %>
</script>