sforkowany z mirror/soapbox
Merge branch 'next-polls' into 'next'
Next: Polls functional components See merge request soapbox-pub/soapbox-fe!1156virtualized-window
Alex Gleason
commit
dedc744355
|
|
@ -1,18 +1,19 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, FormattedMessage, IntlShape } from 'react-intl';
|
||||
import React, { useState } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import { spring } from 'react-motion';
|
||||
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 { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import RelativeTimestamp from './relative_timestamp';
|
||||
|
||||
import type { Poll as PollEntity, PollOption } from 'soapbox/types/entities';
|
||||
import type { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
|
||||
|
||||
const messages = defineMessages({
|
||||
closed: { id: 'poll.closed', defaultMessage: 'Closed' },
|
||||
|
|
@ -20,172 +21,239 @@ const messages = defineMessages({
|
|||
votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
|
||||
});
|
||||
|
||||
const PollPercentageBar: React.FC<{percent: number, leading: boolean}> = ({ percent, leading }): JSX.Element => {
|
||||
return (
|
||||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
|
||||
{({ width }) =>(
|
||||
<span
|
||||
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}%` }}
|
||||
/>
|
||||
)}
|
||||
</Motion>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollOptionText extends IPollOption {
|
||||
percent: number,
|
||||
}
|
||||
|
||||
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: React.EventHandler<React.ChangeEvent> = () => {
|
||||
onToggle(index);
|
||||
};
|
||||
|
||||
const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onToggle(index);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<label
|
||||
className={classNames('relative', { 'cursor-pointer': !showResults })}
|
||||
title={showResults ? message : undefined}
|
||||
>
|
||||
<input
|
||||
className='hidden'
|
||||
name='vote-options'
|
||||
type={poll.multiple ? 'checkbox' : 'radio'}
|
||||
value={index}
|
||||
checked={active}
|
||||
onChange={handleOptionChange}
|
||||
/>
|
||||
|
||||
<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 && (
|
||||
<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 }} />
|
||||
</HStack>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollOption {
|
||||
poll: PollEntity,
|
||||
option: PollOptionEntity,
|
||||
index: number,
|
||||
showResults?: boolean,
|
||||
active: boolean,
|
||||
onToggle: (value: number) => void,
|
||||
}
|
||||
|
||||
const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
||||
const { poll, option, showResults } = props;
|
||||
if (!poll) return null;
|
||||
|
||||
const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
|
||||
const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
|
||||
|
||||
return (
|
||||
<div className='relative mb-2.5' key={option.title}>
|
||||
{showResults && (
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
)}
|
||||
|
||||
<PollOptionText percent={percent} {...props} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RefreshButton: React.FC<{poll: PollEntity}> = ({ poll }): JSX.Element => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
dispatch(fetchPoll(poll.id));
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<span>
|
||||
<button className='underline' onClick={handleRefresh}>
|
||||
<Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const VoteButton: React.FC<{poll: PollEntity, selected: Selected}> = ({ poll, selected }): JSX.Element => {
|
||||
const dispatch = useDispatch();
|
||||
const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
|
||||
|
||||
return (
|
||||
<Button onClick={handleVote} theme='ghost'>
|
||||
<FormattedMessage id='poll.vote' defaultMessage='Vote' />
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollFooter {
|
||||
poll: PollEntity,
|
||||
showResults: boolean,
|
||||
selected: Selected,
|
||||
}
|
||||
|
||||
const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
|
||||
const intl = useIntl();
|
||||
const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
|
||||
|
||||
return (
|
||||
<Stack space={2}>
|
||||
{!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
|
||||
<Text>
|
||||
{showResults && (
|
||||
<><RefreshButton poll={poll} /> · </>
|
||||
)}
|
||||
<FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />
|
||||
{poll.expires_at && <span> · {timeRemaining}</span>}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
type Selected = Record<number, boolean>;
|
||||
|
||||
interface IPoll {
|
||||
poll?: PollEntity,
|
||||
intl: IntlShape,
|
||||
dispatch?: Function,
|
||||
disabled?: boolean,
|
||||
me?: string | null | false | undefined,
|
||||
id: string,
|
||||
status?: string,
|
||||
}
|
||||
|
||||
interface IPollState {
|
||||
selected: Record<string, boolean>,
|
||||
}
|
||||
const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
class Poll extends ImmutablePureComponent<IPoll, IPollState> {
|
||||
const me = useAppSelector((state) => state.me);
|
||||
const poll = useAppSelector((state) => state.polls.get(id));
|
||||
|
||||
state = {
|
||||
selected: {} as Record<string, boolean>,
|
||||
const [selected, setSelected] = useState({} as Selected);
|
||||
|
||||
const openUnauthorizedModal = () => {
|
||||
dispatch(openModal('UNAUTHORIZED', {
|
||||
action: 'POLL_VOTE',
|
||||
ap_id: status,
|
||||
}));
|
||||
};
|
||||
|
||||
_toggleOption = (value: string) => {
|
||||
const { me, poll } = this.props;
|
||||
|
||||
const toggleOption = (value: number) => {
|
||||
if (me) {
|
||||
if (poll?.multiple) {
|
||||
const tmp = { ...this.state.selected };
|
||||
const tmp = { ...selected };
|
||||
if (tmp[value]) {
|
||||
delete tmp[value];
|
||||
} else {
|
||||
tmp[value] = true;
|
||||
}
|
||||
this.setState({ selected: tmp });
|
||||
setSelected(tmp);
|
||||
} else {
|
||||
const tmp: Record<string, boolean> = {};
|
||||
const tmp: Selected = {};
|
||||
tmp[value] = true;
|
||||
this.setState({ selected: tmp });
|
||||
setSelected(tmp);
|
||||
}
|
||||
} else {
|
||||
this.openUnauthorizedModal();
|
||||
openUnauthorizedModal();
|
||||
}
|
||||
}
|
||||
|
||||
handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
this._toggleOption(e.currentTarget.value);
|
||||
};
|
||||
|
||||
handleOptionKeyPress = (e: React.KeyboardEvent): void => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
const dataIndex = e.currentTarget.getAttribute('data-index');
|
||||
if (!poll) return null;
|
||||
|
||||
if (dataIndex) {
|
||||
this._toggleOption(dataIndex);
|
||||
}
|
||||
const showResults = poll.voted || poll.expired;
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
handleVote = () => {
|
||||
const { disabled, dispatch, poll } = this.props;
|
||||
if (disabled || !dispatch || !poll) return;
|
||||
dispatch(vote(poll.id, Object.keys(this.state.selected)));
|
||||
};
|
||||
|
||||
openUnauthorizedModal = () => {
|
||||
const { dispatch, status } = this.props;
|
||||
if (!dispatch) return;
|
||||
dispatch(openModal('UNAUTHORIZED', {
|
||||
action: 'POLL_VOTE',
|
||||
ap_id: status,
|
||||
}));
|
||||
}
|
||||
|
||||
handleRefresh = () => {
|
||||
const { disabled, dispatch, poll } = this.props;
|
||||
if (disabled || !poll || !dispatch) return;
|
||||
dispatch(fetchPoll(poll.id));
|
||||
};
|
||||
|
||||
renderOption(option: PollOption, optionIndex: number, showResults: boolean): JSX.Element | null {
|
||||
const { poll, disabled, intl } = this.props;
|
||||
if (!poll) return null;
|
||||
|
||||
const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
|
||||
const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
|
||||
const active = !!this.state.selected[`${optionIndex}`];
|
||||
const voted = poll.own_votes?.includes(optionIndex);
|
||||
const titleEmojified = option.title_emojified;
|
||||
|
||||
return (
|
||||
<li key={option.get('title')}>
|
||||
{showResults && (
|
||||
<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', { 'bg-primary-300 dark:bg-primary-400': leading })} style={{ width: `${width}%` }} />
|
||||
}
|
||||
</Motion>
|
||||
)}
|
||||
|
||||
<label className={classNames('poll__text', { selectable: !showResults })}>
|
||||
<input
|
||||
name='vote-options'
|
||||
type={poll.multiple ? 'checkbox' : 'radio'}
|
||||
value={optionIndex}
|
||||
checked={active}
|
||||
onChange={this.handleOptionChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{!showResults && (
|
||||
<span
|
||||
className={classNames('poll__input', { checkbox: poll.multiple, active })}
|
||||
tabIndex={0}
|
||||
role={poll.multiple ? 'checkbox' : 'radio'}
|
||||
onKeyPress={this.handleOptionKeyPress}
|
||||
aria-checked={active}
|
||||
aria-label={option.title}
|
||||
data-index={optionIndex}
|
||||
return (
|
||||
<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={!!selected[i]}
|
||||
onToggle={toggleOption}
|
||||
/>
|
||||
)}
|
||||
{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>
|
||||
)}
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<span dangerouslySetInnerHTML={{ __html: titleEmojified }} />
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
<PollFooter
|
||||
poll={poll}
|
||||
showResults={showResults}
|
||||
selected={selected}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { poll, intl } = this.props;
|
||||
|
||||
if (!poll) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
|
||||
const showResults = poll.voted || poll.expired;
|
||||
const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item);
|
||||
|
||||
return (
|
||||
<div className={classNames('poll', { voted: poll.voted })}>
|
||||
<ul>
|
||||
{poll.options.map((option, i) => this.renderOption(option, i, showResults))}
|
||||
</ul>
|
||||
|
||||
<div className='poll__footer'>
|
||||
{!showResults && <button className='button button-secondary' disabled={disabled} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
|
||||
<Text>
|
||||
{showResults && !this.props.disabled && (
|
||||
<span><button className='poll__link' onClick={this.handleRefresh}>
|
||||
<Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
|
||||
</button> · </span>
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(Poll);
|
||||
export default Poll;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { withRouter } from 'react-router-dom';
|
|||
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import PollContainer from 'soapbox/containers/poll_container';
|
||||
import Poll from 'soapbox/components/poll';
|
||||
import { addGreentext } from 'soapbox/utils/greentext';
|
||||
import { onlyEmoji } from 'soapbox/utils/rich_content';
|
||||
|
||||
|
|
@ -244,7 +244,7 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
<div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} lang={status.get('language')} />
|
||||
|
||||
{!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} status={status.get('url')} />}
|
||||
{!hidden && !!status.get('poll') && <Poll id={status.get('poll')} status={status.get('url')} />}
|
||||
</div>
|
||||
);
|
||||
} else if (this.props.onClick) {
|
||||
|
|
@ -267,7 +267,7 @@ class StatusContent extends React.PureComponent {
|
|||
}
|
||||
|
||||
if (status.get('poll')) {
|
||||
output.push(<PollContainer pollId={status.get('poll')} key='poll' status={status.get('url')} />);
|
||||
output.push(<Poll id={status.get('poll')} key='poll' status={status.get('url')} />);
|
||||
}
|
||||
|
||||
return output;
|
||||
|
|
@ -287,7 +287,7 @@ class StatusContent extends React.PureComponent {
|
|||
];
|
||||
|
||||
if (status.get('poll')) {
|
||||
output.push(<PollContainer pollId={status.get('poll')} key='poll' status={status.get('url')} />);
|
||||
output.push(<Poll id={status.get('poll')} key='poll' status={status.get('url')} />);
|
||||
}
|
||||
|
||||
return output;
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import Poll from 'soapbox/components/poll';
|
||||
|
||||
import type { RootState } from 'soapbox/store';
|
||||
|
||||
interface IPollContainer {
|
||||
pollId: string,
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: RootState, { pollId }: IPollContainer) => ({
|
||||
poll: state.polls.get(pollId),
|
||||
me: state.me,
|
||||
});
|
||||
|
||||
|
||||
export default connect(mapStateToProps)(Poll);
|
||||
|
|
@ -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