Show/hide navigator (#477)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-02 12:05:09 +03:00 committed by GitHub
parent 67f7cddf03
commit 809a654cab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 4 deletions

View File

@ -18,7 +18,7 @@
export let status: string = 'away' export let status: string = 'away'
</script> </script>
<div class="flex-center {status}" style="min-height: 5rem;"> <div class="flex-center {status}" style="min-height: 2rem;">
<div class="status"/> <div class="status"/>
</div> </div>

View File

@ -15,10 +15,11 @@
<script lang="ts"> <script lang="ts">
import type { IntlString, Asset } from '@anticrm/platform' import type { IntlString, Asset } from '@anticrm/platform'
import type { AnySvelteComponent } from '@anticrm/ui'
import { Icon, Tooltip } from '@anticrm/ui' import { Icon, Tooltip } from '@anticrm/ui'
export let label: IntlString export let label: IntlString
export let icon: Asset export let icon: Asset | AnySvelteComponent
export let action: () => Promise<void> export let action: () => Promise<void>
export let selected: boolean export let selected: boolean
export let notify: boolean export let notify: boolean

View File

@ -32,6 +32,8 @@
import { AnyComponent, Component, location, Popup, showPopup, TooltipInstance } from '@anticrm/ui' import { AnyComponent, Component, location, Popup, showPopup, TooltipInstance } from '@anticrm/ui'
import core from '@anticrm/core' import core from '@anticrm/core'
import AccountPopup from './AccountPopup.svelte' import AccountPopup from './AccountPopup.svelte'
import AppItem from './AppItem.svelte'
import TopMenu from './icons/TopMenu.svelte'
export let client: Client export let client: Client
@ -75,6 +77,8 @@
const query = createQuery() const query = createQuery()
$: query.query(workbench.class.Application, { hidden: false }, result => { apps = result }) $: query.query(workbench.class.Application, { hidden: false }, result => { apps = result })
let visibileNav: boolean = true
</script> </script>
{#if client} {#if client}
@ -88,7 +92,10 @@
</svg> </svg>
<div class="container"> <div class="container">
<div class="panel-app"> <div class="panel-app">
<ActivityStatus status="active"/> <div class="flex-col">
<ActivityStatus status="active"/>
<AppItem icon={TopMenu} label={'Navigator'} selected={!visibileNav} action={async () => { visibileNav = !visibileNav }}/>
</div>
<Applications {apps} active={currentApp}/> <Applications {apps} active={currentApp}/>
<div class="flex-center" style="min-height: 6.25rem;"> <div class="flex-center" style="min-height: 6.25rem;">
<div class="cursor-pointer" on:click={(el) => { showPopup(AccountPopup, { }, 'account') }}> <div class="cursor-pointer" on:click={(el) => { showPopup(AccountPopup, { }, 'account') }}>
@ -96,7 +103,7 @@
</div> </div>
</div> </div>
</div> </div>
{#if navigator} {#if navigator && visibileNav}
<div class="panel-navigator"> <div class="panel-navigator">
{#if currentApplication} {#if currentApplication}
<NavHeader label={currentApplication.label} action={() => {}} /> <NavHeader label={currentApplication.label} action={() => {}} />

View File

@ -0,0 +1,9 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3,9.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,8.4,21,8.4H3C2.7,8.4,2.4,8.7,2.4,9S2.7,9.6,3,9.6z"/>
<path d="M21,14.4H3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,14.4,21,14.4z"/>
</svg>