Skip to content

Commit f1c76f6

Browse files
SasLordSasLord
authored
Updated CardPresenter layout. Table, ListView fixes. (#9197)
1 parent 95b7fcc commit f1c76f6

File tree

24 files changed

+195
-104
lines changed

24 files changed

+195
-104
lines changed

‎models/card/src/index.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ export class TFavoriteCard extends TPreference implements FavoriteCard {
153153
export * from './migration'
154154

155155
const listConfig: (BuildModelKey | string)[] = [
156-
{ key: '', props: { showParent: true }, displayProps: { fixed: 'left', key: 'card' } },
157-
{ key: '_class', displayProps: { fixed: 'left', key: 'type' } },
156+
{ key: '', props: { showParent: true } },
157+
{ key: '_class' },
158158
{ key: '', displayProps: { grow: true } },
159159
{
160160
key: '',
@@ -172,7 +172,11 @@ const listConfig: (BuildModelKey | string)[] = [
172172
},
173173
{
174174
key: 'modifiedOn',
175-
displayProps: { fixed: 'right', dividerBefore: true }
175+
displayProps: { fixed: 'right', key: 'modifiedOn', dividerBefore: true }
176+
},
177+
{
178+
key: 'modifiedBy',
179+
props: { kind: 'list', shouldShowName: false, avatarSize: 'x-small' }
176180
}
177181
]
178182

@@ -260,7 +264,7 @@ export function createSystemType (
260264
hiddenKeys: ['content', 'title']
261265
},
262266
config: [
263-
'',
267+
{ key: '', props: { shrink: true } },
264268
'_class',
265269
{ key: '', presenter: view.component.RolePresenter, label: card.string.Tags, props: { fullSize: true } },
266270
{

‎packages/presentation/src/components/NavLink.svelte

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
import presentation from '../plugin'
1919
2020
export let href: string | undefined
21+
export let title: string | undefined = undefined
2122
export let disabled = false
2223
export let onClick: ((event: MouseEvent) => void) | undefined = undefined
2324
export let noUnderline = disabled
@@ -29,6 +30,7 @@
2930
export let inlineReference: boolean = false
3031
export let transparent: boolean = false
3132
export let inlineBlock = false
33+
export let noSelect: boolean = true
3234
3335
function clickHandler (e: MouseEvent): void {
3436
if (disabled) return
@@ -79,7 +81,9 @@
7981
class:antiMention={inlineReference}
8082
class:transparent
8183
class:fs-bold={accent}
84+
class:select-text={!noSelect}
8285
style:flex-shrink={shrink}
86+
{title}
8387
on:click={clickHandler}
8488
>
8589
<slot />
@@ -96,6 +100,8 @@
96100
class:transparent
97101
class:fs-bold={accent}
98102
style:flex-shrink={shrink}
103+
class:select-text={!noSelect}
104+
{title}
99105
on:click={clickHandler}
100106
>
101107
<slot />

‎packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
{#each narrowModel as model, i}
4444
{#if hasComponent(model)}
4545
{@const { component, props } = model}
46-
<div class="title">
46+
<div class="title inline-flex min-w-6">
4747
{#if typeof component === 'string'}
4848
<Component is={component} {props} />
4949
{:else}

‎packages/theme/styles/components.scss

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
min-width: 0;
2424
border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
2525
border-radius: var(--small-focus-BorderRadius);
26+
container-type: inline-size;
2627

2728
&:not(.modal) {
2829
background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
@@ -1777,10 +1778,14 @@
17771778
}
17781779

17791780
td {
1781+
max-width: 50cqw;
1782+
17801783
&.align-left { text-align: left; }
17811784
&.align-center { text-align: center; }
17821785
&.align-right { text-align: right; }
17831786
}
1787+
&:has(td:nth-child(4)) td { max-width: 40cqw; }
1788+
&:has(td:nth-child(6)) td { max-width: 30cqw; }
17841789

17851790
&.editable {
17861791
th, td, tr {
@@ -2244,11 +2249,12 @@
22442249

22452250
/* ListView */
22462251
.listGrid {
2252+
overflow: hidden;
22472253
position: relative;
22482254
display: flex;
22492255
align-items: center;
2250-
padding: 0 2.5rem 0 0.25rem;
2251-
width: max-content;
2256+
padding: 0 2.5rem 0 0.75rem;
2257+
width: 100%;
22522258
height: 2.75rem;
22532259
min-width: 100%;
22542260
min-height: 2.75rem;
@@ -2276,7 +2282,7 @@
22762282
}
22772283

22782284
&.compactMode {
2279-
padding: 0 1.125rem 0 0.25rem;
2285+
padding: 0 1.125rem 0 0.75rem;
22802286
}
22812287
&.hoverable:hover,
22822288
&.mListGridSelected {
@@ -2403,6 +2409,7 @@
24032409
height: fit-content;
24042410
min-width: 0;
24052411
border-radius: 0.25rem;
2412+
container: listGridContainer / inline-size;
24062413

24072414
&:not(:first-child) {
24082415
margin-top: 0.5rem;
@@ -2418,11 +2425,24 @@
24182425
z-index: 1;
24192426
pointer-events: none;
24202427
}
2421-
2428+
24222429
.expandcollapse-content {
2423-
width: max-content !important;
24242430
min-width: 100% !important;
24252431
}
2432+
2433+
// Responsive style for ListView: horizontal scrolling mode for widths less than 480px
2434+
@container listGridContainer (max-width: 480px) {
2435+
.expandcollapse-content {
2436+
width: max-content !important;
2437+
2438+
.listGrid {
2439+
width: max-content;
2440+
2441+
.cropped-text-presenters > :is(span:not(.separator), a):not(:empty),
2442+
.cropped-text-presenter { max-width: 10rem; }
2443+
}
2444+
}
2445+
}
24262446
}
24272447

24282448
/* ListView - global style */

‎packages/ui/src/components/NavItem.svelte

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@
206206
margin-right: var(--spacing-1);
207207
width: var(--global-min-Size);
208208
height: var(--global-min-Size);
209+
min-width: var(--global-min-Size);
209210
color: var(--global-primary-TextColor);
210211
211212
&__tag {
@@ -275,6 +276,7 @@
275276
276277
.hulyNavItem-icon {
277278
width: 0.75rem;
279+
min-width: 0.75rem;
278280
margin-right: 0.625rem;
279281
}
280282
}
@@ -285,6 +287,7 @@
285287
margin-right: var(--spacing-0_75);
286288
width: var(--global-extra-small-Size);
287289
height: var(--global-extra-small-Size);
290+
min-width: var(--global-extra-small-Size);
288291
background-color: var(--global-ui-BackgroundColor);
289292
border-radius: var(--extra-small-BorderRadius);
290293
}

‎packages/ui/src/components/TimeSince.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
<span
8080
use:tooltip={{ label: ui.string.TimeTooltip, props: { value: tooltipValue } }}
81-
class="overflow-label"
81+
class="no-word-wrap"
8282
class:text-sm={kind === 'list'}
8383
class:content-dark-color={kind === 'list'}
8484
>

‎plugins/card-resources/src/components/CardPresenter.svelte

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
export let noSelect: boolean = true
3434
export let inline = false
3535
export let showParent: boolean = false
36+
export let shrink: boolean = false
3637
export let kind: 'list' | undefined = undefined
3738
export let type: ObjectPresenterType = 'link'
3839
export let icon: Asset | AnySvelteComponent | undefined = undefined
@@ -57,33 +58,55 @@
5758
<ObjectMention object={cardObj} {disabled} {onClick} component={card.component.EditCard} />
5859
{:else if cardObj}
5960
{#if type === 'link'}
60-
<div class="flex-row-center">
61-
{#if showParent}
62-
<ParentNamesPresenter value={cardObj} />
63-
{/if}
64-
<DocNavLink
65-
object={cardObj}
66-
{onClick}
67-
{disabled}
68-
{noUnderline}
69-
{inline}
70-
{colorInherit}
71-
component={card.component.EditCard}
72-
shrink={0}
73-
>
74-
<span class="presenterRoot" class:cursor-pointer={!disabled}>
61+
{#if showParent}
62+
<ParentNamesPresenter value={cardObj}>
63+
<DocNavLink
64+
object={cardObj}
65+
{onClick}
66+
{disabled}
67+
{noUnderline}
68+
{colorInherit}
69+
{noSelect}
70+
inline
71+
component={card.component.EditCard}
72+
shrink={kind === 'list' || shrink ? 1 : 0}
73+
title={cardObj?.title}
74+
>
7575
{#if shouldShowAvatar}
7676
<div class="icon" use:tooltip={{ label: card.string.Card }}>
7777
<Icon icon={icon ?? card.icon.Card} size={'small'} />
7878
</div>
7979
{/if}
80-
<span class="overflow-label" class:select-text={!noSelect} title={cardObj?.title}>
80+
<span class="overflow-label">
8181
{cardObj.title}
8282
<slot name="details" />
8383
</span>
84+
</DocNavLink>
85+
</ParentNamesPresenter>
86+
{:else}
87+
<DocNavLink
88+
object={cardObj}
89+
{onClick}
90+
{disabled}
91+
{noUnderline}
92+
{colorInherit}
93+
{noSelect}
94+
inline
95+
component={card.component.EditCard}
96+
shrink={kind === 'list' || shrink ? 1 : 0}
97+
title={cardObj?.title}
98+
>
99+
{#if shouldShowAvatar}
100+
<div class="icon" use:tooltip={{ label: card.string.Card }}>
101+
<Icon icon={icon ?? card.icon.Card} size={'small'} />
102+
</div>
103+
{/if}
104+
<span class="overflow-label cropped-text-presenter">
105+
{cardObj.title}
106+
<slot name="details" />
84107
</span>
85108
</DocNavLink>
86-
</div>
109+
{/if}
87110
{:else}
88111
<span class="overflow-label" class:select-text={!noSelect} use:tooltip={{ label: getEmbeddedLabel(cardObj.title) }}>
89112
{cardObj.title}
@@ -92,14 +115,8 @@
92115
{/if}
93116

94117
<style lang="scss">
95-
.presenterRoot {
96-
display: flex;
97-
align-items: center;
98-
flex-shrink: 0;
99-
100-
.icon {
101-
margin-right: 0.5rem;
102-
color: var(--theme-dark-color);
103-
}
118+
.icon {
119+
margin-right: 0.5rem;
120+
color: var(--theme-dark-color);
104121
}
105122
</style>

‎plugins/card-resources/src/components/CardRefPresenter.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
export let kind: 'list' | undefined = undefined
2727
export let type: ObjectPresenterType = 'link'
2828
export let icon: Asset | AnySvelteComponent | undefined = undefined
29+
export let shrink: boolean = false
2930
3031
let doc: Card | undefined
3132
const query = createQuery()
@@ -40,4 +41,4 @@
4041
)
4142
</script>
4243

43-
<CardPresenter value={doc} {kind} {type} {icon} />
44+
<CardPresenter value={doc} {kind} {type} {icon} {shrink} />

0 commit comments

Comments
 (0)