try new design

dataesr · Nov 8, 2024 · e4f14b3 · e4f14b3
1 parent 6b1354f
commit e4f14b3
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 214 deletions.
diff --git a/client/src/components/button-dropdown/index.jsx b/client/src/components/button-dropdown/index.jsx
@@ -31,6 +31,7 @@ export default function ButtonDropdown({ className, data, label, searchParams })
   return (
     <div className={_className}>
       <Button
+        color="beige-gris-galet"
         disabled={!data.length}
         icon="save-line"
         size="sm"
@@ -39,19 +40,22 @@ export default function ButtonDropdown({ className, data, label, searchParams })
       </Button>
       <div className="dropdown-content">
         <Button
+          color="beige-gris-galet"
           onClick={() => { export2Csv({ data, label, searchParams }); toastExport(); }}
           size="sm"
         >
           Export in CSV (minimal data)
         </Button>
         <Button
+          color="beige-gris-galet"
           onClick={() => { export2jsonl({ data, label, searchParams }); toastExport(); }}
           size="sm"
         >
           Export in JSONL (complete data)
         </Button>
         {['publications', 'datasets'].includes(label) && (
           <Button
+            color="beige-gris-galet"
             onClick={() => {
               const numberOfLines = export2FosmCsv({ data, label, searchParams });
               toastExport(numberOfLines);

diff --git a/client/src/layout/index.jsx b/client/src/layout/index.jsx
@@ -8,7 +8,7 @@ import Header from './header';
 export default function Layout({ isSticky }) {
   return (
     <>
-      <Header isSticky={isSticky} />
+      {/* <Header isSticky={isSticky} /> */}
       <Container fluid as="main" role="main">
         <Outlet />
       </Container>

diff --git a/...rc/pages/openalex-ror/actionsOpenalex.jsx → ...ges/openalex-ror/export-errors-button.jsx b/...rc/pages/openalex-ror/actionsOpenalex.jsx → ...ges/openalex-ror/export-errors-button.jsx
@@ -10,6 +10,7 @@ export default function ActionsOpenalex({
 
   return (
     <ButtonDropdown
+      className="fr-mr-1w"
       data={allOpenalexCorrections}
       label="OpenAlex errors"
       searchParams={searchParams}

diff --git a/client/src/pages/openalex-ror/modal-info.jsx b/client/src/pages/openalex-ror/modal-info.jsx
@@ -12,15 +12,13 @@ export default function ModalInfo() {
 
   return (
     <>
-      <Title as="h2" className="fr-mb-3w">
-        Improve ROR matching in OpenAlex
-        <Button
-          className="fr-btn--icon fr-fi-info-line fr-ml-1w"
-          icon="fr-info-line"
-          onClick={() => setIsModalOpen(true)}
-          style={{ borderRadius: '25px' }}
-        />
-      </Title>
+      <Button
+        className="fr-btn--icon fr-fi-info-line fr-ml-1w"
+        color="error"
+        icon="fr-info-line"
+        onClick={() => setIsModalOpen(true)}
+        style={{ borderRadius: '25px' }}
+      />
 
       <Modal isOpen={isModalOpen} hide={() => setIsModalOpen(false)} size="xl">
         <ModalTitle>

diff --git a/client/src/pages/openalex-ror/openalex.jsx b/client/src/pages/openalex-ror/openalex.jsx
diff --git a/client/src/pages/openalex-ror/openalexTab.jsx b/client/src/pages/openalex-ror/openalexTab.jsx
@@ -109,70 +109,45 @@ export default function OpenalexTab({
           </Button>
         </ModalFooter>
       </Modal>
-      <div
-        className={`actions-menu ${fixedMenu ? 'action-menu-fixed' : ''}`}
-        title="actions"
-      >
-        <div
-          className={`selected-item ${selectedOpenAlex.length && 'selected'}`}
-        >
-          <span className="number">{selectedOpenAlex.length}</span>
-          {`selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'}`}
-        </div>
-        <Button
-          className="fr-mb-1w fr-pl-1w button"
-          color="blue-ecume"
-          disabled={!selectedOpenAlex.length}
-          key="add-ror"
-          onClick={() => {
-            setAction('add');
-            setIsModalOpen((prev) => !prev);
-          }}
-          size="lg"
-          style={{ display: 'block', width: '100%', textAlign: 'left' }}
-          title="Add ROR"
-        >
-          <i
-            className="ri-add-circle-line fr-mr-2w"
-            style={{ color: '#8dc572' }}
-          />
-          Add ROR
-        </Button>
-        <Button
-          className="fr-mb-1w fr-pl-1w button"
-          color="blue-ecume"
-          disabled={!selectedOpenAlex.length}
-          key="remove-ror"
-          onClick={() => {
-            setAction('remove');
-            setIsModalOpen((prev) => !prev);
-          }}
-          size="lg"
-          style={{ display: 'block', width: '100%', textAlign: 'left' }}
-          title="Remove ROR"
-        >
-          <i
-            className="ri-close-circle-line fr-mr-2w"
-            style={{ color: '#be6464' }}
-          />
-          Remove ROR
-        </Button>
-        <div className="text-right">
+      <Row className="wm-bg">
+        <Col md={2} className="wm-menu">
+          <div className="wm-text fr-mb-3w">
+            <span>{selectedOpenAlex.length}</span>
+            {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'}`}
+          </div>
+          <Button
+            className="wm-button fr-mb-1w"
+            color="beige-gris-galet"
+            disabled={!selectedOpenAlex.length}
+            icon="add-circle-line"
+            key="add-ror"
+            onClick={() => {
+              setAction('add');
+              setIsModalOpen((prev) => !prev);
+            }}
+            size="sm"
+            title="Add ROR"
+          >
+            Add ROR
+          </Button>
           <Button
-            onClick={() => setFixedMenu(!fixedMenu)}
+            className="wm-button"
+            color="beige-gris-galet"
+            disabled={!selectedOpenAlex.length}
+            icon="close-circle-line"
+            key="remove-ror"
+            onClick={() => {
+              setAction('remove');
+              setIsModalOpen((prev) => !prev);
+            }}
             size="sm"
-            variant="tertiary"
+            title="Remove ROR"
           >
-            {fixedMenu ? (
-              <i className="ri-pushpin-fill" />
-            ) : (
-              <i className="ri-pushpin-line" />
-            )}
+            Remove ROR
           </Button>
-        </div>
-      </div>
-      <Row gutters>
-        <Col n="12">
+
+        </Col>
+        <Col md={9} className="wm-content fr-mb-1w">
           <OpenalexView
             allAffiliations={filteredAffiliations}
             filteredAffiliationName={filteredAffiliationName}
@@ -183,6 +158,7 @@ export default function OpenalexTab({
             undo={undo}
           />
         </Col>
+        <Col />
       </Row>
     </Container>
   );

diff --git a/client/src/pages/openalex-ror/results.jsx b/client/src/pages/openalex-ror/results.jsx
@@ -1,11 +1,7 @@
 import {
   Badge,
-  Col,
-  Container,
-  Row,
+  Container, Row, Col,
   Spinner,
-  Tag,
-  TagGroup,
   Title,
 } from '@dataesr/dsfr-plus';
 import { useQuery } from '@tanstack/react-query';
@@ -18,10 +14,13 @@ import { getAffiliationsCorrections } from '../../utils/curations';
 import { isRor } from '../../utils/ror';
 import { normalize } from '../../utils/strings';
 import { getWorks } from '../../utils/works';
-import Openalex from './openalex';
 
 import 'primereact/resources/primereact.min.css';
 import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import ModalInfo from './modal-info';
+import ExportErrorsButton from './export-errors-button';
+import SendFeedbackButton from './send-feedback-button';
+import OpenalexTab from './openalexTab';
 
 const {
   VITE_APP_NAME,
@@ -111,8 +110,8 @@ export default function Affiliations() {
       <Container fluid as="section" className="filters sticky">
         <Row verticalAlign="top" className="fr-p-1w">
           <Ribbon />
-          <Col xs="2" className="cursor-pointer" offsetXs="1">
-            <Title as="h1" look="h6" className="fr-m-0">
+          <Col xs="3" className="cursor-pointer" offsetXs="1">
+            <Title as="h1" look="h2" className="wm-font">
               {VITE_APP_NAME}
               {VITE_HEADER_TAG && (
                 <Badge
@@ -126,7 +125,11 @@ export default function Affiliations() {
             </Title>
           </Col>
           <Col>
-            <Row>
+            <Title as="h2" className=" wm-font">
+              Improve ROR matching in OpenAlex
+              <ModalInfo />
+            </Title>
+            {/* <Row>
               <Col
                 className="cursor-pointer"
                 onClick={(e) => {
@@ -138,22 +141,13 @@ export default function Affiliations() {
                   <Tag color="blue-ecume" key="tag-sticky-years" size="sm">
                     {`${options.startYear} - ${options.endYear}`}
                   </Tag>
-                  {/* {tagsDisplayed.map((tag) => (
-                    <Tag
-                      color="blue-ecume"
-                      key={`tag-sticky-${tag.label}`}
-                      size="sm"
-                    >
-                      {tag.label}
-                    </Tag>
-                  ))} */}
                 </TagGroup>
               </Col>
-            </Row>
+            </Row> */}
           </Col>
         </Row>
       </Container>
-      <Container as="section" className="fr-mt-4w">
+      <Container fluid as="section" className="">
         {isFetching && (
           <Row>
             <Col xs="2" offsetXs="6">
@@ -174,13 +168,30 @@ export default function Affiliations() {
         )}
 
         {!isFetching && isFetched && (
-          <Openalex
-            allAffiliations={affiliations}
-            allOpenalexCorrections={allOpenalexCorrections}
-            options={options}
-            setAllOpenalexCorrections={setAllOpenalexCorrections}
-            undo={undo}
-          />
+          <>
+            <Row className="wm-bg">
+              <Col md={9} offsetMd={2}>
+                <div className="wm-actions">
+                  <ExportErrorsButton
+                    allOpenalexCorrections={allOpenalexCorrections}
+                    options={options}
+                  />
+
+                  <SendFeedbackButton
+                    allOpenalexCorrections={allOpenalexCorrections}
+                  />
+                </div>
+              </Col>
+              <Col />
+            </Row>
+            <OpenalexTab
+              affiliations={affiliations.filter(
+                (affiliation) => affiliation.source === 'OpenAlex',
+              )}
+              setAllOpenalexCorrections={setAllOpenalexCorrections}
+              undo={undo}
+            />
+          </>
         )}
       </Container>
     </>

diff --git a/.../openalex-ror/actionsOpenalexFeedback.jsx → ...ges/openalex-ror/send-feedback-button.jsx b/.../openalex-ror/actionsOpenalexFeedback.jsx → ...ges/openalex-ror/send-feedback-button.jsx
@@ -70,7 +70,9 @@ export default function ActionsOpenalexFeedback({ allOpenalexCorrections }) {
   return (
     <>
       <Button
+        color="beige-gris-galet"
         disabled={!allOpenalexCorrections.length > 0}
+        icon="send-plane-fill"
         onClick={switchModal}
         size="sm"
       >