kbss-cvut · blcham · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/public/locales/cs/translation.json b/public/locales/cs/translation.json
@@ -61,7 +61,7 @@
     "autoLayoutToolTip": "Automatické uspořádání stromu poruch",
     "exportToolTip": "Exportovat aktuální zobrazení",
     "minimumOperationalHours": "Min. provozní doba",
-    "diagramOptions": "Možnosti diagramu",
+    "diagramOptions": "Akce diagramu",
     "messages": {
       "mohNewValue": "Nová hodnota, která se není použíta při vyhodnocování stromu chyb.",
       "mohExperimental": "Hodnota se liší od min. hodnota provozní hodiny systému.",
@@ -140,6 +140,7 @@
     "linkedComponent": "Propojená komponenta"
   },
   "faultEventMenu": {
+    "detailSectionTitle": "Podrobnosti o události",
     "eventName": "Název události",
     "criticality": "Kritičnost",
     "fhaBasedFailureRate": "Intenzita poruch založená na FHA",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -61,7 +61,7 @@
     "autoLayoutToolTip": "Automatic arrangement of the fault tree",
     "exportToolTip": "Export current view",
     "minimumOperationalHours": "Min. operational hours",
-    "diagramOptions": "Diagram Options",
+    "diagramOptions": "Diagram Actions",
     "messages": {
       "mohNewValue": "New value, not used in fault tree evaluation.",
       "mohExperimental": "Value is different from the system's min. operational hour value.",
@@ -140,6 +140,7 @@
     "linkedComponent": "Linked Component"
   },
   "faultEventMenu": {
+    "detailSectionTitle": "Event Details",
     "eventName": "Event name",
     "criticality": "Criticality",
     "fhaBasedFailureRate": "FHA based failure rate",

diff --git a/src/components/dialog/faultEvent/FaultEventCreation.styles.tsx b/src/components/dialog/faultEvent/FaultEventCreation.styles.tsx
@@ -2,6 +2,13 @@ import { Theme } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 
 const useStyles = makeStyles()((theme: Theme) => ({
+  menuTitle: {
+    backgroundColor: "#1976D256",
+    marginLeft: "-16px",
+    marginRight: "-16px",
+    paddingLeft: "8px",
+    borderBottom: "inset",
+  },
   divForm: {
     flexGrow: 1,
   },

diff --git a/src/components/dialog/faultEvent/FaultEventCreation.tsx b/src/components/dialog/faultEvent/FaultEventCreation.tsx
@@ -101,10 +101,10 @@ const FaultEventCreation = ({
     }
     return (
       <>
-        <Typography variant="subtitle1" gutterBottom>
-          {`${t("newFtaModal.eventPlaceholder")}:`}
+        <Typography variant="h6" className={classes.menuTitle} gutterBottom>
+          {`${t("faultEventMenu.detailSectionTitle")}`}
         </Typography>
-
+        <br />
         <ControlledAutocomplete
           control={control}
           name="existingEvent"

diff --git a/src/components/editor/faultTree/menu/SidebarMenuHeader.tsx b/src/components/editor/faultTree/menu/SidebarMenuHeader.tsx
@@ -33,7 +33,7 @@ const SidebarMenuHeader: React.FC<SidebarMenuHeaderProps> = ({
   const actionCall = useActionCall(isModified, setShowUnsavedChangesDialog);
 
   return (
-    <Box padding={2}>
+    <Box padding={2} style={{ padding: "0px" }}>
       <DiagramOptions
         onExportDiagram={() => actionCall(onExportDiagram)}
         onConvertToTable={() => actionCall(onConvertToTable)}

diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx
@@ -435,7 +435,6 @@ const FaultEventMenu = ({
           {basedFailureRate && (
             <Box className={classes.eventPropertyRow}>{fhaFailureRateComponent(basedFailureRate, null, null)}</Box>
           )}
-          <Divider className={classes.divider} />
         </>
       )}
 
@@ -456,7 +455,6 @@ const FaultEventMenu = ({
           {basedFailureRate && (
             <Box className={classes.eventPropertyRow}>{fhaFailureRateComponent(basedFailureRate, null, null)}</Box>
           )}
-          <Divider className={classes.divider} />
         </>
       )}
 
@@ -533,7 +531,6 @@ const FaultEventMenu = ({
             onChange={(event) => handleManuallyDefinedFailureRateChange(event, NodeTypeWithManualFailureRate.External)}
             inputProps={{ inputMode: "decimal" }}
           />
-          <Divider className={classes.divider} />
         </Box>
       )}
 
@@ -547,6 +544,9 @@ const FaultEventMenu = ({
       {shapeToolData && (
         <EventFailureModeProvider eventIri={shapeToolData?.iri}>
           <Box>
+            {(criticality || ataSystem || partNumber || stock || quantity || schematicDesignation) && (
+              <Divider className={classes.divider} />
+            )}
             {criticality && <Typography>{propertyWithValue("eventDescription.severity", criticality)}</Typography>}
             {ataSystem && (
               <Typography>

diff --git a/src/components/editor/menu/DiagramOptions.styles.tsx b/src/components/editor/menu/DiagramOptions.styles.tsx
@@ -0,0 +1,13 @@
+import { Theme } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  menuTitle: {
+    backgroundColor: "#1976D256",
+    marginRight: "-16px",
+    paddingLeft: "8px",
+    borderBottom: "inset",
+  },
+}));
+
+export default useStyles;
diff --git a/src/components/editor/menu/DiagramOptions.tsx b/src/components/editor/menu/DiagramOptions.tsx
@@ -8,6 +8,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import CircularProgress from "@mui/material/CircularProgress";
 import { ENVVariable } from "@utils/constants";
+import useStyles from "@components/editor/menu/DiagramOptions.styles";
 
 export interface Props {
   onApplyAutomaticLayout: () => void;
@@ -27,10 +28,11 @@ const DiagramOptions = ({
   rendering,
 }: Props) => {
   const { t } = useTranslation();
+  const { classes } = useStyles();
 
   return (
-    <React.Fragment>
-      <Typography variant="h5" gutterBottom>
+    <>
+      <Typography variant="h6" className={classes.menuTitle} gutterBottom>
         {t("diagramSidePanel.diagramOptions")}
       </Typography>
       <div>
@@ -58,7 +60,7 @@ const DiagramOptions = ({
         )}
       </div>
       <Divider />
-    </React.Fragment>
+    </>
   );
 };
 

diff --git a/src/components/editor/system/menu/component/ComponentSidebarMenu.styles.tsx b/src/components/editor/system/menu/component/ComponentSidebarMenu.styles.tsx
@@ -0,0 +1,22 @@
+import { Theme } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  menuTitle: {
+    backgroundColor: "#1976D256",
+    marginLeft: "-16px",
+    marginRight: "-16px",
+    paddingLeft: "8px",
+    borderBottom: "inset",
+  },
+  emptyTitle: {
+    textAlign: "center",
+    fontStyle: "italic",
+    fontWeight: "bold",
+    color: theme.main.grey,
+    padding: theme.spacing(10, 2),
+  },
+}));
+
+// TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.
+export default useStyles;
diff --git a/src/components/editor/system/menu/component/ComponentSidebarMenu.tsx b/src/components/editor/system/menu/component/ComponentSidebarMenu.tsx
@@ -14,6 +14,7 @@ import { useForm } from "react-hook-form";
 import { FailureModeProvider } from "@hooks/useFailureModes";
 import { simplifyReferences } from "@utils/utils";
 import { useTranslation } from "react-i18next";
+import useStyles from "@components/editor/system/menu/component/ComponentSidebarMenu.styles";
 
 interface Props {
   component: Component;
@@ -24,6 +25,7 @@ interface Props {
 const ComponentSidebarMenu = ({ component, onComponentUpdated, systemComponents }: Props) => {
   const [showSnackbar] = useSnackbar();
   const { t } = useTranslation();
+  const { classes } = useStyles();
 
   const allowedComponents = filter(flatten([systemComponents]), (o) => o.iri !== component?.iri);
 
@@ -62,17 +64,19 @@ const ComponentSidebarMenu = ({ component, onComponentUpdated, systemComponents
 
   return (
     <React.Fragment>
-      <Typography variant="h5" gutterBottom>
-        {t("systemComponentMenu.editComponent")}
-      </Typography>
+      <Divider />
       {component ? (
-        <ComponentEditMenu component={component} onComponentUpdated={onComponentUpdated} />
+        <>
+          <Typography variant="h6" className={classes.menuTitle} gutterBottom>
+            {t("systemComponentMenu.editComponent")}
+          </Typography>
+          <ComponentEditMenu component={component} onComponentUpdated={onComponentUpdated} />
+        </>
       ) : (
-        <Typography variant="subtitle1" gutterBottom>
+        <Typography className={classes.emptyTitle} variant="subtitle1" gutterBottom>
           {t("systemComponentMenu.notSelected")}
         </Typography>
       )}
-      <Divider />
 
       {component && (
         <React.Fragment>