#20 update right sidebar style

MetaCell · Jan 15, 2024 · d1c12d0 · d1c12d0
1 parent bbc7ae0
commit d1c12d0
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 17 deletions.
diff --git a/src/components/NodeDetailView/Details/CollectionDetails.js b/src/components/NodeDetailView/Details/CollectionDetails.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-    Box,
+    Box, Divider,
     Typography
 } from "@material-ui/core";
 import Links from './Views/Links';
@@ -28,6 +28,7 @@ const CollectionDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={'Label'} value={title} heading={'Collection Details'} />
                 { node.graph_node?.attributes?.publishedURI && node.graph_node?.attributes?.publishedURI !== ""

diff --git a/src/components/NodeDetailView/Details/DatasetDetails.js b/src/components/NodeDetailView/Details/DatasetDetails.js
@@ -2,8 +2,7 @@ import React from "react";
 import {
     Box,
     Typography,
-    List,
-    ListItemText,
+    Divider,
 } from "@material-ui/core";
 import Links from './Views/Links';
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
@@ -12,6 +11,7 @@ import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
 import { rdfTypes } from "../../../utils/graphModel";
 import { isValidUrl } from './utils';
+import {DatasetIcon} from "../../../images/Icons";
 
 const DatasetDetails = (props) => {
     const { node } = props;
@@ -21,7 +21,12 @@ const DatasetDetails = (props) => {
     return (
 
         <Box id={node.graph_node?.id + detailsLabel}>
+            <Divider />
             <Box className="tab-content">
+                <Box className='title-container'>
+                    <DatasetIcon />
+                    <Typography component="h3">Dataset Details</Typography>
+                </Box>
                 {datasetPropertiesModel?.map( property => {
                     if ( property.visible ){
                         const propValue = node.graph_node.attributes[property.property]?.[0];

diff --git a/src/components/NodeDetailView/Details/Details.js b/src/components/NodeDetailView/Details/Details.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
@@ -26,6 +27,7 @@ const UnknownDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={'Name'} value={title.toString()} heading={'Details'} />
             </Box>

diff --git a/src/components/NodeDetailView/Details/FileDetails.js b/src/components/NodeDetailView/Details/FileDetails.js
@@ -4,9 +4,9 @@ import {
     Typography,
     List,
     ListItemText,
+    Divider,
 } from "@material-ui/core";
 import Links from './Views/Links';
-import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
 
@@ -47,6 +47,7 @@ const FileDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 { node.graph_node?.attributes?.identifier
                     ? (<Box className="tab-content-row">

diff --git a/src/components/NodeDetailView/Details/GroupDetails.js b/src/components/NodeDetailView/Details/GroupDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
@@ -26,6 +27,7 @@ const GroupDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={'# of Subjects '} value={node?.graph_node?.subjects} heading={node?.graph_node?.name} />
             </Box>

diff --git a/src/components/NodeDetailView/Details/PersonDetails.js b/src/components/NodeDetailView/Details/PersonDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import Links from './Views/Links';
@@ -28,6 +29,7 @@ const PersonDetails = (props) => {
 
     return (
         <Box id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <Typography component="h3">Person Details</Typography>
                 <Box className="tab-content-row">

diff --git a/src/components/NodeDetailView/Details/ProtocolDetails.js b/src/components/NodeDetailView/Details/ProtocolDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import Links from './Views/Links';
@@ -29,6 +30,7 @@ const ProtocolDetails = (props) => {
 
     return (
         <Box id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 { node.graph_node.attributes?.hasUriHuman && node.graph_node.attributes?.hasUriHuman[0] !== ""
                     ? (<Box className="tab-content-row">

diff --git a/src/components/NodeDetailView/Details/SampleDetails.js b/src/components/NodeDetailView/Details/SampleDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
@@ -29,6 +30,7 @@ const SampleDetails = (props) => {
 
     return (
         <Box id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 { node.graph_node.attributes?.hasUriHuman && node.graph_node.attributes?.hasUriHuman[0] !== ""
                     ? (<Box className="tab-content-row">

diff --git a/src/components/NodeDetailView/Details/SubjectDetails.js b/src/components/NodeDetailView/Details/SubjectDetails.js
@@ -1,13 +1,14 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import SimpleChip from './Views/SimpleChip';
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import Links from './Views/Links';
-import { iterateSimpleValue, simpleValue } from './utils';
+import {  simpleValue } from './utils';
 import { detailsLabel } from '../../../constants';
 
 const SubjectDetails = (props) => {
@@ -47,6 +48,7 @@ const SubjectDetails = (props) => {
 
     return (
         <Box id={node?.graph_node?.id + detailsLabel}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={""} value={""} heading={title} />
 

diff --git a/src/components/NodeDetailView/Details/Views/Breadcrumbs.js b/src/components/NodeDetailView/Details/Views/Breadcrumbs.js
@@ -15,8 +15,8 @@ const HeaderBreadcrumbs = (props) => {
   return (
     <Box className="wrap">
       <Breadcrumbs
-        separator={<img src={DIVIDER} alt="DIVIDER" />}
         aria-label="breadcrumb"
+        maxItems={2}
       >
         {
           links && links.pages ? (
@@ -27,7 +27,10 @@ const HeaderBreadcrumbs = (props) => {
             ))
           ) : null
         }
-        <Typography variant="subtitle2" onClick={() => {goToLink(links?.current.id)}} className="breadcrumb_selected">{links?.current.text}</Typography>
+        <Typography
+            variant="subtitle2"
+            onClick={() => {goToLink(links?.current.id)}}
+            className="breadcrumb_selected">{links?.current.text}</Typography>
       </Breadcrumbs>
       {/* <img src={CLOSE} onClick={closeViewer} alt="Close" /> */}
     </Box>

diff --git a/src/components/NodeDetailView/NodeDetailView.js b/src/components/NodeDetailView/NodeDetailView.js
@@ -1,4 +1,4 @@
-import { Box } from "@material-ui/core";
+import {Box} from "@material-ui/core";
 import NodeFooter from "./Footers/Footer";
 import DetailsFactory from './factory';
 import Breadcrumbs from "./Details/Views/Breadcrumbs";
@@ -65,9 +65,16 @@ const NodeDetailView = (props) => {
       <Box className="secondary-sidebar_breadcrumb" sx={{mt : "1rem"}}>
         <Breadcrumbs close={false} links={links} />
       </Box>
-      { otherDetails }
-      { showSettingsContent && nodeDetails.getSettings ? nodeDetails.getSettings() : nodeDetails.getDetail() }
-
+      {
+        showSettingsContent && nodeDetails.getSettings ? nodeDetails.getSettings() : null
+      }
+      {
+        !showSettingsContent ?
+            <>
+          { otherDetails }
+          {nodeDetails.getDetail()}
+        </> : null
+      }
       <NodeFooter />
       { !showSettingsContent && <Box className='overlay-button-container'>
         <IconButton className="overlay-button" onClick={toggleContent}><TuneRounded /></IconButton>

diff --git a/src/flexlayout.css b/src/flexlayout.css
@@ -549,4 +549,5 @@
 
 .breadcrumb_selected {
   color : #3779E1 !important;
+  font-weight: 600 !important;
 }
diff --git a/src/images/Icons.js b/src/images/Icons.js
diff --git a/src/styles/constant.js b/src/styles/constant.js
@@ -35,9 +35,12 @@ const vars = {
   matlab: '#6FC386',
   nifti: '#7747F6',
   volume: '#3779E1',
-  sideBarLabelColor: 'rgba(46, 58, 89, 0.4)',
+  sideBarLabelColor: '#435070',
   treeBorderColor: '#4E5261',
   scrollbarBg: 'rgba(0, 0, 0, 0.24)',
+  gray800: '#0F162B',
+  gray400: '#586482',
+  gray25: '#F0F1F2'
 };
 
 export default vars;
diff --git a/src/theme.js b/src/theme.js
@@ -43,6 +43,9 @@ const {
   chipBgColor,
   progressErrorBg,
   treeBorderColor,
+  gray800,
+  gray400,
+  gray25
 } = vars;
 
 const theme = createTheme({
@@ -94,12 +97,14 @@ const theme = createTheme({
         display: 'inline-flex',
         alignItems: 'center',
         height: '1.375rem',
-        marginTop: '.25rem',
+        marginTop: '.5rem',
         marginRight: '.375rem',
         '& .MuiChip-label': {
-          padding: '0 .375rem',
+          padding: '0.25rem 0.375rem',
           fontSize: '.75rem',
-          color: primaryTextColor,
+          color: gray400,
+          backgroundColor: gray25,
+          borderRadius: '0.3125rem'
         },
       },
     },
@@ -960,13 +965,16 @@ const theme = createTheme({
             '& .MuiBreadcrumbs-li': {
               lineHeight: '1.5',
               '& a': {
-                color: placeHolderColor,
                 cursor: 'pointer',
                 lineHeight: 'normal',
+                color: '#475467',
+                fontSize: '0.75rem',
+                fontWeight: 500,
               },
             },
             '& .MuiBreadcrumbs-separator': {
               margin: '0 .5rem',
+              color: '#9198AB'
             },
           },
           '&_body': {
@@ -1056,12 +1064,22 @@ const theme = createTheme({
             '&+ .tab-content': {
               borderTop: `.0625rem solid ${tabsBorderColor}`,
             },
+            '& .title-container':{
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: '1.3rem',
+
+              '& h3': {
+                marginBottom: 0,
+                marginLeft: '.25rem'
+              }
+            },
             '& h3': {
               fontSize: '1.125rem',
               fontWeight: '500',
               lineHeight: '1.375rem',
               letterSpacing: '-0.03em',
-              color: primaryTextColor,
+              color: gray800,
               marginBottom: '1.3rem',
             },
             '& .tab-content-row': {
@@ -1074,6 +1092,7 @@ const theme = createTheme({
                 fontSize: '.75rem',
                 lineHeight: '1rem',
                 color: primaryColor,
+                marginTop: '.5rem',
 
                 '&:not(:last-child)': {
                   marginRight: '.75rem',
@@ -1095,6 +1114,10 @@ const theme = createTheme({
                 color: sideBarLabelColor,
                 '&+ p': {
                   marginTop: '.25rem',
+                  color: gray400,
+                  fontSize: '.75rem',
+                  fontWeight: '400',
+                  lineHeight: '1rem',
                 },
               },
               '&> p': {