mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
4bc764eb6a
The packing row tests read the TREK tooltip and the accessible name instead of the title the badges no longer carry, the journey delete suite takes its service from the module over a snapshot db and seeds through the row factories, the storage notifier suite builds its subject once, the POI layer follows the view only while it has POIs, the collections repository reads the list's places through its own query, and the baselines the moved code left smaller come down with it.
92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
import { useTranslation } from '../../i18n';
|
|
import type { Bringer } from './packingBringers';
|
|
|
|
const CIRCLE: CSSProperties = {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: '50%',
|
|
flexShrink: 0,
|
|
display: 'grid',
|
|
placeItems: 'center',
|
|
fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
|
|
fontWeight: 700,
|
|
};
|
|
|
|
/** A bringer's picture, or the first letter of the name on a colour taken from it. */
|
|
export function BringerAvatar({ bringer }: { bringer: Bringer }) {
|
|
if (bringer.avatar) {
|
|
return <img src={bringer.avatar} alt="" style={{ ...CIRCLE, objectFit: 'cover', display: 'block' }} />;
|
|
}
|
|
return (
|
|
<span
|
|
aria-hidden
|
|
style={{
|
|
...CIRCLE,
|
|
background: `hsl(${((bringer.name.codePointAt(0) ?? 0) * 37) % 360}, 55%, 55%)`, // theme-lint-disable: the colour comes from the bringer's name
|
|
color: 'white',
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
{bringer.name[0]}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** The "+N" of the others bringing it, as a circle tucked under the first bringer's picture. */
|
|
export function MoreBringers({ count }: { count: number }) {
|
|
return (
|
|
<span
|
|
aria-hidden
|
|
style={{
|
|
...CIRCLE,
|
|
marginInlineStart: -6,
|
|
color: 'var(--text-muted)',
|
|
background: 'var(--bg-tertiary)',
|
|
boxShadow: '0 0 0 2px var(--bg-card)',
|
|
fontVariantNumeric: 'tabular-nums',
|
|
}}
|
|
>
|
|
+{count}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** What the row's tooltip shows: everyone bringing the item, one per line with their picture. */
|
|
export function BringersCard({ bringers }: { bringers: readonly Bringer[] }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div style={{ minWidth: 150 }}>
|
|
<div
|
|
className="text-content-faint"
|
|
style={{
|
|
fontSize: 'calc(9.5px * var(--fs-scale-caption, 1))',
|
|
fontWeight: 700,
|
|
letterSpacing: '.06em',
|
|
textTransform: 'uppercase',
|
|
paddingBottom: 6,
|
|
}}
|
|
>
|
|
{t('packing.bringersTitle')}
|
|
</div>
|
|
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
|
|
{bringers.map((b, i) => (
|
|
<li
|
|
key={b.name}
|
|
className={i > 0 ? 'border-t border-edge-faint' : undefined}
|
|
style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0' }}
|
|
>
|
|
<BringerAvatar bringer={b} />
|
|
<span
|
|
className="text-content"
|
|
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600 }}
|
|
>
|
|
{b.name}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|