Refactor DashboardNavigation and enhance CSS styles
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good

- Updated `DashboardNavigation` to conditionally render controls based on authentication and platform.
- Improved user experience by displaying a "Farm Control" message when controls are hidden.
- Enhanced CSS for the electron navigation wrapper to include z-index and user-select properties for better UI handling.
This commit is contained in:
Tom Butcher 2026-08-04 02:14:57 +01:00
parent d28bed7136
commit 184a6621d9
2 changed files with 73 additions and 51 deletions

View File

@ -104,8 +104,10 @@
line-height: 0.7; line-height: 0.7;
} }
.electron-navigation-wrapper.electrobun-webkit-app-region-drag { .electron-navigation-wrapper {
user-select: none; user-select: none;
--webkit-user-select: none;
z-index: 10000;
} }
/* Native macOS vibrancy — transparent web content over NSVisualEffectView */ /* Native macOS vibrancy — transparent web content over NSVisualEffectView */

View File

@ -52,6 +52,7 @@ const DashboardNavigation = () => {
const { userProfile } = useContext(AuthContext) const { userProfile } = useContext(AuthContext)
const { showSpotlight } = useContext(SpotlightContext) const { showSpotlight } = useContext(SpotlightContext)
const { connecting, connected } = useContext(ApiServerContext) const { connecting, connected } = useContext(ApiServerContext)
const { authenticated } = useContext(AuthContext)
const { toggleNotificationCenter, unreadCount, notificationCenterVisible } = const { toggleNotificationCenter, unreadCount, notificationCenterVisible } =
useContext(NotificationContext) useContext(NotificationContext)
const [apiServerState, setApiServerState] = useState('disconnected') const [apiServerState, setApiServerState] = useState('disconnected')
@ -147,6 +148,8 @@ const DashboardNavigation = () => {
const showDesktopLogo = !isElectron && !isMobile const showDesktopLogo = !isElectron && !isMobile
const showMobileLogo = !isElectron && isMobile const showMobileLogo = !isElectron && isMobile
const showControls = !isElectron || authenticated
const navigationContents = ( const navigationContents = (
<Flex style={{ width: '100%' }} align='center'> <Flex style={{ width: '100%' }} align='center'>
{isMacOSApp ? <DashboardWindowButtons /> : null} {isMacOSApp ? <DashboardWindowButtons /> : null}
@ -209,6 +212,7 @@ const DashboardNavigation = () => {
</Flex> </Flex>
)} )}
<div style={{ flexGrow: 1 }}> <div style={{ flexGrow: 1 }}>
{showControls && (
<Menu <Menu
mode='horizontal' mode='horizontal'
className={isElectron ? 'electron-navigation' : null} className={isElectron ? 'electron-navigation' : null}
@ -229,6 +233,20 @@ const DashboardNavigation = () => {
/> />
} }
/> />
)}
{!showControls && (
<Text
type='secondary'
style={{
fontSize: '14px',
marginLeft: '8px',
userSelect: 'none',
'--webkit-user-select': 'none'
}}
>
Farm Control
</Text>
)}
</div> </div>
{isMobile && <div style={{ flexGrow: 1 }} />} {isMobile && <div style={{ flexGrow: 1 }} />}
@ -238,6 +256,7 @@ const DashboardNavigation = () => {
align='center' align='center'
style={{ marginTop: '-2px', marginRight: '6px' }} style={{ marginTop: '-2px', marginRight: '6px' }}
> >
{showControls && (
<Space style={{ paddingTop: '2px', marginRight: '8px' }}> <Space style={{ paddingTop: '2px', marginRight: '8px' }}>
<WebAppSwitcher /> <WebAppSwitcher />
<KeyboardShortcut <KeyboardShortcut
@ -272,6 +291,7 @@ const DashboardNavigation = () => {
</KeyboardShortcut> </KeyboardShortcut>
</Badge> </Badge>
</Space> </Space>
)}
{import.meta.env.MODE === 'development' && ( {import.meta.env.MODE === 'development' && (
<Space> <Space>
{apiServerState === 'connected' ? ( {apiServerState === 'connected' ? (
@ -313,7 +333,7 @@ const DashboardNavigation = () => {
</Tooltip> </Tooltip>
</Space> </Space>
)} )}
{userProfile ? ( {showControls && userProfile ? (
<Space> <Space>
<Popover <Popover
content={userPopoverContent} content={userPopoverContent}
@ -329,7 +349,7 @@ const DashboardNavigation = () => {
</Popover> </Popover>
</Space> </Space>
) : null} ) : null}
{isElectron && availableUpdate ? ( {showControls && isElectron && availableUpdate ? (
<Tag <Tag
icon={<CloudIcon />} icon={<CloudIcon />}
style={{ cursor: 'pointer', margin: '2px 0 0 0' }} style={{ cursor: 'pointer', margin: '2px 0 0 0' }}