Refactor DashboardNavigation and enhance CSS styles
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
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:
parent
d28bed7136
commit
184a6621d9
@ -104,8 +104,10 @@
|
||||
line-height: 0.7;
|
||||
}
|
||||
|
||||
.electron-navigation-wrapper.electrobun-webkit-app-region-drag {
|
||||
.electron-navigation-wrapper {
|
||||
user-select: none;
|
||||
--webkit-user-select: none;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* Native macOS vibrancy — transparent web content over NSVisualEffectView */
|
||||
|
||||
@ -52,6 +52,7 @@ const DashboardNavigation = () => {
|
||||
const { userProfile } = useContext(AuthContext)
|
||||
const { showSpotlight } = useContext(SpotlightContext)
|
||||
const { connecting, connected } = useContext(ApiServerContext)
|
||||
const { authenticated } = useContext(AuthContext)
|
||||
const { toggleNotificationCenter, unreadCount, notificationCenterVisible } =
|
||||
useContext(NotificationContext)
|
||||
const [apiServerState, setApiServerState] = useState('disconnected')
|
||||
@ -147,6 +148,8 @@ const DashboardNavigation = () => {
|
||||
const showDesktopLogo = !isElectron && !isMobile
|
||||
const showMobileLogo = !isElectron && isMobile
|
||||
|
||||
const showControls = !isElectron || authenticated
|
||||
|
||||
const navigationContents = (
|
||||
<Flex style={{ width: '100%' }} align='center'>
|
||||
{isMacOSApp ? <DashboardWindowButtons /> : null}
|
||||
@ -209,6 +212,7 @@ const DashboardNavigation = () => {
|
||||
</Flex>
|
||||
)}
|
||||
<div style={{ flexGrow: 1 }}>
|
||||
{showControls && (
|
||||
<Menu
|
||||
mode='horizontal'
|
||||
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>
|
||||
{isMobile && <div style={{ flexGrow: 1 }} />}
|
||||
|
||||
@ -238,6 +256,7 @@ const DashboardNavigation = () => {
|
||||
align='center'
|
||||
style={{ marginTop: '-2px', marginRight: '6px' }}
|
||||
>
|
||||
{showControls && (
|
||||
<Space style={{ paddingTop: '2px', marginRight: '8px' }}>
|
||||
<WebAppSwitcher />
|
||||
<KeyboardShortcut
|
||||
@ -272,6 +291,7 @@ const DashboardNavigation = () => {
|
||||
</KeyboardShortcut>
|
||||
</Badge>
|
||||
</Space>
|
||||
)}
|
||||
{import.meta.env.MODE === 'development' && (
|
||||
<Space>
|
||||
{apiServerState === 'connected' ? (
|
||||
@ -313,7 +333,7 @@ const DashboardNavigation = () => {
|
||||
</Tooltip>
|
||||
</Space>
|
||||
)}
|
||||
{userProfile ? (
|
||||
{showControls && userProfile ? (
|
||||
<Space>
|
||||
<Popover
|
||||
content={userPopoverContent}
|
||||
@ -329,7 +349,7 @@ const DashboardNavigation = () => {
|
||||
</Popover>
|
||||
</Space>
|
||||
) : null}
|
||||
{isElectron && availableUpdate ? (
|
||||
{showControls && isElectron && availableUpdate ? (
|
||||
<Tag
|
||||
icon={<CloudIcon />}
|
||||
style={{ cursor: 'pointer', margin: '2px 0 0 0' }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user