mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-10 17:30:51 +00:00
90 lines
2.5 KiB
Svelte
90 lines
2.5 KiB
Svelte
<!--
|
|
// Copyright © 2024 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 { createTab, tabsStore, tabIdStore } from '../workbench'
|
|
import { WorkbenchTabs } from '../index'
|
|
import WorkbenchTabPresenter from './WorkbenchTabPresenter.svelte'
|
|
import {
|
|
IconAdd,
|
|
IconMoreH,
|
|
ButtonIcon,
|
|
ScrollerBar,
|
|
deviceOptionsStore as deviceInfo,
|
|
checkAdaptiveMatching,
|
|
showPopup
|
|
} from '@hcengineering/ui'
|
|
|
|
export let popup: boolean = false
|
|
|
|
let scroller: HTMLElement
|
|
let element: HTMLButtonElement
|
|
let pressed: boolean = false
|
|
|
|
$: devSize = $deviceInfo.size
|
|
$: mini = checkAdaptiveMatching(devSize, 'md')
|
|
$: selectedTab = $tabsStore.find((ts) => ts._id === $tabIdStore)
|
|
|
|
const showTabs = (): void => {
|
|
pressed = true
|
|
showPopup(WorkbenchTabs, { popup: true }, element, () => {
|
|
pressed = false
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class={popup ? 'selectPopup' : 'flex-row-center flex-gap-2'}
|
|
style:padding={popup ? '.5rem' : mini ? '.25rem .25rem .25rem 0' : '0 .25rem 0 0'}
|
|
>
|
|
{#if popup}
|
|
<div class="scroll">
|
|
<div class="box flex-gap-1">
|
|
{#each $tabsStore.filter((ts) => ts._id !== $tabIdStore) as tab (tab._id)}
|
|
<WorkbenchTabPresenter {tab} />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{:else if !mini}
|
|
<div class="flex-row-center gap-1 py-1 overflow-x-auto">
|
|
{#each $tabsStore as tab (tab._id)}
|
|
<WorkbenchTabPresenter {tab} />
|
|
{/each}
|
|
</div>
|
|
{:else if selectedTab !== undefined}
|
|
<WorkbenchTabPresenter tab={selectedTab} />
|
|
{#if $tabsStore.length > 1}
|
|
<ButtonIcon
|
|
bind:element
|
|
icon={IconMoreH}
|
|
iconProps={{ fill: 'var(--theme-dark-color)' }}
|
|
size={'extra-small'}
|
|
kind={'tertiary'}
|
|
hasMenu
|
|
{pressed}
|
|
on:click={showTabs}
|
|
/>
|
|
{/if}
|
|
{/if}
|
|
{#if !popup}
|
|
<ButtonIcon
|
|
icon={IconAdd}
|
|
iconProps={{ fill: 'var(--theme-dark-color)' }}
|
|
size={'extra-small'}
|
|
kind={'tertiary'}
|
|
on:click={createTab}
|
|
/>
|
|
{/if}
|
|
</div>
|