Fix description style (#58)

neesjanvaneck · Jan 21, 2024 · 59be077 · 59be077
1 parent 0a62fbf
commit 59be077
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 43 deletions.
diff --git a/src/components/ui-dimensions/InfoPanel/index.js b/src/components/ui-dimensions/InfoPanel/index.js
@@ -186,7 +186,7 @@ const InfoPanel = observer(() => {
     <>
       {(showInfoContent() || showDescriptionContent())
         && (
-          <Paper className={`${s.infoPanel} ${uiStore.controlPanelIsOpen ? s.shifted : s.notshifted} ${visualizationStore.items.length ? s.visible : ''}`} ref={refEl} elevation={3}>
+          <Paper className={`${s.infoPanel(configStore.uiStyle)} ${uiStore.controlPanelIsOpen ? s.shifted : s.notshifted} ${visualizationStore.items.length ? s.visible : ''}`} ref={refEl} elevation={3}>
             {showDescriptionContent()
               && (
                 <IconButton className={s.closeButton} onClick={exitInfoPanel}>

diff --git a/src/components/ui-dimensions/InfoPanel/styles.js b/src/components/ui-dimensions/InfoPanel/styles.js
@@ -13,7 +13,7 @@ export const shifted = css`
   label: shifted;
 `;
 
-export const infoPanel = css`
+export const infoPanel = (uiStyle) => css`
   label: info-panel;
   visibility: hidden;
   position: absolute;
@@ -55,6 +55,12 @@ export const infoPanel = css`
         min-width: 100px;
       }
     }
+    color: inherit;
+  }
+
+  a {
+    text-decoration: none;
+    color: ${uiStyle.palette_primary_main_color};
   }
 `;
 

diff --git a/src/components/ui-zeta-alpha/InfoPanel/index.js b/src/components/ui-zeta-alpha/InfoPanel/index.js
@@ -186,7 +186,7 @@ const InfoPanel = observer(() => {
     <>
       {(showInfoContent() || showDescriptionContent())
         && (
-          <Paper className={`${s.infoPanel} ${uiStore.controlPanelIsOpen ? s.shifted : s.notshifted} ${visualizationStore.items.length ? s.visible : ''}`} ref={refEl} elevation={3}>
+          <Paper className={`${s.infoPanel(configStore.uiStyle)} ${uiStore.controlPanelIsOpen ? s.shifted : s.notshifted} ${visualizationStore.items.length ? s.visible : ''}`} ref={refEl} elevation={3}>
             {showDescriptionContent()
               && (
                 <IconButton className={s.closeButton} onClick={exitInfoPanel}>

diff --git a/src/components/ui-zeta-alpha/InfoPanel/styles.js b/src/components/ui-zeta-alpha/InfoPanel/styles.js
@@ -13,7 +13,7 @@ export const shifted = css`
   label: shifted;
 `;
 
-export const infoPanel = css`
+export const infoPanel = (uiStyle) => css`
   label: info-panel;
   visibility: hidden;
   position: absolute;
@@ -55,6 +55,12 @@ export const infoPanel = css`
         min-width: 100px;
       }
     }
+    color: inherit;
+  }
+
+  a {
+    text-decoration: none;
+    color: ${uiStyle.palette_primary_main_color};
   }
 `;
 

diff --git a/src/components/ui/InfoPanel/index.js b/src/components/ui/InfoPanel/index.js
@@ -159,6 +159,36 @@ const InfoPanel = observer(() => {
     );
   };
 
+  const getNetworkInfo = () => (
+    <>
+      <InfoItem text={`${dataStore.terminology.items}: ${visualizationStore.items.length}`} />
+      {Boolean(visualizationStore.links.length)
+        && (
+          <>
+            <Divider />
+            <InfoItem text={`${dataStore.terminology.links}: ${formatNumber(visualizationStore.links.length)}`} />
+            {uiStore.componentWidth > 800
+              && (
+                <>
+                  <Divider />
+                  <InfoItem text={`${dataStore.terminology.total_link_strength}: ${formatNumber(visualizationStore.totalLinkStrength)}`} />
+                </>
+              )
+            }
+          </>
+        )
+      }
+      {visualizationStore.clusters && uiStore.colorIndex === 0
+        && (
+          <>
+            <Divider />
+            <InfoItem text={`${dataStore.terminology.clusters}: ${visualizationStore.clusters.length}`} />
+          </>
+        )
+      }
+    </>
+  );
+
   const showInfoContent = () => configStore.uiConfig.information_panel;
 
   const showDescriptionContent = () => isOpen
@@ -180,12 +210,14 @@ const InfoPanel = observer(() => {
     <>
       {(showInfoContent() || showDescriptionContent())
         && (
-          <Paper className={`${s.infoPanel} ${uiStore.controlPanelIsOpen ? s.shifted : s.notshifted} ${visualizationStore.items.length ? s.visible : ''}`} ref={refEl} elevation={3}>
-            {showDescriptionContent() && (
-              <IconButton className={s.closeButton} onClick={exitInfoPanel}>
-                <CloseIcon fontSize="small" />
-              </IconButton>
-            )}
+          <Paper className={`${s.infoPanel(configStore.uiStyle)} ${uiStore.controlPanelIsOpen ? s.shifted : s.notshifted} ${visualizationStore.items.length ? s.visible : ''}`} ref={refEl} elevation={3}>
+            {showDescriptionContent()
+              && (
+                <IconButton className={s.closeButton} onClick={exitInfoPanel}>
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              )
+            }
             {showDescriptionContent()
               && (
                 <>
@@ -201,37 +233,12 @@ const InfoPanel = observer(() => {
               )
             }
             {showInfoContent()
-              && (visualizationStore.hoveredItem || visualizationStore.hoveredLink || visualizationStore.clickedItem || visualizationStore.clickedLink
-                ? getItemOrLinkInfo()
-                : (
-                  <>
-                    <InfoItem text={`${dataStore.terminology.items}: ${visualizationStore.items.length}`} />
-                    {Boolean(visualizationStore.links.length)
-                      && (
-                        <>
-                          <Divider />
-                          <InfoItem text={`${dataStore.terminology.links}: ${formatNumber(visualizationStore.links.length)}`} />
-                          {uiStore.componentWidth > 800
-                            && (
-                              <>
-                                <Divider />
-                                <InfoItem text={`${dataStore.terminology.total_link_strength}: ${formatNumber(visualizationStore.totalLinkStrength)}`} />
-                              </>
-                            )
-                          }
-                        </>
-                      )
-                    }
-                    {visualizationStore.clusters && uiStore.colorIndex === 0
-                      && (
-                        <>
-                          <Divider />
-                          <InfoItem text={`${dataStore.terminology.clusters}: ${visualizationStore.clusters.length}`} />
-                        </>
-                      )
-                    }
-                  </>
-                )
+              && (
+                <Typography component="div" className={s.info}>
+                  {visualizationStore.hoveredItem || visualizationStore.hoveredLink || visualizationStore.clickedItem || visualizationStore.clickedLink
+                    ? getItemOrLinkInfo()
+                    : getNetworkInfo()}
+                </Typography>
               )
             }
           </Paper>

diff --git a/src/components/ui/InfoPanel/styles.js b/src/components/ui/InfoPanel/styles.js
@@ -13,7 +13,7 @@ export const shifted = css`
   label: shifted;
 `;
 
-export const infoPanel = css`
+export const infoPanel = (uiStyle) => css`
   label: info-panel;
   visibility: hidden;
   position: absolute;
@@ -55,6 +55,12 @@ export const infoPanel = css`
         min-width: 100px;
       }
     }
+    color: inherit;
+  }
+
+  a {
+    text-decoration: none;
+    color: ${uiStyle.palette_primary_main_color};
   }
 `;
 
@@ -72,10 +78,16 @@ export const divider = css`
   color: rgba(148, 148, 147, 0.8) !important;
 `;
 
+export const info = css`
+  label: info;
+  display: flex;
+  font-size: 0.75rem !important;
+`;
+
 export const infoItem = css`
   label: info-item;
   display: inline !important;
-  padding: 4px 4px;
+  padding: 0px 4px;
 `;
 
 export const closeButton = css`