diff --git a/ui/v2.5/src/components/List/Filters/FilterSidebar.tsx b/ui/v2.5/src/components/List/Filters/FilterSidebar.tsx index 0ff201f86..8f76c83e2 100644 --- a/ui/v2.5/src/components/List/Filters/FilterSidebar.tsx +++ b/ui/v2.5/src/components/List/Filters/FilterSidebar.tsx @@ -68,20 +68,6 @@ export function useFilteredSidebarKeybinds(props: { }) { const { showSidebar, setShowSidebar } = props; - // Show the sidebar when the user presses the "/" key - useEffect(() => { - Mousetrap.bind("/", (e) => { - if (!showSidebar) { - setShowSidebar(true); - e.preventDefault(); - } - }); - - return () => { - Mousetrap.unbind("/"); - }; - }, [showSidebar, setShowSidebar]); - // Hide the sidebar when the user presses the "Esc" key useEffect(() => { Mousetrap.bind("esc", (e) => { diff --git a/ui/v2.5/src/components/Scenes/SceneList.tsx b/ui/v2.5/src/components/Scenes/SceneList.tsx index a59d2c395..07fc04119 100644 --- a/ui/v2.5/src/components/Scenes/SceneList.tsx +++ b/ui/v2.5/src/components/Scenes/SceneList.tsx @@ -61,7 +61,11 @@ import { Button, ButtonGroup, ButtonToolbar } from "react-bootstrap"; import { FilterButton } from "../List/Filters/FilterButton"; import { Icon } from "../Shared/Icon"; import { ListViewOptions } from "../List/ListViewOptions"; -import { PageSizeSelector, SortBySelect } from "../List/ListFilter"; +import { + PageSizeSelector, + SearchTermInput, + SortBySelect, +} from "../List/ListFilter"; import { Criterion } from "src/models/list-filter/criteria/criterion"; function renderMetadataByline(result: GQL.FindScenesQueryResult) { @@ -332,11 +336,12 @@ interface IOperations { } const ListToolbarContent: React.FC<{ - criteria: Criterion[]; + filter: ListFilterModel; items: GQL.SlimSceneDataFragment[]; selectedIds: Set; operations: IOperations[]; onToggleSidebar: () => void; + onSetFilter: (filter: ListFilterModel) => void; onEditCriterion: (c: Criterion) => void; onRemoveCriterion: (criterion: Criterion, valueIndex?: number) => void; onRemoveAllCriterion: () => void; @@ -347,11 +352,12 @@ const ListToolbarContent: React.FC<{ onPlay: () => void; onCreateNew: () => void; }> = ({ - criteria, + filter, items, selectedIds, operations, onToggleSidebar, + onSetFilter, onEditCriterion, onRemoveCriterion, onRemoveAllCriterion, @@ -364,25 +370,31 @@ const ListToolbarContent: React.FC<{ }) => { const intl = useIntl(); + const { criteria } = filter; const hasSelection = selectedIds.size > 0; return ( <> {!hasSelection && ( -
- onToggleSidebar()} - count={criteria.length} - title={intl.formatMessage({ id: "actions.sidebar.toggle" })} - /> - -
+ <> +
+ +
+
+ onToggleSidebar()} + count={criteria.length} + title={intl.formatMessage({ id: "actions.sidebar.toggle" })} + /> + +
+ )} {hasSelection && (
@@ -789,7 +801,8 @@ export const FilteredSceneList = (props: IFilteredScenes) => { })} > div:first-child { + > div.filter-section { border: 1px solid $secondary; border-radius: 0.25rem; flex-grow: 1; @@ -1075,6 +1075,23 @@ input[type="range"].blue-slider { } } + .search-container { + border-right: 1px solid $secondary; + display: block; + margin-right: -0.5rem; + padding-right: 10px; + width: calc($sidebar-width - 15px); + + .search-term-input { + margin-right: 0; + width: 100%; + + .clearable-text-field { + height: 100%; + } + } + } + .filter-tags { flex-grow: 1; flex-wrap: nowrap; @@ -1093,6 +1110,17 @@ input[type="range"].blue-slider { } } +@include media-breakpoint-up(xl) { + .sidebar-pane:not(.hide-sidebar) .scene-list-toolbar .search-container { + display: none; + } +} +@include media-breakpoint-down(md) { + .sidebar-pane.hide-sidebar .scene-list-toolbar .search-container { + display: none; + } +} + .scene-list-header { flex-wrap: wrap-reverse; gap: 0.5rem; diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss index 10e381bd8..881018566 100644 --- a/ui/v2.5/src/components/Shared/styles.scss +++ b/ui/v2.5/src/components/Shared/styles.scss @@ -755,8 +755,6 @@ button.btn.favorite-button { } } -$sidebar-width: 250px; - .sidebar-pane { display: flex; diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index d73cd3b2a..50768d1df 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -5,6 +5,8 @@ $navbar-height: 48.75px; $sticky-detail-header-height: 50px; +$sidebar-width: 250px; + @import "styles/theme"; @import "styles/range"; @import "styles/scrollbars";