Electron fixes and new menu icon.

2025-08-23 19:20:59 +01:00 · 2025-08-23 19:20:59 +01:00 · b1484bf127
commit b1484bf127
parent 7276633f3e
8 changed files with 125 additions and 48 deletions
--- a/assets/icons/menuicon.svg
+++ b/assets/icons/menuicon.svg
@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.51748,0,0,1.51748,-16.5594,-16.5594)">
-        <g transform="matrix(1,0,0,1,0,-1.28566)">
-            <g transform="matrix(0.583164,0,0,0.583164,0.722015,18.47)">
-                <path d="M23.983,10.233L83.255,10.233C85.015,10.233 86.406,8.815 86.406,7.055C86.406,5.304 85.005,3.845 83.255,3.845L23.983,3.845C22.244,3.845 20.864,5.324 20.864,7.055C20.864,8.795 22.234,10.233 23.983,10.233Z" style="fill-rule:nonzero;"/>
-            </g>
-            <g transform="matrix(0.583164,0,0,0.583164,0.722015,21.0413)">
-                <path d="M23.983,42.557L83.255,42.557C85.015,42.557 86.406,41.138 86.406,39.379C86.406,37.627 85.005,36.169 83.255,36.169L23.983,36.169C22.244,36.169 20.864,37.647 20.864,39.379C20.864,41.118 22.234,42.557 23.983,42.557Z" style="fill-rule:nonzero;"/>
-            </g>
+    <g transform="matrix(1.51748,0,0,1.51748,-16.5594,-18.5104)">
+        <g transform="matrix(0.722087,0,0,0.722087,-7.06688,4.8622)">
+            <path d="M30.756,42.557L77.418,42.557C79.178,42.557 80.569,41.138 80.569,39.379C80.569,37.627 79.168,36.169 77.418,36.169L30.756,36.169C29.016,36.169 27.637,37.647 27.637,39.379C27.637,41.118 29.006,42.557 30.756,42.557Z" style="fill-rule:nonzero;"/>
        </g>
-        <g transform="matrix(0.583164,0,0,0.583164,0.722015,18.47)">
-            <path d="M23.983,26.395L83.255,26.395C85.015,26.395 86.406,24.966 86.406,23.207C86.406,21.456 85.005,20.007 83.255,20.007L23.983,20.007C22.244,20.007 20.864,21.485 20.864,23.207C20.864,24.947 22.234,26.395 23.983,26.395Z" style="fill-rule:nonzero;"/>
+        <g transform="matrix(1,0,0,1,0,0.343066)">
+            <g transform="matrix(0.722087,0,0,0.722087,-7.06688,19.0175)">
+                <path d="M30.756,42.557L77.418,42.557C79.178,42.557 80.569,41.138 80.569,39.379C80.569,37.627 79.168,36.169 77.418,36.169L30.756,36.169C29.016,36.169 27.637,37.647 27.637,39.379C27.637,41.118 29.006,42.557 30.756,42.557Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0.722087,0,0,0.722087,-7.06688,-9.97925)">
+                <path d="M30.756,42.557L77.418,42.557C79.178,42.557 80.569,41.138 80.569,39.379C80.569,37.627 79.168,36.169 77.418,36.169L30.756,36.169C29.016,36.169 27.637,37.647 27.637,39.379C27.637,41.118 29.006,42.557 30.756,42.557Z" style="fill-rule:nonzero;"/>
+            </g>
        </g>
    </g>
 </svg>
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -63,10 +63,13 @@
  line-height: 40px;
 }

