From 496113cdb503201e3cbf9e1eebdd0fa760f765e4 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Thu, 20 Jan 2022 12:18:24 +0300 Subject: [PATCH] Update and combine popup layout for select. Add svelte-check in presentation. (#845) Signed-off-by: Alexander Platov --- packages/presentation/lang/en.json | 2 +- packages/presentation/package.json | 3 +- .../src/components/AttributeEditor.svelte | 4 +- .../src/components/EditAvatarPopup.svelte | 3 +- .../src/components/SpacesPopup.svelte | 64 ++--------- .../src/components/UsersPopup.svelte | 79 ++----------- packages/presentation/src/plugin.ts | 2 +- packages/theme/styles/_layouts.scss | 104 ++++++++++++++++++ packages/ui/lang/en.json | 4 +- packages/ui/src/components/DatePopup.svelte | 7 +- .../src/components/DropdownLabelsPopup.svelte | 96 ++++------------ .../ui/src/components/DropdownPopup.svelte | 95 +++++----------- .../ui/src/components/EditWithIcon.svelte | 12 +- packages/ui/src/components/Menu.svelte | 56 +++------- .../ui/src/components/PopupInstance.svelte | 7 +- packages/ui/src/components/SearchEdit.svelte | 9 -- .../src/components/internal/LangPopup.svelte | 31 +----- .../components/internal/LangSelector.svelte | 5 +- packages/ui/src/plugin.ts | 4 +- .../src/components/state/StatesBar.svelte | 1 - 20 files changed, 232 insertions(+), 356 deletions(-) diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json index fecd48266e..6638615a51 100644 --- a/packages/presentation/lang/en.json +++ b/packages/presentation/lang/en.json @@ -3,9 +3,9 @@ "Create": "Create", "Cancel": "Cancel", "Ok": "Ok", + "Save": "Save", "Download": "Download", "Delete": "Delete", - "Suggested": "Suggested", "NotSelected": "Not selected", "Deselect": "Deselect", "AddSocialLinks": "Add social links" diff --git a/packages/presentation/package.json b/packages/presentation/package.json index c236163542..56188024a1 100644 --- a/packages/presentation/package.json +++ b/packages/presentation/package.json @@ -9,7 +9,8 @@ "build:docs": "api-extractor run --local", "lint": "svelte-check && eslint", "lint:fix": "eslint --fix src", - "format": "prettier --write --plugin-search-dir=. src && eslint --fix src" + "format": "prettier --write --plugin-search-dir=. src && eslint --fix src", + "svelte-check": "svelte-check" }, "devDependencies": { "svelte-loader": "^3.1.2", diff --git a/packages/presentation/src/components/AttributeEditor.svelte b/packages/presentation/src/components/AttributeEditor.svelte index 6ab2797521..09cf6c0194 100644 --- a/packages/presentation/src/components/AttributeEditor.svelte +++ b/packages/presentation/src/components/AttributeEditor.svelte @@ -15,8 +15,8 @@ --> -
-
- -
+
+
+
+ +
-
-
+
+
+
{#each objects as space} - {/each}
+
- - diff --git a/packages/presentation/src/components/UsersPopup.svelte b/packages/presentation/src/components/UsersPopup.svelte index e3dd11f59e..380db35de0 100644 --- a/packages/presentation/src/components/UsersPopup.svelte +++ b/packages/presentation/src/components/UsersPopup.svelte @@ -16,7 +16,7 @@ import type { IntlString } from '@anticrm/platform' import { afterUpdate, createEventDispatcher } from 'svelte' - import { Label, EditWithIcon, IconSearch } from '@anticrm/ui' + import ui, { Label, EditWithIcon, IconSearch } from '@anticrm/ui' import UserInfo from './UserInfo.svelte' import type { Ref, Class } from '@anticrm/core' @@ -27,7 +27,7 @@ export let _class: Ref> export let title: IntlString - export let caption: IntlString + export let caption: IntlString = ui.string.Suggested export let selected: Ref | undefined export let allowDeselect: boolean = false @@ -42,16 +42,17 @@ afterUpdate(() => { dispatch('update', Date.now()) }) -
-
-
- -
+
+
+
+ +
-
-
+
+
+
{#each objects as person} -
+
- - diff --git a/packages/presentation/src/plugin.ts b/packages/presentation/src/plugin.ts index 245ef270d9..55620862d1 100644 --- a/packages/presentation/src/plugin.ts +++ b/packages/presentation/src/plugin.ts @@ -27,9 +27,9 @@ export default plugin(presentationId, { Create: '' as IntlString, Cancel: '' as IntlString, Ok: '' as IntlString, + Save: '' as IntlString, Download: '' as IntlString, Delete: '' as IntlString, - Suggested: '' as IntlString, NotSelected: '' as IntlString, Deselect: '' as IntlString, AddSocialLinks: '' as IntlString diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index bf3a4d67b1..4861193a95 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -222,6 +222,9 @@ p:last-child { margin-block-end: 0; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } +.pr-1 { padding-right: .25rem; } +.pr-4 { padding-right: 1rem; } + /* --------- */ .relative { position: relative; } .abs-lt-content { @@ -259,6 +262,8 @@ p:last-child { margin-block-end: 0; } } .h-full { height: 100%; } +.h-2 { height: .5rem; } +.h-9 { height: 2.25rem; } .w-full { width: 100%; } .min-w-0 { min-width: 0; } .min-h-0 { min-height: 0; } @@ -393,8 +398,107 @@ a.no-line { .overflow-y-auto { overflow-y: auto; } .whitespace-nowrap { white-space: nowrap; } +/* Scrollbars */ +.scroll-m-0::-webkit-scrollbar-track { margin: 0; } .scroll-m-10::-webkit-scrollbar-track { margin: 2.5rem; } +.scroll-bg-accent-color::-webkit-scrollbar-thumb { + background-color: var(--theme-bg-accent-color); + &:hover { background-color: var(--theme-menu-divider); } +} + +/* Popups */ +.antiPopup { + display: flex; + flex-direction: column; + min-height: 0; + background-color: var(--theme-button-bg-focused); + border: 1px solid var(--theme-button-border-enabled); + border-radius: .75rem; + box-shadow: 0px 10px 20px rgba(0, 0, 0, .2); + user-select: none; + + .ap-space { + flex-shrink: 0; + height: .5rem; + } + .ap-scroll { + flex-grow: 1; + margin: 0 .25rem; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + &::-webkit-scrollbar-track { margin: 0; } + &::-webkit-scrollbar-thumb { + background-color: var(--theme-bg-accent-color); + &:hover { background-color: var(--theme-menu-divider); } + } + } + .ap-box { + display: flex; + flex-direction: column; + padding: 0 .25rem; + height: 100%; + } + .ap-menuItem { + justify-content: start; + padding: .5rem; + color: var(--theme-content-color); + border-radius: .5rem; + text-align: left; + + &.ap-woScroll { margin: 0 .5rem; } + &:hover { + color: var(--theme-caption-color); + background-color: var(--theme-button-bg-hovered); + cursor: pointer; + } + &:focus { + color: var(--theme-content-accent-color); + background-color: var(--theme-button-bg-pressed); + z-index: 1; + } + } + .ap-check { + margin-left: 1rem; + width: 1rem; + height: 1rem; + } + + &-withHeader { + .ap-header { + flex-shrink: 0; + display: flex; + flex-direction: column; + margin: 0 .5rem; + text-align: left; + + .ap-caption { + margin: .5rem 0 0 .75rem; + font-size: .75rem; + font-weight: 600; + text-transform: uppercase; + color: var(--theme-content-dark-color); + } + } + } + + &-withTitle { + .ap-title { + flex-shrink: 0; + margin: 1rem 1rem .25rem; + font-weight: 500; + color: var(--theme-caption-color); + } + .ap-header { + margin: .25rem 1rem 0; + .ap-caption { + margin: .5rem 0 0 0; + } + } + } +} + /* Backgrounds & Colors */ .background-theme-bg-color { background-color: var(--theme-bg-color); } .background-highlight-red { background-color: var(--highlight-red); } diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json index 8fe1a60cb5..092ffc44fd 100644 --- a/packages/ui/lang/en.json +++ b/packages/ui/lang/en.json @@ -7,6 +7,8 @@ "Days": "{days, plural, =0 {today} =1 {yesterday} other {# days ago}}", "ShowMore": "Show more", "ShowLess": "Show less", - "Search": "Search" + "Search": "Search", + "SearchDots": "Search...", + "Suggested": "Suggested" } } diff --git a/packages/ui/src/components/DatePopup.svelte b/packages/ui/src/components/DatePopup.svelte index dc99b56faa..ae0e84126e 100644 --- a/packages/ui/src/components/DatePopup.svelte +++ b/packages/ui/src/components/DatePopup.svelte @@ -106,14 +106,13 @@ .popup { display: flex; flex-direction: column; - padding: 1rem; - max-height: 100%; + min-height: 0; color: var(--theme-caption-color); - background-color: var(--theme-button-bg-hovered); + background-color: var(--theme-button-bg-focused); border: 1px solid var(--theme-button-border-enabled); border-radius: .75rem; + box-shadow: 0px 10px 20px rgba(0, 0, 0, .2); user-select: none; - filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .35)); } .arrow { diff --git a/packages/ui/src/components/DropdownLabelsPopup.svelte b/packages/ui/src/components/DropdownLabelsPopup.svelte index 47172c02b1..7765c12333 100644 --- a/packages/ui/src/components/DropdownLabelsPopup.svelte +++ b/packages/ui/src/components/DropdownLabelsPopup.svelte @@ -22,98 +22,46 @@ import IconSearch from './icons/Search.svelte' import IconBlueCheck from './icons/BlueCheck.svelte' import type { DropdownTextItem } from '../types' + import plugin from '../plugin' - export let title: IntlString - export let caption: IntlString | undefined = undefined + export let title: IntlString | undefined = undefined + export let caption: IntlString = plugin.string.Suggested export let items: DropdownTextItem[] export let selected: DropdownTextItem['id'] | undefined = undefined export let header: boolean = false let search: string = '' - const dispatch = createEventDispatcher() -
+
{#if header} - {#if title}
{/if} -
- - {#if caption}
{/if} + {#if title} +
+ {:else} +
+ {/if} +
+ +
{/if} -
-
+
+
+
{#each items.filter((x) => x.label.toLowerCase().includes(search.toLowerCase())) as item} - {/each}
+
- - diff --git a/packages/ui/src/components/DropdownPopup.svelte b/packages/ui/src/components/DropdownPopup.svelte index b1bf031884..a279b7e3c0 100644 --- a/packages/ui/src/components/DropdownPopup.svelte +++ b/packages/ui/src/components/DropdownPopup.svelte @@ -20,29 +20,38 @@ import EditWithIcon from './EditWithIcon.svelte' import IconSearch from './icons/Search.svelte' import type { ListItem } from '../types' + import plugin from '../plugin' - export let title: IntlString - export let caption: IntlString + export let title: IntlString | undefined = undefined + export let caption: IntlString = plugin.string.Suggested export let items: ListItem[] export let header: boolean = true let search: string = '' - const dispatch = createEventDispatcher() -
-
+
{#if header} -
- -
+ {#if title} +
+ {:else} +
+ {/if} +
+ +
{/if} -
-
+
+
+
{#each items.filter((x) => x.label.toLowerCase().includes(search.toLowerCase())) as item} -
+
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte index d0f0805f37..6200632da9 100644 --- a/packages/ui/src/components/EditWithIcon.svelte +++ b/packages/ui/src/components/EditWithIcon.svelte @@ -14,32 +14,36 @@ -->
textHTML.focus()}>
- + {#if value}
{ value = ''; dispatch('change', '') }}> diff --git a/packages/ui/src/components/Menu.svelte b/packages/ui/src/components/Menu.svelte index 8c678755b0..64a1b063aa 100644 --- a/packages/ui/src/components/Menu.svelte +++ b/packages/ui/src/components/Menu.svelte @@ -14,7 +14,7 @@ --> -
- {#each actions as action} -
{ - dispatch('close') - action.action(ctx) - }}> - {#if action.icon} - - {/if} -
-
- {/each} +
+
+
+ {#each actions as action} +
{ + dispatch('close') + action.action(ctx) + }}> + {#if action.icon} + + {/if} +
+
+ {/each} +
+
- - diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte index 1358b21040..0abd516eae 100644 --- a/packages/ui/src/components/PopupInstance.svelte +++ b/packages/ui/src/components/PopupInstance.svelte @@ -47,6 +47,7 @@ if (element) { show = false modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = '' + modalHTML.style.maxHeight = modalHTML.style.height = '' if (typeof element !== 'string') { let el: HTMLElement = element as HTMLElement const rect = el.getBoundingClientRect() @@ -56,7 +57,10 @@ modalHTML.style.top = `calc(${rect.bottom}px + .75rem)` else if (rectPopup.height + 28 < rect.top) modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)` - else modalHTML.style.top = modalHTML.style.bottom = '1rem' + else + modalHTML.style.top = modalHTML.style.bottom = '1rem' + // modalHTML.style.maxHeight = 'calc(100vh - 2rem)' + // } // Horizontal if (rect.left + rectPopup.width + 16 > document.body.clientWidth) modalHTML.style.right = document.body.clientWidth - rect.right + 'px' @@ -105,6 +109,7 @@ display: flex; flex-direction: column; justify-content: center; + max-height: calc(100vh - 2rem); background-color: transparent; } .modal-overlay { diff --git a/packages/ui/src/components/SearchEdit.svelte b/packages/ui/src/components/SearchEdit.svelte index 65145030a1..71482736ba 100644 --- a/packages/ui/src/components/SearchEdit.svelte +++ b/packages/ui/src/components/SearchEdit.svelte @@ -1,8 +1,5 @@ { if (_search === '') { diff --git a/packages/ui/src/components/internal/LangPopup.svelte b/packages/ui/src/components/internal/LangPopup.svelte index 4325531f4d..7df06f2a2a 100644 --- a/packages/ui/src/components/internal/LangPopup.svelte +++ b/packages/ui/src/components/internal/LangPopup.svelte @@ -22,9 +22,10 @@ const dispatch = createEventDispatcher() -
+
+
{#each langs as lang} -
{ +
{ dispatch('close', lang.id) }}> @@ -33,29 +34,5 @@
{/each} +
- - diff --git a/packages/ui/src/components/internal/LangSelector.svelte b/packages/ui/src/components/internal/LangSelector.svelte index 752d65fb58..05deb6c690 100644 --- a/packages/ui/src/components/internal/LangSelector.svelte +++ b/packages/ui/src/components/internal/LangSelector.svelte @@ -15,6 +15,7 @@