diff --git a/app/assets/stylesheets/item-list.scss b/app/assets/stylesheets/item-list.scss index a68eae750..82d2a27bf 100644 --- a/app/assets/stylesheets/item-list.scss +++ b/app/assets/stylesheets/item-list.scss @@ -37,6 +37,25 @@ @include themeable(color, theme-color, $black); } + .filters-header { + display: flex; + justify-content: space-between; + padding: 10px 5px; + .filters-header-text { + font-size: 0.9em; + font-family: $monospace; + text-decoration: underline; + @include themeable(color, theme-secondary-color, $medium-gray); + } + .filters-header-action { + font-size: 0.8em; + background: none; + border: none; + text-decoration: underline; + @include themeable(color, theme-color, $blue); + } + } + .tags { .tag { padding: 5px 0px; @@ -214,7 +233,6 @@ margin-bottom: -15px; .filters { - height: 85px; min-height: 85px; .tags { diff --git a/app/javascript/readingList/__tests__/__snapshots__/readingList.test.jsx.snap b/app/javascript/readingList/__tests__/__snapshots__/readingList.test.jsx.snap index 72232a18d..d509bc877 100644 --- a/app/javascript/readingList/__tests__/__snapshots__/readingList.test.jsx.snap +++ b/app/javascript/readingList/__tests__/__snapshots__/readingList.test.jsx.snap @@ -14,6 +14,15 @@ exports[` renders properly 1`] = ` onKeyUp={[Function]} placeHolder="search your list" /> +
+

+ my tags +

+
diff --git a/app/javascript/readingList/readingList.jsx b/app/javascript/readingList/readingList.jsx index 688d769f9..32faf31e1 100644 --- a/app/javascript/readingList/readingList.jsx +++ b/app/javascript/readingList/readingList.jsx @@ -9,6 +9,7 @@ import { performInitialSearch, search, toggleTag, + clearSelectedTags, } from '../searchableItemList/searchableItemList'; import { ItemListItem } from '../src/components/ItemList/ItemListItem'; import { ItemListItemArchiveButton } from '../src/components/ItemList/ItemListItemArchiveButton'; @@ -45,6 +46,7 @@ export class ReadingList extends Component { this.performInitialSearch = performInitialSearch.bind(this); this.search = search.bind(this); this.toggleTag = toggleTag.bind(this); + this.clearSelectedTags = clearSelectedTags.bind(this); } componentDidMount() { @@ -198,7 +200,23 @@ export class ReadingList extends Component { onKeyUp={this.onSearchBoxType} placeHolder="search your list" /> - +
+

my tags

+ {Boolean(selectedTags.length) && ( + + clear all + + )} +