BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

convert poll dragAndDrop component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-04 11:30:49 +00:00
parent c3bdbcc7b0
commit 2c40de2474
3 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
bigbluebutton-html5/imports/ui/components/poll/dragAndDrop/component.jsx
View File

@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
import { withModalMounter } from '/imports/ui/components/modal/service'; import { withModalMounter } from '/imports/ui/components/modal/service';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { styles } from './styles.scss'; import Styled from './styles';
import Button from '/imports/ui/components/button/component';
// src: https://medium.com/@650egor/simple-drag-and-drop-file-upload-in-react-2cb409d88929 // src: https://medium.com/@650egor/simple-drag-and-drop-file-upload-in-react-2cb409d88929
@ -110,25 +109,20 @@ class DragAndDrop extends Component {
const { intl, children } = this.props; const { intl, children } = this.props;
const { pollValueText, drag } = this.state; const { pollValueText, drag } = this.state;
return ( return (
<div <Styled.DndContainer ref={this.dropRef}>
className={styles.dndContainer} <Styled.DndTextArea
ref={this.dropRef} active={drag}
>
<textarea
value={pollValueText} value={pollValueText}
className={drag ? styles.dndActive : styles.dndInActive}
onChange={e => this.handleTextInput(e)} onChange={e => this.handleTextInput(e)}
/> />
<Button <Styled.DndButton
onClick={() => this.setPollValues()} onClick={() => this.setPollValues()}
label={intl.formatMessage(intlMessages.customPollTextArea)} label={intl.formatMessage(intlMessages.customPollTextArea)}
color="primary" color="primary"
disabled={pollValueText < 1} disabled={pollValueText < 1}
className={styles.btn}
/> />
{children} {children}
</div> </Styled.DndContainer>
); );
} }
} export default withModalMounter(injectIntl(DragAndDrop)); } export default withModalMounter(injectIntl(DragAndDrop));

32
bigbluebutton-html5/imports/ui/components/poll/dragAndDrop/styles.js Normal file
View File

@ -0,0 +1,32 @@
import styled from 'styled-components';
import Button from '/imports/ui/components/button/component';
import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
const DndContainer = styled.div`
height: 200px;
`;
const DndTextArea = styled.textarea`
width: 100%;
height: 100%;
resize: none;
font-size: ${fontSizeSmall};
${({ active }) => active && `
background: grey;
`}
${({ active }) => !active && `
background: white;
`}
`;
const DndButton = styled(Button)`
width: 100%;
`;
export default {
DndContainer,
DndTextArea,
DndButton,
};

26
bigbluebutton-html5/imports/ui/components/poll/dragAndDrop/styles.scss
View File

@ -1,26 +0,0 @@
@import "/imports/ui/stylesheets/variables/_all";
.dndContainer {
height: 200px;
}
.customPollValuesTextfield {
width: 100%;
height: 100%;
resize: none;
font-size: var(--font-size-small);
}
.dndActive {
@extend .customPollValuesTextfield;
background: grey;
}
.dndInActive {
@extend .customPollValuesTextfield;
background: white;
}
.btn {
width: 100%;
}