Updated Server Manager layout (#6158)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2024-07-29 08:23:52 +03:00 committed by GitHub
parent 5d7e109398
commit 10fe399bd0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -10,9 +10,13 @@
import ServerManagerGeneral from './ServerManagerGeneral.svelte' import ServerManagerGeneral from './ServerManagerGeneral.svelte'
import { getEmbeddedLabel } from '@hcengineering/platform' import { getEmbeddedLabel } from '@hcengineering/platform'
import { Panel, TabItem, TabList } from '@hcengineering/ui' import { createEventDispatcher } from 'svelte'
import presentation from '@hcengineering/presentation'
import { Header, TabItem, Switcher, Breadcrumb, IconSettings, ButtonIcon, IconClose } from '@hcengineering/ui'
import ServerManagerAccountStatistics from './ServerManagerAccountStatistics.svelte' import ServerManagerAccountStatistics from './ServerManagerAccountStatistics.svelte'
const dispatch = createEventDispatcher()
const tabs: TabItem[] = [ const tabs: TabItem[] = [
{ {
id: 'general', id: 'general',
@ -42,35 +46,46 @@
let selectedTab: string | number = tabs[0].id let selectedTab: string | number = tabs[0].id
</script> </script>
<Panel on:close isFullSize useMaxWidth={true}> <div class="hulyComponent">
<svelte:fragment slot="title"> <Header type={'type-panel'} freezeBefore>
<span class="p-3"> Server manager </span> <svelte:fragment slot="beforeTitle">
<TabList <ButtonIcon
items={tabs} icon={IconClose}
bind:selected={selectedTab} kind={'secondary'}
kind={'separated'} size={'small'}
on:select={(result) => { tooltip={{ label: presentation.string.Close }}
selectedTab = result.detail.id on:click={() => dispatch('close')}
}} />
/> </svelte:fragment>
</svelte:fragment>
{#if selectedTab === 'general'}
<ServerManagerGeneral />
{:else if selectedTab === 'users'}
<ServerManagerUsers />
{:else if selectedTab === 'statistics'}
<ServerManagerServerStatistics />
{:else if selectedTab === 'statistics-front'}
<ServerManagerFrontStatistics />
{:else if selectedTab === 'statistics-collab'}
<ServerManagerCollaboratorStatistics />
{:else if selectedTab === 'account'}
<ServerManagerAccountStatistics />
{/if}
</Panel>
<style lang="scss"> <Breadcrumb icon={IconSettings} title={'Server manager'} size={'large'} isCurrent />
.greyed {
color: rgba(black, 0.5); <svelte:fragment slot="actions">
} <Switcher
</style> name={'swManagerMode'}
items={tabs}
bind:selected={selectedTab}
kind={'subtle'}
on:select={(result) => {
selectedTab = result.detail.id
}}
/>
</svelte:fragment>
</Header>
<div class="hulyComponent-content__column content">
{#if selectedTab === 'general'}
<ServerManagerGeneral />
{:else if selectedTab === 'users'}
<ServerManagerUsers />
{:else if selectedTab === 'statistics'}
<ServerManagerServerStatistics />
{:else if selectedTab === 'statistics-front'}
<ServerManagerFrontStatistics />
{:else if selectedTab === 'statistics-collab'}
<ServerManagerCollaboratorStatistics />
{:else if selectedTab === 'account'}
<ServerManagerAccountStatistics />
{/if}
</div>
</div>