diff --git a/models/workbench/src/index.ts b/models/workbench/src/index.ts index 8fed2d99f5..5705c4cd87 100644 --- a/models/workbench/src/index.ts +++ b/models/workbench/src/index.ts @@ -39,7 +39,7 @@ export class TApplication extends TDoc implements Application { label!: IntlString icon!: Asset alias!: string - position?: 'top' | 'bottom' + position?: 'top' | 'mid' hidden!: boolean } diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte index 39efbca0f2..f1d1b68da9 100644 --- a/plugins/workbench-resources/src/components/Applications.svelte +++ b/plugins/workbench-resources/src/components/Applications.svelte @@ -32,6 +32,10 @@ hiddenAppsIds = res.map((r) => r.attachedTo) loaded = true }) + + $: filteredApps = apps.filter((it) => !hiddenAppsIds.includes(it._id)) + $: topApps = filteredApps.filter((it) => it.position === 'top') + $: bottomdApps = filteredApps.filter((it) => it.position !== 'top')
@@ -44,7 +48,13 @@ contentDirection={direction} buttons={'union'} > - {#each apps.filter((it) => !hiddenAppsIds.includes(it._id)) as app} + {#each topApps as app} + + + + {/each} +
+ {#each bottomdApps as app} @@ -60,11 +70,27 @@ margin: 0 0.5rem 0 0.25rem; height: var(--app-panel-width); min-height: 4rem; + + .divider { + margin-left: 0.5rem; + width: 1px; + height: 2.25rem; + } } .apps-vertical { - margin: 0.5rem 0; + margin-bottom: 0.5rem; width: var(--app-panel-width); 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 { &-vertical { diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 0e5e6e9031..3513ed9b7c 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -643,7 +643,6 @@ notify={hasNotification} /> -
@@ -814,11 +813,6 @@ .topmenu-container { margin-right: 0.5rem; } - .divider { - margin-left: 0.5rem; - width: 1px; - height: 2.25rem; - } } &.landscape { flex-direction: column; @@ -830,16 +824,10 @@ .topmenu-container { margin-bottom: 1rem; } - .divider { - margin-top: 1rem; - width: 2.25rem; - height: 1px; - } } .logo-container, .topmenu-container, - .divider, .spacer { flex-shrink: 0; } @@ -860,10 +848,6 @@ .topmenu-container.mini { left: calc(1.5rem + 8px); } - .divider { - flex-shrink: 0; - background-color: var(--theme-navpanel-icons-divider); - } } .info-box { diff --git a/plugins/workbench/src/index.ts b/plugins/workbench/src/index.ts index 5b10934c1c..79eec25bf7 100644 --- a/plugins/workbench/src/index.ts +++ b/plugins/workbench/src/index.ts @@ -28,6 +28,7 @@ export interface Application extends Doc { alias: string icon: Asset hidden: boolean + position?: 'top' | 'mid' // Also attached ApplicationNavModel will be joined after this one main. navigatorModel?: NavigatorModel