mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 11:42:30 +03:00
UBER-459: remove whereSelected line in dropdowns. (#3417)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
2f75e20e00
commit
95ffbd6d33
@ -24,7 +24,6 @@
|
||||
IconCheck,
|
||||
IconSearch,
|
||||
ListView,
|
||||
closeTooltip,
|
||||
createFocusManager,
|
||||
deviceOptionsStore,
|
||||
resizeObserver,
|
||||
@ -142,43 +141,6 @@
|
||||
return obj
|
||||
}
|
||||
|
||||
let selectedDiv: HTMLElement | undefined
|
||||
let scrollDiv: HTMLElement | undefined
|
||||
let cHeight = 0
|
||||
let timer: any = null
|
||||
|
||||
const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
|
||||
const objIt = objects?.find((it) => it._id === selected)
|
||||
if (objIt === undefined) {
|
||||
cHeight = 0
|
||||
return
|
||||
}
|
||||
if (scrollDiv && selectedDiv) {
|
||||
const r = selectedDiv.getBoundingClientRect()
|
||||
const r2 = scrollDiv.getBoundingClientRect()
|
||||
if (r && r2) {
|
||||
if (r.top > r2.top && r.bottom < r2.bottom) {
|
||||
cHeight = 0
|
||||
} else {
|
||||
if (r.bottom < r2.bottom) {
|
||||
cHeight = 1
|
||||
} else {
|
||||
cHeight = -1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!timer) {
|
||||
timer = setTimeout(() => {
|
||||
closeTooltip()
|
||||
clearTimeout(timer)
|
||||
timer = null
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
|
||||
$: updateLocation(scrollDiv, selectedDiv, objects, selected)
|
||||
|
||||
const forbiddenDeselectItemIds = new Set(disallowDeselect)
|
||||
|
||||
function getGroup (doc: Doc, groupBy: any): any {
|
||||
@ -226,10 +188,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if cHeight === 1}
|
||||
<div class="whereSelected" />
|
||||
{/if}
|
||||
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
|
||||
<div class="scroll">
|
||||
<div class="box">
|
||||
<ListView bind:this={list} count={objects.length} bind:selection>
|
||||
<svelte:fragment slot="category" let:item>
|
||||
@ -260,7 +219,7 @@
|
||||
{#if (allowDeselect && selected) || multiSelect || selected}
|
||||
<div class="check" class:disabled={readonly}>
|
||||
{#if obj._id === selected || selectedElements.has(obj._id)}
|
||||
<div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
|
||||
<div use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
|
||||
<Icon icon={IconCheck} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -271,9 +230,6 @@
|
||||
</ListView>
|
||||
</div>
|
||||
</div>
|
||||
{#if cHeight === -1}
|
||||
<div class="whereSelected" />
|
||||
{/if}
|
||||
<div class="menu-space" />
|
||||
</div>
|
||||
|
||||
|
||||
@ -194,10 +194,6 @@
|
||||
&.show + .menu-group { height: auto; }
|
||||
}
|
||||
}
|
||||
.whereSelected {
|
||||
height: 2px;
|
||||
background-color: var(--theme-caret-color);
|
||||
}
|
||||
.menu-space {
|
||||
flex-shrink: 0;
|
||||
height: .5rem;
|
||||
|
||||
@ -82,35 +82,6 @@
|
||||
$: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()))
|
||||
|
||||
$: huge = size === 'medium' || size === 'large'
|
||||
|
||||
let selectedDiv: HTMLElement | undefined
|
||||
let scrollDiv: HTMLElement | undefined
|
||||
let cHeight = 0
|
||||
|
||||
const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: ValueType[]) => {
|
||||
const objIt = objects?.find((it) => it.isSelected)
|
||||
if (objIt === undefined) {
|
||||
cHeight = 0
|
||||
return
|
||||
}
|
||||
if (scrollDiv && selectedDiv) {
|
||||
const r = selectedDiv.getBoundingClientRect()
|
||||
const r2 = scrollDiv.getBoundingClientRect()
|
||||
if (r && r2) {
|
||||
if (r.top > r2.top && r.bottom < r2.bottom) {
|
||||
cHeight = 0
|
||||
} else {
|
||||
if (r.bottom < r2.bottom) {
|
||||
cHeight = 1
|
||||
} else {
|
||||
cHeight = -1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: updateLocation(scrollDiv, selectedDiv, filteredObjects)
|
||||
</script>
|
||||
|
||||
<FocusHandler {manager} />
|
||||
@ -140,10 +111,7 @@
|
||||
{:else}
|
||||
<div class="menu-space" />
|
||||
{/if}
|
||||
{#if cHeight === 1}
|
||||
<div class="whereSelected" />
|
||||
{/if}
|
||||
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, filteredObjects)} bind:this={scrollDiv}>
|
||||
<div class="scroll">
|
||||
<div class="box">
|
||||
<ListView
|
||||
bind:this={list}
|
||||
@ -174,9 +142,7 @@
|
||||
{#if hasSelected}
|
||||
<div class="check">
|
||||
{#if item.isSelected}
|
||||
<div bind:this={selectedDiv}>
|
||||
<Icon icon={IconCheck} size={'small'} />
|
||||
</div>
|
||||
<Icon icon={IconCheck} size={'small'} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@ -202,8 +168,5 @@
|
||||
</ListView>
|
||||
</div>
|
||||
</div>
|
||||
{#if cHeight === -1}
|
||||
<div class="whereSelected" />
|
||||
{/if}
|
||||
<div class="menu-space" />
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import contact, { Contact, Employee, EmployeeAccount, Person } from '@hcengineering/contact'
|
||||
import { Doc, DocumentQuery, FindOptions, getCurrentAccount, Ref } from '@hcengineering/core'
|
||||
import { DocumentQuery, FindOptions, getCurrentAccount, Ref } from '@hcengineering/core'
|
||||
import type { Asset, IntlString } from '@hcengineering/platform'
|
||||
import {
|
||||
createFocusManager,
|
||||
@ -144,36 +144,6 @@
|
||||
function toAny (obj: any): any {
|
||||
return obj
|
||||
}
|
||||
|
||||
let selectedDiv: HTMLElement | undefined
|
||||
let scrollDiv: HTMLElement | undefined
|
||||
let cHeight = 0
|
||||
|
||||
const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
|
||||
const objIt = objects?.find((it) => it._id === selected)
|
||||
if (objIt === undefined) {
|
||||
cHeight = 0
|
||||
return
|
||||
}
|
||||
if (scrollDiv && selectedDiv) {
|
||||
const r = selectedDiv.getBoundingClientRect()
|
||||
const r2 = scrollDiv.getBoundingClientRect()
|
||||
|
||||
if (r && r2) {
|
||||
if (r.top > r2.top && r.bottom < r2.bottom) {
|
||||
cHeight = 0
|
||||
} else {
|
||||
if (r.bottom < r2.bottom) {
|
||||
cHeight = 1
|
||||
} else {
|
||||
cHeight = -1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: updateLocation(scrollDiv, selectedDiv, contacts, selected)
|
||||
</script>
|
||||
|
||||
<FocusHandler {manager} />
|
||||
@ -200,14 +170,7 @@
|
||||
on:change
|
||||
/>
|
||||
</div>
|
||||
{#if cHeight === 1}
|
||||
<div class="whereSelected" />
|
||||
{/if}
|
||||
<div
|
||||
class="scroll"
|
||||
on:scroll={() => updateLocation(scrollDiv, selectedDiv, contacts, selected)}
|
||||
bind:this={scrollDiv}
|
||||
>
|
||||
<div class="scroll">
|
||||
<div class="box">
|
||||
<ListView bind:this={list} count={contacts.length} bind:selection>
|
||||
<svelte:fragment slot="category" let:item>
|
||||
@ -244,7 +207,7 @@
|
||||
{#if allowDeselect && selected}
|
||||
<div class="check">
|
||||
{#if obj._id === selected}
|
||||
<div bind:this={selectedDiv} use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
|
||||
<div use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
|
||||
<Icon icon={IconCheck} size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -255,9 +218,6 @@
|
||||
</ListView>
|
||||
</div>
|
||||
</div>
|
||||
{#if cHeight === -1}
|
||||
<div class="whereSelected" />
|
||||
{/if}
|
||||
<div class="menu-space" />
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user