diff --git a/ui/v2.5/src/components/List/FilterTags.tsx b/ui/v2.5/src/components/List/FilterTags.tsx index 6812edcf7..8d9b24e40 100644 --- a/ui/v2.5/src/components/List/FilterTags.tsx +++ b/ui/v2.5/src/components/List/FilterTags.tsx @@ -9,37 +9,31 @@ import { Badge, BadgeProps, Button, Overlay, Popover } from "react-bootstrap"; import { Criterion } from "src/models/list-filter/criteria/criterion"; import { FormattedMessage, useIntl } from "react-intl"; import { Icon } from "../Shared/Icon"; -import { faMagnifyingGlass, faTimes } from "@fortawesome/free-solid-svg-icons"; +import { faTimes } from "@fortawesome/free-solid-svg-icons"; import { BsPrefixProps, ReplaceProps } from "react-bootstrap/esm/helpers"; import { CustomFieldsCriterion } from "src/models/list-filter/criteria/custom-fields"; import { useDebounce } from "src/hooks/debounce"; -import cx from "classnames"; type TagItemProps = PropsWithChildren< ReplaceProps<"span", BsPrefixProps<"span"> & BadgeProps> >; export const TagItem: React.FC = (props) => { - const { className, children, ...others } = props; + const { children } = props; return ( - + {children} ); }; export const FilterTag: React.FC<{ - className?: string; label: React.ReactNode; onClick: React.MouseEventHandler; onRemove: React.MouseEventHandler; -}> = ({ className, label, onClick, onRemove }) => { +}> = ({ label, onClick, onRemove }) => { return ( - + {label} + )} + ); } - const visibleCriteria = cutoff ? filterTags.slice(0, cutoff) : filterTags; - const hiddenCriteria = cutoff ? filterTags.slice(cutoff) : []; - return (
- {visibleCriteria} - - {filterTags.length >= 3 && ( + {filterTags} + {criteria.length >= 3 && (
@@ -533,9 +520,6 @@ export const FilteredSceneList = (props: IFilteredScenes) => { const intl = useIntl(); const history = useHistory(); - const searchFocus = useFocus(); - const [, setSearchFocus] = searchFocus; - const { filterHook, defaultSort, view, alterQuery, fromGroupId } = props; // States @@ -790,7 +774,6 @@ export const FilteredSceneList = (props: IFilteredScenes) => { sidebarOpen={showSidebar} onClose={() => setShowSidebar(false)} count={cachedResult.loading ? undefined : totalCount} - focus={searchFocus} />
@@ -800,7 +783,6 @@ export const FilteredSceneList = (props: IFilteredScenes) => { })} > { onToggleSidebar={() => setShowSidebar(!showSidebar)} onEditCriterion={(c) => showEditFilter(c.criterionOption.type)} onRemoveCriterion={removeCriterion} - onRemoveAllCriterion={() => clearAllCriteria(true)} - onEditSearchTerm={() => { - setShowSidebar(true); - setSearchFocus(true); - }} - onRemoveSearchTerm={() => setFilter(filter.clearSearchTerm())} + onRemoveAllCriterion={() => clearAllCriteria()} onSelectAll={() => onSelectAll()} onSelectNone={() => onSelectNone()} onEdit={onEdit} diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index fb4d82a1c..c013b852a 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -698,10 +698,8 @@ div.dropdown-menu { } .tag-item { - align-items: center; background-color: $muted-gray; color: $dark-text; - display: flex; font-size: 12px; font-weight: 400; line-height: 16px; @@ -712,20 +710,17 @@ div.dropdown-menu { cursor: pointer; } - .search-term svg { - margin-left: 0; - } - .btn { background: none; border: none; bottom: 2px; color: $dark-text; font-size: 12px; - line-height: 16px; + line-height: 1rem; margin-right: -0.5rem; opacity: 0.5; padding: 0 0.5rem; + position: relative; &:active, &:hover { diff --git a/ui/v2.5/src/models/list-filter/filter.ts b/ui/v2.5/src/models/list-filter/filter.ts index 2a68cd6a2..ac9d9de1e 100644 --- a/ui/v2.5/src/models/list-filter/filter.ts +++ b/ui/v2.5/src/models/list-filter/filter.ts @@ -476,23 +476,13 @@ export class ListFilterModel { return this.setCriteria(criteria); } - public clearCriteria(clearSearchTerm = false) { + public clearCriteria() { const ret = this.clone(); - if (clearSearchTerm) { - ret.searchTerm = ""; - } ret.criteria = []; ret.currentPage = 1; return ret; } - public clearSearchTerm() { - const ret = this.clone(); - ret.searchTerm = ""; - ret.currentPage = 1; // reset to first page - return ret; - } - public setCriteria(criteria: Criterion[]) { const ret = this.clone(); ret.criteria = criteria; diff --git a/ui/v2.5/src/utils/focus.ts b/ui/v2.5/src/utils/focus.ts index cf1b20a88..f1ede47f9 100644 --- a/ui/v2.5/src/utils/focus.ts +++ b/ui/v2.5/src/utils/focus.ts @@ -2,14 +2,10 @@ import { useRef, useEffect, useCallback } from "react"; const useFocus = () => { const htmlElRef = useRef(null); - const setFocus = useCallback((selectAll?: boolean) => { + const setFocus = useCallback(() => { const currentEl = htmlElRef.current; if (currentEl) { - if (selectAll) { - currentEl.select(); - } else { - currentEl.focus(); - } + currentEl.focus(); } }, []);