sforkowany z mirror/soapbox
Improve PollPreview
Justin
rodzic
a66814d11d
commit
7a7fda0c08
|
|
@ -55,7 +55,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
|
|||
/>
|
||||
)}
|
||||
|
||||
{status.poll && <PollPreview poll={status.poll as PollEntity} />}
|
||||
{status.poll && <PollPreview pollId={status.poll as string} />}
|
||||
|
||||
<ScheduledStatusActionBar status={status} {...other} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
|
|||
|
||||
<PendingStatusMedia status={status} />
|
||||
|
||||
{status.poll && <PollPreview poll={status.poll as PollEntity} />}
|
||||
{status.poll && <PollPreview pollId={status.poll as string} />}
|
||||
|
||||
{status.quote && <QuotedStatus statusId={status.quote as string} />}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,36 @@
|
|||
import classNames from 'classnames';
|
||||
import noop from 'lodash/noop';
|
||||
import React from 'react';
|
||||
|
||||
import { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
|
||||
import PollOption from 'soapbox/components/polls/poll-option';
|
||||
import { Stack } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { Poll as PollEntity } from 'soapbox/types/entities';
|
||||
|
||||
interface IPollPreview {
|
||||
poll: PollEntity,
|
||||
pollId: string,
|
||||
}
|
||||
|
||||
const PollPreview: React.FC<IPollPreview> = ({ poll }) => {
|
||||
const renderOption = (option: PollOptionEntity, index: number) => {
|
||||
const showResults = poll.voted || poll.expired;
|
||||
|
||||
return (
|
||||
<li key={index}>
|
||||
<label className={classNames('poll__text', { selectable: !showResults })}>
|
||||
<input
|
||||
name='vote-options'
|
||||
type={poll.multiple ? 'checkbox' : 'radio'}
|
||||
disabled
|
||||
/>
|
||||
|
||||
<span className={classNames('poll__input', { checkbox: poll.multiple })} />
|
||||
|
||||
<span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
const PollPreview: React.FC<IPollPreview> = ({ pollId }) => {
|
||||
const poll = useAppSelector((state) => state.polls.get(pollId) as PollEntity);
|
||||
|
||||
if (!poll) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='poll'>
|
||||
<ul>
|
||||
{poll.options.map((option, i) => renderOption(option, i))}
|
||||
</ul>
|
||||
</div>
|
||||
<Stack space={2}>
|
||||
{poll.options.map((option, i) => (
|
||||
<PollOption
|
||||
key={i}
|
||||
poll={poll}
|
||||
option={option}
|
||||
index={i}
|
||||
showResults={false}
|
||||
active={false}
|
||||
onToggle={noop}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
@import 'boost';
|
||||
@import 'loading';
|
||||
@import 'ui';
|
||||
@import 'polls';
|
||||
// @import 'introduction';
|
||||
@import 'emoji_picker';
|
||||
@import 'about';
|
||||
|
|
|
|||
|
|
@ -1,131 +0,0 @@
|
|||
.poll {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__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] {
|
||||
@apply border border-solid border-primary-600;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
|
||||
&:focus {
|
||||
@apply border border-solid border-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.editable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
|
||||
.autosuggest-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
@apply border border-solid border-primary-600;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
@apply h-5;
|
||||
|
||||
.svg-icon {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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