diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 5608e58ca1..49bf278d9f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -320,7 +320,6 @@ export const deviceOptionsStore = writable({ isPortrait: false, isMobile: false, navigator: { visible: true, float: false, direction: 'vertical' }, - aside: { visible: true, float: false }, fontSize: 0, size: null, sizes: { xs: false, sm: false, md: false, lg: false, xl: false, xxl: false }, diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 77121dea8d..9b66828ae6 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -381,7 +381,6 @@ export interface DeviceOptions { isPortrait: boolean isMobile: boolean navigator: { visible: boolean, float: boolean, direction: 'vertical' | 'horizontal' } - aside: { visible: boolean, float: boolean } fontSize: number size: WidthType | null sizes: Record diff --git a/plugins/chunter-resources/src/navigation.ts b/plugins/chunter-resources/src/navigation.ts index 6dc72ed16e..8e13ecae37 100644 --- a/plugins/chunter-resources/src/navigation.ts +++ b/plugins/chunter-resources/src/navigation.ts @@ -5,8 +5,7 @@ import { getLocation, type Location, navigate, - languageStore, - deviceOptionsStore as deviceInfo + languageStore } from '@hcengineering/ui' import { type Ref, type Doc, type Class, generateId } from '@hcengineering/core' import activity, { type ActivityMessage } from '@hcengineering/activity' @@ -180,10 +179,6 @@ export async function replyToThread (message: ActivityMessage, e: Event): Promis const fromSidebar = isElementFromSidebar(e.target as HTMLElement) const loc = getCurrentLocation() - const dev = get(deviceInfo) - dev.aside.visible = true - deviceInfo.set(dev) - threadMessagesStore.set(message) if (fromSidebar) { diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte index bd3301a299..c6801a375c 100644 --- a/plugins/setting-resources/src/components/Settings.svelte +++ b/plugins/setting-resources/src/components/Settings.svelte @@ -136,7 +136,6 @@ const widget = client.getModel().findAllSync(workbench.class.Widget, { _id: settingPlg.ids.SettingsWidget })[0] $: if (moveASide && asideComponent != null && $sidebarStore.widget !== widget._id) { openWidget(widget, { component: asideComponent, ...asideProps }, { active: true, openedByUser: true }) - $deviceInfo.aside.visible = true } else if (moveASide && asideComponent == null && $sidebarStore.widget === widget._id) { closeWidget(widget._id) minimizeSidebar() diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index b30b41233c..61e2449c38 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -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 { $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 @@
{#if currentApplication && currentApplication.component} @@ -1022,7 +1020,7 @@ {/if}
- {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$deviceInfo.aside.float} + {#if $sidebarStore.variant === SidebarVariant.EXPANDED && !$sidebarStore.float} {/if} diff --git a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte index 93fd02c9d0..d862eb2072 100644 --- a/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte +++ b/plugins/workbench-resources/src/components/sidebar/Sidebar.svelte @@ -61,7 +61,7 @@ }) -