Merge pull request #193 from openimis/feature/OM-115

OM-115: fix sidebar, layout adjustments
openimis · Jan 25, 2024 · 6d97c45 · 6d97c45
2 parents c9578b0 + 74d98fa
commit 6d97c45
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 31 deletions.
diff --git a/src/components/RequireAuth.js b/src/components/RequireAuth.js
@@ -27,6 +27,7 @@ import { useBoolean, useAuthentication } from "../helpers/hooks";
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { Switch } from "@material-ui/core";
 import { useTranslations } from "../helpers/i18n";
+import { DEFAULT } from "../constants";
 
 export const APP_BAR_CONTRIBUTION_KEY = "core.AppBar";
 export const MAIN_MENU_CONTRIBUTION_KEY = "core.MainMenu";
@@ -200,8 +201,16 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const RequireAuth = (props) => {
-  const { children, logo, redirectTo, isSecondaryCalendar, setSecondaryCalendar, onEconomicDialogOpen, ...others } = props;
-  const [isOpen, setOpen] = useBoolean();
+  const {
+    children,
+    logo,
+    whiteLogo,
+    redirectTo,
+    isSecondaryCalendar,
+    setSecondaryCalendar,
+    onEconomicDialogOpen,
+    ...others
+  } = props;  const [isOpen, setOpen] = useBoolean();
   const [isDrawerOpen, setDrawerOpen] = useBoolean();
   const theme = useTheme();
   const classes = useStyles();
@@ -214,6 +223,7 @@ const RequireAuth = (props) => {
     "allowSecondCalendar",
     false,
   );
+  const isWorker = modulesManager.getConf("fe-insuree", "isWorker", DEFAULT.IS_WORKER);
 
   const isAppBarMenu = useMemo(() => theme.menu.variant.toUpperCase() === "APPBAR", [theme.menu.variant]);
 
@@ -243,7 +253,7 @@ const RequireAuth = (props) => {
           <Button className={classes.appName} onClick={(e) => (window.location.href = "/front")}>
             {isAppBarMenu && (
               <Hidden smDown implementation="css">
-                <img className={classes.logo} src={logo} />
+                <img className={classes.logo} src={isWorker && !!whiteLogo ? whiteLogo : logo} alt="Logo of openIMIS" />
               </Hidden>
             )}
             <FormattedMessage module="core" id="appName" defaultMessage={<FormattedMessage id="root.appName" />} />
@@ -291,10 +301,12 @@ const RequireAuth = (props) => {
           <Button className={classes.appName} onClick={(e) => history.push("/")}>
             {isAppBarMenu && (
               <Hidden smDown implementation="css">
-                <img className={classes.logo} src={logo} />
+                <img className={classes.logo} src={isWorker && !!whiteLogo ? whiteLogo : logo} alt="Logo of openIMIS" />
               </Hidden>
             )}
-            <FormattedMessage module="core" id="appName" defaultMessage={<FormattedMessage id="root.appName" />} />
+            {!isWorker && (
+              <FormattedMessage module="core" id="appName" defaultMessage={<FormattedMessage id="root.appName" />} />
+            )}
           </Button>
           <Hidden smDown implementation="css">
             <Tooltip title={modulesManager.getModulesVersions().join(", ")}>
@@ -313,18 +325,15 @@ const RequireAuth = (props) => {
           <Contributions {...others} contributionKey={APP_BAR_CONTRIBUTION_KEY}>
             <div className={classes.grow} />
           </Contributions>
-          {!!calendarSwitch &&
-          <FormControlLabel
-            control={
-            <Switch
-              color="secondary"
-              checked={isSecondaryCalendar}
-              onChange={setSecondaryCalendar.toggle}
-            />}
-            label={formatMessage("core.calendarSwitcher")}
-            labelPlacement="start"
-          />
-          }
+          {!!calendarSwitch && (
+            <FormControlLabel
+              control={
+                <Switch color="secondary" checked={isSecondaryCalendar} onChange={setSecondaryCalendar.toggle} />
+              }
+              label={formatMessage("core.calendarSwitcher")}
+              labelPlacement="start"
+            />
+          )}
           <Contributions
             contributionKey={ECONOMIC_UNIT_BUTTON_CONTRIBUTION_KEY}
             onEconomicDialogOpen={onEconomicDialogOpen}

diff --git a/src/components/generics/MainMenuContribution.js b/src/components/generics/MainMenuContribution.js
@@ -32,7 +32,6 @@ const styles = (theme) => ({
   drawerHeading: {
     fontSize: theme.menu.drawer.fontSize,
     color: theme.menu.drawer.textColor,
-    paddingTop: theme.menu.drawer.fontSize / 2,
   },
   drawerDivider: {
     // width: 100
@@ -68,22 +67,27 @@ const Accordion = withStyles({
   expanded: {},
 })(MuiAccordion);
 
-const AccordionSummary = withStyles({
+const AccordionSummary = withStyles((theme) => ({
   root: {
-    backgroundColor: "#006273",
-
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.secondary.main,
     minHeight: 56,
     "&$expanded": {
       minHeight: 56,
     },
   },
   content: {
+    margin: "0",
+    padding: "0",
+    alignItems: 'center',
+    justifyContent: 'start',
     "&$expanded": {
-      margin: "12px 0",
+      margin: "0",
     },
+    color: theme.palette.secondary.main
   },
   expanded: {},
-})(MuiAccordionSummary);
+}))(MuiAccordionSummary);
 
 const AccordionDetails = withStyles((theme) => ({
   root: {

diff --git a/src/components/generics/Searcher.js b/src/components/generics/Searcher.js
@@ -42,7 +42,6 @@ const styles = (theme) => ({
   paperHeaderAction: {
     paddingInline: 5,
   },
-  paperDivider: theme.paper.divider,
   tableHeaderAction: theme.table.headerAction,
   processing: {
     margin: theme.spacing(1),
@@ -518,9 +517,7 @@ class Searcher extends Component {
                     </Grid>
                   )}
                 </Grid>
-                <Grid item xs={12} className={classes.paperDivider}>
-                  <Divider />
-                </Grid>
+                <Divider />
                 <Grid item xs={12}>
                   <Table
                     size="small"

diff --git a/src/constants.js b/src/constants.js
@@ -123,3 +123,7 @@ export const  SAML_LOGIN_PATH = "/msystems/saml/login/";
 export const  SAML_LOGOUT_PATH = "/msystems/saml/logout/";
 
 export const RIGHT_VIEW_EU_MODAL = 203000;
+
+export const DEFAULT = {
+  IS_WORKER: false,
+}
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
@@ -10,7 +10,7 @@ import { useAuthentication } from "../helpers/hooks";
 import Contributions from "./../components/generics/Contributions";
 import MPassLogo from "./../mPassLogoColor.svg";
 import { baseApiUrl } from "../actions";
-import { SAML_LOGIN_PATH } from "../constants";
+import { DEFAULT, SAML_LOGIN_PATH } from "../constants";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -44,6 +44,7 @@ const LoginPage = ({ logo }) => {
   const auth = useAuthentication();
   const [isAuthenticating, setAuthenticating] = useState(false);
   const showMPassProvider = modulesManager.getConf("fe-core", "LoginPage.showMPassProvider", false);
+  const isWorker = modulesManager.getConf("fe-insuree", "isWorker", DEFAULT.IS_WORKER);
 
   useEffect(() => {
     if (auth.isAuthenticated) {
@@ -98,9 +99,11 @@ const LoginPage = ({ logo }) => {
               <Grid container spacing={2} direction="column" alignItems="stretch">
                 <Grid item container direction="row" alignItems="center">
                   <img className={classes.logo} src={logo} />
-                  <Box pl={2} fontWeight="fontWeightMedium" fontSize="h4.fontSize">
-                    {formatMessage("appName")}
-                  </Box>
+                  {!isWorker && (
+                    <Box pl={2} fontWeight="fontWeightMedium" fontSize="h4.fontSize">
+                      {formatMessage("appName")}
+                    </Box>
+                  )}
                 </Grid>
                 {showMPassProvider ? (
                   <>