style(openAlex): left menu

dataesr · Nov 18, 2024 · a9277a1 · a9277a1
1 parent ff71a82
commit a9277a1
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 66 deletions.
diff --git a/client/src/layout/header.jsx b/client/src/layout/header.jsx
@@ -16,7 +16,7 @@ const {
 } = import.meta.env;
 
 // TODO : all, Link from dsfr-plus
-export default function Header({ isExpanded }) {
+export default function Header({ isExpanded, id }) {
   return isExpanded ? (
     <header role="banner" className="fr-header expanded">
       <Ribbon />
@@ -85,14 +85,25 @@ export default function Header({ isExpanded }) {
             </Title>
           </a>
         </Col>
+        {
+          id && (
+            <Col xs="9">
+              <Title as="h2" look="h6">
+                <FormattedMessage id={id} />
+              </Title>
+            </Col>
+          )
+        }
       </Row>
     </Container>
   );
 }
 
 Header.defaultProps = {
   isExpanded: false,
+  id: '',
 };
 Header.propTypes = {
   isExpanded: PropTypes.bool,
+  id: PropTypes.string,
 };
diff --git a/client/src/pages/openalex-ror/results/index.jsx b/client/src/pages/openalex-ror/results/index.jsx
@@ -171,10 +171,7 @@ export default function Affiliations() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [affiliations, filteredAffiliationName, filteredStatus]);
 
-  console.log('selectedOpenAlex', selectedOpenAlex);
-
   const listOfUniqueRors = [];
-
   selectedOpenAlex.forEach((affiliation) => {
     affiliation.rors.forEach((rorItem) => {
       if (listOfUniqueRors.find((item) => item.rorId === rorItem.rorId) === undefined) {
@@ -183,11 +180,9 @@ export default function Affiliations() {
     });
   });
 
-  console.log('listOfUniqueRors', listOfUniqueRors);
-
   return (
     <>
-      <Header />
+      <Header id="openalex-tile-title" />
       <Container fluid as="main" className="wm-bg">
         {isFetching && (
           <Container style={{ textAlign: 'center', minHeight: '600px' }} className="fr-pt-5w wm-font">
@@ -215,58 +210,67 @@ export default function Affiliations() {
 
         {!isFetching && isFetched && (
           <Row>
-            <Col md={2}>
+            <Col className="wm-menu" md={2}>
               <Row>
-                <Col>
-                  Start year:
-                  <Tag color="blue-ecume" key="tag-year-start" size="sm">
-                    {body.startYear}
-                  </Tag>
-                </Col>
+                <Button
+                  className="fr-mt-1w"
+                  color="blue-ecume"
+                  icon="arrow-left-line"
+                  onClick={() => navigate(`/${pathname.split('/')[1]}/search${search}`)}
+                  size="sm"
+                >
+                  Back to search page
+                </Button>
               </Row>
               <Row>
                 <Col>
-                  End year:
-                  <Tag color="blue-ecume" key="tag-year-end" size="sm">
-                    {body.endYear}
-                  </Tag>
+                  <div className="wm-title">
+                    <span className="fr-icon-calendar-line fr-mr-1w" aria-hidden="true" />
+                    Selected years
+                  </div>
+                  <div className="wm-content">
+                    <Tag className="fr-mr-1w" color="blue-cumulus" key="tag-year-start">
+                      {`Start: ${body.startYear}`}
+                    </Tag>
+
+                    <Tag color="blue-cumulus" key="tag-year-end">
+                      {`End: ${body.endYear}`}
+                    </Tag>
+                  </div>
                 </Col>
               </Row>
+
               <Row>
                 <Col>
-                  Affiliations:
-                  {body.affiliations.map((affiliation) => (
-                    <Row key={`row-${affiliation.label}`}>
-                      <Tag
-                        className={`fr-mr-1w fr-mt-1w ${affiliation.isDisabled ? 'scratched' : ''}`}
-                        color={getTagColor(affiliation)}
-                        key={`tag-${affiliation.label}`}
-                        size="sm"
-                      >
-                        {affiliation.label}
-                      </Tag>
-                      {affiliation.children.map((child) => (
+                  <div className="wm-title">
+                    <span className="fr-icon-hotel-line fr-mr-1w" aria-hidden="true" />
+                    Searched affiliations
+                  </div>
+                  <div className="wm-content">
+
+                    {body.affiliations.map((affiliation) => (
+                      <Row key={`row-${affiliation.label}`}>
                         <Tag
-                          className={`fr-mr-1w fr-mt-1w ${child.isDisabled ? 'scratched' : ''}`}
-                          color={getTagColor(child)}
-                          key={`tag-${child.label}`}
-                          size="sm"
+                          className={`fr-mr-1w ${affiliation.isDisabled ? 'scratched' : ''}`}
+                          color={getTagColor(affiliation)}
+                          key={`tag-${affiliation.label}`}
                         >
-                          {child.label}
+                          {affiliation.label}
                         </Tag>
-                      ))}
-                    </Row>
-                  ))}
+                        {affiliation.children.map((child) => (
+                          <Tag
+                            className={`fr-mr-1w fr-mt-1w ${child.isDisabled ? 'scratched' : ''}`}
+                            color={getTagColor(child)}
+                            key={`tag-${child.label}`}
+                          >
+                            {child.label}
+                          </Tag>
+                        ))}
+                      </Row>
+                    ))}
+                  </div>
                 </Col>
               </Row>
-              <Row>
-                <Button
-                  className="fr-mt-1w"
-                  onClick={() => navigate(`/${pathname.split('/')[1]}/search${search}`)}
-                >
-                  Modify search
-                </Button>
-              </Row>
             </Col>
             <Col md={10}>
               <div className="wm-bg wm-content">
@@ -305,8 +309,8 @@ export default function Affiliations() {
                                   <thead>
                                     <tr>
                                       <th>Name</th>
-                                      <th>id</th>
-                                      <th>Actions</th>
+                                      <th colSpan={2}>id</th>
+                                      {/* <th>Actions</th> */}
                                     </tr>
                                   </thead>
                                   {listOfUniqueRors.map((rorItem) => (
@@ -345,7 +349,8 @@ export default function Affiliations() {
                     </Row>
                   </ModalContent>
                   <ModalFooter>
-                    Once you have made your changes (add or remode Ror id), you can close this window, continue with your corrections and submit them to openAlex using the "Send feedback to OpenAlex" button.
+                    Once you have made your changes (add or remode Ror id), you can close this window,
+                    continue with your corrections and submit them to openAlex using the "Send feedback to OpenAlex" button.
                     <Button
                       onClick={() => {
                         // actionToOpenAlex(action, selectedOpenAlex, ror);

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -1,4 +1,4 @@
-import { Button, Col, Link, Row, Tag, Text } from '@dataesr/dsfr-plus';
+import { Badge, Button, Col, Link, Row, Tag, Text } from '@dataesr/dsfr-plus';
 
 import WorksList from '../components/works-list';
 
@@ -10,9 +10,8 @@ export default function ListView({
   setFilteredAffiliationName,
 }) {
   const defineRorColor = [];
-  const dsColors = ['green-tilleul-verveine', 'green-bourgeon', 'green-emeraude', 'green-menthe',
-    'green-archipel', 'blue-ecume', 'blue-cumulus', 'purple-glycine', 'pink-macaron',
-    'pink-tuile', 'yellow-tournesol', 'yellow-moutarde', 'orange-terre-battue',
+  const dsColors = ['green-archipel', 'blue-ecume', 'blue-cumulus', 'purple-glycine', 'pink-macaron',
+    'pink-tuile', 'orange-terre-battue',
     'brown-cafe-creme', 'brown-caramel', 'brown-opera', 'beige-gris-galet'];
     // tri des ror mar nombre
     // creation d'un tableau de ror avec un index pour chaque ror et son nombre d'occurences
@@ -28,7 +27,7 @@ export default function ListView({
     });
   });
   const sortedRor = Object.keys(rorCount).sort((a, b) => rorCount[b] - rorCount[a]);
-  defineRorColor.push(...sortedRor.map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] })));
+  defineRorColor.push(...sortedRor.slice(0, 5).map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] })));
 
   return (
     <ul className="wm-list">
@@ -79,19 +78,25 @@ export default function ListView({
                         </span>
                       </td>
                       <td>
-                        <Tag
+                        <img
+                          alt="ROR logo"
+                          className="vertical-middle fr-mx-1w"
+                          src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
+                          height="16"
+                        />
+                        https://ror.org/
+                        <Badge
                           className="fr-mr-1w"
-                          color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'blue-cumulus'}
+                          color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'yellow-tournesol'}
                           size="sm"
                         >
                           <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
-                            {/* <img alt="ROR logo" className="vertical-middle" src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg" height="16" /> */}
-                            <strong>
+                            {/* <strong>
                               ROR
-                            </strong>
-                            {` https://ror.org/${ror.rorId}`}
+                            </strong> */}
+                            {` ${ror.rorId}`}
                           </Link>
-                        </Tag>
+                        </Badge>
                         <Button
                           icon="filter-line"
                           onClick={() => setFilteredAffiliationName(ror.rorId)}

diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -88,11 +88,12 @@ export default function OpenalexView({
           </Col>
           <Col xs="3" className="text-right">
             <Button
+              className="fr-mr-1w"
               color="beige-gris-galet"
               icon="filter-line"
               size="sm"
             >
-              filters
+              more filters
             </Button>
             <Button onClick={() => changeView('table')} icon="table-line" size="sm" color="beige-gris-galet" />
             <Button onClick={() => changeView('list')} icon="list-unordered" size="sm" color="beige-gris-galet" />

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -122,7 +122,7 @@ html, body {
 }
 
 .wm-bg {
-  background-color: #222;
+  background: linear-gradient(to right, #0e0e31, #1a1add);
 }
 .wm-message{
   background-color: #eee;
@@ -140,6 +140,20 @@ html, body {
 
 .wm-menu{
   min-height: fit-content;
+  padding-top: 10px;
+
+  .wm-title{
+    background-color: #eee;
+    color: #222;
+    padding: 5px;
+    margin-bottom: 10px;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+
+  .wm-content{
+    min-height: 80px;
+  }
 .wm-text{
   color: white;
   padding: 5px;

diff --git a/client/src/utils/tags.jsx b/client/src/utils/tags.jsx
@@ -1,9 +1,9 @@
 const getTagColor = (tag) => {
   if (tag.isDisabled) return 'beige-gris-galet';
-  if (tag.source === 'ror') return 'brown-caramel';
-  return 'brown-cafe-creme';
+  if (tag.source === 'ror') return 'green-menthe';
+  return 'green-archipel';
 };
 
 export {
-  getTagColor
+  getTagColor,
 };