From 823ed346c1e47673b79ee0f653cf5d74638eab0f Mon Sep 17 00:00:00 2001 From: WithoutPants <53250216+WithoutPants@users.noreply.github.com> Date: Wed, 24 Sep 2025 11:27:08 +1000 Subject: [PATCH] Add separate sidebar toggle button (#6077) * Move sidebar toggle to right. Change icon * Show sidebar button on selection * Fix clicking toggle cycling visibility on smaller views * Show more tags component when cutoff == 0 * Hide filter/filter icon buttons in certain situations * Move sidebar toggle to left on xl viewports --- ui/v2.5/src/components/List/FilterTags.tsx | 7 +-- ui/v2.5/src/components/Scenes/SceneList.tsx | 21 ++++++-- ui/v2.5/src/components/Scenes/styles.scss | 53 ++++++++++++++++++--- 3 files changed, 67 insertions(+), 14 deletions(-) diff --git a/ui/v2.5/src/components/List/FilterTags.tsx b/ui/v2.5/src/components/List/FilterTags.tsx index 6812edcf7..0e4259838 100644 --- a/ui/v2.5/src/components/List/FilterTags.tsx +++ b/ui/v2.5/src/components/List/FilterTags.tsx @@ -179,7 +179,7 @@ export const FilterTags: React.FC = ({ return (child as HTMLElement).classList.contains("more-tags"); }); - if (moreTags && !!cutoff) { + if (moreTags && cutoff !== undefined) { return; } @@ -302,8 +302,9 @@ export const FilterTags: React.FC = ({ ); } - const visibleCriteria = cutoff ? filterTags.slice(0, cutoff) : filterTags; - const hiddenCriteria = cutoff ? filterTags.slice(cutoff) : []; + const visibleCriteria = + cutoff !== undefined ? filterTags.slice(0, cutoff) : filterTags; + const hiddenCriteria = cutoff !== undefined ? filterTags.slice(cutoff) : []; return (
diff --git a/ui/v2.5/src/components/Scenes/SceneList.tsx b/ui/v2.5/src/components/Scenes/SceneList.tsx index 8956fd730..6e8832105 100644 --- a/ui/v2.5/src/components/Scenes/SceneList.tsx +++ b/ui/v2.5/src/components/Scenes/SceneList.tsx @@ -23,6 +23,7 @@ import { faPencil, faPlay, faPlus, + faSliders, faTimes, faTrash, } from "@fortawesome/free-solid-svg-icons"; @@ -346,7 +347,7 @@ const ListToolbarContent: React.FC<{ operations: IOperations[]; onToggleSidebar: () => void; onSetFilter: (filter: ListFilterModel) => void; - onEditCriterion: (c: Criterion) => void; + onEditCriterion: (c?: Criterion) => void; onRemoveCriterion: (criterion: Criterion, valueIndex?: number) => void; onRemoveAllCriterion: () => void; onEditSearchTerm: () => void; @@ -381,6 +382,17 @@ const ListToolbarContent: React.FC<{ const { criteria, searchTerm } = filter; const hasSelection = selectedIds.size > 0; + const sidebarToggle = ( + + ); + return ( <> {!hasSelection && ( @@ -390,9 +402,8 @@ const ListToolbarContent: React.FC<{
onToggleSidebar()} + onClick={() => onEditCriterion()} count={criteria.length} - title={intl.formatMessage({ id: "actions.sidebar.toggle" })} /> + {sidebarToggle}
)} @@ -421,6 +433,7 @@ const ListToolbarContent: React.FC<{ + {sidebarToggle} )}
@@ -822,7 +835,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => { selectedIds={selectedIds} operations={otherOperations} onToggleSidebar={() => setShowSidebar(!showSidebar)} - onEditCriterion={(c) => showEditFilter(c.criterionOption.type)} + onEditCriterion={(c) => showEditFilter(c?.criterionOption.type)} onRemoveCriterion={removeCriterion} onRemoveAllCriterion={() => clearAllCriteria(true)} onEditSearchTerm={() => { diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss index 09b8d5ea7..2259eab41 100644 --- a/ui/v2.5/src/components/Scenes/styles.scss +++ b/ui/v2.5/src/components/Scenes/styles.scss @@ -942,11 +942,6 @@ input[type="range"].blue-slider { transition-property: opacity; } -.scene-list:not(.hide-sidebar) .sidebar-toggle-button { - opacity: 0; - pointer-events: none; -} - .scene-wall, .marker-wall { .wall-item { @@ -1063,11 +1058,17 @@ input[type="range"].blue-slider { } } + .selected-items-info, > div.filter-section { border: 1px solid $secondary; border-radius: 0.25rem; flex-grow: 1; overflow-x: hidden; + } + + > div.filter-toolbar { + border: 1px solid $secondary; + border-radius: 0.25rem; .filter-button { border-bottom-right-radius: 0; @@ -1075,12 +1076,16 @@ input[type="range"].blue-slider { } } + .sidebar-toggle-button { + margin-left: auto; + } + .search-container { border-right: 1px solid $secondary; display: block; margin-right: -0.5rem; + min-width: calc($sidebar-width - 15px); padding-right: 10px; - width: calc($sidebar-width - 15px); .search-term-input { margin-right: 0; @@ -1097,7 +1102,9 @@ input[type="range"].blue-slider { flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 0; - width: calc(100% - 35px - 0.5rem); + + // account for filter button, and toggle sidebar buttons with gaps + width: calc(100% - 70px - 1rem); @include media-breakpoint-down(xs) { overflow-x: auto; @@ -1121,6 +1128,38 @@ input[type="range"].blue-slider { } } +// hide Edit Filter button on larger screens +@include media-breakpoint-up(lg) { + .scene-list .sidebar .edit-filter-button { + display: none; + } +} + +// hide the filter icon button when sidebar is shown on smaller screens +@include media-breakpoint-down(md) { + .sidebar-pane:not(.hide-sidebar) .scene-list-toolbar .filter-button { + display: none; + } + + // adjust the width of the filter-tags as well + .sidebar-pane:not(.hide-sidebar) .scene-list-toolbar .filter-tags { + width: calc(100% - 35px - 0.5rem); + } +} + +// move the sidebar toggle to the left on xl viewports +@include media-breakpoint-up(xl) { + .scene-list .scene-list-toolbar .filter-section { + .sidebar-toggle-button { + margin-left: 0; + } + + .filter-tags { + order: 2; + } + } +} + // hide the search term tag item when the search box is visible @include media-breakpoint-up(lg) { .scene-list-toolbar .filter-tags .search-term-filter-tag {