mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-07 16:07:24 +00:00
108 lines
3.3 KiB
Svelte
108 lines
3.3 KiB
Svelte
<!--
|
|
// Copyright © 2022 Hardcore Engineering Inc.
|
|
//
|
|
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License. You may
|
|
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
//
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
-->
|
|
<script lang="ts">
|
|
import type { Ref } from '@hcengineering/core'
|
|
import type { Application } from '@hcengineering/workbench'
|
|
import { createQuery } from '@hcengineering/presentation'
|
|
import workbench from '@hcengineering/workbench'
|
|
import { hideApplication, showApplication } from '../utils'
|
|
import { Loading, IconCheck, Label, Icon } from '@hcengineering/ui'
|
|
import preference from '@hcengineering/preference'
|
|
// import Drag from './icons/Drag.svelte'
|
|
|
|
export let apps: Application[] = []
|
|
|
|
let activeElement: HTMLElement
|
|
const btns: HTMLElement[] = []
|
|
|
|
function focusTarget (target: HTMLElement): void {
|
|
activeElement = target
|
|
}
|
|
|
|
const keyDown = (ev: KeyboardEvent): void => {
|
|
if (ev.key === 'Tab') {
|
|
ev.preventDefault()
|
|
ev.stopPropagation()
|
|
}
|
|
const n = btns.indexOf(activeElement) ?? 0
|
|
if (ev.key === 'ArrowDown') {
|
|
if (n < btns.length - 1) {
|
|
activeElement = btns[n + 1]
|
|
}
|
|
ev.preventDefault()
|
|
ev.stopPropagation()
|
|
}
|
|
if (ev.key === 'ArrowUp') {
|
|
if (n > 0) {
|
|
activeElement = btns[n - 1]
|
|
}
|
|
ev.preventDefault()
|
|
ev.stopPropagation()
|
|
}
|
|
}
|
|
|
|
let loaded: boolean = false
|
|
let hiddenAppsIds: Array<Ref<Application>> = []
|
|
const hiddenAppsIdsQuery = createQuery()
|
|
hiddenAppsIdsQuery.query(
|
|
workbench.class.HiddenApplication,
|
|
{
|
|
space: preference.space.Preference
|
|
},
|
|
(res) => {
|
|
hiddenAppsIds = res.map((r) => r.attachedTo)
|
|
loaded = true
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div class="antiPopup min-w-60" on:keydown={keyDown}>
|
|
<div class="ap-space x2" />
|
|
<div class="ap-scroll">
|
|
<div class="ap-box">
|
|
{#if loaded}
|
|
{#each apps as app, i}
|
|
<button
|
|
bind:this={btns[i]}
|
|
class="ap-menuItem withIcon flex-row-center flex-grow"
|
|
class:hover={btns[i] === activeElement}
|
|
on:click={() => {
|
|
if (hiddenAppsIds.includes(app._id)) showApplication(app)
|
|
else hideApplication(app)
|
|
}}
|
|
on:mousemove={() => {
|
|
focusTarget(btns[i])
|
|
}}
|
|
>
|
|
<div class="icon mr-2"><Icon icon={app.icon} size={'small'} /></div>
|
|
<span class="label overflow-label flex-grow"><Label label={app.label} /></span>
|
|
<div class="ap-check">
|
|
{#if !hiddenAppsIds.includes(app._id)}
|
|
<IconCheck size={'small'} />
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
{:else}
|
|
<div class="ap-menuItem empty">
|
|
<Loading />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="ap-space x2" />
|
|
</div>
|