mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-24 12:06:57 +03:00
clean ui package
Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>
This commit is contained in:
parent
6ac199a6d1
commit
127e9bff23
@ -14,7 +14,7 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '@anticrm/ui'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
import Spinner from './Spinner.svelte'
|
||||
import Label from './Label.svelte'
|
||||
import Icon from './Icon.svelte'
|
||||
|
@ -14,8 +14,8 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '@anticrm/ui'
|
||||
import type { Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
export let icon: Asset | AnySvelteComponent
|
||||
|
@ -13,7 +13,7 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '@anticrm/ui'
|
||||
import type { AnySvelteComponent } from '../types'
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
export let label: IntlString
|
||||
|
@ -1,94 +0,0 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// 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 { AnySvelteComponent, IPopupItem } from '../types'
|
||||
import Label from './Label.svelte'
|
||||
import PopupMenu from './PopupMenu.svelte'
|
||||
import PopupItem from './PopupItem.svelte'
|
||||
import ActionIcon from './ActionIcon.svelte'
|
||||
import Close from './icons/Close.svelte'
|
||||
|
||||
export let component: AnySvelteComponent | undefined = undefined
|
||||
export let items: Array<IPopupItem>
|
||||
export let item: IPopupItem
|
||||
export let vAlign: 'top' | 'middle' | 'bottom' = 'bottom'
|
||||
export let hAlign: 'left' | 'center' | 'right' = 'left'
|
||||
export let margin: number = 1
|
||||
export let gap: number = .5
|
||||
|
||||
let byTitle: boolean = (component) ? false : true
|
||||
let pressed: boolean = false
|
||||
|
||||
</script>
|
||||
|
||||
<PopupMenu {vAlign} {hAlign} {margin} bind:show={pressed}>
|
||||
<button class="btn" slot="trigger" style="margin: {gap/2}px;"
|
||||
on:click={(event) => {
|
||||
pressed = !pressed
|
||||
event.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<div class="title">
|
||||
{#if byTitle }
|
||||
<Label label={item.title}/>
|
||||
{:else}
|
||||
<svelte:component this={component} {...item.props}/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="icon"><ActionIcon label={'Remove'} icon={Close} size={'small'} action={async () => { item.selected = false }}/></div>
|
||||
</button>
|
||||
{#if byTitle }
|
||||
<PopupItem bind:title={item.title} selectable bind:selected={item.selected}/>
|
||||
{:else}
|
||||
<PopupItem bind:component={component} bind:props={item.props} selectable bind:selected={item.selected}/>
|
||||
{/if}
|
||||
{#each items.filter(i => !i.selected) as noItem}
|
||||
{#if byTitle }
|
||||
<PopupItem title={noItem.title} selectable bind:selected={noItem.selected} action={async () => {
|
||||
pressed = false
|
||||
item.selected = false
|
||||
}}/>
|
||||
{:else}
|
||||
<PopupItem component={component} props={noItem.props} selectable bind:selected={noItem.selected} action={async () => {
|
||||
pressed = false
|
||||
item.selected = false
|
||||
}}/>
|
||||
{/if}
|
||||
{/each}
|
||||
</PopupMenu>
|
||||
|
||||
<style lang="scss">
|
||||
.btn {
|
||||
justify-content: space-between;
|
||||
padding: .5rem .75rem;
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
border-radius: .75rem;
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: .75rem;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -26,14 +26,14 @@
|
||||
{#each model as tab, i}
|
||||
<div class="flex-row-center tab" class:selected={i === selected}
|
||||
on:click={() => { selected = i }}>
|
||||
<Label label={model[i].label}/>
|
||||
<Label label={tab.label}/>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="grow"/>
|
||||
</div>
|
||||
{#each model as tab, i}
|
||||
{#if selected === i}
|
||||
<Component is = {model[i].component} props={model[i].props}/>
|
||||
<Component is = {tab.component} props={tab.props}/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
|
@ -27,7 +27,7 @@
|
||||
<div
|
||||
class="tooltip-trigger"
|
||||
bind:this={triggerHTML}
|
||||
on:mouseenter={(ev) => {
|
||||
on:mouseenter={() => {
|
||||
showTooltip(label, triggerHTML, direction)
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
|
@ -41,7 +41,6 @@ export { default as Tabs } from './components/Tabs.svelte'
|
||||
export { default as ScrollBox } from './components/ScrollBox.svelte'
|
||||
export { default as PopupMenu } from './components/PopupMenu.svelte'
|
||||
export { default as PopupItem } from './components/PopupItem.svelte'
|
||||
export { default as SelectItem } from './components/SelectItem.svelte'
|
||||
export { default as TextArea } from './components/TextArea.svelte'
|
||||
export { default as Section } from './components/Section.svelte'
|
||||
export { default as DatePicker } from './components/DatePicker.svelte'
|
||||
|
Loading…
Reference in New Issue
Block a user