convert poll component
This commit is contained in:
Ramón Souza
parent
efdec5da53
commit
e37208b8ce
@ -4,12 +4,9 @@ import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { withModalMounter } from '/imports/ui/components/modal/service';
|
||||
import _ from 'lodash';
|
||||
import { Session } from 'meteor/session';
|
||||
import cx from 'classnames';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import Checkbox from '/imports/ui/components/checkbox/component';
|
||||
import Toggle from '/imports/ui/components/switch/component';
|
||||
import LiveResult from './live-result/component';
|
||||
import { styles } from './styles.scss';
|
||||
import Styled from './styles';
|
||||
import { PANELS, ACTIONS } from '../layout/enums';
|
||||
import DragAndDrop from './dragAndDrop/component';
|
||||
import { alertScreenReader } from '/imports/utils/dom-utils';
|
||||
@ -353,10 +350,10 @@ class Poll extends Component {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<span className={styles.toggleLabel}>
|
||||
<Styled.ToggleLabel>
|
||||
{status ? intl.formatMessage(intlMessages.on)
|
||||
: intl.formatMessage(intlMessages.off)}
|
||||
</span>
|
||||
</Styled.ToggleLabel>
|
||||
);
|
||||
}
|
||||
|
||||
@ -388,20 +385,18 @@ class Poll extends Component {
|
||||
justifyContent: 'spaceBetween',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
<Styled.PollOptionInput
|
||||
type="text"
|
||||
value={o.val}
|
||||
placeholder={intl.formatMessage(intlMessages.customPlaceholder)}
|
||||
data-test="pollOptionItem"
|
||||
className={styles.pollOption}
|
||||
onChange={(e) => this.handleInputChange(e, i)}
|
||||
maxLength={MAX_INPUT_CHARS}
|
||||
/>
|
||||
{i > 1
|
||||
? (
|
||||
<>
|
||||
<Button
|
||||
className={styles.deleteBtn}
|
||||
<Styled.DeletePollOptionButton
|
||||
label={intl.formatMessage(intlMessages.delete)}
|
||||
aria-describedby={`option-${i}`}
|
||||
icon="delete"
|
||||
@ -422,9 +417,9 @@ class Poll extends Component {
|
||||
: <div style={{ width: '40px', flex: 'none' }} />}
|
||||
</div>
|
||||
{!hasVal && type !== pollTypes.Response && error ? (
|
||||
<div className={styles.inputError}>{error}</div>
|
||||
<Styled.InputError>{error}</Styled.InputError>
|
||||
) : (
|
||||
<div className={styles.errorSpacer}> </div>
|
||||
<Styled.ErrorSpacer> </Styled.ErrorSpacer>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
@ -444,9 +439,9 @@ class Poll extends Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.instructions}>
|
||||
<Styled.Instructions>
|
||||
{intl.formatMessage(intlMessages.activePollInstruction)}
|
||||
</div>
|
||||
</Styled.Instructions>
|
||||
<LiveResult
|
||||
{...{
|
||||
isMeteorConnected,
|
||||
@ -483,13 +478,9 @@ class Poll extends Component {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<textarea
|
||||
<Styled.PollQuestionArea
|
||||
hasError={hasQuestionError}
|
||||
data-test="pollQuestionArea"
|
||||
className={
|
||||
cx(styles.pollQuestion, {
|
||||
[styles.hasError]: hasQuestionError,
|
||||
})
|
||||
}
|
||||
value={question}
|
||||
onChange={(e) => this.handleTextareaChange(e)}
|
||||
rows="4"
|
||||
@ -499,15 +490,19 @@ class Poll extends Component {
|
||||
placeholder={intl.formatMessage(questionPlaceholder)}
|
||||
/>
|
||||
{hasQuestionError ? (
|
||||
<div className={styles.inputError}>{error}</div>
|
||||
<Styled.InputError>{error}</Styled.InputError>
|
||||
) : (
|
||||
<div className={styles.errorSpacer}> </div>
|
||||
<Styled.ErrorSpacer> </Styled.ErrorSpacer>
|
||||
)}
|
||||
</div>
|
||||
<div data-test="responseTypes">
|
||||
<h4 className={styles.sectionHeading}>{intl.formatMessage(intlMessages.responseTypesLabel)}</h4>
|
||||
<div className={styles.responseType}>
|
||||
<Button
|
||||
<Styled.SectionHeading>
|
||||
{intl.formatMessage(intlMessages.responseTypesLabel)}
|
||||
</Styled.SectionHeading>
|
||||
<Styled.ResponseType>
|
||||
<Styled.PollConfigButton
|
||||
selected={type === pollTypes.TrueFalse}
|
||||
small={!smallSidebar}
|
||||
label={intl.formatMessage(intlMessages.tf)}
|
||||
aria-describedby="poll-config-button"
|
||||
color="default"
|
||||
@ -520,14 +515,10 @@ class Poll extends Component {
|
||||
],
|
||||
});
|
||||
}}
|
||||
className={
|
||||
cx(styles.pBtn, {
|
||||
[styles.selectedTypeBtn]: type === pollTypes.TrueFalse,
|
||||
[styles.smallBtn]: !smallSidebar,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
<Styled.PollConfigButton
|
||||
selected={type === pollTypes.Letter}
|
||||
small={!smallSidebar}
|
||||
label={intl.formatMessage(intlMessages.a4)}
|
||||
aria-describedby="poll-config-button"
|
||||
color="default"
|
||||
@ -542,14 +533,11 @@ class Poll extends Component {
|
||||
],
|
||||
});
|
||||
}}
|
||||
className={
|
||||
cx(styles.pBtn, {
|
||||
[styles.selectedTypeBtn]: type === pollTypes.Letter,
|
||||
[styles.smallBtn]: !smallSidebar,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
<Styled.PollConfigButton
|
||||
selected={type === pollTypes.YesNoAbstention}
|
||||
small={false}
|
||||
full={true}
|
||||
label={intl.formatMessage(intlMessages.yna)}
|
||||
aria-describedby="poll-config-button"
|
||||
color="default"
|
||||
@ -563,35 +551,30 @@ class Poll extends Component {
|
||||
],
|
||||
});
|
||||
}}
|
||||
className={
|
||||
cx(styles.pBtn, styles.yna, {
|
||||
[styles.selectedTypeBtn]: type === pollTypes.YesNoAbstention,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
<Styled.PollConfigButton
|
||||
selected={type === pollTypes.Response}
|
||||
small={false}
|
||||
full={true}
|
||||
label={intl.formatMessage(intlMessages.userResponse)}
|
||||
aria-describedby="poll-config-button"
|
||||
color="default"
|
||||
onClick={() => { this.setState({ type: pollTypes.Response }); }}
|
||||
className={
|
||||
cx(styles.pBtn, styles.fullWidth, {
|
||||
[styles.selectedTypeBtn]: type === pollTypes.Response,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Styled.ResponseType>
|
||||
</div>
|
||||
{type
|
||||
&& (
|
||||
<div data-test="responseChoices">
|
||||
<h4 className={styles.sectionHeading}>{intl.formatMessage(intlMessages.responseChoices)}</h4>
|
||||
<Styled.SectionHeading>
|
||||
{intl.formatMessage(intlMessages.responseChoices)}
|
||||
</Styled.SectionHeading>
|
||||
{
|
||||
type === pollTypes.Response
|
||||
&& (
|
||||
<div className={styles.pollParagraph}>
|
||||
<Styled.PollParagraph>
|
||||
<span>{intl.formatMessage(intlMessages.typedResponseDesc)}</span>
|
||||
</div>
|
||||
</Styled.PollParagraph>
|
||||
)
|
||||
}
|
||||
{
|
||||
@ -606,22 +589,20 @@ class Poll extends Component {
|
||||
{defaultPoll
|
||||
&& (
|
||||
<div>
|
||||
<Checkbox
|
||||
<Styled.PollCheckbox
|
||||
onChange={this.toggleIsMultipleResponse}
|
||||
checked={isMultipleResponse}
|
||||
className={styles.checkbox}
|
||||
ariaLabelledBy="multipleResponseCheckboxLabel"
|
||||
/>
|
||||
<label id="multipleResponseCheckboxLabel" className={styles.instructions}>
|
||||
<Styled.InstructionsLabel id="multipleResponseCheckboxLabel">
|
||||
{intl.formatMessage(intlMessages.enableMultipleResponseLabel)}
|
||||
</label>
|
||||
</Styled.InstructionsLabel>
|
||||
</div>
|
||||
)}
|
||||
{defaultPoll && this.renderInputs()}
|
||||
{defaultPoll
|
||||
&& (
|
||||
<Button
|
||||
className={styles.addItemBtn}
|
||||
<Styled.AddItemButton
|
||||
data-test="addPollItem"
|
||||
label={intl.formatMessage(intlMessages.addOptionLabel)}
|
||||
aria-describedby="add-item-button"
|
||||
@ -631,15 +612,15 @@ class Poll extends Component {
|
||||
onClick={() => this.handleAddOption()}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.row}>
|
||||
<div className={styles.col} aria-hidden="true">
|
||||
<h4 className={styles.sectionHeading}>
|
||||
<Styled.Row>
|
||||
<Styled.Col aria-hidden="true">
|
||||
<Styled.SectionHeading>
|
||||
{intl.formatMessage(intlMessages.secretPollLabel)}
|
||||
</h4>
|
||||
</div>
|
||||
<div className={styles.col}>
|
||||
</Styled.SectionHeading>
|
||||
</Styled.Col>
|
||||
<Styled.Col>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||
<label className={styles.toggle}>
|
||||
<Styled.Toggle>
|
||||
{this.displayToggleStatus(secretPoll)}
|
||||
<Toggle
|
||||
icons={false}
|
||||
@ -648,17 +629,16 @@ class Poll extends Component {
|
||||
ariaLabel={intl.formatMessage(intlMessages.secretPollLabel)}
|
||||
showToggleLabel={false}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Styled.Toggle>
|
||||
</Styled.Col>
|
||||
</Styled.Row>
|
||||
{secretPoll
|
||||
&& (
|
||||
<div className={styles.pollParagraph}>
|
||||
<Styled.PollParagraph>
|
||||
{ intl.formatMessage(intlMessages.isSecretPollLabel) }
|
||||
</div>
|
||||
</Styled.PollParagraph>
|
||||
)}
|
||||
<Button
|
||||
className={styles.startPollBtn}
|
||||
<Styled.StartPollBtn
|
||||
data-test="startPoll"
|
||||
label={intl.formatMessage(intlMessages.startPollLabel)}
|
||||
color="primary"
|
||||
@ -722,15 +702,16 @@ class Poll extends Component {
|
||||
renderNoSlidePanel() {
|
||||
const { intl } = this.props;
|
||||
return (
|
||||
<div className={styles.noSlidePanelContainer}>
|
||||
<h4 className={styles.sectionHeading}>{intl.formatMessage(intlMessages.noPresentationSelected)}</h4>
|
||||
<Button
|
||||
<Styled.NoSlidePanelContainer>
|
||||
<Styled.SectionHeading>
|
||||
{intl.formatMessage(intlMessages.noPresentationSelected)}
|
||||
</Styled.SectionHeading>
|
||||
<Styled.PollButton
|
||||
label={intl.formatMessage(intlMessages.clickHereToSelect)}
|
||||
color="primary"
|
||||
onClick={() => Session.set('showUploadPresentationView', true)}
|
||||
className={styles.pollBtn}
|
||||
/>
|
||||
</div>
|
||||
</Styled.NoSlidePanelContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -754,14 +735,14 @@ class Poll extends Component {
|
||||
const { intl } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.instructions}>
|
||||
<Styled.Instructions>
|
||||
{intl.formatMessage(intlMessages.dragDropPollInstruction)}
|
||||
</div>
|
||||
</Styled.Instructions>
|
||||
<DragAndDrop
|
||||
{...{ intl, MAX_INPUT_CHARS }}
|
||||
handlePollValuesText={(e) => this.handlePollValuesText(e)}
|
||||
>
|
||||
<div className={styles.dragAndDropPollContainer} />
|
||||
<Styled.DragAndDropPollContainer />
|
||||
</DragAndDrop>
|
||||
</div>
|
||||
);
|
||||
@ -777,15 +758,14 @@ class Poll extends Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<header className={styles.header}>
|
||||
<Button
|
||||
<Styled.Header>
|
||||
<Styled.PollHideButton
|
||||
ref={(node) => { this.hideBtn = node; }}
|
||||
data-test="hidePollDesc"
|
||||
tabIndex={0}
|
||||
label={intl.formatMessage(intlMessages.pollPaneTitle)}
|
||||
icon="left_arrow"
|
||||
aria-label={intl.formatMessage(intlMessages.hidePollDesc)}
|
||||
className={styles.hideBtn}
|
||||
onClick={() => {
|
||||
layoutContextDispatch({
|
||||
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
|
||||
@ -797,7 +777,7 @@ class Poll extends Component {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
<Styled.PollCloseButton
|
||||
label={intl.formatMessage(intlMessages.closeLabel)}
|
||||
aria-label={`${intl.formatMessage(intlMessages.closeLabel)} ${intl.formatMessage(intlMessages.pollPaneTitle)}`}
|
||||
onClick={() => {
|
||||
@ -813,12 +793,11 @@ class Poll extends Component {
|
||||
Session.set('forcePollOpen', false);
|
||||
Session.set('pollInitiated', false);
|
||||
}}
|
||||
className={styles.closeBtn}
|
||||
icon="close"
|
||||
size="sm"
|
||||
hideLabel
|
||||
/>
|
||||
</header>
|
||||
</Styled.Header>
|
||||
{this.renderPollPanel()}
|
||||
<span className="sr-only" id="poll-config-button">{intl.formatMessage(intlMessages.showRespDesc)}</span>
|
||||
<span className="sr-only" id="add-item-button">{intl.formatMessage(intlMessages.addRespDesc)}</span>
|
||||
|
||||
403
bigbluebutton-html5/imports/ui/components/poll/styles.js
Normal file
403
bigbluebutton-html5/imports/ui/components/poll/styles.js
Normal file
@ -0,0 +1,403 @@
|
||||
import styled from 'styled-components';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import Checkbox from '/imports/ui/components/checkbox/component';
|
||||
import {
|
||||
smPaddingX,
|
||||
smPaddingY,
|
||||
lgPaddingX,
|
||||
borderRadius,
|
||||
mdPaddingY,
|
||||
borderSize,
|
||||
borderSizeLarge,
|
||||
pollInputHeight,
|
||||
pollSmMargin,
|
||||
pollMdMargin,
|
||||
pollHeaderOffset,
|
||||
} from '/imports/ui/stylesheets/styled-components/general';
|
||||
import {
|
||||
colorText,
|
||||
colorBlueLight,
|
||||
colorGray,
|
||||
colorGrayLight,
|
||||
colorGrayLighter,
|
||||
colorGrayLightest,
|
||||
colorDanger,
|
||||
colorHeading,
|
||||
colorPrimary,
|
||||
colorGrayDark,
|
||||
colorWhite,
|
||||
pollBlue,
|
||||
} from '/imports/ui/stylesheets/styled-components/palette';
|
||||
import { fontSizeBase, fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
|
||||
|
||||
const ToggleLabel = styled.span`
|
||||
margin-right: ${smPaddingX};
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 ${smPaddingX};
|
||||
}
|
||||
`;
|
||||
|
||||
const PollOptionInput = styled.input`
|
||||
margin-right: 1rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-radius: ${borderSize};
|
||||
box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
color: ${colorText};
|
||||
-webkit-appearance: none;
|
||||
padding: calc(${smPaddingY} * 2) ${smPaddingX};
|
||||
border-radius: ${borderRadius};
|
||||
font-size: ${fontSizeBase};
|
||||
border: 1px solid ${colorGrayLighter};
|
||||
box-shadow: 0 0 0 1px ${colorGrayLighter};
|
||||
`;
|
||||
|
||||
const DeletePollOptionButton = styled(Button)`
|
||||
font-size: ${fontSizeBase};
|
||||
flex: none;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
& > i {
|
||||
font-size: 150%;
|
||||
}
|
||||
`;
|
||||
|
||||
const ErrorSpacer = styled.div`
|
||||
position: relative;
|
||||
height: 1.25rem;
|
||||
`;
|
||||
|
||||
const InputError = styled(ErrorSpacer)`
|
||||
color: ${colorDanger};
|
||||
font-size: ${fontSizeSmall};
|
||||
`;
|
||||
|
||||
const Instructions = styled.div`
|
||||
margin-bottom: ${lgPaddingX};
|
||||
color: ${colorText};
|
||||
`;
|
||||
|
||||
const PollQuestionArea = styled.textarea`
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-radius: ${borderSize};
|
||||
box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
color: ${colorText};
|
||||
-webkit-appearance: none;
|
||||
padding: calc(${smPaddingY} * 2) ${smPaddingX};
|
||||
border-radius: ${borderRadius};
|
||||
font-size: ${fontSizeBase};
|
||||
border: 1px solid ${colorGrayLighter};
|
||||
box-shadow: 0 0 0 1px ${colorGrayLighter};
|
||||
|
||||
${({ hasError }) => hasError && `
|
||||
border-color: ${colorDanger};
|
||||
box-shadow: 0 0 0 1px ${colorDanger};
|
||||
`}
|
||||
`;
|
||||
|
||||
const SectionHeading = styled.h4`
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: ${colorHeading};
|
||||
`;
|
||||
|
||||
const ResponseType = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
overflow-wrap: break-word;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: ${lgPaddingX};
|
||||
|
||||
& > button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const PollConfigButton = styled(Button)`
|
||||
border: solid ${colorGrayLight} 1px;
|
||||
min-height: ${pollInputHeight};
|
||||
font-size: ${fontSizeBase};
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
& > span {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
${({ selected }) => selected && `
|
||||
background-color: ${colorGrayLightest};
|
||||
font-size: ${fontSizeBase};
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: ${colorGrayLightest} !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
`}
|
||||
|
||||
${({ small }) => small && `
|
||||
width: 49% !important;
|
||||
`}
|
||||
|
||||
${({ full }) => full && `
|
||||
width: 100%;
|
||||
`}
|
||||
`;
|
||||
|
||||
const PollParagraph = styled.div`
|
||||
color: ${colorText};
|
||||
`;
|
||||
|
||||
const PollCheckbox = styled(Checkbox)`
|
||||
display: inline-block;
|
||||
margin-right: ${pollSmMargin};
|
||||
margin-bottom: ${pollMdMargin};
|
||||
`;
|
||||
|
||||
const InstructionsLabel = styled.label`
|
||||
margin-bottom: ${lgPaddingX};
|
||||
color: ${colorText};
|
||||
`;
|
||||
|
||||
const AddItemButton = styled(Button)`
|
||||
top: 1px;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: ${colorPrimary};
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: ${fontSizeBase};
|
||||
white-space: pre-wrap;
|
||||
|
||||
&:hover {
|
||||
& > span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.7rem;
|
||||
`;
|
||||
|
||||
const Col = styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
flex-grow: 1;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
padding-left: 1rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 0.1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Toggle = styled.label`
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StartPollBtn = styled(Button)`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: ${pollInputHeight};
|
||||
margin-top: 1rem;
|
||||
font-size: ${fontSizeBase};
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&:hover {
|
||||
& > span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const NoSlidePanelContainer = styled.div`
|
||||
color: ${colorGrayDark};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const PollButton = styled(Button)`
|
||||
margin-top: ${smPaddingY};
|
||||
margin-bottom: ${smPaddingY};
|
||||
background-color: ${colorWhite};
|
||||
box-shadow: 0 0 0 1px ${colorGray};
|
||||
color: ${colorGray};
|
||||
|
||||
& > span {
|
||||
color: ${colorGray};
|
||||
}
|
||||
|
||||
& > span:hover {
|
||||
color: ${pollBlue};
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: ${colorWhite};
|
||||
box-shadow: 0 0 0 1px ${pollBlue};
|
||||
|
||||
& > span {
|
||||
color: ${pollBlue};
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: ${colorWhite};
|
||||
box-shadow: 0 0 0 1px ${pollBlue};
|
||||
|
||||
& > span {
|
||||
color: ${pollBlue};
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-right: inherit;
|
||||
margin-left: ${smPaddingY};
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: ${smPaddingY};
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 1rem;
|
||||
margin-left: inherit;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: inherit;
|
||||
margin-left: ${smPaddingY};
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px ${pollBlue};
|
||||
background-color: ${colorWhite};
|
||||
color: ${pollBlue};
|
||||
|
||||
& > span {
|
||||
color: ${pollBlue};
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const DragAndDropPollContainer = styled.div`
|
||||
width: 200px !important;
|
||||
height: 200px !important;
|
||||
`;
|
||||
|
||||
const Header = styled.header`
|
||||
position: relative;
|
||||
top: ${pollHeaderOffset};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${mdPaddingY};
|
||||
`;
|
||||
|
||||
const PollHideButton = styled(Button)`
|
||||
position: relative;
|
||||
background-color: ${colorWhite};
|
||||
display: block;
|
||||
margin: ${borderSizeLarge};
|
||||
margin-bottom: ${borderSize};
|
||||
padding-left: 0;
|
||||
padding-right: inherit;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-left: inherit;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
color: ${colorGrayDark};
|
||||
font-size: smaller;
|
||||
|
||||
[dir="rtl"] & {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-moz-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${colorWhite};
|
||||
}
|
||||
`;
|
||||
|
||||
const PollCloseButton = styled(Button)`
|
||||
font-size: ${fontSizeBase};
|
||||
position: relative;
|
||||
& > i {
|
||||
color: ${colorText};
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
ToggleLabel,
|
||||
PollOptionInput,
|
||||
DeletePollOptionButton,
|
||||
ErrorSpacer,
|
||||
InputError,
|
||||
Instructions,
|
||||
PollQuestionArea,
|
||||
SectionHeading,
|
||||
ResponseType,
|
||||
PollConfigButton,
|
||||
PollParagraph,
|
||||
PollCheckbox,
|
||||
InstructionsLabel,
|
||||
AddItemButton,
|
||||
Row,
|
||||
Col,
|
||||
Toggle,
|
||||
StartPollBtn,
|
||||
NoSlidePanelContainer,
|
||||
PollButton,
|
||||
DragAndDropPollContainer,
|
||||
Header,
|
||||
PollHideButton,
|
||||
PollCloseButton,
|
||||
};
|
||||
@ -1,441 +0,0 @@
|
||||
@import "/imports/ui/stylesheets/mixins/focus";
|
||||
@import "/imports/ui/stylesheets/mixins/_indicators";
|
||||
@import "/imports/ui/stylesheets/variables/placeholders";
|
||||
|
||||
:root {
|
||||
--poll-column-amount: 2;
|
||||
--poll-blue: #1A73D4;
|
||||
--poll-header-offset: -0.875rem;
|
||||
--poll-addItem-width: 100%;
|
||||
--poll-input-height: 2.5rem;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
font-size: var(--font-size-base);
|
||||
position: relative;
|
||||
> i {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: var(--sm-padding-y);
|
||||
margin-bottom: var(--sm-padding-y);
|
||||
}
|
||||
|
||||
.hideBtn {
|
||||
position: relative;
|
||||
background-color: var(--color-white);
|
||||
display: block;
|
||||
margin: var(--border-size-large);
|
||||
margin-bottom: var(--border-size);
|
||||
padding-left: 0;
|
||||
padding-right: inherit;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-left: inherit;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
color: var(--color-gray-dark);
|
||||
font-size: smaller;
|
||||
|
||||
[dir="rtl"] & {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-moz-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
.customInputWrapper {
|
||||
width: 100%;
|
||||
margin-top: var(--md-padding-y);
|
||||
|
||||
> Button {
|
||||
width: 100%;
|
||||
margin-top: var(--sm-padding-y);
|
||||
margin-bottom: var(--sm-padding-y);
|
||||
}
|
||||
}
|
||||
|
||||
.pollInput {
|
||||
> input {
|
||||
width: 100%;
|
||||
margin-top: var(--sm-padding-y);
|
||||
margin-bottom: var(--sm-padding-y);
|
||||
}
|
||||
|
||||
> input::placeholder {
|
||||
color: var(--color-text);
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
top: var(--poll-header-offset);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--md-padding-y);
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-bottom: var(--lg-padding-x);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.pollBtn:nth-child(even) {
|
||||
margin-right: inherit;
|
||||
margin-left: var(--sm-padding-y);
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: var(--sm-padding-y);
|
||||
margin-left: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.pollBtn:nth-child(odd) {
|
||||
margin-right: 1rem;
|
||||
margin-left: inherit;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: inherit;
|
||||
margin-left: var(--sm-padding-y);
|
||||
}
|
||||
}
|
||||
|
||||
.pollBtn:hover {
|
||||
box-shadow: 0 0 0 1px var(--poll-blue);
|
||||
background-color: var(--color-white);
|
||||
color: var(--poll-blue);
|
||||
|
||||
> span {
|
||||
color: var(--poll-blue);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pollBtn {
|
||||
margin-top: var(--sm-padding-y);
|
||||
margin-bottom: var(--sm-padding-y);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: 0 0 0 1px var(--color-gray);
|
||||
color: var(--color-gray);
|
||||
|
||||
> span {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
> span:hover {
|
||||
color: var(--poll-blue);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pollBtn:active {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--poll-blue);
|
||||
}
|
||||
|
||||
background-color: var(--color-white);
|
||||
box-shadow: 0 0 0 1px var(--poll-blue);
|
||||
|
||||
> span {
|
||||
color: var(--poll-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.pollBtn:focus {
|
||||
background-color: var(--color-white);
|
||||
box-shadow: 0 0 0 1px var(--poll-blue);
|
||||
|
||||
> span {
|
||||
color: var(--poll-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.inputError {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.inputError,
|
||||
.errorSpacer {
|
||||
position: relative;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
@include inputFocus(var(--color-blue-light));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@extend %highContrastOutline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-style: solid !important;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
font-size: var(--font-size-small);
|
||||
border: 1px solid var(--color-gray-lighter);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.noSlidePanelContainer {
|
||||
color: var(--color-gray-drak);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
margin-right: var(--poll-sm-margin);
|
||||
margin-bottom: var(--poll-md-margin);
|
||||
}
|
||||
|
||||
|
||||
.responseType {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
overflow-wrap: break-word;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(--lg-padding-x);
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pollQuestion {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.pollOption {
|
||||
margin-right: 1rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pollQuestion,
|
||||
.pollOption {
|
||||
@include inputFocus(var(--color-blue-light));
|
||||
|
||||
width: 100%;
|
||||
color: var(--color-text);
|
||||
-webkit-appearance: none;
|
||||
padding: calc(var(--sm-padding-y) * 2) calc(var(--sm-padding-x) * 1);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-gray-lighter);
|
||||
box-shadow: 0 0 0 1px var(--color-gray-lighter);
|
||||
}
|
||||
|
||||
.hasError {
|
||||
border-color: var(--color-danger);
|
||||
box-shadow: 0 0 0 1px var(--color-danger);
|
||||
}
|
||||
|
||||
.exampleTitle {
|
||||
background-color: var(--color-gray-lightest);
|
||||
height: var(--sm-padding-x);
|
||||
border-radius: var(--border-radius);
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.exampleResponse {
|
||||
border: var(--color-gray-light) solid 1px;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
|
||||
.responseInput {
|
||||
border: var(--color-gray-light) solid 1px;
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: 1rem;
|
||||
height: var(--poll-input-height);
|
||||
padding-top: var(--sm-padding-x);
|
||||
padding-left: var(--sm-padding-x);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.rInput {
|
||||
background-color: var(--color-gray-lightest);
|
||||
height: var(--lg-padding-y);
|
||||
border-radius: var(--border-radius);
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.addItemBtn {
|
||||
top: 1px;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--poll-addItem-width);
|
||||
text-align: left;
|
||||
color: var(--color-primary);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: var(--font-size-base);
|
||||
white-space: pre-wrap;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.startPollBtn {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: var(--poll-input-height);
|
||||
margin-top: 1rem;
|
||||
font-size: var(--font-size-base);
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pBtn {
|
||||
border: solid var(--color-gray-light) 1px;
|
||||
min-height: var(--poll-input-height);
|
||||
font-size: var(--font-size-base);
|
||||
white-space: pre-wrap;
|
||||
span {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deleteBtn {
|
||||
font-size: var(--font-size-base);
|
||||
flex: none;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
i {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.pBtn {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.smallBtn {
|
||||
width: 49% !important;
|
||||
}
|
||||
|
||||
.selectedBtnBlue {
|
||||
background-color: var(--poll-blue);
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--poll-blue) !important;
|
||||
box-shadow: none !important;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.selectedTypeBtn {
|
||||
background-color: var(--color-gray-lightest);
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--color-gray-lightest) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dragAndDropPollContainer {
|
||||
width: 200px !important;
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
flex-grow: 1;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
padding-left: 1rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 0.1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggleLabel {
|
||||
margin-right: var(--sm-padding-x);
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 0 0 var(--sm-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.sectionHeading {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.pollParagraph {
|
||||
color: var(--color-text);
|
||||
}
|
||||
@ -44,7 +44,9 @@ const toolbarMargin = '.8rem';
|
||||
|
||||
const pollStatsElementWidth = '17%';
|
||||
const pollSmMargin = '0.3125rem';
|
||||
const pollMdMargin = '0.7rem';
|
||||
const pollResultWidth = '15rem';
|
||||
const pollInputHeight = '2.5rem';
|
||||
|
||||
export {
|
||||
borderSizeSmall,
|
||||
@ -89,5 +91,7 @@ export {
|
||||
toolbarMargin,
|
||||
pollStatsElementWidth,
|
||||
pollSmMargin,
|
||||
pollMdMargin,
|
||||
pollResultWidth,
|
||||
pollInputHeight,
|
||||
};
|
||||
|
||||
@ -52,7 +52,8 @@ const toolbarButtonBg = btnDefaultBg;
|
||||
const toolbarListBg = '#DDD';
|
||||
const toolbarListBgFocus = '#C6C6C6';
|
||||
|
||||
const pollStatsBorderColor = '#d4d9df';
|
||||
const pollStatsBorderColor = '#D4D9DF';
|
||||
const pollBlue = '#1A73D4';
|
||||
|
||||
export {
|
||||
colorWhite,
|
||||
@ -97,4 +98,5 @@ export {
|
||||
toolbarListBg,
|
||||
toolbarListBgFocus,
|
||||
pollStatsBorderColor,
|
||||
pollBlue,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user