@streamscloud/kit 0.20.2 → 0.20.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -55,11 +55,16 @@ export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
|
|
|
55
55
|
const width = Math.min(fitted.width, maxWidth);
|
|
56
56
|
this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
|
|
57
57
|
}
|
|
58
|
+
else if (visualWidth <= 0 || visualHeight <= 0) {
|
|
59
|
+
this.canvasGeometry = { aspectRatio, width: containerWidth, height: containerHeight };
|
|
60
|
+
}
|
|
61
|
+
else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
|
|
62
|
+
this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
|
|
63
|
+
}
|
|
58
64
|
else {
|
|
59
|
-
//
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
this.canvasGeometry = { aspectRatio, width, height };
|
|
65
|
+
// Fit at image AR; per-axis capping collapses an oversized image to the container AR.
|
|
66
|
+
const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
|
|
67
|
+
this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
|
|
63
68
|
}
|
|
64
69
|
};
|
|
65
70
|
}
|
|
@@ -53,6 +53,18 @@ const navigateToUser = (event, by) => {
|
|
|
53
53
|
<span> · </span>
|
|
54
54
|
{fmt(dateTime, timeFormat)}
|
|
55
55
|
</span>
|
|
56
|
+
{:else if by}
|
|
57
|
+
{@const href = getHref(by)}
|
|
58
|
+
<span class="table-by-cell__by">
|
|
59
|
+
<span class="table-by-cell__by-image">
|
|
60
|
+
<ImageRound src={by.image} />
|
|
61
|
+
</span>
|
|
62
|
+
</span>
|
|
63
|
+
{#if href}
|
|
64
|
+
<a href={href} onclick={(e) => navigateToUser(e, by)} class="table-by-cell__name table-by-cell__name--link">{by.name}</a>
|
|
65
|
+
{:else}
|
|
66
|
+
<span class="table-by-cell__name">{by.name}</span>
|
|
67
|
+
{/if}
|
|
56
68
|
{:else}
|
|
57
69
|
<div class="table-by-cell__no-date">-</div>
|
|
58
70
|
{/if}
|
|
@@ -65,6 +77,7 @@ const navigateToUser = (event, by) => {
|
|
|
65
77
|
min-height: 3.125em;
|
|
66
78
|
max-height: 3.125em;
|
|
67
79
|
display: inline-flex;
|
|
80
|
+
align-items: center;
|
|
68
81
|
flex-wrap: nowrap;
|
|
69
82
|
}
|
|
70
83
|
.table-by-cell__date {
|
|
@@ -89,6 +102,23 @@ const navigateToUser = (event, by) => {
|
|
|
89
102
|
.table-by-cell__by {
|
|
90
103
|
margin-right: 0.625em;
|
|
91
104
|
}
|
|
105
|
+
.table-by-cell__name {
|
|
106
|
+
font-size: var(--_table-by-cell--font-size);
|
|
107
|
+
color: var(--sc-kit--color--text--primary);
|
|
108
|
+
min-width: 0;
|
|
109
|
+
text-overflow: ellipsis;
|
|
110
|
+
max-width: 100%;
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
|
114
|
+
.table-by-cell__name--link {
|
|
115
|
+
color: var(--sc-kit--color--accent);
|
|
116
|
+
text-decoration: underline;
|
|
117
|
+
transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
|
|
118
|
+
}
|
|
119
|
+
.table-by-cell__name--link:hover {
|
|
120
|
+
color: var(--sc-kit--color--accent--hover);
|
|
121
|
+
}
|
|
92
122
|
.table-by-cell__by-image {
|
|
93
123
|
display: flex;
|
|
94
124
|
align-items: center;
|
package/dist/ui/table/types.d.ts
CHANGED
|
@@ -40,20 +40,20 @@ export interface ITableBadgeColumn<T> extends ITableColumn<T> {
|
|
|
40
40
|
}
|
|
41
41
|
export interface ITableByColumn<T> extends ITableColumn<T> {
|
|
42
42
|
type: 'by';
|
|
43
|
-
/** The "when" — an ISO date string. */
|
|
44
|
-
valueFactory?: ((item: T) => string) | null;
|
|
43
|
+
/** The "when" — an ISO date string. Return null from the factory to render the person's name instead of a date. */
|
|
44
|
+
valueFactory?: ((item: T) => string | null) | null;
|
|
45
45
|
byValueFactory?: ((item: T) => {
|
|
46
46
|
id: string;
|
|
47
47
|
name: string;
|
|
48
48
|
handle: string;
|
|
49
49
|
image: string | null;
|
|
50
|
-
}) | null;
|
|
51
|
-
/** Returns href for the
|
|
50
|
+
} | null) | null;
|
|
51
|
+
/** Returns href for the person link — wraps the avatar in date mode, the name in name mode. If not provided, no link is rendered. */
|
|
52
52
|
hrefFactory?: ((by: {
|
|
53
53
|
id: string;
|
|
54
54
|
handle: string;
|
|
55
55
|
}) => string) | null;
|
|
56
|
-
/** Called when user clicks the
|
|
56
|
+
/** Called when the user clicks the person link. Use for SPA navigation. */
|
|
57
57
|
onNavigate?: ((by: {
|
|
58
58
|
id: string;
|
|
59
59
|
handle: string;
|