user dashboard: align community search page with main com search page

inveniosoftware · Aug 7, 2023 · 607551c · 607551c
1 parent 554c5c9
commit 607551c
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 119 deletions.
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/base.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/base.js
@@ -14,9 +14,9 @@ import {
 } from "@js/invenio_search_ui/components";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import React from "react";
-import { Count, ResultsList, SearchBar, Sort, buildUID } from "react-searchkit";
+import { ResultsList, SearchBar, Sort, buildUID } from "react-searchkit";
 import { GridResponsiveSidebarColumn } from "react-invenio-forms";
-import { Grid, Segment, Button } from "semantic-ui-react";
+import { Grid, Button } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import Overridable from "react-overridable";
 
@@ -26,72 +26,31 @@ export function DashboardResultView(props) {
   return (
     total && (
       <Grid>
-        <Grid.Row>
-          <Grid.Column width={16}>
-            <Segment>
-              <Grid>
-                <Overridable
-                  id={buildUID("ResultView.resultHeader", "", appName)}
-                  sortOptions={sortOptions}
-                  paginationOptions={paginationOptions}
-                  currentResultsState={currentResultsState}
-                  appName={appName}
-                >
-                  <Grid.Row
-                    verticalAlign="middle"
-                    className="small pt-5 pb-5 highlight-background"
-                  >
-                    <Grid.Column width={4}>
-                      <Count
-                        label={() => (
-                          <>
-                            {i18next.t("{{count}} results found", {
-                              count: total,
-                            })}
-                          </>
-                        )}
-                      />
-                    </Grid.Column>
-                    <Grid.Column width={12} textAlign="right" className="padding-r-5">
-                      {sortOptions && (
-                        <Sort
-                          values={sortOptions}
-                          label={(cmp) => (
-                            <>
-                              <label className="mr-10">{i18next.t("Sort by")}</label>
-                              {cmp}
-                            </>
-                          )}
-                        />
-                      )}
-                    </Grid.Column>
-                  </Grid.Row>
-                </Overridable>
-                <Overridable
-                  id={buildUID("ResultView.resultList", "", appName)}
-                  sortOptions={sortOptions}
-                  paginationOptions={paginationOptions}
-                  currentResultsState={currentResultsState}
-                  appName={appName}
-                >
-                  <Grid.Row>
-                    <Grid.Column>
-                      <ResultsList />
-                    </Grid.Column>
-                  </Grid.Row>
-                </Overridable>
-              </Grid>
-            </Segment>
-          </Grid.Column>
-        </Grid.Row>
+        <Overridable
+          id={buildUID("ResultView.resultList", "", appName)}
+          sortOptions={sortOptions}
+          paginationOptions={paginationOptions}
+          currentResultsState={currentResultsState}
+          appName={appName}
+        >
+          <Grid.Row>
+            <Grid.Column>
+              <ResultsList />
+            </Grid.Column>
+          </Grid.Row>
+        </Overridable>
+
         <Overridable
           id={buildUID("ResultView.resultFooter", "", appName)}
           sortOptions={sortOptions}
           paginationOptions={paginationOptions}
           currentResultsState={currentResultsState}
           appName={appName}
         >
-          <InvenioSearchPagination paginationOptions={paginationOptions} />
+          <InvenioSearchPagination
+            total={total}
+            paginationOptions={paginationOptions}
+          />
         </Overridable>
       </Grid>
     )
@@ -111,7 +70,6 @@ DashboardResultView.defaultProps = {
 
 export const DashboardSearchLayoutHOC = ({
   searchBarPlaceholder = "",
-  newBtn = () => null,
   appName = undefined,
 }) => {
   const DashboardUploadsSearchLayout = (props) => {
@@ -120,22 +78,72 @@ export const DashboardSearchLayoutHOC = ({
 
     return (
       <Grid>
-        <Grid.Column only="mobile tablet" mobile={2} tablet={1}>
-          <Button
-            basic
-            icon="sliders"
-            onClick={() => setSidebarVisible(true)}
-            aria-label={i18next.t("Filter results")}
-          />
-        </Grid.Column>
+        <Overridable
+          id={buildUID("SearchLayout.searchHeader", "", appName)}
+          sortOptions={config.sortOptions}
+          appName={appName}
+        >
+          <>
+            {/* Mobile/tablet search header */}
+            <Grid.Row className="mobile tablet only">
+              <Grid.Column mobile={2} tablet={1} verticalAlign="middle">
+                <Button
+                  basic
+                  icon="sliders"
+                  onClick={() => setSidebarVisible(true)}
+                  aria-label={i18next.t("Filter results")}
+                />
+              </Grid.Column>
+              <Grid.Column
+                mobile={14}
+                tablet={10}
+                verticalAlign="middle"
+                floated="right"
+              >
+                <SearchBar placeholder={searchBarPlaceholder} />
+              </Grid.Column>
+            </Grid.Row>
 
-        <Grid.Column mobile={14} tablet={10} computer={8} floated="right">
-          <SearchBar placeholder={searchBarPlaceholder} />
-        </Grid.Column>
+            <Grid.Row className="mobile tablet only">
+              <Grid.Column width={16} textAlign="right">
+                {config.sortOptions && (
+                  <Sort
+                    values={config.sortOptions}
+                    label={(cmp) => (
+                      <>
+                        <label className="mr-10">{i18next.t("Sort by")}</label>
+                        {cmp}
+                      </>
+                    )}
+                  />
+                )}
+              </Grid.Column>
+            </Grid.Row>
+            {/* End mobile/tablet search header */}
 
-        <Grid.Column mobile={16} tablet={5} computer={4} align="right">
-          {newBtn}
-        </Grid.Column>
+            {/* Desktop search header */}
+            <Grid.Row className="computer only">
+              <Grid.Column width={8} floated="right">
+                <SearchBar placeholder={searchBarPlaceholder} />
+              </Grid.Column>
+
+              <Grid.Column width={4} textAlign="right">
+                {config.sortOptions && (
+                  <Sort
+                    values={config.sortOptions}
+                    label={(cmp) => (
+                      <>
+                        <label className="mr-10">{i18next.t("Sort by")}</label>
+                        {cmp}
+                      </>
+                    )}
+                  />
+                )}
+              </Grid.Column>
+            </Grid.Row>
+            {/* End desktop search header */}
+          </>
+        </Overridable>
 
         <Grid.Row>
           <GridResponsiveSidebarColumn

diff --git a/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities.js b/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities.js
@@ -10,7 +10,6 @@
 import { createSearchAppInit } from "@js/invenio_search_ui";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import React from "react";
-import { Button } from "semantic-ui-react";
 import {
   CommunityItem,
   ResultsGridItemTemplate,
@@ -26,20 +25,9 @@ import {
 import { overrideStore, parametrize } from "react-overridable";
 
 export const appName = "InvenioAppRdm.DashboardCommunities";
-const searchAppDiv = document.getElementById("invenio-search-config");
-const canCreateCommunity = JSON.parse(searchAppDiv.dataset.canCreateCommunity);
 
 export const DashboardCommunitiesSearchLayout = DashboardSearchLayoutHOC({
   searchBarPlaceholder: i18next.t("Search in my communities..."),
-  newBtn: canCreateCommunity && (
-    <Button
-      positive
-      icon="upload"
-      href="/communities/new"
-      content={i18next.t("New community")}
-      floated="right"
-    />
-  ),
   appName: appName,
 });
 

diff --git a/invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/elements/image.overrides b/invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/elements/image.overrides
@@ -44,10 +44,24 @@
   }
 }
 
-.ui.image.community-image img {
-  max-height: @tinyWidth;
-  min-width: @tinyWidth;
-  object-fit: contain;
+.ui.image.community-image {
+
+  &.mini {
+    width: 45px;
+    min-width: 45px;
+
+    img {
+      max-height: 45px;
+      min-width: 45px;
+      object-fit: contain;
+    }
+  }
+
+  img {
+    max-height: @tinyWidth;
+    min-width: @tinyWidth;
+    object-fit: contain;
+  }
 }
 
 .ui.image.community-logo {

diff --git a/invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/globals/site.overrides b/invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/globals/site.overrides
@@ -480,13 +480,3 @@ dl.details-list {
     text-transform: capitalize;
   }
 }
-
-
-.community-header {
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: @largestMobileScreen) {
-    flex-wrap: wrap;
-  }
-}
diff --git a/invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/views/item.overrides b/invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/views/item.overrides
@@ -114,15 +114,7 @@
           align-items: end;
         };
       }
-      .extra {
-        @media all and (min-width: @tabletBreakpoint) {
-          position: absolute;
-          bottom: 0.7em !important;
-          top: unset;
-          left:unset;
-          width: unset;
-        }
-      }
+
       .header {
         word-break: break-word;
         margin-bottom: 0;

diff --git a/invenio_app_rdm/users_ui/templates/semantic-ui/invenio_app_rdm/users/header.html b/invenio_app_rdm/users_ui/templates/semantic-ui/invenio_app_rdm/users/header.html
@@ -8,18 +8,33 @@
 #}
 
 <div class="ui container fluid page-subheader-outer shadowless with-submenu ml-0-mobile mr-0-mobile mb-0 rel-pt-2" id="dashboard-user-header-container">
-  <div class="ui container page-subheader">
-    <div class="ui items unstackable">
+  <div class="ui container page-subheader flex justify-space-between align-items-center">
+    <div class="ui items unstackable m-0">
       <div class="item">
         <div class="ui image dashboard-header-avatar">
           <img src="{{ user_avatar }}" alt="" />
         </div>
-        <div class="content rel-pl-1">
-          <h4 class="header">{{ current_userprofile.full_name or current_user.username or current_userprofile.email or _('Anonymous user')}}</h4>
-          <div class="meta">{{ current_userprofile.affiliations or "" }}</div>
+        <div class="middle aligned content rel-pl-1">
+          <h1 class="ui medium header" aria-label="{{ _('Your dashboard') }}">{{ current_userprofile.full_name or current_user.username or current_userprofile.email or _('Anonymous user')}}</h1>
+          {% if current_userprofile.affiliations %}
+            <div class="meta">{{ current_userprofile.affiliations }}</div>
+          {% endif %}
         </div>
       </div>
     </div>
+    {% if active_dashboard_menu_item == "uploads" %}
+      <a class="ui tiny button positive left labeled icon m-0" href="/uploads/new">
+        <i class="upload icon" aria-hidden="true"></i>
+        {{ _('New upload') }}
+      </a>
+    {% endif %}
+
+    {% if active_dashboard_menu_item == "communities" %}
+      <a class="ui tiny button positive left labeled icon m-0" href="/communities/new">
+        <i class="plus icon" aria-hidden="true"></i>
+        {{ _('New community') }}
+      </a>
+    {% endif %}
   </div>
   <div class="ui container secondary pointing menu page-subheader pl-0">
   {% for item in current_menu.submenu('dashboard').children %}

diff --git a/invenio_app_rdm/users_ui/views/ui.py b/invenio_app_rdm/users_ui/views/ui.py
@@ -71,17 +71,17 @@ def register_menus():
         user_dashboard = current_menu.submenu("dashboard")
         user_dashboard.submenu("uploads").register(
             "invenio_app_rdm_users.uploads",
-            text=_("Uploads"),
+            text=_("My uploads"),
             order=1,
         )
         user_dashboard.submenu("communities").register(
             "invenio_app_rdm_users.communities",
-            text=_("Communities"),
+            text=_("My communities"),
             order=2,
         )
         user_dashboard.submenu("requests").register(
             "invenio_app_rdm_users.requests",
-            text=_("Requests"),
+            text=_("My requests"),
             order=3,
         )