Polls: readable poll card: counts, visible bars/indicators, no chip overflow (#246) #247
@@ -261,52 +261,69 @@ export function PollContent({
|
||||
handleVote(answers[idx].id);
|
||||
};
|
||||
|
||||
const headerLabel = isEnded
|
||||
? 'Poll closed · Final results'
|
||||
: `Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`;
|
||||
// [Gitea #246] Type line under the "Poll" label.
|
||||
const typeLabel = (() => {
|
||||
if (isEnded) return 'Final results';
|
||||
if (isUndisclosed) return 'Results hidden until the end';
|
||||
return isMultiple ? `Pick up to ${maxSelections}` : 'Single choice';
|
||||
})();
|
||||
|
||||
// Multiple choice counts people, not answers ("1 voter" who picked two).
|
||||
const unit = isMultiple ? 'voter' : 'vote';
|
||||
const footerNote = (() => {
|
||||
const totalPart = total > 0 ? `${total} ${unit}${total === 1 ? '' : 's'}` : `No ${unit}s yet`;
|
||||
if (isUndisclosed && !isEnded) {
|
||||
return canVote
|
||||
? 'Voting open · Results hidden until the poll ends'
|
||||
: 'Results hidden until the poll ends';
|
||||
? `${myVotes.size > 0 ? 'You voted' : 'Voting open'} · results shown when the poll ends`
|
||||
: 'Results shown when the poll ends';
|
||||
}
|
||||
const votesPart = total > 0 ? `${total} vote${total === 1 ? '' : 's'}` : 'No votes yet';
|
||||
if (isEnded) return `${votesPart} · Poll closed`;
|
||||
if (!canVote) return votesPart;
|
||||
if (isMultiple) return `${votesPart} · Select up to ${maxSelections}`;
|
||||
return `${votesPart} · ${myVotes.size > 0 ? 'Click to change' : 'Click to vote'}`;
|
||||
if (isEnded) return `${totalPart} · Poll closed`;
|
||||
if (!canVote) return totalPart;
|
||||
return `${totalPart} · ${myVotes.size > 0 ? 'Select another answer to change your vote' : 'Select an answer to vote'}`;
|
||||
})();
|
||||
|
||||
// Neutral tones derived from the theme's text colour, so they have contrast
|
||||
// in every theme (the Container/ContainerLine tokens were near-invisible).
|
||||
const muted = (pct: number) =>
|
||||
`color-mix(in srgb, ${color.SurfaceVariant.OnContainer} ${pct}%, transparent)`;
|
||||
|
||||
return (
|
||||
<Box
|
||||
data-poll-content
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
|
||||
gap="300"
|
||||
style={{
|
||||
// Same width for every poll (the message body shrink-wraps its content).
|
||||
width: toRem(460),
|
||||
maxWidth: '100%',
|
||||
margin: `${config.space.S100} 0`,
|
||||
padding: config.space.S300,
|
||||
borderRadius: config.radii.R400,
|
||||
border: `${config.borderWidth.B300} solid ${muted(18)}`,
|
||||
background: muted(4),
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="div"
|
||||
size="T200"
|
||||
priority="300"
|
||||
data-poll-content-label
|
||||
style={{
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: config.space.S100,
|
||||
}}
|
||||
>
|
||||
<span aria-hidden>◉ </span>
|
||||
{headerLabel}
|
||||
</Text>
|
||||
<Text size="T400" style={{ fontWeight: 600 }}>
|
||||
{question}
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Box alignItems="Center" gap="200" wrap="Wrap" data-poll-content-label>
|
||||
<Icon size="100" src={Icons.OrderList} style={{ opacity: 0.8 }} />
|
||||
<Text as="span" size="L400" style={{ fontWeight: 600 }}>
|
||||
Poll
|
||||
</Text>
|
||||
<Text as="span" size="T200" priority="300">
|
||||
·
|
||||
</Text>
|
||||
<Text as="span" size="T200" priority="300">
|
||||
{typeLabel}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text size="T400" style={{ fontWeight: 600, overflowWrap: 'anywhere' }}>
|
||||
{question}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="100"
|
||||
style={{ marginTop: '2px' }}
|
||||
gap="200"
|
||||
role={isMultiple ? 'group' : 'radiogroup'}
|
||||
aria-label={question}
|
||||
onKeyDown={handleRadioKeyDown}
|
||||
@@ -316,20 +333,32 @@ export function PollContent({
|
||||
const text = answer.text;
|
||||
const selected = myVotes.has(id);
|
||||
const voteCount = counts.get(id) ?? 0;
|
||||
const pct = showResults && total > 0 ? Math.round((voteCount / total) * 100) : 0;
|
||||
const showBar = showResults && total > 0;
|
||||
const pct = showBar ? Math.round((voteCount / total) * 100) : 0;
|
||||
const isWinner = winners.has(id);
|
||||
const resultText = `${voteCount} ${voteCount === 1 ? 'vote' : 'votes'} · ${pct}%`;
|
||||
// Roving tabindex for the single-choice radiogroup; checkboxes stay tabbable.
|
||||
const tabIndex = isMultiple ? 0 : selected || (myVotes.size === 0 && i === 0) ? 0 : -1;
|
||||
let barColor = muted(40);
|
||||
if (isWinner) barColor = color.Success.Main;
|
||||
else if (selected) barColor = color.Primary.Main;
|
||||
let rowBorder = muted(22);
|
||||
if (isWinner) rowBorder = color.Success.Main;
|
||||
else if (selected) rowBorder = color.Primary.Main;
|
||||
const labelParts = [text];
|
||||
if (showBar) labelParts.push(resultText);
|
||||
if (isWinner) labelParts.push('winning answer');
|
||||
return (
|
||||
<React.Fragment key={id}>
|
||||
<button
|
||||
type="button"
|
||||
data-poll-answer
|
||||
data-selected={selected}
|
||||
data-winner={isWinner || undefined}
|
||||
role={isMultiple ? 'checkbox' : 'radio'}
|
||||
aria-checked={selected}
|
||||
aria-disabled={!canVote}
|
||||
aria-label={isWinner ? `${text}, winning answer` : undefined}
|
||||
aria-label={labelParts.join(', ')}
|
||||
aria-describedby={
|
||||
showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
|
||||
? `poll-voters-${eventId}-${id}`
|
||||
@@ -340,60 +369,36 @@ export function PollContent({
|
||||
style={{
|
||||
padding: `${config.space.S200} ${config.space.S300}`,
|
||||
borderRadius: config.radii.R300,
|
||||
background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
|
||||
border: `${config.borderWidth.B300} solid ${
|
||||
isWinner
|
||||
? color.Success.Main
|
||||
: selected
|
||||
? color.Primary.Main
|
||||
: color.SurfaceVariant.ContainerLine
|
||||
}`,
|
||||
background: selected ? muted(8) : 'transparent',
|
||||
border: `${config.borderWidth.B300} solid ${rowBorder}`,
|
||||
lineHeight: 1.4,
|
||||
textAlign: 'left',
|
||||
cursor: canVote ? 'pointer' : 'default',
|
||||
color: 'inherit',
|
||||
font: 'inherit',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: config.space.S100,
|
||||
gap: config.space.S200,
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
transition: 'border-color 0.15s, background 0.15s',
|
||||
}}
|
||||
>
|
||||
{showResults && total > 0 && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
right: 'auto',
|
||||
width: `${pct}%`,
|
||||
background: selected
|
||||
? color.Primary.ContainerActive
|
||||
: color.SurfaceVariant.ContainerActive,
|
||||
pointerEvents: 'none',
|
||||
transition: 'width 0.3s ease',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S200,
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
width: toRem(14),
|
||||
height: toRem(14),
|
||||
border: `${config.borderWidth.B300} solid ${
|
||||
selected ? color.Primary.Main : color.Primary.ContainerLine
|
||||
}`,
|
||||
boxSizing: 'border-box',
|
||||
width: toRem(18),
|
||||
height: toRem(18),
|
||||
border: `2px solid ${selected ? color.Primary.Main : muted(55)}`,
|
||||
borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
|
||||
background: selected ? color.Primary.Main : 'transparent',
|
||||
display: 'flex',
|
||||
@@ -405,29 +410,72 @@ export function PollContent({
|
||||
>
|
||||
{selected ? <Icon size="50" src={Icons.Check} /> : null}
|
||||
</span>
|
||||
<Text as="span" size="T300" style={{ flexGrow: 1 }}>
|
||||
<Text
|
||||
as="span"
|
||||
size="T300"
|
||||
style={{ flexGrow: 1, minWidth: 0, overflowWrap: 'anywhere' }}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
{isWinner && (
|
||||
<Icon
|
||||
size="50"
|
||||
src={Icons.Check}
|
||||
style={{ flexShrink: 0, color: color.Success.Main }}
|
||||
/>
|
||||
<Text
|
||||
as="span"
|
||||
size="T200"
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S100,
|
||||
color: color.Success.Main,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
<Icon size="50" src={Icons.Star} filled />
|
||||
Winner
|
||||
</Text>
|
||||
)}
|
||||
{showResults && total > 0 && (
|
||||
<Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
|
||||
{pct}%
|
||||
{showBar && (
|
||||
<Text
|
||||
as="span"
|
||||
size="T200"
|
||||
priority="300"
|
||||
style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}
|
||||
>
|
||||
{resultText}
|
||||
</Text>
|
||||
)}
|
||||
</span>
|
||||
{showBar && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: toRem(6),
|
||||
borderRadius: config.radii.Pill,
|
||||
background: muted(12),
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
height: '100%',
|
||||
width: `${pct}%`,
|
||||
borderRadius: config.radii.Pill,
|
||||
background: barColor,
|
||||
transition: 'width 0.3s ease',
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
|
||||
<Text
|
||||
id={`poll-voters-${eventId}-${id}`}
|
||||
size="T200"
|
||||
priority="300"
|
||||
style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
|
||||
style={{ padding: `0 ${config.space.S300}`, marginTop: `-${config.space.S100}` }}
|
||||
>
|
||||
{`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
|
||||
</Text>
|
||||
@@ -436,48 +484,56 @@ export function PollContent({
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
{canShowVoters && (
|
||||
<Box>
|
||||
<Chip
|
||||
variant={showVoters ? 'Primary' : 'SurfaceVariant'}
|
||||
radii="Pill"
|
||||
aria-pressed={showVoters}
|
||||
onClick={() => setShowVoters((v) => !v)}
|
||||
before={<Icon size="50" src={Icons.User} />}
|
||||
>
|
||||
<Text size="T200">{showVoters ? 'Hide voters' : 'Show who voted'}</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
)}
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
|
||||
<Text size="T200" priority="300" style={{ minWidth: 0 }}>
|
||||
<i>{footerNote}</i>
|
||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200" wrap="Wrap">
|
||||
<Text size="T200" priority="300" style={{ minWidth: 0, flex: '1 1 12rem' }}>
|
||||
{footerNote}
|
||||
</Text>
|
||||
{canEnd &&
|
||||
(confirmEnd ? (
|
||||
<Box gap="100" shrink="No" alignItems="Center">
|
||||
<Chip
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
aria-disabled={ending}
|
||||
onClick={ending ? undefined : handleEndPoll}
|
||||
>
|
||||
<Text size="T200">{ending ? 'Ending…' : 'End poll'}</Text>
|
||||
</Chip>
|
||||
<Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
|
||||
<Text size="T200">Cancel</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
) : (
|
||||
<Box gap="100" shrink="No" alignItems="Center" wrap="Wrap">
|
||||
{canShowVoters && (
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
variant={showVoters ? 'Primary' : 'SurfaceVariant'}
|
||||
radii="Pill"
|
||||
onClick={() => setConfirmEnd(true)}
|
||||
before={<Icon size="50" src={Icons.Cross} />}
|
||||
aria-pressed={showVoters}
|
||||
onClick={() => setShowVoters((v) => !v)}
|
||||
before={<Icon size="50" src={Icons.User} />}
|
||||
>
|
||||
<Text size="T200">End poll</Text>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
{showVoters ? 'Hide voters' : 'Who voted'}
|
||||
</Text>
|
||||
</Chip>
|
||||
))}
|
||||
)}
|
||||
{canEnd &&
|
||||
(confirmEnd ? (
|
||||
<>
|
||||
<Chip
|
||||
variant="Critical"
|
||||
radii="Pill"
|
||||
aria-disabled={ending}
|
||||
onClick={ending ? undefined : handleEndPoll}
|
||||
>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
{ending ? 'Ending…' : 'End poll'}
|
||||
</Text>
|
||||
</Chip>
|
||||
<Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
Cancel
|
||||
</Text>
|
||||
</Chip>
|
||||
</>
|
||||
) : (
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
radii="Pill"
|
||||
onClick={() => setConfirmEnd(true)}
|
||||
before={<Icon size="50" src={Icons.Cross} />}
|
||||
>
|
||||
<Text size="T200" style={{ whiteSpace: 'nowrap' }}>
|
||||
End poll
|
||||
</Text>
|
||||
</Chip>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -898,6 +898,14 @@ globalStyle(
|
||||
boxShadow: '0 0 10px rgba(255,107,0,0.10)',
|
||||
},
|
||||
);
|
||||
// [Gitea #246] The poll's winning answer (after it ends).
|
||||
globalStyle(
|
||||
`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-winner="true"]`,
|
||||
{
|
||||
border: '1px solid rgba(0,255,136,0.55) !important',
|
||||
boxShadow: '0 0 10px rgba(0,255,136,0.10)',
|
||||
},
|
||||
);
|
||||
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
|
||||
color: 'rgba(0,212,255,0.60) !important',
|
||||
opacity: '1 !important',
|
||||
|
||||
Reference in New Issue
Block a user