sforkowany z mirror/soapbox
Polls: style with Tailwind
Alex Gleason
rodzic
9262d5c26b
commit
cc1df1bd09
|
|
@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
|
|||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { vote, fetchPoll } from 'soapbox/actions/polls';
|
||||
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 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 }) }}>
|
||||
{({ width }) =>(
|
||||
<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,
|
||||
})}
|
||||
style={{ width: `${width}%` }}
|
||||
|
|
@ -43,12 +43,13 @@ interface IPollOptionText extends IPollOption {
|
|||
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, percent, showResults, onToggle }) => {
|
||||
const intl = useIntl();
|
||||
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);
|
||||
};
|
||||
|
||||
const handleOptionKeyPress = (e: React.KeyboardEvent): void => {
|
||||
const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onToggle(index);
|
||||
e.stopPropagation();
|
||||
|
|
@ -57,8 +58,12 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
};
|
||||
|
||||
return (
|
||||
<label className={classNames('poll__text', { selectable: !showResults })}>
|
||||
<label
|
||||
className={classNames('relative', { 'cursor-pointer': !showResults })}
|
||||
title={showResults ? message : undefined}
|
||||
>
|
||||
<input
|
||||
className='hidden'
|
||||
name='vote-options'
|
||||
type={poll.multiple ? 'checkbox' : 'radio'}
|
||||
value={index}
|
||||
|
|
@ -66,26 +71,34 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
onChange={handleOptionChange}
|
||||
/>
|
||||
|
||||
{!showResults && (
|
||||
<span
|
||||
className={classNames('poll__input', { checkbox: poll.multiple, active })}
|
||||
tabIndex={0}
|
||||
role={poll.multiple ? 'checkbox' : 'radio'}
|
||||
onKeyPress={handleOptionKeyPress}
|
||||
aria-checked={active}
|
||||
aria-label={option.title}
|
||||
data-index={index}
|
||||
/>
|
||||
)}
|
||||
<HStack alignItems='center' className='p-1'>
|
||||
{!showResults && (
|
||||
<span
|
||||
className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
|
||||
'bg-primary-600': active,
|
||||
'rounded': poll.multiple,
|
||||
})}
|
||||
tabIndex={0}
|
||||
role={poll.multiple ? 'checkbox' : 'radio'}
|
||||
onKeyPress={handleOptionKeyPress}
|
||||
aria-checked={active}
|
||||
aria-label={option.title}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showResults && (
|
||||
<span className='poll__number' title={intl.formatMessage(messages.votes, { votes: option.votes_count })}>
|
||||
{!!voted && <Icon src={require('@tabler/icons/icons/check.svg')} className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
|
||||
{Math.round(percent)}%
|
||||
</span>
|
||||
)}
|
||||
{showResults && (
|
||||
<HStack space={2} alignItems='center' className='mr-2.5'>
|
||||
{voted ? (
|
||||
<Icon src={require('@tabler/icons/icons/check.svg')} title={intl.formatMessage(messages.voted)} />
|
||||
) : (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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);
|
||||
|
||||
return (
|
||||
<li key={option.title}>
|
||||
<div className='relative mb-2.5' key={option.title}>
|
||||
{showResults && (
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
)}
|
||||
|
||||
<PollOptionText percent={percent} {...props} />
|
||||
</li>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -131,11 +144,16 @@ interface IPollState {
|
|||
|
||||
const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
|
||||
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 (
|
||||
<span>
|
||||
<button className='poll__link' onClick={handleRefresh}>
|
||||
<button className='underline' onClick={handleRefresh}>
|
||||
<Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
|
||||
</button>
|
||||
</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 dispatch = useDispatch();
|
||||
const handleVote = dispatch(vote(poll.id, Object.keys(selected)));
|
||||
const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
|
||||
|
||||
return (
|
||||
<button className='button button-secondary' onClick={handleVote}>
|
||||
<Button onClick={handleVote} theme='ghost'>
|
||||
<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 />;
|
||||
|
||||
return (
|
||||
<div className='poll__footer'>
|
||||
{!showResults && <VoteButton poll={poll} selected={selected} />}
|
||||
<Stack space={2}>
|
||||
{!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
|
||||
<Text>
|
||||
{showResults && (
|
||||
<><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 }} />
|
||||
{poll.expires_at && <span> · {timeRemaining}</span>}
|
||||
</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 = () => {
|
||||
const { dispatch, status } = this.props;
|
||||
if (!dispatch) return;
|
||||
|
|
@ -230,26 +242,28 @@ class Poll extends ImmutablePureComponent<IPoll, IPollState> {
|
|||
const showResults = poll.voted || poll.expired;
|
||||
|
||||
return (
|
||||
<div className={classNames('poll', { voted: poll.voted })}>
|
||||
<ul>
|
||||
{poll.options.map((option, i) => (
|
||||
<PollOption
|
||||
key={i}
|
||||
poll={poll}
|
||||
option={option}
|
||||
index={i}
|
||||
showResults={showResults}
|
||||
active={!!this.state.selected[i]}
|
||||
onToggle={this.toggleOption}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<Stack className={classNames('my-2', { voted: poll.voted })}>
|
||||
<Stack>
|
||||
{poll.options.map((option, i) => (
|
||||
<PollOption
|
||||
key={i}
|
||||
poll={poll}
|
||||
option={option}
|
||||
index={i}
|
||||
showResults={showResults}
|
||||
active={!!this.state.selected[i]}
|
||||
onToggle={this.toggleOption}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<PollFooter
|
||||
poll={poll}
|
||||
showResults={showResults}
|
||||
selected={selected}
|
||||
/>
|
||||
<PollFooter
|
||||
poll={poll}
|
||||
showResults={showResults}
|
||||
selected={selected}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
@import 'boost';
|
||||
@import 'loading';
|
||||
@import 'ui';
|
||||
@import 'polls';
|
||||
// @import 'introduction';
|
||||
@import 'emoji_picker';
|
||||
@import 'about';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Ładowanie…
Reference in New Issue