web:

- fix languge menu moves the layout - add RTL jss pluging to fix buttons and texts broken on arabic - removed unnecessary packages - reworked languages and dark mode switch
dzcode-io · Oct 23, 2021 · 159e246 · 159e246
1 parent 820ea9b
commit 159e246
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 193 deletions.
diff --git a/common/src/config/languages.ts b/common/src/config/languages.ts
@@ -1,6 +1,6 @@
 export const languages = [
   { code: "en", shortLabel: "EN", label: "English" },
-  { code: "ar", shortLabel: "ع", label: "العربية" },
+  { code: "ar", shortLabel: "AR", label: "العربية" },
   { code: "fr", shortLabel: "FR", label: "Français" },
 ] as const;
 

diff --git a/web/package.json b/web/package.json
@@ -72,7 +72,6 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
-    "@n8tb1t/use-scroll-position": "^2.0.3",
     "@prettier/plugin-pug": "^1.13.1",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
@@ -116,6 +115,7 @@
     "html-webpack-plugin": "^5.4.0",
     "immutable": "^4.0.0-rc.12",
     "jest": "^26.6.3",
+    "jss-rtl": "^0.3.0",
     "l2t": "^1.1.0",
     "less": "^4.0.0",
     "less-loader": "^7.2.0",
@@ -135,7 +135,6 @@
     "react-intl-translations-manager": "^5.0.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-spring": "^8.0.27",
     "react-syntax-highlighter": "^15.4.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

diff --git a/web/src/apps/main/components/navbar/index.tsx b/web/src/apps/main/components/navbar/index.tsx
@@ -1,33 +1,33 @@
+import {
+  AppBar,
+  Divider,
+  FormControlLabel,
+  Grid,
+  Hidden,
+  Slide,
+  Toolbar,
+  Typography,
+} from "@material-ui/core";
 import { Dispatch, StateInterface } from "src/apps/main/redux";
-import { FC, Fragment, useState } from "react";
-import { animated, useSpring } from "react-spring";
+import { FC, Fragment } from "react";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import { useDispatch, useSelector } from "react-redux";
-import Divider from "@material-ui/core/Divider";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+
 import { FormattedMessage } from "react-intl";
-import Grid from "@material-ui/core/Grid";
-import Hidden from "@material-ui/core/Hidden";
-import { IOSSwitch } from "./ios-switch";
 import { LanguageSwitch } from "./lang-switch";
 import { LinkV2 } from "src/components/link-v2";
+import { ModeSwitch } from "./mode-switch";
 import { SettingsState } from "src/apps/main/redux/reducers/settings";
-import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "@material-ui/core/Typography";
 import logo from "src/assets/svg/logo-wide.svg";
 import { useIntl } from "react-intl";
