Fixed Navigator (#7268)

This commit is contained in:
Alexander Platov 2024-12-06 04:15:27 +03:00 committed by GitHub
parent ecf4064f69
commit 6256f8b02d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -125,6 +125,8 @@
} from '../workbench' } from '../workbench'
import { get } from 'svelte/store' import { get } from 'svelte/store'
const HIDE_NAVIGATOR = 720
const HIDE_ASIDE = 1024
let contentPanel: HTMLElement let contentPanel: HTMLElement
const { setTheme } = getContext<{ setTheme: (theme: string) => void }>('theme') const { setTheme } = getContext<{ setTheme: (theme: string) => void }>('theme')
@ -164,7 +166,7 @@
async function toggleNav (): Promise<void> { async function toggleNav (): Promise<void> {
$deviceInfo.navigator.visible = !$deviceInfo.navigator.visible $deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
closeTooltip() closeTooltip()
if (currentApplication && navigatorModel && navigator) { if (currentApplication && navigatorModel) {
await tick() await tick()
panelInstance.fitPopupInstance() panelInstance.fitPopupInstance()
popupInstance.fitPopupInstance() popupInstance.fitPopupInstance()
@ -634,12 +636,12 @@
let cover: HTMLElement let cover: HTMLElement
let workbenchWidth: number = $deviceInfo.docWidth let workbenchWidth: number = $deviceInfo.docWidth
$deviceInfo.navigator.float = !(workbenchWidth < 1024) $deviceInfo.navigator.float = workbenchWidth <= HIDE_NAVIGATOR
const checkWorkbenchWidth = (): void => { const checkWorkbenchWidth = (): void => {
if (workbenchWidth <= 720 && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) { if (workbenchWidth <= HIDE_NAVIGATOR && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
$deviceInfo.navigator.visible = false $deviceInfo.navigator.visible = false
$deviceInfo.navigator.float = true $deviceInfo.navigator.float = true
} else if (workbenchWidth > 720 && $deviceInfo.navigator.float) { } else if (workbenchWidth > HIDE_NAVIGATOR && $deviceInfo.navigator.float) {
if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) { if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
$deviceInfo.navigator.float = false $deviceInfo.navigator.float = false
$deviceInfo.navigator.visible = true $deviceInfo.navigator.visible = true
@ -647,17 +649,17 @@
} }
} }
checkWorkbenchWidth() checkWorkbenchWidth()
$: if ($deviceInfo.docWidth <= 1024 && !$deviceInfo.aside.float) { $: if ($deviceInfo.docWidth <= HIDE_ASIDE && !$deviceInfo.aside.float) {
$deviceInfo.aside.visible = false $deviceInfo.aside.visible = false
$deviceInfo.aside.float = true $deviceInfo.aside.float = true
} else if ($deviceInfo.docWidth > 1024 && $deviceInfo.aside.float) { } else if ($deviceInfo.docWidth > HIDE_ASIDE && $deviceInfo.aside.float) {
if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) { if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
$deviceInfo.aside.float = false $deviceInfo.aside.float = false
$deviceInfo.aside.visible = true $deviceInfo.aside.visible = true
} }
} }
const checkOnHide = (): void => { const checkOnHide = (): void => {
if ($deviceInfo.navigator.visible && workbenchWidth <= 1024) $deviceInfo.navigator.visible = false if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
} }
let oldNavVisible: boolean = $deviceInfo.navigator.visible let oldNavVisible: boolean = $deviceInfo.navigator.visible
let oldASideVisible: boolean = $deviceInfo.aside.visible let oldASideVisible: boolean = $deviceInfo.aside.visible
@ -742,7 +744,7 @@
defineSeparators('workbench', workbenchSeparators) defineSeparators('workbench', workbenchSeparators)
defineSeparators('main', mainSeparators) defineSeparators('main', mainSeparators)
$: mainNavigator = currentApplication && navigatorModel && navigator && $deviceInfo.navigator.visible $: mainNavigator = currentApplication && navigatorModel && $deviceInfo.navigator.visible
$: elementPanel = $deviceInfo.replacedPanel ?? contentPanel $: elementPanel = $deviceInfo.replacedPanel ?? contentPanel
$: deactivated = $: deactivated =
@ -818,7 +820,11 @@
/> />
</div> </div>
<!-- <ActivityStatus status="active" /> --> <!-- <ActivityStatus status="active" /> -->
<NavLink app={notificationId} shrink={0}> <NavLink
app={notificationId}
shrink={0}
disabled={!$deviceInfo.navigator.visible && $deviceInfo.navigator.float && currentAppAlias === notificationId}
>
<AppItem <AppItem
icon={notification.icon.Notifications} icon={notification.icon.Notifications}
label={notification.string.Inbox} label={notification.string.Inbox}
@ -827,7 +833,9 @@
$deviceInfo.navigator.visible} $deviceInfo.navigator.visible}
on:click={(e) => { on:click={(e) => {
if (e.metaKey || e.ctrlKey) return if (e.metaKey || e.ctrlKey) return
if (currentAppAlias === notificationId && lastLoc !== undefined) { if (!$deviceInfo.navigator.visible && $deviceInfo.navigator.float && currentAppAlias === notificationId) {
toggleNav()
} else if (currentAppAlias === notificationId && lastLoc !== undefined) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
navigate(lastLoc) navigate(lastLoc)
@ -911,12 +919,12 @@
checkWorkbenchWidth() checkWorkbenchWidth()
}} }}
> >
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if $deviceInfo.navigator.float && $deviceInfo.navigator.visible}
<div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
{/if}
{#if mainNavigator} {#if mainNavigator}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if $deviceInfo.navigator.float}
<div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
{/if}
<div <div
class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal' class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
? 'portrait' ? 'portrait'