From 8a28be507b3c9d406e1bd89ae5386e07c356b962 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Fri, 16 Jun 2023 08:04:11 +0300 Subject: [PATCH] UBER-450: update MentionList. (#3431) Signed-off-by: Alexander Platov --- models/contact/src/index.ts | 2 +- .../src/components/ObjectSearchPopup.svelte | 108 +++++++----------- .../src/components/MentionList.svelte | 16 +-- packages/theme/styles/_layouts.scss | 6 +- packages/theme/styles/popups.scss | 77 ++++++++++--- plugins/contact-assets/assets/icons.svg | 4 + plugins/contact-assets/src/index.ts | 1 + plugins/contact-resources/src/index.ts | 2 +- plugins/contact/src/index.ts | 1 + plugins/document-assets/assets/icons.svg | 7 +- .../src/components/DocumentItem.svelte | 16 +-- plugins/recruit-assets/assets/icons.svg | 9 +- .../src/components/ApplicationItem.svelte | 16 +-- .../src/components/VacancyItem.svelte | 16 +-- .../src/components/issues/IssueItem.svelte | 12 +- 15 files changed, 158 insertions(+), 135 deletions(-) diff --git a/models/contact/src/index.ts b/models/contact/src/index.ts index b9ffc0852a..19dec532b9 100644 --- a/models/contact/src/index.ts +++ b/models/contact/src/index.ts @@ -705,7 +705,7 @@ export function createModel (builder: Builder): void { presentation.class.ObjectSearchCategory, core.space.Model, { - icon: contact.icon.Person, + icon: contact.icon.Persona, label: contact.string.SearchPerson, query: contact.completion.PersonQuery }, diff --git a/packages/presentation/src/components/ObjectSearchPopup.svelte b/packages/presentation/src/components/ObjectSearchPopup.svelte index 1ad3596fad..9e39a726f7 100644 --- a/packages/presentation/src/components/ObjectSearchPopup.svelte +++ b/packages/presentation/src/components/ObjectSearchPopup.svelte @@ -18,15 +18,16 @@ import { getResource, IntlString } from '@hcengineering/platform' import ui, { - Button, createFocusManager, deviceOptionsStore, - EditBox, FocusHandler, IconSearch, Label, ListView, - resizeObserver + resizeObserver, + Icon, + tooltip, + EditWithIcon } from '@hcengineering/ui' import { createEventDispatcher } from 'svelte' import presentation from '../plugin' @@ -149,85 +150,64 @@ $: updateItems(category, query, relatedDocuments) const manager = createFocusManager() + + const isStatusDisabled = (status: number) => status === 0 -
dispatch('changeSize')} -> -
+ dispatch('changeSize')}> +
{#if label} -
+
{/if} -
+
{#each categories as c, i} {@const status = categoryStatus[c._id] ?? 0} -
-
- +
+ updateItems(category, query, relatedDocuments)} placeholder={category?.label} + on:input={() => updateItems(category, query, relatedDocuments)} /> +
+
+
-
- - - - {@const doc = items[item]} -
dispatchItem(doc)}> - -
- - -
- {#if !hideButtons} -
-
-
+
+
+ + + + {@const doc = items[item]} +
dispatchItem(doc)}> + +
+ +
- {/if} +
+
- - diff --git a/packages/text-editor/src/components/MentionList.svelte b/packages/text-editor/src/components/MentionList.svelte index b8eaaf6c12..26307c721a 100644 --- a/packages/text-editor/src/components/MentionList.svelte +++ b/packages/text-editor/src/components/MentionList.svelte @@ -65,9 +65,11 @@ let tempStyle = '' if (rect.top < hDoc - rect.bottom) { // 20rem - 1.75rem - tempStyle = `top: calc(${rect.bottom}px + .75rem); max-height: calc(${hDoc - rect.bottom}px - 1.75rem); ` + const maxH: number = hDoc - rect.bottom - 40 >= 480 ? 480 : hDoc - rect.bottom - 40 + tempStyle = `top: calc(${rect.bottom}px + .75rem); max-height: ${maxH}px; ` } else { - tempStyle = `bottom: calc(${hDoc - rect.top}px + .75rem); max-height: calc(${rect.top}px - 1.75rem); ` + const maxH: number = rect.top - 40 >= 480 ? 480 : rect.top - 40 + tempStyle = `bottom: calc(${hDoc - rect.top}px + .75rem); max-height: ${maxH}px; ` } if (rect.left + wPopup > wDoc - 16) { // 30rem - 1.75rem @@ -95,7 +97,7 @@ updateStyle() }} > - dispatchItem(evt.detail)} hideButtons={true} /> + dispatchItem(evt.detail)} />
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index e51042fe70..ddb209e65c 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -726,11 +726,15 @@ input.search { width: 1.5rem; height: 1.5rem; } +.svg-x-large { + width: 1.75rem; + height: 1.75rem; +} .svg-full { width: inherit; height: inherit; } -.svg-card, .svg-x-small, .svg-small, .svg-medium, .svg-large { flex-shrink: 0; } +.svg-card, .svg-x-small, .svg-small, .svg-medium, .svg-large, .svg-x-large { flex-shrink: 0; } .svg-mask { position: absolute; diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 8e875de22e..4fbbd38fc4 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -244,6 +244,7 @@ padding: 0; height: 100%; min-width: 0; + min-height: 0; } .ap-menuItem { flex-shrink: 0; @@ -255,10 +256,18 @@ &:not(.separator) { margin: 0 .5rem; - padding: .25rem .5rem; min-height: 2.25rem; border-radius: .25rem; } + &:not(.separator, .withComp) { padding: .25rem .5rem; } + &.withComp { + display: flex; + align-items: center; + flex-wrap: nowrap; + padding: .25rem .5rem .25rem 0; + min-width: 0; + min-height: 0; + } &.selected, &.hoverable:hover { background: var(--theme-popup-hover); } &.empty { @@ -324,9 +333,11 @@ &.separator { flex-shrink: 0; - margin: .5rem 0; height: 1px; background-color: var(--theme-popup-divider); + + &:not(.halfMargin) { margin: .5rem 0; } + &.halfMargin { margin: .25rem 0; } } } .ap-check { @@ -336,20 +347,60 @@ height: 1rem; color: var(--theme-dark-color); } + .ap-subheader { + flex-shrink: 0; + padding: .5rem 1rem; + min-width: 0; + min-height: 2rem; + text-transform: uppercase; + font-weight: 500; + font-size: .625rem; + color: var(--theme-dark-color); + + &:not(.caption) { letter-spacing: 1px; } + &.caption { + padding-top: 1rem; + color: var(--theme-caption-color); + } + } .ap-menuHeader { display: flex; - // justify-content: center; - align-items: center; - padding: 0 .5rem; - width: 100%; - height: 3rem; - color: var(--theme-caption-color); - text-align: left; - cursor: pointer; + flex-direction: column; + border-bottom: 1px solid var(--theme-popup-divider); - &:hover { - background-color: var(--theme-popup-divider); - outline: none; + .tabs { + display: flex; + align-items: center; + padding: 0 .375rem; + min-width: 0; + + .tab { + position: relative; + display: flex; + justify-content: center; + align-items: center; + min-width: 2.25rem; + min-height: 2.75rem; + color: var(--theme-dark-color); + outline: none; + + &:not(:last-child) { margin-right: .375rem; } + &:not(.selected, .disabled) { cursor: pointer; } + &.disabled { color: var(--theme-darker-color); } + &.selected { + color: var(--theme-caption-color); + + &::after { + position: absolute; + content: ''; + left: 0; + bottom: -1px; + width: 100%; + height: 2px; + background-color: var(--theme-link-color); + } + } + } } } diff --git a/plugins/contact-assets/assets/icons.svg b/plugins/contact-assets/assets/icons.svg index 9b8e342a6e..241bac1b77 100644 --- a/plugins/contact-assets/assets/icons.svg +++ b/plugins/contact-assets/assets/icons.svg @@ -65,6 +65,10 @@ + + + + diff --git a/plugins/contact-assets/src/index.ts b/plugins/contact-assets/src/index.ts index a6e5efe6dd..4b29faaabe 100644 --- a/plugins/contact-assets/src/index.ts +++ b/plugins/contact-assets/src/index.ts @@ -34,6 +34,7 @@ loadMetadata(contact.icon, { GitHub: `${icons}#github`, Edit: `${icons}#edit`, Person: `${icons}#person`, + Persona: `${icons}#persona`, Company: `${icons}#company`, SocialEdit: `${icons}#social-edit`, Homepage: `${icons}#homepage`, diff --git a/plugins/contact-resources/src/index.ts b/plugins/contact-resources/src/index.ts index 91e918ebfe..5cdc43f91b 100644 --- a/plugins/contact-resources/src/index.ts +++ b/plugins/contact-resources/src/index.ts @@ -150,7 +150,7 @@ const toObjectSearchResult = (e: WithLookup): ObjectSearchResult => ({ icon: Avatar, iconProps: { size: 'x-small', avatar: e.avatar }, component: UserInfo, - componentProps: { size: 'x-small' } + componentProps: { size: 'smaller' } }) async function queryContact ( diff --git a/plugins/contact/src/index.ts b/plugins/contact/src/index.ts index 653de10797..cd0ecb7c3a 100644 --- a/plugins/contact/src/index.ts +++ b/plugins/contact/src/index.ts @@ -237,6 +237,7 @@ export const contactPlugin = plugin(contactId, { GitHub: '' as Asset, Edit: '' as Asset, Person: '' as Asset, + Persona: '' as Asset, Company: '' as Asset, SocialEdit: '' as Asset, Homepage: '' as Asset, diff --git a/plugins/document-assets/assets/icons.svg b/plugins/document-assets/assets/icons.svg index 8b1a827cf3..8f27bf9898 100644 --- a/plugins/document-assets/assets/icons.svg +++ b/plugins/document-assets/assets/icons.svg @@ -8,11 +8,8 @@ - - - - - + + diff --git a/plugins/document-resources/src/components/DocumentItem.svelte b/plugins/document-resources/src/components/DocumentItem.svelte index d09c60e900..afd0bb6a19 100644 --- a/plugins/document-resources/src/components/DocumentItem.svelte +++ b/plugins/document-resources/src/components/DocumentItem.svelte @@ -26,18 +26,14 @@ const lastVersion = versions.length > 0 ? versions[versions.length - 1] : undefined -
- -
+
+
+ +
+ {value.name} {#if lastVersion} - {lastVersion?.version} {/if} -
+
- - diff --git a/plugins/recruit-assets/assets/icons.svg b/plugins/recruit-assets/assets/icons.svg index d8d3a6427c..8dd646f94e 100644 --- a/plugins/recruit-assets/assets/icons.svg +++ b/plugins/recruit-assets/assets/icons.svg @@ -19,9 +19,12 @@ - - - + + + + + + diff --git a/plugins/recruit-resources/src/components/ApplicationItem.svelte b/plugins/recruit-resources/src/components/ApplicationItem.svelte index ed3e5dd41c..e8963dcb4d 100644 --- a/plugins/recruit-resources/src/components/ApplicationItem.svelte +++ b/plugins/recruit-resources/src/components/ApplicationItem.svelte @@ -32,19 +32,13 @@ }) -
+
- -
+ + {#if shortLabel}{shortLabel}-{/if}{value.number} -
+ {#if person} -
{getName(person)}
+ {getName(person)} {/if}
- - diff --git a/plugins/recruit-resources/src/components/VacancyItem.svelte b/plugins/recruit-resources/src/components/VacancyItem.svelte index acbf5ad386..7cf88fc64c 100644 --- a/plugins/recruit-resources/src/components/VacancyItem.svelte +++ b/plugins/recruit-resources/src/components/VacancyItem.svelte @@ -21,15 +21,11 @@ export let value: Vacancy -
- -
- {value.name} +
+
+
+ + {value.name} +
- - diff --git a/plugins/tracker-resources/src/components/issues/IssueItem.svelte b/plugins/tracker-resources/src/components/issues/IssueItem.svelte index 17484aa5b7..6aee5b88a6 100644 --- a/plugins/tracker-resources/src/components/issues/IssueItem.svelte +++ b/plugins/tracker-resources/src/components/issues/IssueItem.svelte @@ -25,20 +25,14 @@ $: st = $statusStore.get(value.status) -
+
{#if st} {/if} -
+ {title} - {value.title} -
+
- -