-import { useScrollPosition } from "@n8tb1t/use-scroll-position";
+import useScrollTrigger from "@material-ui/core/useScrollTrigger";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
-    root: {
-      maxWidth: "100%",
-      overflowX: "hidden",
+    navbar: {
+      background: theme.palette.background.default,
       position: "fixed",
       top: 0,
-      left: 0,
-      zIndex: 100,
-      width: "100%",
     },
     TopBar: {
       background: theme.palette.background.default,
@@ -41,13 +41,14 @@ const useStyles = makeStyles((theme) =>
       },
       maxWidth: theme.breakpoints.values.lg,
       margin: "auto",
+      width: "100%",
     },
     langAndTheme: {
       display: "flex",
       justifyContent: "flex-end",
     },
     switch: {
-      marginLeft: "auto",
+      marginLeft: "20px",
     },
     icon: {
       color: theme.palette.grey[100],
@@ -107,98 +108,85 @@ export const Navbar: FC = () => {
   const { settings, navbarComponent } = useSelector<StateInterface, StateInterface>(
     (state) => state,
   );
-
   const dispatch = useDispatch<Dispatch<SettingsState>>();
   const classes = useStyles();
   const intl = useIntl();
-  const [visible, setVisible] = useState(true);
-  useScrollPosition(({ prevPos, currPos }) => {
-    const isVisible = currPos.y <= -120 ? currPos.y > prevPos.y : true;
-    setVisible(isVisible);
-  });
-  const springStyle = useSpring({
-    transform: visible ? "translate(0, 0%)" : "translate(0, -100%)",
-  });
+  const trigger = useScrollTrigger({ threshold: 100 });
 
   return (
-    <animated.header className={classes.root} style={springStyle}>
-      <div className={`${classes.TopBar} `}>
-        <Hidden smUp>
-          <Typography
-            component="h2"
-            variant="h5"
-            color="inherit"
-            align="center"
-            noWrap
-            className={classes.toolbarTitle}
-          >
-            <LinkV2 href="/" className={classes.logo}>
-              <img src={logo} alt="logo" className={classes.logoImg} />
-            </LinkV2>
-          </Typography>
-        </Hidden>
-        <div className={`${classes.langAndTheme} `}>
-          <LanguageSwitch />
-          <FormControlLabel
-            className={classes.switch}
-            control={
-              <IOSSwitch
-                checked={settings.darkMode ? true : false}
-                onChange={() => {
-                  dispatch({
-                    type: "UPDATE_SETTINGS",
-                    payload: { darkMode: !settings.darkMode },
-                  });
-                }}
-                name="darkMode"
-              />
-            }
-            label={settings.darkMode ? "🌙" : "🌞"}
-          />
-        </div>
-      </div>
-      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
-        <Grid
-          container
-          xs={12}
-          item
-          lg={10}
-          className={classes.toolbarContainer}
-          style={{ flexFlow: "nowrap", overflowX: "auto" }}
-        >
-          <Hidden smDown>
-            <Typography
-              component="h2"
-              variant="h5"
-              color="inherit"
-              align="center"
-              noWrap
-              className={classes.toolbarTitle}
-            >
+    <Slide appear={false} direction="down" in={!trigger}>
+      <AppBar className={`${classes.navbar} mui-fixed`}>
+        <div className={`${classes.TopBar} `}>
+          <Hidden smUp>
+            <Typography component="h2" variant="h5" color="inherit" align="center" noWrap>
               <LinkV2 href="/" className={classes.logo}>
                 <img src={logo} alt="logo" className={classes.logoImg} />
               </LinkV2>
             </Typography>
           </Hidden>
+          <div className={`${classes.langAndTheme} `}>
+            <LanguageSwitch />
+            <FormControlLabel
+              className={classes.switch}
+              control={
+                <ModeSwitch
+                  checked={settings.darkMode ? true : false}
+                  onChange={() => {
+                    dispatch({
+                      type: "UPDATE_SETTINGS",
+                      payload: { darkMode: !settings.darkMode },
+                    });
+                  }}
+                  name="darkMode"
+                />
+              }
+              label=""
+            />
+          </div>
+        </div>
+        <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+          <Grid
+            container
+            xs={12}
+            item
+            lg={10}
+            className={classes.toolbarContainer}
+            style={{ flexFlow: "nowrap", overflowX: "auto" }}
+          >
+            <Hidden smDown>
+              <Typography
+                component="h2"
+                variant="h5"
+                color="inherit"
+                align="center"
+                noWrap
+                className={classes.toolbarTitle}
+              >
+                <LinkV2 href="/" className={classes.logo}>
+                  <img src={logo} alt="logo" className={classes.logoImg} />
+                </LinkV2>
+              </Typography>
+            </Hidden>
 
-          {navbarComponent.sections
-            ? navbarComponent.sections.map((section, index) => (
-                <Fragment key={section.title}>
-                  {index > 0 && (
-                    <Divider className={classes.divider} orientation="vertical" flexItem />
-                  )}
-                  <LinkV2
-                    color="inherit"
-                    href={`/${intl.formatMessage(section.message)}`}
-                    className={classes.toolbarLink}
-                  >
-                    <FormattedMessage id={section.message.id} defaultMessage={section.title} />
-                  </LinkV2>
-                </Fragment>
-              ))
-            : null}
-        </Grid>
-      </Toolbar>
-    </animated.header>
+            {navbarComponent.sections
+              ? navbarComponent.sections.map((section, index) => (
+                  <Fragment key={section.title}>
+                    {index > 0 && (
+                      <Divider className={classes.divider} orientation="vertical" flexItem />
+                    )}
+                    <LinkV2
+                      color="inherit"
+                      href={`/${intl.formatMessage(section.message)}`}
+                      className={classes.toolbarLink}
+                    >
+                      <FormattedMessage id={section.message.id} defaultMessage={section.title} />
+                    </LinkV2>
+                  </Fragment>
+                ))
+              : null}
+          </Grid>
+        </Toolbar>
+      </AppBar>
+    </Slide>
   );
 };
diff --git a/web/src/apps/main/components/navbar/ios-switch/index.tsx b/web/src/apps/main/components/navbar/ios-switch/index.tsx
diff --git a/web/src/apps/main/components/navbar/lang-switch/index.tsx b/web/src/apps/main/components/navbar/lang-switch/index.tsx
@@ -1,10 +1,10 @@
+import { Box, Button, Menu, MenuItem } from "@material-ui/core";
 import { Dispatch, StateInterface } from "src/apps/main/redux";
 import { FC, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Button } from "@material-ui/core";
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
+
 import { SettingsState } from "src/apps/main/redux/reducers/settings";
+import { Translate } from "@material-ui/icons";
 import { languages } from "src/_common/config/languages";
 
 export const LanguageSwitch: FC = () => {
@@ -14,8 +14,8 @@ export const LanguageSwitch: FC = () => {
   const anchorButton = useRef(null);
 
   return (
-    <div>
-      <Button ref={anchorButton} onClick={() => setDropDownOpen(true)}>
+    <Box minWidth={20}>
+      <Button ref={anchorButton} onClick={() => setDropDownOpen(true)} startIcon={<Translate />}>
         {settings.language.shortLabel}
       </Button>
       <Menu
@@ -26,7 +26,6 @@ export const LanguageSwitch: FC = () => {
         {languages.map((language) => (
           <MenuItem
             key={language.label}
-            style={{ margin: 5 }}
             onClick={() => {
               dispatch({
                 type: "UPDATE_SETTINGS",
@@ -39,6 +38,6 @@ export const LanguageSwitch: FC = () => {
           </MenuItem>
         ))}
       </Menu>
-    </div>
+    </Box>
   );
 };