diff --git a/plugins/card-resources/src/components/CardWidget.svelte b/plugins/card-resources/src/components/CardWidget.svelte index e047c7c592d..4e494a244bf 100644 --- a/plugins/card-resources/src/components/CardWidget.svelte +++ b/plugins/card-resources/src/components/CardWidget.svelte @@ -26,6 +26,7 @@ import EditCardNewContent from './EditCardNewContent.svelte' import { showMenu } from '@hcengineering/view-resources' import TagsEditor from './TagsEditor.svelte' + import ParentNamesPresenter from './ParentNamesPresenter.svelte' export let widget: Widget | undefined export let tab: WidgetTab | undefined @@ -107,6 +108,7 @@ dispatch('close') }} /> + diff --git a/plugins/card-resources/src/components/ColoredCardIcon.svelte b/plugins/card-resources/src/components/ColoredCardIcon.svelte index 5db0f8d2772..a2f8cc3d83f 100644 --- a/plugins/card-resources/src/components/ColoredCardIcon.svelte +++ b/plugins/card-resources/src/components/ColoredCardIcon.svelte @@ -15,7 +15,7 @@ -
+
{#if count > 0} diff --git a/plugins/card-resources/src/components/EditCardNew.svelte b/plugins/card-resources/src/components/EditCardNew.svelte index 49dc2eb5160..8f2e8861dfa 100644 --- a/plugins/card-resources/src/components/EditCardNew.svelte +++ b/plugins/card-resources/src/components/EditCardNew.svelte @@ -109,7 +109,7 @@ let element: HTMLElement let titleEl: HTMLElement | null = null let extraEl: HTMLElement | null = null - let showParents: boolean = !$deviceInfo.isMobile + let expandedParents: boolean = !$deviceInfo.isMobile let dropdownTags: boolean = false const shrinkElement = (el: 'title' | 'extra'): void => { @@ -135,8 +135,8 @@ } else if (headerWidth >= DROPDOWN_POINT && !extraEl.classList.contains('flex-shrink-15')) { shrinkElement('extra') } - if (headerWidth < NO_PARENTS_POINT && showParents) showParents = false - else if (headerWidth >= NO_PARENTS_POINT && !showParents) showParents = !$deviceInfo.isMobile + if (headerWidth < NO_PARENTS_POINT && expandedParents) expandedParents = false + else if (headerWidth >= NO_PARENTS_POINT && !expandedParents) expandedParents = !$deviceInfo.isMobile } afterUpdate(() => { @@ -172,9 +172,7 @@ - {#if showParents} - - {/if} +
{#if !_readonly} -{#if value && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)} +{#if value != null && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
- {#each value.parentInfo as parentInfo} - - + {#if !compact} + {#each value.parentInfo as parentInfo} + 100 ? 2 : 1} + colorInherit + > + {parentInfo.title} + + + {/each} + {:else} + {@const parentInfo = value.parentInfo[0]} + {@const shortTitle = (parentInfo.title?.charAt(0) ?? '') + '...'} 100 ? 2 : 1} colorInherit > - {parentInfo.title} + {shortTitle} - - {/each} + + {/if}
{:else if $$slots.default} @@ -66,17 +80,23 @@ display: inline-flex; flex-shrink: 1; margin-left: 0; - min-width: 0; min-width: calc( (var(--cards-container-card-min-width, 2rem) + 1.26rem) * var(--cards-container-parents, 1) + var(--cards-container-card-min-width, 2rem) ); color: var(--theme-darker-color); + &.compact { + min-width: 1rem; + } + .separator { flex-shrink: 0; padding: 0 0.5rem; color: var(--theme-content-color); + &.compact { + padding: 0 0.5rem 0 0; + } } :global(a:hover) { color: var(--theme-caption-color);