#417 redesigned topbar menus

ruuvi · Jun 20, 2024 · 559e39d · 559e39d
1 parent cf47abd
commit 559e39d
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 70 deletions.
diff --git a/src/App.js b/src/App.js
@@ -290,24 +290,20 @@ function TopBar({ reloadSub, setShowDialog, user }) {
   return <>
     {isWideVersion ?
       <>
-        <Button variant="topbar" onClick={() => nav("/")} style={{color: window.location.href.endsWith("/") ? "pink" : undefined}}>
-          {i18next.t("Home")}
+        <Button variant="topbar" onClick={() => nav("/")} className={window.location.href.endsWith("/") ? "activeNav" : ""}>
+          {i18next.t("home")}
         </Button>
-        <Button variant="topbar" onClick={() => nav("/shares")} style={{color: window.location.href.indexOf("/shares") !== -1 ? "pink" : undefined}}>
+        <Button variant="topbar" onClick={() => nav("/shares")} className={window.location.href.indexOf("/shares") !== -1 ? "activeNav" : ""}>
           {i18next.t("share_center")}
         </Button>
         {sensorMenu}
         <SettingsMenu openSettings={() => setShowDialog("settings")} />
-        <UserMenu settings={() => {
-          setShowDialog("settings")
-        }} myAccount={() => {
-          setShowDialog("myaccount")
-        }} email={user.email} />
+        <UserMenu settings={() => setShowDialog("settings")} myAccount={() => setShowDialog("myaccount")} email={user.email} />
       </>
       :
       <>
         {sensorMenu}
-        <MobileMenu openSettings={() => setShowDialog("settings")} />
+        <MobileMenu openSettings={() => setShowDialog("settings")} myAccount={() => setShowDialog("myaccount")} />
       </>
     }
 

diff --git a/src/components/MobileMenu.js b/src/components/MobileMenu.js
@@ -1,49 +1,68 @@
 import React from 'react';
-import { Button, Menu, MenuButton, MenuList, MenuItem, MenuDivider, useColorMode, Collapse } from '@chakra-ui/react';
+import { Button, Menu, MenuButton, MenuList, MenuItem, MenuDivider, useColorMode, Collapse, Divider } from '@chakra-ui/react';
 import { MdArrowDropDown, MdArrowRightAlt } from "react-icons/md"
 import i18next from 'i18next';
 import { FaBars } from 'react-icons/fa';
+import { logout } from '../utils/loginUtils';
+import { useNavigate } from 'react-router-dom';
 
-const itemStyle = { fontFamily: "mulish", fontSize: 15, fontWeight: 800 }
-const MobileMenu = ({ openSettings }) => {
+const MobileMenu = ({ openSettings, myAccount }) => {
     const [show, setShow] = React.useState(false);
+    const [showMyProfile, setShowMyProfile] = React.useState(false);
     const handleToggle = (e) => {
         setShow(!show);
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
     }
+    const handleToggleProfile = (e) => {
+        setShowMyProfile(!showMyProfile);
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+    }
+    const nav = useNavigate()
     const { t } = i18next
     const { colorMode, toggleColorMode } = useColorMode()
     return (
         <Menu autoSelect={false} closeOnSelect={false}>
-            <MenuButton as={Button} variant="topbar" rightIcon={<MdArrowDropDown className="buttonSideIcon" size={26} style={{ marginLeft: -10, marignRight: -10 }} />} style={{ backgroundColor: "transparent", paddingRight: 0, paddingLeft: 10 }}>
+            <MenuButton as={Button} variant="topbar" style={{ backgroundColor: "transparent", paddingRight: 0, paddingLeft: 10 }}>
                 <FaBars />
             </MenuButton>
             <MenuList mt="2" zIndex={10}>
-                <MenuItem style={itemStyle}>{t("home")}</MenuItem>
+                <MenuItem className={(window.location.href.endsWith("/") ? "menuActive" : "") + " ddlItem"} style={{ borderTopRightRadius: 8, borderTopLeftRadius: 8 }} onClick={() => nav("/")}>{t("home")}</MenuItem>
                 <MenuDivider />
-                <MenuItem style={itemStyle}>{t("share_sensors")}</MenuItem>
+                <MenuItem className={(window.location.href.endsWith("/shares") ? "menuActive" : "") + " ddlItem"} onClick={() => nav("/shares")}>{t("share_sensors")}</MenuItem>
                 <MenuDivider />
-                <MenuItem style={itemStyle} onClick={handleToggle}>{t("app_settings")} <MdArrowDropDown /></MenuItem>
+                <MenuItem className="ddlItem" onClick={handleToggle} display={"flex"} justifyContent={"space-between"}>
+                    <span>
+                        {t('app_settings')}
+                    </span>
+                    <MdArrowDropDown size={26} className="buttonSideIcon" style={{ marginLeft: -10, marignRight: -10 }} />
+                </MenuItem>
                 {show && <>
-                <MenuItem style={{...itemStyle, background: "gray"}}>{t("hidden_subitem")}</MenuItem>
-                <MenuDivider />
-                <MenuItem style={{...itemStyle, background: "gray"}}>{t("hidden_subitem2")}</MenuItem>
-                <MenuDivider />
-                <MenuItem style={{...itemStyle, background: "gray"}}>{t("hidden_subitem3")}</MenuItem>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" onClick={() => toggleColorMode()} >{t(colorMode === "light" ? "switch_to_dark_mode" : "switch_to_light_mode")}</MenuItem>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" onClick={() => openSettings()}>{t("settings")}</MenuItem>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/tuki" : "ruuvi.com/support"}`, "_blank")}>{t("help")} <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" onClick={() => window.open(`mailto:support@ruuvi.com?subject=Ruuvi Station Web Feedback`)}>{t("contact_support")} <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" style={{ borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/ideat" : "ruuvi.com/ideas"}`, "_blank")}>{t("what_to_measure")} <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
                 </>}
                 <MenuDivider />
-                <MenuItem style={itemStyle}>{t("my_profile")}</MenuItem>
-                <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => toggleColorMode()} >{t(colorMode === "light" ? "switch_to_dark_mode" : "switch_to_light_mode")}</MenuItem>
-                <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => openSettings()}>{t("settings")}</MenuItem>
-                <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/tuki" : "ruuvi.com/support"}`, "_blank")}>{t("help")} <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
-                <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => window.open(`mailto:support@ruuvi.com?subject=Ruuvi Station Web Feedback`)}>{t("contact_support")} <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
-                <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/ideat" : "ruuvi.com/ideas"}`, "_blank")}>{t("what_to_measure")} <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
+                <MenuItem className="ddlItem" onClick={handleToggleProfile} display={"flex"} justifyContent={"space-between"} style={showMyProfile ? undefined : { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }}>
+                    <span>
+                        {t('my_profile')}
+                    </span>
+                    <MdArrowDropDown size={26} className="buttonSideIcon" style={{ marginLeft: -10, marignRight: -10 }} />
+                </MenuItem>
+                {showMyProfile && <>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" style={{ borderTopLeftRadius: 6, borderTopRightRadius: 6 }} onClick={() => myAccount()}>{t("my_ruuvi_account")}</MenuItem>
+                    <MenuDivider />
+                    <MenuItem className="ddlSubItem" style={{ borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }} onClick={() => logout()}>{t("sign_out")}</MenuItem>
+                </>}
             </MenuList>
         </Menu>
     );

