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

View File

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

View File

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

View File

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