Fixed toggle navigator and aside (#7289)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2024-12-07 18:57:57 +03:00 committed by GitHub
parent 94fe72e12f
commit 755df8f002
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 34 additions and 23 deletions

View File

@ -42,7 +42,7 @@
</script>
<div class="hulyComponent">
<Header allowFullsize adaptive={'disabled'}>
<Header adaptive={'disabled'}>
<Breadcrumb title={selectedFloor?.name ?? ''} size={'large'} isCurrent />
<svelte:fragment slot="beforeTitle">
<ViewletSelector bind:viewlet bind:preference bind:loading viewletQuery={{ attachTo: lovePlg.class.Floor }} />

View File

@ -13,6 +13,7 @@
// limitations under the License.
-->
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import core, { getCurrentAccount, type Ref } from '@hcengineering/core'
import { createQuery } from '@hcengineering/presentation'
import { Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
@ -27,6 +28,8 @@
export let apps: Application[] = []
export let direction: 'vertical' | 'horizontal' = 'vertical'
const dispatch = createEventDispatcher()
let loaded: boolean = false
let hiddenAppsIds: Array<Ref<Application>> = []
const hiddenAppsIdsQuery = createQuery()
@ -66,9 +69,7 @@
label={app.label}
navigator={app._id === active && $deviceInfo.navigator.visible}
on:click={() => {
if (app._id === active) {
$deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
}
if (app._id === active) dispatch('toggleNav')
}}
/>
</NavLink>
@ -82,9 +83,7 @@
label={app.label}
navigator={app._id === active && $deviceInfo.navigator.visible}
on:click={() => {
if (app._id === active) {
$deviceInfo.navigator.visible = !$deviceInfo.navigator.visible
}
if (app._id === active) dispatch('toggleNav')
}}
/>
</NavLink>

View File

@ -160,11 +160,26 @@
const linkProviders = client.getModel().findAllSync(view.mixin.LinkIdProvider, {})
$deviceInfo.navigator.visible = getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true
$deviceInfo.aside.visible = getMetadata(workbench.metadata.NavigationExpandedDefault) ?? true
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
$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
if (!$deviceInfo.navigator.float) {
hiddenNavigator = !$deviceInfo.navigator.visible
localStorage.setItem('hiddenNavigator', `${hiddenNavigator}`)
}
closeTooltip()
if (currentApplication && navigatorModel) {
await tick()
@ -638,14 +653,12 @@
$deviceInfo.navigator.float = workbenchWidth <= HIDE_NAVIGATOR
const checkWorkbenchWidth = (): void => {
if (workbenchWidth <= HIDE_NAVIGATOR && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
if (workbenchWidth <= HIDE_NAVIGATOR && !$deviceInfo.navigator.float) {
$deviceInfo.navigator.visible = false
$deviceInfo.navigator.float = true
} else if (workbenchWidth > HIDE_NAVIGATOR && $deviceInfo.navigator.float) {
if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
$deviceInfo.navigator.float = false
$deviceInfo.navigator.visible = true
}
$deviceInfo.navigator.float = false
$deviceInfo.navigator.visible = !hiddenNavigator
}
}
checkWorkbenchWidth()
@ -653,10 +666,8 @@
$deviceInfo.aside.visible = false
$deviceInfo.aside.float = true
} else if ($deviceInfo.docWidth > HIDE_ASIDE && $deviceInfo.aside.float) {
if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
$deviceInfo.aside.float = false
$deviceInfo.aside.visible = true
}
$deviceInfo.aside.float = false
$deviceInfo.aside.visible = !hiddenAside
}
const checkOnHide = (): void => {
if ($deviceInfo.navigator.visible && $deviceInfo.navigator.float) $deviceInfo.navigator.visible = false
@ -847,7 +858,12 @@
notify={hasInboxNotifications}
/>
</NavLink>
<Applications {apps} active={currentApplication?._id} direction={$deviceInfo.navigator.direction} />
<Applications
{apps}
active={currentApplication?._id}
direction={$deviceInfo.navigator.direction}
on:toggleNav={toggleNav}
/>
</div>
<div
class="info-box {$deviceInfo.navigator.direction}"

View File

@ -12,7 +12,6 @@ import {
} from './tracker.utils'
import { Issue, NewIssue } from '../model/tracker/types'
import { IssuesDetailsPage } from '../model/tracker/issues-details-page'
import { CommonTrackerPage } from '../model/tracker/common-tracker-page'
test.use({
storageState: PlatformSetting
@ -20,17 +19,14 @@ test.use({
test.describe('Tracker sub-issues tests', () => {
let issuesPage: IssuesPage
let issuesDetailsPage: IssuesDetailsPage
let commonTrackerPage: CommonTrackerPage
test.beforeEach(async ({ page }) => {
issuesPage = new IssuesPage(page)
issuesDetailsPage = new IssuesDetailsPage(page)
commonTrackerPage = new CommonTrackerPage(page)
await (await page.goto(`${PlatformURI}/workbench/sanity-ws`))?.finished()
})
test('create sub-issue', async ({ page }) => {
await commonTrackerPage.clickOnApplicationButton()
const props = {
name: `issue-${generateId(5)}`,
description: 'description',