WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-13 05:07:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the behavior of the navigator and sidebar on the mobile (#7694)

Browse Source
This commit is contained in:
Alexander Platov
2025-01-17 11:47:25 +07:00
committed by GitHub
parent a31bfa2dc1
commit 4820785009
8 changed files with 40 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/workbench-resources/src/components/Workbench.svelte
+26 -28
View File
@@ -159,19 +159,12 @@
const linkProviders = client.getModel().findAllSync(view.mixin.LinkIdProvider, {})
const mobileAdaptive = $deviceInfo.isMobile && $deviceInfo.minWidth
const defaultNavigator = !(getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true)
const savedNavigator = localStorage.getItem('hiddenNavigator')
const savedAside = localStorage.getItem('hiddenAside')
let hiddenNavigator: boolean = savedNavigator !== null ? savedNavigator === 'true' : defaultNavigator
let hiddenAside: boolean = savedAside !== null ? savedAside === 'true' : defaultNavigator
let hiddenAside: boolean = true
$deviceInfo.navigator.visible = !hiddenNavigator
$deviceInfo.aside.visible = !hiddenAside
sidebarStore.subscribe((sidebar) => {
if (!$deviceInfo.aside.float) {
hiddenAside = sidebar.variant === SidebarVariant.MINI
localStorage.setItem('hiddenAside', `${hiddenAside}`)
}
})
async function toggleNav (): Promise<void> {
$deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
@@ -642,37 +635,42 @@
}
}
checkWorkbenchWidth()
$: if ($deviceInfo.docWidth <= FLOAT_ASIDE && !$deviceInfo.aside.float) {
$deviceInfo.aside.visible = false
$deviceInfo.aside.float = true
} else if ($deviceInfo.docWidth > FLOAT_ASIDE && $deviceInfo.aside.float) {
$deviceInfo.aside.float = false
$deviceInfo.aside.visible = !hiddenAside
$: if ($deviceInfo.docWidth <= FLOAT_ASIDE && !$sidebarStore.float) {
hiddenAside = $sidebarStore.variant === SidebarVariant.MINI
$sidebarStore.float = true
} else if ($deviceInfo.docWidth > FLOAT_ASIDE && $sidebarStore.float) {
$sidebarStore.float = false
$sidebarStore.variant = hiddenAside ? SidebarVariant.MINI : SidebarVariant.EXPANDED
}
const checkOnHide = (): void => {
if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
}
let oldNavVisible: boolean = $deviceInfo.navigator.visible
let oldASideVisible: boolean = $deviceInfo.aside.visible
$: if (oldNavVisible !== $deviceInfo.navigator.visible || oldASideVisible !== $deviceInfo.aside.visible) {
if ($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.navigator.float) {
if ($deviceInfo.navigator.visible && $deviceInfo.aside.visible) {
let oldASideVisible: boolean = $sidebarStore.variant !== SidebarVariant.MINI
$: if (
oldNavVisible !== $deviceInfo.navigator.visible ||
oldASideVisible !== ($sidebarStore.variant !== SidebarVariant.MINI)
) {
if (mobileAdaptive && $deviceInfo.navigator.float) {
if ($deviceInfo.navigator.visible && $sidebarStore.variant !== SidebarVariant.MINI) {
if (oldNavVisible) $deviceInfo.navigator.visible = false
else $deviceInfo.aside.visible = false
else $sidebarStore.variant = SidebarVariant.MINI
}
}
oldNavVisible = $deviceInfo.navigator.visible
oldASideVisible = $deviceInfo.aside.visible
oldASideVisible = $sidebarStore.variant !== SidebarVariant.MINI
}
$: if (
$deviceInfo.aside.float &&
$deviceInfo.aside.visible &&
$sidebarStore.variant === SidebarVariant.MINI &&
$sidebarStore.float &&
$sidebarStore.variant !== SidebarVariant.MINI &&
$sidebarStore.widget === undefined &&
$sidebarStore.widgetsState.size > 0
) {
$sidebarStore.variant = SidebarVariant.EXPANDED
$sidebarStore.widget = Array.from($sidebarStore.widgetsState.keys())[0]
}
location.subscribe(() => {
if (mobileAdaptive && $sidebarStore.variant !== SidebarVariant.MINI) $sidebarStore.variant = SidebarVariant.MINI
})
$: $deviceInfo.navigator.direction = $deviceInfo.isMobile && $deviceInfo.isPortrait ? 'horizontal' : 'vertical'
let appsMini: boolean
$: appsMini =
@@ -976,9 +974,9 @@
<div
bind:this={contentPanel}
class={navigatorModel === undefined ? 'hulyPanels-container' : 'hulyComponent overflow-hidden'}
class:straighteningCorners={$deviceInfo.aside.float &&
class:straighteningCorners={$sidebarStore.float &&
$sidebarStore.variant === SidebarVariant.EXPANDED &&
!($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
!(mobileAdaptive && $deviceInfo.isPortrait)}
data-id={'contentPanel'}
>
{#if currentApplication && currentApplication.component}
@@ -1022,7 +1020,7 @@
{/if}
</div>
</div>
{#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$deviceInfo.aside.float}
{#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$sidebarStore.float}
<Separator name={'main'} index={0} color={'transparent'} separatorSize={0} short />
{/if}
<WidgetsBar />
plugins/workbench-resources/src/components/sidebar/Sidebar.svelte
+1 -1
View File
@@ -61,7 +61,7 @@
})
</script>
<div id="sidebar" class="antiPanel-application vertical sidebar-container" class:mini={mini || $deviceInfo.aside.float}>
<div id="sidebar" class="antiPanel-application vertical sidebar-container" class:mini={mini || $sidebarStore.float}>
{#if mini}
<SidebarMini {widgets} {preferences} />
{:else if $sidebarStore.variant === SidebarVariant.EXPANDED}
plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
+2 -2
View File
@@ -54,7 +54,7 @@
$: if ($sidebarStore.widget === undefined) {
sidebarStore.update((s) => ({ ...s, variant: SidebarVariant.MINI }))
}
$: float = $deviceInfo.aside.float
$: float = $sidebarStore.float
function closeWrongTabs (loc: Location): void {
if (widget === undefined) return
@@ -99,7 +99,7 @@
}
</script>
<div class="sidebar-wrap__content{float ? ` apps-${$deviceInfo.navigator.direction}` : ''}" class:float>
<div class="sidebar-wrap__content{float ? ` float apps-${$deviceInfo.navigator.direction}` : ''}">
{#if float && !($deviceInfo.isMobile && $deviceInfo.isPortrait && $deviceInfo.minWidth)}
<Separator name={'main'} index={0} color={'var(--theme-navpanel-border)'} float={'sidebar'} />
{/if}