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

@@ -179,7 +179,7 @@ export const FilterTags: React.FC<IFilterTagsProps> = ({
         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<IFilterTagsProps> = ({
     );
   }
 
-  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 (
     <div className={className} ref={ref}>

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 = (
+    <Button
+      className="minimal sidebar-toggle-button ignore-sidebar-outside-click"
+      variant="secondary"
+      onClick={() => onToggleSidebar()}
+      title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
+    >
+      <Icon icon={faSliders} />
+    </Button>
+  );
+
   return (
     <>
       {!hasSelection && (
@@ -390,9 +402,8 @@ const ListToolbarContent: React.FC<{
           </div>
           <div className="filter-section">
             <FilterButton
-              onClick={() => onToggleSidebar()}
+              onClick={() => onEditCriterion()}
               count={criteria.length}
-              title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
             />
             <FilterTags
               searchTerm={searchTerm}
@@ -404,6 +415,7 @@ const ListToolbarContent: React.FC<{
               onRemoveSearchTerm={onRemoveSearchTerm}
               truncateOnOverflow
             />
+            {sidebarToggle}
           </div>
         </>
       )}
@@ -421,6 +433,7 @@ const ListToolbarContent: React.FC<{
           <Button variant="link" onClick={() => onSelectAll()}>
             <FormattedMessage id="actions.select_all" />
           </Button>
+          {sidebarToggle}
         </div>
       )}
       <div>
@@ -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={() => {

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 {