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 { 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>
<PollFooter
poll={poll}
showResults={showResults}
selected={selected}
/>
<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}
/>
</Stack>
</div>
);
}

1
app/styles/application.scss
Unescape View File

@ -19,7 +19,6 @@
@import 'boost';
@import 'loading';
@import 'ui';
@import 'polls';
// @import 'introduction';
@import 'emoji_picker';
@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