From 0049dad2d8edb33070458544ae1d1060421eb8ef Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Fri, 24 Dec 2021 12:06:34 +0300 Subject: [PATCH] Fix TooltipInstance horizontal position and other little fixes (#729) Signed-off-by: Alexander Platov --- packages/panel/src/components/Panel.svelte | 4 +-- packages/ui/lang/en.json | 1 - .../ui/src/components/EditWithIcon.svelte | 6 +---- .../ui/src/components/TooltipInstance.svelte | 13 ++++------ packages/ui/src/plugin.ts | 1 - .../src/components/EditContact.svelte | 16 +----------- .../components/state/StatesBarElement.svelte | 6 ++++- .../src/components/SpaceContent.svelte | 25 ++----------------- 8 files changed, 16 insertions(+), 56 deletions(-) diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index d3204f701e..6fe74cbd44 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -24,7 +24,7 @@ export let title: string export let icon: Asset | AnySvelteComponent - export let fullSize: boolean = false + export let fullSize: boolean = true export let rightSection: AnyComponent | undefined = undefined export let object: Doc @@ -62,7 +62,7 @@
{title}
Candidate pool name
- + {#if $$slots.subtitle}
{/if} diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json index 26dc2871be..2570573528 100644 --- a/packages/ui/lang/en.json +++ b/packages/ui/lang/en.json @@ -4,7 +4,6 @@ "Minutes": "{minutes, plural, =0 {less than a minute ago} =1 {a minute ago} other {# minutes ago}}", "Hours": "{hours, plural, =0 {less than an hour ago} =1 {an hour ago} other {# hours ago}}", "Days": "{days, plural, =0 {today} =1 {yesterday} other {# days ago}}", - "Clear": "Clear", "ShowMore": "Show more", "ShowLess": "Show less" } diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte index e645bba7c6..b696d75772 100644 --- a/packages/ui/src/components/EditWithIcon.svelte +++ b/packages/ui/src/components/EditWithIcon.svelte @@ -17,9 +17,7 @@ import type { Asset } from '@anticrm/platform' import type { AnySvelteComponent } from '../types' import Icon from './Icon.svelte' - import Tooltip from './Tooltip.svelte' import IconClose from './icons/Close.svelte' - import ui from '../plugin' export let icon: Asset | AnySvelteComponent export let width: string | undefined = undefined @@ -34,9 +32,7 @@ {#if value}
{ textHTML.value = ''; textHTML.dispatchEvent(new Event('change')) }}> - -
- +
{/if} diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte index ccd0636631..18ee7526b2 100644 --- a/packages/ui/src/components/TooltipInstance.svelte +++ b/packages/ui/src/components/TooltipInstance.svelte @@ -40,7 +40,7 @@ if ($tooltip.component) { - tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.height = '' + tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.left = tooltipHTML.style.right = tooltipHTML.style.height = '' if (rect.bottom + tooltipHTML.clientHeight + 28 < doc.height) { tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)` dir = 'bottom' @@ -60,13 +60,10 @@ dir = 'bottom' } - if (rect.width / 2 + rect.left + clWidth / 2 > doc.width - 8) - tooltipHTML.style.right = '.5rem' - else if (rect.width / 2 + rect.left - clWidth / 2 < 8) - tooltipHTML.style.left = '.5rem' - else if ((rect.width / 2 + rect.left + clWidth / 2 < doc.width) && (rect.width / 2 + rect.left - clWidth / 2 > 0)) - tooltipHTML.style.left = rect.width / 2 + rect.left - clWidth / 2 + 'px' - else tooltipHTML.style.left = tooltipHTML.style.right = '.5rem' + const tempLeft = rect.width / 2 + rect.left - clWidth / 2 + if (tempLeft + clWidth > doc.width - 8) tooltipHTML.style.right = '.5rem' + else if (tempLeft < 8) tooltipHTML.style.left = '.5rem' + else tooltipHTML.style.left = `${tempLeft}px` if (nubHTML) { nubHTML.style.top = rect.top + 'px' diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts index c11b80f0a5..4d632ee4e9 100644 --- a/packages/ui/src/plugin.ts +++ b/packages/ui/src/plugin.ts @@ -28,7 +28,6 @@ export default plugin(uiId, { Minutes: '' as IntlString, Hours: '' as IntlString, Days: '' as IntlString, - Clear: '' as IntlString, ShowMore: '' as IntlString, ShowLess: '' as IntlString } diff --git a/plugins/contact-resources/src/components/EditContact.svelte b/plugins/contact-resources/src/components/EditContact.svelte index 2fa9799bdf..0f7f7568b2 100644 --- a/plugins/contact-resources/src/components/EditContact.svelte +++ b/plugins/contact-resources/src/components/EditContact.svelte @@ -28,7 +28,7 @@ export let _id: Ref let object: Contact let rightSection: AnyComponent | undefined - let fullSize: boolean = false + let fullSize: boolean = true const client = getClient() const hierarchy = client.getHierarchy() @@ -127,17 +127,3 @@ {/each} {/if} - - diff --git a/plugins/task-resources/src/components/state/StatesBarElement.svelte b/plugins/task-resources/src/components/state/StatesBarElement.svelte index 50e4ed41db..d77f526faf 100644 --- a/plugins/task-resources/src/components/state/StatesBarElement.svelte +++ b/plugins/task-resources/src/components/state/StatesBarElement.svelte @@ -20,7 +20,7 @@ export let color: string - + {#if side === 'left' && kind === 'arrow'}
+
- .toolbar { - margin: 1.25rem 1.75rem 1.75rem 2.5rem; - - .btn { - width: 2.5rem; - height: 2.5rem; - background-color: transparent; - border-radius: .5rem; - cursor: pointer; - - color: var(--theme-content-trans-color); - &:hover { color: var(--theme-caption-color); } - &.selected { - color: var(--theme-content-accent-color); - background-color: var(--theme-button-bg-enabled); - cursor: default; - &:hover { color: var(--theme-caption-color); } - } - } - } - - .container { + .spacecontent-container { display: flex; flex-direction: column; min-height: 0;