diff --git a/src/components/MyAccountModal.js b/src/components/MyAccountModal.js
@@ -178,10 +178,6 @@ function MyAccountModal(props) {
                 )}
             </Box>
             <Box mt={16}></Box>
-            <Button variant='link' onClick={() => {
-                logout(props.updateApp)
-            }}>{t("sign_out")}</Button>
-            <Box mt={1}></Box>
             <Button variant='link' onClick={async () => {
                 setShowDeleteAccount(true)
             }}>{t("delete_account")}</Button>

diff --git a/src/components/SensorMenu.js b/src/components/SensorMenu.js
@@ -7,18 +7,19 @@ import {
     Button,
     MenuDivider,
 } from "@chakra-ui/react"
-import { MdArrowDropDown } from "react-icons/md"
+import { MdArrowDropDown, MdArrowRightAlt } from "react-icons/md"
 import NetworkApi from "../NetworkApi";
 import withRouter from "../utils/withRouter"
 import { withTranslation } from 'react-i18next';
 import { useNavigate } from "react-router-dom";
 import { getSetting } from "../UnitHelper";
+import i18next from "i18next";
 
 
 class SensorMenu extends Component {
     constructor(props) {
         super(props)
-        this.state = { sensors: [] }
+        this.state = { sensors: [], sensorsOpen: true}
     }
     componentDidMount() {
         new NetworkApi().user(resp => {
@@ -44,6 +45,11 @@ class SensorMenu extends Component {
         }
         return this.state.sensors
     }
+    toggleSensorList = e => {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+        this.setState({...this.state, sensorsOpen: !this.state.sensorsOpen})
+    }
     render() {
         const { t } = this.props;
         const extraStyle = {}
@@ -53,21 +59,31 @@ class SensorMenu extends Component {
         }
         return (
             <>
-                <Menu autoSelect={false} strategy="fixed" placement="bottom-end">
+                <Menu autoSelect={false} closeOnSelect={false} strategy="fixed" placement="bottom-end">
                     <MenuButton as={Button} variant="topbar" rightIcon={<MdArrowDropDown size={26} className="buttonSideIcon" style={{ marginLeft: -10, marignRight: -10 }} />} style={extraStyle}>
-                        {t("sensors")}
+                        {t("my_sensors")}
                     </MenuButton>
                     <MenuList mt="2" zIndex={10}>
-                        <MenuItem className="ddlItem" style={{ borderTopLeftRadius: 6, borderTopRightRadius: 6, fontWeight: 800 }} onClick={() => this.props.addSensor()}>{t('add_new_sensor')}</MenuItem>
+                        <MenuItem className="ddlItem" style={{ borderTopLeftRadius: 6, borderTopRightRadius: 6}} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/tuotteet" : "ruuvi.com/products"}`, "_blank")}>{t('buy_sensors')}  <MdArrowRightAlt style={{ marginLeft: 8 }} /></MenuItem>
+                        <MenuDivider />
+                        <MenuItem className="ddlItem" onClick={() => this.props.addSensor()}>{t('add_new_sensor')}</MenuItem>
+                        <MenuDivider />
+                        <MenuItem className="ddlItem"  onClick={this.toggleSensorList} display={"flex"} justifyContent={"space-between"} style={this.state.sensorsOpen ? undefined : { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }}>
+                            <span>
+                                {t('all_my_sensors')}
+                            </span>
+                            <MdArrowDropDown size={26} className="buttonSideIcon" style={{ marginLeft: -10, marignRight: -10 }} />
+                        </MenuItem>
                         <MenuDivider />
                         {this.getSensors().map((x, i) => {
+                            if (!this.state.sensorsOpen) return null
                             if (!x) return null
                             let divider = <></>
                             let borderStyle = {};
                             if (i === this.state.sensors.length - 1) borderStyle = { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }
                             else divider = <MenuDivider />
                             return <div key={x.sensor + "div"}>
-                                <MenuItem key={x.sensor} className={(this.getCurrentSensor() === x.sensor ? "menuActive" : undefined) + " ddlItem"} style={{ ...borderStyle }} onClick={() => this.props.navigate('/' + x.sensor)}>{x.name || x.sensor}</MenuItem>
+                                <MenuItem key={x.sensor} className={(this.getCurrentSensor() === x.sensor ? "menuActive" : "") + " ddlSubItem"} style={{ ...borderStyle }} onClick={() => this.props.navigate('/' + x.sensor)}>{x.name || x.sensor}</MenuItem>
                                 {divider}
                             </div>
                         })}

diff --git a/src/components/SettingsMenu.js b/src/components/SettingsMenu.js
@@ -4,7 +4,6 @@ import { MdArrowDropDown, MdArrowRightAlt } from "react-icons/md"
 import i18next from 'i18next';
 import { FaCog } from 'react-icons/fa';
 
-const itemStyle = { fontFamily: "mulish", fontSize: 15, fontWeight: 800 }
 const SettingsMenu = ({openSettings}) => {
     const { t } = i18next
     const { colorMode, toggleColorMode } = useColorMode()
@@ -14,15 +13,15 @@ const SettingsMenu = ({openSettings}) => {
                 <FaCog />
             </MenuButton>
             <MenuList mt="2" zIndex={10}>
-                <MenuItem style={itemStyle} onClick={() => toggleColorMode()} >{t(colorMode === "light" ? "switch_to_dark_mode" : "switch_to_light_mode")}</MenuItem>
+                <MenuItem className="ddlItem" style={{ borderTopRightRadius: 8, borderTopLeftRadius: 8 }} onClick={() => toggleColorMode()} >{t(colorMode === "light" ? "switch_to_dark_mode" : "switch_to_light_mode")}</MenuItem>
                 <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => openSettings()}>{t("settings")}</MenuItem>
+                <MenuItem className="ddlItem" onClick={() => openSettings()}>{t("settings")}</MenuItem>
                 <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/tuki" : "ruuvi.com/support"}`, "_blank")}>{t("help")} <MdArrowRightAlt style={{marginLeft: 8}} /></MenuItem>
+                <MenuItem className="ddlItem" onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/tuki" : "ruuvi.com/support"}`, "_blank")}>{t("help")} <MdArrowRightAlt style={{marginLeft: 8}} /></MenuItem>
                 <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => window.open(`mailto:support@ruuvi.com?subject=Ruuvi Station Web Feedback`)}>{t("contact_support")} <MdArrowRightAlt style={{marginLeft: 8}} /></MenuItem>
+                <MenuItem className="ddlItem" onClick={() => window.open(`mailto:support@ruuvi.com?subject=Ruuvi Station Web Feedback`)}>{t("contact_support")} <MdArrowRightAlt style={{marginLeft: 8}} /></MenuItem>
                 <MenuDivider />
-                <MenuItem style={itemStyle} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/ideat" : "ruuvi.com/ideas"}`, "_blank")}>{t("what_to_measure")} <MdArrowRightAlt style={{marginLeft: 8}} /></MenuItem>
+                <MenuItem className="ddlItem" style={{ borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }} onClick={() => window.open(`https://${i18next.language === "fi" ? "ruuvi.com/fi/ideat" : "ruuvi.com/ideas"}`, "_blank")}>{t("what_to_measure")} <MdArrowRightAlt style={{marginLeft: 8}} /></MenuItem>
             </MenuList>
         </Menu>
     );

diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
@@ -12,6 +12,7 @@ import { MdArrowDropDown } from "react-icons/md"
 import { withTranslation } from 'react-i18next';
 import { withColorMode } from "../utils/withColorMode";
 import { useNavigate } from "react-router-dom";
+import { logout } from "../utils/loginUtils";
 
 class UserMenu extends Component {
     settings() {
@@ -25,19 +26,9 @@ class UserMenu extends Component {
                     <FaUserAlt />
                 </MenuButton>
                 <MenuList mt="2" zIndex={10}>
-                    <MenuItem isDisabled={true} style={{ fontFamily: "mulish", fontSize: 15, fontWeight: 800, cursor: "unset", borderTopLeftRadius: 6, borderTopRightRadius: 6 }}>{this.props.email}</MenuItem>
+                    <MenuItem className="ddlItem" style={{ borderTopLeftRadius: 6, borderTopRightRadius: 6 }} onClick={() => this.props.myAccount()}>{t("my_ruuvi_account")}</MenuItem>
                     <MenuDivider />
-                    {/**
-                <MenuItem style={{ fontFamily: "mulish", fontSize: 15, fontWeight: 800 }} onClick={() => this.seeSettings()}>Show settings</MenuItem>
-                <MenuItem style={{ fontFamily: "mulish", fontSize: 15, fontWeight: 800 }} onClick={() => this.seeAlerts()}>Show alerts</MenuItem>
-                */}
-                    {/* 
-                    <MenuItem style={{ fontFamily: "mulish", fontSize: 15, fontWeight: 800 }} onClick={() => this.props.navigate('/shares')}>{t("share_center")}</MenuItem>
-                    <MenuDivider />
-                    <MenuItem style={{ fontFamily: "mulish", fontSize: 15, fontWeight: 800 }} onClick={() => this.settings()}>{t("settings")}</MenuItem>
-                    <MenuDivider />
-                    */}
-                    <MenuItem style={{ fontFamily: "mulish", fontSize: 15, fontWeight: 800, borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }} onClick={() => this.props.myAccount()}>{t("my_ruuvi_account")}</MenuItem>
+                    <MenuItem className="ddlItem" style={{ borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }} onClick={() => logout()}>{t("sign_out")}</MenuItem>
                 </MenuList>
             </Menu>
         )
@@ -46,6 +37,6 @@ class UserMenu extends Component {
 
 export default withTranslation()(withColorMode((props) => (
     <UserMenu {...props}
-    navigate={useNavigate()}
+        navigate={useNavigate()}
     />
 )));