From 51687d1a2b63dfce57c3110dbcc3119d3bcd9305 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Sat, 23 Apr 2022 06:51:42 +0300 Subject: [PATCH] UI fixes (#1498) Signed-off-by: Alexander Platov --- packages/panel/src/components/Panel.svelte | 31 ++++++-------- packages/theme/styles/_layouts.scss | 3 ++ packages/theme/styles/panel.scss | 18 ++++----- packages/ui/src/components/Panel.svelte | 40 ++++++++++--------- .../ui/src/components/PanelInstance.svelte | 17 +++++--- .../src/components/icons/DownOutline.svelte | 8 ++++ .../ui/src/components/icons/UpOutline.svelte | 8 ++++ packages/ui/src/index.ts | 2 + packages/ui/src/popups.ts | 9 +++-- .../src/components/Activity.svelte | 4 +- .../src/components/DocReminder.svelte | 15 ++++--- .../src/components/ChannelsDropdown.svelte | 4 ++ plugins/notification-assets/assets/icons.svg | 7 ++-- .../src/components/LastViewEditor.svelte | 18 ++++++--- .../src/components/issues/EditIssue.svelte | 8 ++-- .../src/components/EditDoc.svelte | 8 ++-- 16 files changed, 116 insertions(+), 84 deletions(-) create mode 100644 packages/ui/src/components/icons/DownOutline.svelte create mode 100644 packages/ui/src/components/icons/UpOutline.svelte diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index 81df5f25db..62ca07aa35 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -19,7 +19,7 @@ import type { Doc } from '@anticrm/core' import notification from '@anticrm/notification' import type { Asset } from '@anticrm/platform' - import { ActionIcon, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui' + import { Button, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui' import { PopupAlignment } from '@anticrm/ui' export let title: string @@ -40,18 +40,14 @@ - - + + -
+
-
-
-
- -
+
@@ -64,15 +60,14 @@ {#if allowFullSize} -
- { - fullSize = !fullSize - }} - /> -
+
{#if $$slots['navigate-actions']} - +
+ +
{/if} -
+
{#if icon}
@@ -59,23 +62,27 @@
{#if rightSection} -
+
{/if}
{:else}
-
- +
{#if $$slots['navigate-actions']} - +
+ +
{/if}
{/if} @@ -95,11 +102,9 @@ {/if} -
+
{#if !rightSection && $$slots.commands} -
- -
+ {/if}
@@ -112,5 +117,4 @@ flex-direction: column; align-content: stretch; } - diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte index a0c58312b6..d4b015a8b8 100644 --- a/packages/ui/src/components/PanelInstance.svelte +++ b/packages/ui/src/components/PanelInstance.svelte @@ -89,7 +89,7 @@ {:else}
-
+
diff --git a/packages/ui/src/components/icons/DownOutline.svelte b/packages/ui/src/components/icons/DownOutline.svelte new file mode 100644 index 0000000000..78dac20a9c --- /dev/null +++ b/packages/ui/src/components/icons/DownOutline.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/ui/src/components/icons/UpOutline.svelte b/packages/ui/src/components/icons/UpOutline.svelte new file mode 100644 index 0000000000..fbda57336a --- /dev/null +++ b/packages/ui/src/components/icons/UpOutline.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index e01d1f9d6f..6632def5fa 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -94,6 +94,8 @@ export { default as IconExpand } from './components/icons/Expand.svelte' export { default as IconActivity } from './components/icons/Activity.svelte' export { default as IconUp } from './components/icons/Up.svelte' export { default as IconDown } from './components/icons/Down.svelte' +export { default as IconUpOutline } from './components/icons/UpOutline.svelte' +export { default as IconDownOutline } from './components/icons/DownOutline.svelte' export { default as IconShare } from './components/icons/Share.svelte' export { default as IconDelete } from './components/icons/Delete.svelte' export { default as IconEdit } from './components/icons/Edit.svelte' diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index fb5d635320..bfacacf96d 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -118,6 +118,7 @@ export function fitPopupPositionedElement (modalHTML: HTMLElement, alignment: Po const rectPopup = modalHTML.getBoundingClientRect() modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = '' modalHTML.style.maxHeight = modalHTML.style.height = '' + modalHTML.style.maxWidth = modalHTML.style.width = '' if (alignment.position) { if (alignment.position.v === 'top') { modalHTML.style.top = `${rect.top}px` @@ -188,10 +189,10 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen show = true } else if (element === 'content' && contentPanel !== undefined) { const rect = contentPanel.getBoundingClientRect() - modalHTML.style.top = `calc(${rect.top}px)` - modalHTML.style.height = `${Math.min(rect.height, window.innerHeight - rect.top)}px` - modalHTML.style.left = `calc(${rect.left}px)` - modalHTML.style.width = `${Math.min(rect.width, window.innerWidth - rect.left)}px` + modalHTML.style.top = `${rect.top + 1}px` + modalHTML.style.height = `${Math.min(rect.height - 1, window.innerHeight - rect.top - 1)}px` + modalHTML.style.left = `${rect.left + 1}px` + modalHTML.style.width = `${Math.min(rect.width - 1, window.innerWidth - rect.left - 1)}px` } else if (element === 'middle') { if (contentPanel !== undefined) { const rect = contentPanel.getBoundingClientRect() diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte index d22d9ef409..eaf19cbfce 100644 --- a/plugins/activity-resources/src/components/Activity.svelte +++ b/plugins/activity-resources/src/components/Activity.svelte @@ -57,14 +57,14 @@ {#if fullSize || transparent} {#if transparent !== undefined && !transparent} -
+
{/if} -
+
{#if txes} diff --git a/plugins/calendar-resources/src/components/DocReminder.svelte b/plugins/calendar-resources/src/components/DocReminder.svelte index a9d275e979..c20d76650b 100644 --- a/plugins/calendar-resources/src/components/DocReminder.svelte +++ b/plugins/calendar-resources/src/components/DocReminder.svelte @@ -16,7 +16,7 @@ import { EmployeeAccount } from '@anticrm/contact' import { Doc,getCurrentAccount } from '@anticrm/core' import { getClient } from '@anticrm/presentation' - import { ActionIcon,showPopup } from '@anticrm/ui' + import { Button, showPopup, Tooltip } from '@anticrm/ui' import calendar from '../plugin' import CreateReminder from './CreateReminder.svelte' import DocRemindersPopup from './DocRemindersPopup.svelte' @@ -45,8 +45,11 @@ } -{#if isEvent} - click(e)} /> -{:else} - click(e)} /> -{/if} \ No newline at end of file + +
+
+