Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2023-10-09 13:37:40 +06:00 committed by GitHub
parent f4a86e1b1c
commit 3b6946abc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 19 deletions

View File

@ -39,7 +39,7 @@ export class TApplication extends TDoc implements Application {
label!: IntlString label!: IntlString
icon!: Asset icon!: Asset
alias!: string alias!: string
position?: 'top' | 'bottom' position?: 'top' | 'mid'
hidden!: boolean hidden!: boolean
} }

View File

@ -32,6 +32,10 @@
hiddenAppsIds = res.map((r) => r.attachedTo) hiddenAppsIds = res.map((r) => r.attachedTo)
loaded = true loaded = true
}) })
$: filteredApps = apps.filter((it) => !hiddenAppsIds.includes(it._id))
$: topApps = filteredApps.filter((it) => it.position === 'top')
$: bottomdApps = filteredApps.filter((it) => it.position !== 'top')
</script> </script>
<div class="flex-{direction === 'horizontal' ? 'row-center' : 'col-center'} clear-mins apps-{direction} relative"> <div class="flex-{direction === 'horizontal' ? 'row-center' : 'col-center'} clear-mins apps-{direction} relative">
@ -44,7 +48,13 @@
contentDirection={direction} contentDirection={direction}
buttons={'union'} buttons={'union'}
> >
{#each apps.filter((it) => !hiddenAppsIds.includes(it._id)) as app} {#each topApps as app}
<NavLink app={app.alias} shrink={0}>
<AppItem selected={app._id === active} icon={app.icon} label={app.label} />
</NavLink>
{/each}
<div class="divider" />
{#each bottomdApps as app}
<NavLink app={app.alias} shrink={0}> <NavLink app={app.alias} shrink={0}>
<AppItem selected={app._id === active} icon={app.icon} label={app.label} /> <AppItem selected={app._id === active} icon={app.icon} label={app.label} />
</NavLink> </NavLink>
@ -60,11 +70,27 @@
margin: 0 0.5rem 0 0.25rem; margin: 0 0.5rem 0 0.25rem;
height: var(--app-panel-width); height: var(--app-panel-width);
min-height: 4rem; min-height: 4rem;
.divider {
margin-left: 0.5rem;
width: 1px;
height: 2.25rem;
}
} }
.apps-vertical { .apps-vertical {
margin: 0.5rem 0; margin-bottom: 0.5rem;
width: var(--app-panel-width); width: var(--app-panel-width);
min-width: 4rem; min-width: 4rem;
.divider {
margin-top: 1rem;
width: 2.25rem;
height: 1px;
}
}
.divider {
flex-shrink: 0;
background-color: var(--theme-navpanel-icons-divider);
} }
.apps-space { .apps-space {
&-vertical { &-vertical {

View File

@ -643,7 +643,6 @@
notify={hasNotification} notify={hasNotification}
/> />
</NavLink> </NavLink>
<div class="divider" />
<Applications apps={getApps(apps)} active={currentApplication?._id} direction={appsDirection} /> <Applications apps={getApps(apps)} active={currentApplication?._id} direction={appsDirection} />
</div> </div>
<div class="info-box {appsDirection}" class:vertical-mobile={appsDirection === 'vertical'} class:mini={appsMini}> <div class="info-box {appsDirection}" class:vertical-mobile={appsDirection === 'vertical'} class:mini={appsMini}>
@ -814,11 +813,6 @@
.topmenu-container { .topmenu-container {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.divider {
margin-left: 0.5rem;
width: 1px;
height: 2.25rem;
}
} }
&.landscape { &.landscape {
flex-direction: column; flex-direction: column;
@ -830,16 +824,10 @@
.topmenu-container { .topmenu-container {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.divider {
margin-top: 1rem;
width: 2.25rem;
height: 1px;
}
} }
.logo-container, .logo-container,
.topmenu-container, .topmenu-container,
.divider,
.spacer { .spacer {
flex-shrink: 0; flex-shrink: 0;
} }
@ -860,10 +848,6 @@
.topmenu-container.mini { .topmenu-container.mini {
left: calc(1.5rem + 8px); left: calc(1.5rem + 8px);
} }
.divider {
flex-shrink: 0;
background-color: var(--theme-navpanel-icons-divider);
}
} }
.info-box { .info-box {

View File

@ -28,6 +28,7 @@ export interface Application extends Doc {
alias: string alias: string
icon: Asset icon: Asset
hidden: boolean hidden: boolean
position?: 'top' | 'mid'
// Also attached ApplicationNavModel will be joined after this one main. // Also attached ApplicationNavModel will be joined after this one main.
navigatorModel?: NavigatorModel navigatorModel?: NavigatorModel