-.electron-sidebar .ant-menu-item {
-  height: 32.5px;
-  line-height: 32.5px;
-  padding-inline: calc(50% - 8px - 4px);
+.electron-navigation .ant-menu-overflow-item-rest {
+  padding-inline: 10px;
+}
+
+.electron-sidebar .ant-menu-item,  .electron-sidebar .ant-menu-submenu-title {
+  height: 32.5px !important;
+  line-height: 32.5px !important;
 }

 .electron-sider.ant-layout-sider-collapsed {
--- a/design_files/menuicon.afdesign
+++ b/design_files/menuicon.afdesign
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@ -9,12 +9,12 @@ import {
  Button,
  Tooltip,
  Badge,
-  Divider
+  Divider,
+  Typography
 } from 'antd'
 import {
  LogoutOutlined,
  MailOutlined,
-  MenuOutlined,
  LoadingOutlined
 } from '@ant-design/icons'
 import { AuthContext } from '../context/AuthContext'
@ -27,6 +27,7 @@ import KeyboardShortcut from './KeyboardShortcut'

 import FarmControlLogo from '../../Logos/FarmControlLogo'
 import FarmControlLogoSmall from '../../Logos/FarmControlLogoSmall'
+import MenuIcon from '../../Icons/MenuIcon'
 import ProductionIcon from '../../Icons/ProductionIcon'
 import InventoryIcon from '../../Icons/InventoryIcon'
 import PersonIcon from '../../Icons/PersonIcon'
@ -38,6 +39,8 @@ import DeveloperIcon from '../../Icons/DeveloperIcon'
 import { ElectronContext } from '../context/ElectronContext'
 import DashboardWindowButtons from './DashboardWindowButtons'

+const { Text } = Typography
+
 const DashboardNavigation = () => {
  const { logout, userProfile } = useContext(AuthContext)
  const { showSpotlight } = useContext(SpotlightContext)
@ -47,27 +50,14 @@ const DashboardNavigation = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [selectedKey, setSelectedKey] = useState('production')
+  const [selectedMenuItem, setSelectedMenuItem] = useState({
+    key: 'production',
+    label: 'Production',
+    icon: <ProductionIcon />
+  })
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const { platform, isElectron, isFullScreen } = useContext(ElectronContext)

-  useEffect(() => {
-    const pathParts = location.pathname.split('/').filter(Boolean)
-    if (pathParts.length > 2) {
-      setSelectedKey(pathParts[1]) // Return the section (production/management)
-    }
-  }, [location.pathname])
-
-  useEffect(() => {
-    if (connecting == true) {
-      setApiServerState('connecting')
-    } else if (connected == true) {
-      setApiServerState('connected')
-    } else {
-      setApiServerState('disconnected')
-    }
-    console.log('Connecting/connected', connecting, connected)
-  }, [connecting, connected])
-
  const mainMenuItems = [
    {
      key: 'production',
@ -115,6 +105,27 @@ const DashboardNavigation = () => {
    }
  }

+  useEffect(() => {
+    const pathParts = location.pathname.split('/').filter(Boolean)
+    if (pathParts.length > 2) {
+      setSelectedMenuItem(
+        mainMenuItems.filter((item) => item.key == pathParts[1])[0]
+      )
+      setSelectedKey(pathParts[1]) // Return the section (production/management)
+    }
+  }, [location.pathname])
+
+  useEffect(() => {
+    if (connecting == true) {
+      setApiServerState('connecting')
+    } else if (connected == true) {
+      setApiServerState('connected')
+    } else {
+      setApiServerState('disconnected')
+    }
+    console.log('Connecting/connected', connecting, connected)
+  }, [connecting, connected])
+
  const handleMainMenuClick = ({ key }) => {
    if (key === 'production') {
      navigate('/dashboard/production/overview')
@ -125,35 +136,91 @@ const DashboardNavigation = () => {
    }
  }

+  const showAppLogo =
+    (isElectron && platform == 'darwin' && isFullScreen == true) ||
+    (isElectron && platform != 'darwin')
+  const isMacOSApp = isElectron && platform == 'darwin'
+  const isOtherApp = isElectron && platform != 'darwin'
+
+  const showDesktopLogo = !isElectron && !isMobile
+  const showMobileLogo = !isElectron && isMobile
+
  const navigationContents = (
    <Flex style={{ width: '100%' }} align='center'>
-      {isElectron && platform == 'darwin' ? <DashboardWindowButtons /> : null}
-      {(!isElectron || (platform == 'darwin' && isFullScreen == true)) &&
-      !isMobile ? (
+      {isMacOSApp ? <DashboardWindowButtons /> : null}
+      {showAppLogo == true && (
+        <FarmControlLogoSmall
+          style={{
+            fontSize: '46px',
+            height: '16px',
+            marginLeft: '15px',
+            marginRight: '5px'
+          }}
+        />
+      )}
+      {showDesktopLogo == true ? (
        <FarmControlLogo
          style={{
            fontSize: '200px',
            height: '18px',
-            marginLeft:
-              platform == 'darwin' && isFullScreen == true ? '8px' : 'unset'
+            marginRight: '15px'
+          }}
+        />
+      ) : showMobileLogo == true ? (
+        <FarmControlLogoSmall
+          style={{
+            fontSize: '48px',
+            marginRight: isElectron ? '20px' : '25px'
          }}
        />
-      ) : !isElectron && isMobile ? (
-        <FarmControlLogoSmall style={{ fontSize: '48px' }} />
      ) : null}
+      {isMobile && (
+        <Flex
+          gap={'small'}
+          align='center'
+          style={{
+            marginLeft: '16px',
+            minWidth: 0, // allow children to shrink
+            maxWidth: '100%' // responsive
+          }}
+        >
+          {selectedMenuItem.icon}
+          <Text
+            ellipsis
+            style={{
+              minWidth: 0, // CRUCIAL for flex children
+              maxWidth: '100%', // Responsive
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              flex: 1 // Take available space, shrink as needed
+            }}
+          >
+            {selectedMenuItem.label}
+          </Text>
+        </Flex>
+      )}
      <Menu
        mode='horizontal'
        className={isElectron ? 'electron-navigation' : null}
        items={mainMenuItems}
        style={{
          flexWrap: 'wrap',
-          flexGrow: 1,
-          border: 0
+          flexGrow: isMobile ? 0 : 1,
+          border: 0,
+          width: isMobile ? '64px' : 'unset'
        }}
        onClick={handleMainMenuClick}
        selectedKeys={[selectedKey]}
-        overflowedIndicator={<Button type='text' icon={<MenuOutlined />} />}
+        overflowedIndicator={
+          <Button
+            type='text'
+            icon={<MenuIcon />}
+            style={{ marginBottom: '4px' }}
+          />
+        }
      />
+      {isMobile && <div style={{ flexGrow: 1 }} />}
      <Flex gap={'middle'} align='center'>
        <Space>
          <KeyboardShortcut
@ -235,6 +302,7 @@ const DashboardNavigation = () => {
          </Space>
        ) : null}
      </Flex>
+      {isOtherApp ? <DashboardWindowButtons /> : null}
    </Flex>
  )

@ -243,7 +311,7 @@ const DashboardNavigation = () => {
      {isElectron ? (
        <Flex
          className='ant-menu-horizontal ant-menu-light electron-navigation-wrapper'
-          style={{ lineHeight: '40px', padding: '0 8px 0 4px' }}
+          style={{ lineHeight: '40px', padding: '0 10px 0 4px' }}
        >
          {navigationContents}
        </Flex>
--- a/src/components/Dashboard/common/DashboardWindowButtons.jsx
+++ b/src/components/Dashboard/common/DashboardWindowButtons.jsx
@ -36,7 +36,7 @@ const DashboardWindowButtons = () => {
    <Flex align='center'>
      {platform == 'darwin' ? (
        isFullScreen == false ? (
-          <div style={{ width: '60px' }} />
+          <div style={{ width: '65px' }} />
        ) : null
      ) : (
        <>
--- a/src/components/Dashboard/common/Flag.jsx
+++ b/src/components/Dashboard/common/Flag.jsx
@ -7,6 +7,8 @@ const Flag = ({
  hasDropShadow = false,
  borderRadius = 0
 }) => {
+  const useRelativePath =
+    typeof window !== 'undefined' && window.location.href.includes('index.html')
  var flagContainerStyle = {}
  var flagStyle = {}
  if (hasBorder == true) {
@ -31,7 +33,10 @@ const Flag = ({
  }
  return (
    <Flex style={flagContainerStyle}>
-      <img src={`/flags/${size}/${code}.svg`} style={flagStyle} />
+      <img
+        src={`${useRelativePath ? '.' : ''}/flags/${size}/${code}.svg`}
+        style={flagStyle}
+      />
    </Flex>
  )
 }
--- a/src/components/Dashboard/context/AuthContext.jsx
+++ b/src/components/Dashboard/context/AuthContext.jsx
@ -105,6 +105,7 @@ const AuthProvider = ({ children }) => {
      }
    },
    [
+      redirectType,
      messageApi,
      openExternalUrl,
      isElectron,
--- a/vite.config.js
+++ b/vite.config.js
@ -5,9 +5,9 @@ import svgr from 'vite-plugin-svgr'
 import svgo from 'vite-plugin-svgo'

 export default defineConfig({
+  base: './',
  plugins: [react(), svgo(), svgr(), eslintPlugin()],
  build: {
-    // to output your build into build dir the same as Webpack
    outDir: 'build'
  },
  server: {