Merge pull request #10 from oarepo/new-clear-filters-layout

New clear filters layout
oarepo · Jun 18, 2024 · 5faf58e · 5faf58e
2 parents 24c97b1 + 3c32727
commit 5faf58e
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 44 deletions.
diff --git a/...o_dashboard/ui/dashboard_communities/semantic-ui/js/dashboard_communities/search/index.js b/...o_dashboard/ui/dashboard_communities/semantic-ui/js/dashboard_communities/search/index.js
@@ -63,7 +63,6 @@ export const componentOverrides = {
   [`${overridableIdPrefix}.EmptyResults.element`]:
     CommunitiesEmptySearchResults,
   [`${overridableIdPrefix}.ResultsList.item`]: UserDashboardCommunitiesListItem,
-  // [`${overridableIdPrefix}.SearchApp.facets`]: ContribSearchAppFacetsWithConfig,
   [`${overridableIdPrefix}.SearchApp.results`]:
     UserDashboardSearchAppResultViewWAppName,
   [`${overridableIdPrefix}.SearchBar.element`]: SearchappSearchbarElement,

diff --git a/...rd_components/semantic-ui/js/dashboard_components/search/UserDashboardSearchAppLayout.jsx b/...rd_components/semantic-ui/js/dashboard_components/search/UserDashboardSearchAppLayout.jsx
@@ -15,12 +15,13 @@ import { i18next } from "@translations/oarepo_dashboard";
 import React, { useContext } from "react";
 import { SearchBar, ActiveFilters } from "react-searchkit";
 import { GridResponsiveSidebarColumn } from "react-invenio-forms";
-import { Grid, Button, Container } from "semantic-ui-react";
+import { Grid, Button, Container, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import {
   SearchAppFacets,
   ClearFiltersButton,
   ShouldActiveFiltersRender,
+  ActiveFiltersCountFloatingLabel,
 } from "@js/oarepo_ui";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Overridable from "react-overridable";
@@ -47,6 +48,13 @@ export const UserDashboardSearchAppLayoutHOC = ({
               open={sidebarVisible}
               onHideClick={() => setSidebarVisible(false)}
             >
+              <ShouldActiveFiltersRender>
+                <Overridable id={buildUID("ClearFiltersButton.container")}>
+                  <ClearFiltersButton
+                    className={"clear-filters-button mobile tablet only"}
+                  />
+                </Overridable>
+              </ShouldActiveFiltersRender>
               <SearchAppFacets aggs={config.aggs} appName={appName} />
             </GridResponsiveSidebarColumn>
             <Grid.Column computer={12} mobile={16} tablet={16}>
@@ -67,10 +75,16 @@ export const UserDashboardSearchAppLayoutHOC = ({
                 <Grid.Column only="mobile tablet" mobile={2} tablet={2}>
                   <Button
                     basic
-                    icon="sliders"
                     onClick={() => setSidebarVisible(true)}
+                    title={i18next.t("Filter results")}
                     aria-label={i18next.t("Filter results")}
-                  />
+                    className="facets-sidebar-open-button"
+                  >
+                    <Icon name="filter"></Icon>
+                    <ShouldActiveFiltersRender>
+                      <ActiveFiltersCountFloatingLabel />
+                    </ShouldActiveFiltersRender>
+                  </Button>
                 </Grid.Column>
                 <Grid.Column
                   only="mobile tablet"
@@ -90,15 +104,6 @@ export const UserDashboardSearchAppLayoutHOC = ({
                     {mobileOnlyExtraRow()}
                   </Grid.Row>
                 )}
-                <ShouldActiveFiltersRender>
-                  <Overridable id={buildUID("ClearFiltersButton.container")}>
-                    <Grid.Row only="mobile tablet">
-                      <Grid.Column>
-                        <ClearFiltersButton />
-                      </Grid.Column>
-                    </Grid.Row>
-                  </Overridable>
-                </ShouldActiveFiltersRender>
                 <Grid.Row>
                   <Grid.Column mobile={16} tablet={16} computer={16}>
                     <SearchAppResultsPane

diff --git a/...rd_components/semantic-ui/less/oarepo_dashboard/themes/default/collections/grid.variables b/...rd_components/semantic-ui/less/oarepo_dashboard/themes/default/collections/grid.variables
@@ -1 +1 @@
-@dashboardSortCountBackgroundColor: #cbe1bf6b;
+@dashboardSortCountBackgroundColor: rgba(242, 242, 242);
diff --git a/oarepo_dashboard/ui/dashboard_records/semantic-ui/js/dashboard_records/search/index.js b/oarepo_dashboard/ui/dashboard_records/semantic-ui/js/dashboard_records/search/index.js
@@ -11,8 +11,6 @@ import {
   parseSearchAppConfigs,
   SearchappSearchbarElement,
   DynamicResultsListItem,
-  ClearFiltersButton,
-  ShouldActiveFiltersRender,
 } from "@js/oarepo_ui";
 import PropTypes from "prop-types";
 
@@ -38,24 +36,17 @@ const CreateNewDraftButton = ({ dashboardRecordsCreateUrl }) => {
     );
   return (
     can_create && (
-      <React.Fragment>
-        <Grid.Column only="mobile tablet">
-          <ShouldActiveFiltersRender>
-            <ClearFiltersButton />
-          </ShouldActiveFiltersRender>
-        </Grid.Column>
-        <Grid.Column textAlign="right">
-          <Button
-            as="a"
-            href={dashboardRecordsCreateUrl}
-            type="button"
-            labelPosition="left"
-            icon="plus"
-            content={i18next.t("Create new draft")}
-            primary
-          />
-        </Grid.Column>
-      </React.Fragment>
+      <Grid.Column textAlign="right">
+        <Button
+          as="a"
+          href={dashboardRecordsCreateUrl}
+          type="button"
+          labelPosition="left"
+          icon="plus"
+          content={i18next.t("Create new draft")}
+          primary
+        />
+      </Grid.Column>
     )
   );
 };
@@ -78,7 +69,6 @@ export const componentOverrides = {
   [`${overridableIdPrefix}.SearchApp.results`]:
     UserDashboardSearchAppResultViewWAppName,
   [`${overridableIdPrefix}.SearchApp.layout`]: DashboardUploadsSearchLayout,
-  [`${overridableIdPrefix}.ClearFiltersButton.container`]: () => null,
 };
 
 createSearchAppsInit({ componentOverrides });
diff --git a/oarepo_dashboard/ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/index.js b/oarepo_dashboard/ui/dashboard_requests/semantic-ui/js/dashboard_requests/search/index.js
@@ -7,7 +7,6 @@ import {
   SearchappSearchbarElement,
   ActiveFiltersElement,
   ClearFiltersButton,
-  ShouldActiveFiltersRender,
 } from "@js/oarepo_ui";
 import { withState } from "react-searchkit";
 import {
@@ -33,8 +32,7 @@ export function RequestsResultsItemTemplateDashboard({ result }) {
     ComputerTabletRequestsListItem
   );
   const MobileRequestsItemWithState = withState(MobileRequestsListItem);
-  // TODO: remove docs dependency
-  const detailPageUrl = `/docs/${result?.topic?.reference?.documents}`;
+  const detailPageUrl = result?.links?.self_html;
   return (
     <>
       <ComputerTabletRequestsItemWithState
@@ -65,11 +63,6 @@ export const FacetButtons = () => (
     <Grid.Column only="mobile tablet" textAlign="left">
       <RequestStatusFilter keepFiltersOnUpdate />
     </Grid.Column>
-    <ShouldActiveFiltersRender>
-      <Grid.Column only="mobile tablet" textAlign="center">
-        <ClearFiltersButtonWIgnoredFilters />
-      </Grid.Column>
-    </ShouldActiveFiltersRender>
     <Grid.Column only="mobile tablet" textAlign="right">
       <FacetsButtonGroupNameToggler
         basic
@@ -112,6 +105,9 @@ export const componentOverrides = {
     UserDashboardSearchAppResultViewWAppName,
   [`${overridableIdPrefix}.SearchBar.element`]: SearchappSearchbarElement,
   [`${overridableIdPrefix}.SearchApp.layout`]: DashboardUploadsSearchLayout,
+  [`${overridableIdPrefix}.ClearFiltersButton.container`]:
+    ClearFiltersButtonWIgnoredFilters,
+
   // from invenio requests in case we have some overlapping request types
   ...defaultContribComponents,
   // our request type specific components (icons, labels, etc.)

diff --git a/setup.cfg b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name = oarepo-dashboard
-version = 1.0.7
+version = 1.0.8
 description = Support for user dashboard (records, communities, requests)
 authors = Mirek Simek <[email protected]>
 readme = README.md
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@dashboardSortCountBackgroundColor: #cbe1bf6b;
		@dashboardSortCountBackgroundColor: rgba(242, 242, 242);