mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Polls: style with Tailwind

Browse Source
virtualized-window
Alex Gleason 3 years ago
parent 9262d5c26b
commit cc1df1bd09
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 73 additions and 314 deletions
Show Stats Download Patch File Download Diff File

132
app/soapbox/components/poll.tsx
Unescape View File

@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { vote, fetchPoll } from 'soapbox/actions/polls'; import { vote, fetchPoll } from 'soapbox/actions/polls';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { Text } from 'soapbox/components/ui'; import { Text, Button, Stack, HStack } from 'soapbox/components/ui';
import Motion from 'soapbox/features/ui/util/optional_motion'; import Motion from 'soapbox/features/ui/util/optional_motion';
import RelativeTimestamp from './relative_timestamp'; import RelativeTimestamp from './relative_timestamp';
@ -26,7 +26,7 @@ const PollPercentageBar: React.FC<{percent: number, leading: boolean}> = ({ perc
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}> <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
{({ width }) =>( {({ width }) =>(
<span <span
className={classNames('poll__chart bg-gray-300 dark:bg-slate-900', { className={classNames('absolute inset-0 h-full inline-block rounded bg-gray-300 dark:bg-slate-900', {
'bg-primary-300 dark:bg-primary-400': leading, 'bg-primary-300 dark:bg-primary-400': leading,
})} })}
style={{ width: `${width}%` }} style={{ width: `${width}%` }}
@ -43,12 +43,13 @@ interface IPollOptionText extends IPollOption {
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, percent, showResults, onToggle }) => { const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, percent, showResults, onToggle }) => {
const intl = useIntl(); const intl = useIntl();
const voted = poll.own_votes?.includes(index); const voted = poll.own_votes?.includes(index);
const message = intl.formatMessage(messages.votes, { votes: option.votes_count });
const handleOptionChange = (): void => { const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => {
onToggle(index); onToggle(index);
}; };
const handleOptionKeyPress = (e: React.KeyboardEvent): void => { const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
onToggle(index); onToggle(index);
e.stopPropagation(); e.stopPropagation();
@ -57,8 +58,12 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
}; };
return ( return (
<label className={classNames('poll__text', { selectable: !showResults })}> <label
className={classNames('relative', { 'cursor-pointer': !showResults })}
title={showResults ? message : undefined}
>
<input <input
className='hidden'
name='vote-options' name='vote-options'
type={poll.multiple ? 'checkbox' : 'radio'} type={poll.multiple ? 'checkbox' : 'radio'}
value={index} value={index}
@ -66,26 +71,34 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
onChange={handleOptionChange} onChange={handleOptionChange}
/> />
{!showResults && ( <HStack alignItems='center' className='p-1'>
<span {!showResults && (
className={classNames('poll__input', { checkbox: poll.multiple, active })} <span
tabIndex={0} className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
role={poll.multiple ? 'checkbox' : 'radio'} 'bg-primary-600': active,
onKeyPress={handleOptionKeyPress} 'rounded': poll.multiple,
aria-checked={active} })}
aria-label={option.title} tabIndex={0}
data-index={index} role={poll.multiple ? 'checkbox' : 'radio'}
/> onKeyPress={handleOptionKeyPress}
)} aria-checked={active}
aria-label={option.title}
/>
)}
{showResults && ( {showResults && (
<span className='poll__number' title={intl.formatMessage(messages.votes, { votes: option.votes_count })}> <HStack space={2} alignItems='center' className='mr-2.5'>
{!!voted && <Icon src={require('@tabler/icons/icons/check.svg')} className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />} {voted ? (
{Math.round(percent)}% <Icon src={require('@tabler/icons/icons/check.svg')} title={intl.formatMessage(messages.voted)} />
</span> ) : (
)} <div className='svg-icon' />
)}
<span className='font-bold'>{Math.round(percent)}%</span>
</HStack>
)}
<span dangerouslySetInnerHTML={{ __html: option.title_emojified }} /> <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
</HStack>
</label> </label>
); );
}; };
@ -107,13 +120,13 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count); const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
return ( return (
<li key={option.title}> <div className='relative mb-2.5' key={option.title}>
{showResults && ( {showResults && (
<PollPercentageBar percent={percent} leading={leading} /> <PollPercentageBar percent={percent} leading={leading} />
)} )}
<PollOptionText percent={percent} {...props} /> <PollOptionText percent={percent} {...props} />
</li> </div>
); );
}; };
@ -131,11 +144,16 @@ interface IPollState {
const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => { const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleRefresh = () => dispatch(fetchPoll(poll.id));
const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
dispatch(fetchPoll(poll.id));
e.stopPropagation();
e.preventDefault();
};
return ( return (
<span> <span>
<button className='poll__link' onClick={handleRefresh}> <button className='underline' onClick={handleRefresh}>
<Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text> <Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
</button> </button>
</span> </span>
@ -144,12 +162,12 @@ const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
const VoteButton: React.FC<{poll: PollEntity, selected: Selected}> = ({ poll, selected }): JSX.Element => { const VoteButton: React.FC<{poll: PollEntity, selected: Selected}> = ({ poll, selected }): JSX.Element => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const handleVote = dispatch(vote(poll.id, Object.keys(selected))); const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
return ( return (
<button className='button button-secondary' onClick={handleVote}> <Button onClick={handleVote} theme='ghost'>
<FormattedMessage id='poll.vote' defaultMessage='Vote' /> <FormattedMessage id='poll.vote' defaultMessage='Vote' />
</button> </Button>
); );
}; };
@ -164,8 +182,8 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />; const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
return ( return (
<div className='poll__footer'> <Stack space={2}>
{!showResults && <VoteButton poll={poll} selected={selected} />} {!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
<Text> <Text>
{showResults && ( {showResults && (
<><RefreshButton poll={poll} /> · </> <><RefreshButton poll={poll} /> · </>
@ -173,7 +191,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
<FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} /> <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />
{poll.expires_at && <span> · {timeRemaining}</span>} {poll.expires_at && <span> · {timeRemaining}</span>}
</Text> </Text>
</div> </Stack>
); );
}; };
@ -207,12 +225,6 @@ class Poll extends ImmutablePureComponent<IPoll, IPollState> {
} }
} }
handleVote = () => {
const { dispatch, poll } = this.props;
if (!dispatch || !poll) return;
dispatch(vote(poll.id, Object.keys(this.state.selected)));
};
openUnauthorizedModal = () => { openUnauthorizedModal = () => {
const { dispatch, status } = this.props; const { dispatch, status } = this.props;
if (!dispatch) return; if (!dispatch) return;
@ -230,26 +242,28 @@ class Poll extends ImmutablePureComponent<IPoll, IPollState> {
const showResults = poll.voted || poll.expired; const showResults = poll.voted || poll.expired;
return ( return (
<div className={classNames('poll', { voted: poll.voted })}> <div onClick={e => e.stopPropagation()}>
<ul> <Stack className={classNames('my-2', { voted: poll.voted })}>
{poll.options.map((option, i) => ( <Stack>
<PollOption {poll.options.map((option, i) => (
key={i} <PollOption
poll={poll} key={i}
option={option} poll={poll}
index={i} option={option}
showResults={showResults} index={i}
active={!!this.state.selected[i]} showResults={showResults}
onToggle={this.toggleOption} active={!!this.state.selected[i]}
/> onToggle={this.toggleOption}
))} />
</ul> ))}
</Stack>
<PollFooter
poll={poll} <PollFooter
showResults={showResults} poll={poll}
selected={selected} showResults={showResults}
/> selected={selected}
/>
</Stack>
</div> </div>
); );
} }

1
app/styles/application.scss
Unescape View File

@ -19,7 +19,6 @@
@import 'boost'; @import 'boost';
@import 'loading'; @import 'loading';
@import 'ui'; @import 'ui';
@import 'polls';
// @import 'introduction'; // @import 'introduction';
@import 'emoji_picker'; @import 'emoji_picker';
@import 'about'; @import 'about';

254
app/styles/polls.scss
Unescape View File

@ -1,254 +0,0 @@
.poll {
margin-top: 16px;
font-size: 14px;
li {
margin-bottom: 10px;
position: relative;
}
&__chart {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: inline-block;
border-radius: 4px;
background: hsla(var(--primary-text-color_hsl), 0.1);
&.leading { background: hsla(var(--primary-text-color_hsl), 0.15); }
}
&__text {
position: relative;
display: flex;
padding: 6px 0;
line-height: 18px;
cursor: default;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
color: var(--primary-text-color--faint);
input[type=radio],
input[type=checkbox] {
display: none;
}
> span:last-child {
flex: 1;
}
.autossugest-input {
flex: 1 1 auto;
}
input[type=text] {
display: block;
box-sizing: border-box;
width: 100%;
font-size: 14px;
color: var(--primary-text-color);
outline: 0;
font-family: inherit;
background: var(--foreground-color);
border: 1px solid var(--foreground-color);
border-radius: 4px;
padding: 6px 10px;
&:focus {
border-color: var(--highlight-text-color);
}
}
&.selectable {
cursor: pointer;
}
&.editable {
display: flex;
align-items: center;
overflow: visible;
.autosuggest-input {
width: 100%;
}
}
}
&__input {
display: inline-block;
position: relative;
border: 1px solid var(--brand-color);
box-sizing: border-box;
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-right: 10px;
top: -1px;
border-radius: 50%;
vertical-align: middle;
&.checkbox {
border-radius: 4px;
}
&.active {
border-color: $valid-value-color;
background: $valid-value-color;
}
&:active,
&:focus,
&:hover {
border-width: 4px;
background: none;
}
&::-moz-focus-inner {
outline: 0 !important;
border: 0;
}
&:focus,
&:active {
outline: 0 !important;
}
}
&__number {
display: inline-block;
width: 36px;
font-weight: 700;
padding: 0 10px;
text-align: right;
}
&.voted &__number {
width: 52px;
padding-left: 8px;
flex: 0 0 52px;
}
&__vote__mark {
float: left;
color: var(--highlight-text-color);
line-height: 18px;
}
&__footer {
padding-top: 6px;
padding-bottom: 5px;
color: var(--primary-text-color);
}
&__link {
display: inline;
background: transparent;
padding: 0;
margin: 0;
border: 0;
color: var(--primary-text-color);
text-decoration: underline;
font-size: inherit;
&:hover {
text-decoration: none;
}
&:active,
&:focus {
background-color: hsla(var(--primary-text-color_hsl), 0.1);
}
}
.button {
height: 36px;
padding: 0 16px;
margin-right: 10px;
font-size: 14px;
}
&__cancel {
height: 20px;
.svg-icon {
height: 20px;
width: 20px;
}
}
}
.compose-form__poll-wrapper {
border-top: 1px solid var(--foreground-color);
ul {
padding: 10px;
}
.poll__footer {
border-top: 1px solid var(--foreground-color);
padding: 10px;
margin: -5px 0 0 -5px;
button,
select {
flex: 1 1 50%;
margin: 5px 0 0 5px;
}
}
.button.button-secondary {
font-size: 14px;
font-weight: 400;
padding: 6px 10px;
height: auto;
line-height: inherit;
color: var(--brand-color);
border-color: var(--brand-color);
}
li {
display: flex;
align-items: center;
.poll__text {
flex: 0 0 auto;
width: calc(100% - (23px + 6px));
margin-right: 6px;
}
}
select {
box-sizing: border-box;
font-size: 14px;
color: var(--brand-color);
display: inline-block;
width: auto;
outline: 0;
font-family: inherit;
background-color: var(--foreground-color);
background-repeat: no-repeat;
background-position: right 8px center;
background-size: auto 16px;
border: 1px solid var(--brand-color);
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
}
.icon-button.disabled {
color: var(--brand-color);
}
}
.muted .poll {
color: var(--primary-text-color);
&__chart {
background: hsla(var(--brand-color_hsl), 0.2);
&.leading {
background: hsla(var(--brand-color_hsl), 0.2);
}
}
}
Write Preview
Loading…
Cancel
Save