diff --git a/models/card/src/index.ts b/models/card/src/index.ts index 19fd308478..1979ea2ca3 100644 --- a/models/card/src/index.ts +++ b/models/card/src/index.ts @@ -153,8 +153,8 @@ export class TFavoriteCard extends TPreference implements FavoriteCard { export * from './migration' const listConfig: (BuildModelKey | string)[] = [ - { key: '', props: { showParent: true }, displayProps: { fixed: 'left', key: 'card' } }, - { key: '_class', displayProps: { fixed: 'left', key: 'type' } }, + { key: '', props: { showParent: true } }, + { key: '_class' }, { key: '', displayProps: { grow: true } }, { key: '', @@ -172,7 +172,11 @@ const listConfig: (BuildModelKey | string)[] = [ }, { key: 'modifiedOn', - displayProps: { fixed: 'right', dividerBefore: true } + displayProps: { fixed: 'right', key: 'modifiedOn', dividerBefore: true } + }, + { + key: 'modifiedBy', + props: { kind: 'list', shouldShowName: false, avatarSize: 'x-small' } } ] @@ -260,7 +264,7 @@ export function createSystemType ( hiddenKeys: ['content', 'title'] }, config: [ - '', + { key: '', props: { shrink: true } }, '_class', { key: '', presenter: view.component.RolePresenter, label: card.string.Tags, props: { fullSize: true } }, { diff --git a/packages/presentation/src/components/NavLink.svelte b/packages/presentation/src/components/NavLink.svelte index 120d016b13..b0c0292915 100644 --- a/packages/presentation/src/components/NavLink.svelte +++ b/packages/presentation/src/components/NavLink.svelte @@ -18,6 +18,7 @@ import presentation from '../plugin' export let href: string | undefined + export let title: string | undefined = undefined export let disabled = false export let onClick: ((event: MouseEvent) => void) | undefined = undefined export let noUnderline = disabled @@ -29,6 +30,7 @@ export let inlineReference: boolean = false export let transparent: boolean = false export let inlineBlock = false + export let noSelect: boolean = true function clickHandler (e: MouseEvent): void { if (disabled) return @@ -79,7 +81,9 @@ class:antiMention={inlineReference} class:transparent class:fs-bold={accent} + class:select-text={!noSelect} style:flex-shrink={shrink} + {title} on:click={clickHandler} > @@ -96,6 +100,8 @@ class:transparent class:fs-bold={accent} style:flex-shrink={shrink} + class:select-text={!noSelect} + {title} on:click={clickHandler} > diff --git a/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte b/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte index f139f158b7..b4054d2bd6 100644 --- a/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte +++ b/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte @@ -43,7 +43,7 @@ {#each narrowModel as model, i} {#if hasComponent(model)} {@const { component, props } = model} -
+
{#if typeof component === 'string'} {:else} diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 25c4641411..a031d63e26 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -23,6 +23,7 @@ min-width: 0; border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor); border-radius: var(--small-focus-BorderRadius); + container-type: inline-size; &:not(.modal) { background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor); @@ -1777,10 +1778,14 @@ } td { + max-width: 50cqw; + &.align-left { text-align: left; } &.align-center { text-align: center; } &.align-right { text-align: right; } } + &:has(td:nth-child(4)) td { max-width: 40cqw; } + &:has(td:nth-child(6)) td { max-width: 30cqw; } &.editable { th, td, tr { @@ -2244,11 +2249,12 @@ /* ListView */ .listGrid { + overflow: hidden; position: relative; display: flex; align-items: center; - padding: 0 2.5rem 0 0.25rem; - width: max-content; + padding: 0 2.5rem 0 0.75rem; + width: 100%; height: 2.75rem; min-width: 100%; min-height: 2.75rem; @@ -2276,7 +2282,7 @@ } &.compactMode { - padding: 0 1.125rem 0 0.25rem; + padding: 0 1.125rem 0 0.75rem; } &.hoverable:hover, &.mListGridSelected { @@ -2403,6 +2409,7 @@ height: fit-content; min-width: 0; border-radius: 0.25rem; + container: listGridContainer / inline-size; &:not(:first-child) { margin-top: 0.5rem; @@ -2418,11 +2425,24 @@ z-index: 1; pointer-events: none; } - + .expandcollapse-content { - width: max-content !important; min-width: 100% !important; } + + // Responsive style for ListView: horizontal scrolling mode for widths less than 480px + @container listGridContainer (max-width: 480px) { + .expandcollapse-content { + width: max-content !important; + + .listGrid { + width: max-content; + + .cropped-text-presenters > :is(span:not(.separator), a):not(:empty), + .cropped-text-presenter { max-width: 10rem; } + } + } + } } /* ListView - global style */ diff --git a/packages/ui/src/components/NavItem.svelte b/packages/ui/src/components/NavItem.svelte index f511ab7bc0..14b9bd4551 100644 --- a/packages/ui/src/components/NavItem.svelte +++ b/packages/ui/src/components/NavItem.svelte @@ -206,6 +206,7 @@ margin-right: var(--spacing-1); width: var(--global-min-Size); height: var(--global-min-Size); + min-width: var(--global-min-Size); color: var(--global-primary-TextColor); &__tag { @@ -275,6 +276,7 @@ .hulyNavItem-icon { width: 0.75rem; + min-width: 0.75rem; margin-right: 0.625rem; } } @@ -285,6 +287,7 @@ margin-right: var(--spacing-0_75); width: var(--global-extra-small-Size); height: var(--global-extra-small-Size); + min-width: var(--global-extra-small-Size); background-color: var(--global-ui-BackgroundColor); border-radius: var(--extra-small-BorderRadius); } diff --git a/packages/ui/src/components/TimeSince.svelte b/packages/ui/src/components/TimeSince.svelte index 4ab4d31631..994ad0b779 100644 --- a/packages/ui/src/components/TimeSince.svelte +++ b/packages/ui/src/components/TimeSince.svelte @@ -78,7 +78,7 @@ diff --git a/plugins/card-resources/src/components/CardPresenter.svelte b/plugins/card-resources/src/components/CardPresenter.svelte index a7e286587a..4d0a219113 100644 --- a/plugins/card-resources/src/components/CardPresenter.svelte +++ b/plugins/card-resources/src/components/CardPresenter.svelte @@ -33,6 +33,7 @@ export let noSelect: boolean = true export let inline = false export let showParent: boolean = false + export let shrink: boolean = false export let kind: 'list' | undefined = undefined export let type: ObjectPresenterType = 'link' export let icon: Asset | AnySvelteComponent | undefined = undefined @@ -57,33 +58,55 @@ {:else if cardObj} {#if type === 'link'} -
- {#if showParent} - - {/if} - - + {#if showParent} + + {#if shouldShowAvatar}
{/if} - + {cardObj.title} + + + {:else} + + {#if shouldShowAvatar} +
+ +
+ {/if} + + {cardObj.title} + -
+ {/if} {:else} {cardObj.title} @@ -92,14 +115,8 @@ {/if} diff --git a/plugins/card-resources/src/components/CardRefPresenter.svelte b/plugins/card-resources/src/components/CardRefPresenter.svelte index c6ccc19c2f..3aa7e37402 100644 --- a/plugins/card-resources/src/components/CardRefPresenter.svelte +++ b/plugins/card-resources/src/components/CardRefPresenter.svelte @@ -26,6 +26,7 @@ export let kind: 'list' | undefined = undefined export let type: ObjectPresenterType = 'link' export let icon: Asset | AnySvelteComponent | undefined = undefined + export let shrink: boolean = false let doc: Card | undefined const query = createQuery() @@ -40,4 +41,4 @@ ) - + diff --git a/plugins/card-resources/src/components/ParentNamesPresenter.svelte b/plugins/card-resources/src/components/ParentNamesPresenter.svelte index fc78066718..f0ff2c9546 100644 --- a/plugins/card-resources/src/components/ParentNamesPresenter.svelte +++ b/plugins/card-resources/src/components/ParentNamesPresenter.svelte @@ -23,6 +23,8 @@ export let maxWidth = '' + const MIN_WIDTH = 2 // rem + function getHref (parentInfo: ParentInfo) { const loc = getCurrentLocation() loc.path[2] = cardId @@ -33,49 +35,57 @@ } -{#if value && Array.isArray(value.parentInfo)} -
- - {#each value.parentInfo as parentInfo} - - - - - {parentInfo.title} - - - {/each} - +{#if value && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)} +
+ {#each value.parentInfo as parentInfo} + + + 100 ? 2 : 1} + colorInherit + > + {parentInfo.title} + + › + {/each} +
{/if} diff --git a/plugins/chat-resources/src/components/ChatNavigationCategoryList.svelte b/plugins/chat-resources/src/components/ChatNavigationCategoryList.svelte index 7e88251ca0..e7ce11c7f8 100644 --- a/plugins/chat-resources/src/components/ChatNavigationCategoryList.svelte +++ b/plugins/chat-resources/src/components/ChatNavigationCategoryList.svelte @@ -34,20 +34,10 @@ const defaultConfig: (BuildModelKey | string)[] = [ { - displayProps: { - fixed: 'left', - key: 'createdBy' - }, - key: 'createdBy' - }, - { - displayProps: { - fixed: 'left', - key: 'card' - }, key: '', props: { - showParent: false + showParent: true, + shrink: true } }, { @@ -59,7 +49,8 @@ { displayProps: { fixed: 'left', - key: 'tags' + key: 'tags', + compression: true }, key: '', label: card.string.Tags, @@ -72,13 +63,17 @@ key: '', presenter: card.component.LabelsPresenter, label: card.string.Labels, + displayProps: { compression: true }, props: { fullSize: true } }, { - key: 'parent' + key: 'modifiedOn', // 'createdOn', + displayProps: { key: 'modifiedOn', fixed: 'left', dividerBefore: true } }, { - key: 'createdOn' + key: 'modifiedBy', // 'createdBy', + displayProps: { key: 'modifiedBy', fixed: 'right', align: 'center' }, + props: { kind: 'list', shouldShowName: false, avatarSize: 'x-small' } } ] diff --git a/plugins/communication-resources/src/utils.ts b/plugins/communication-resources/src/utils.ts index f7cdd8cc78..3ec22db662 100644 --- a/plugins/communication-resources/src/utils.ts +++ b/plugins/communication-resources/src/utils.ts @@ -188,8 +188,7 @@ function createThreadTitle (message: Message, parent: Card): string { const markup = jsonToMarkup(markdownToMarkup(message.content)) const messageText = markupToText(markup).trim() - const titleFromMessage = `${messageText.slice(0, 100)}${messageText.length > 100 ? '...' : ''}` - return titleFromMessage.length > 0 ? titleFromMessage : `Thread from ${parent.title}` + return messageText.length > 0 ? messageText : `Thread from ${parent.title}` } export async function loadLinkPreviewData (url: string): Promise { diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte index cfe1fe1e0e..40596c7814 100644 --- a/plugins/contact-resources/src/components/PersonContent.svelte +++ b/plugins/contact-resources/src/components/PersonContent.svelte @@ -52,6 +52,7 @@ export let type: ObjectPresenterType = 'link' export let overflowLabel = true export let inlineBlock = false + export let shrink: boolean = false const client = getClient() @@ -96,6 +97,7 @@ {maxWidth} {showStatus} {overflowLabel} + {shrink} />