From 808b4148ce8d57943c5de9ecc2f0459bec726b73 Mon Sep 17 00:00:00 2001 From: "K.E Farfar" Date: Fri, 21 Jun 2019 16:50:36 +0200 Subject: [PATCH 1/5] Move scss styles of Contributions.module into styled components --- src/assets/scss/ThemeVariables.scss | 6 +- .../AddPaper/Contributions/Contribution.js | 8 +- .../AddPaper/Contributions/Contributions.js | 20 +- .../Contributions/Contributions.module.scss | 208 ---------------- .../Contributions/ResearchProblemInput.js | 14 +- .../AddPaper/Contributions/styled.js | 231 ++++++++++++++++++ .../StatementBrowser/AddStatement.js | 18 +- .../StatementBrowser/DeleteStatement.js | 3 +- .../StatementBrowser/StatementItem.js | 29 ++- src/components/StatementBrowser/Statements.js | 16 +- .../StatementBrowser/Value/AddValue.js | 22 +- .../StatementBrowser/Value/ValueItem.js | 11 +- src/components/ViewPaper/Contributions.js | 14 +- 13 files changed, 311 insertions(+), 289 deletions(-) delete mode 100644 src/components/AddPaper/Contributions/Contributions.module.scss create mode 100644 src/components/AddPaper/Contributions/styled.js diff --git a/src/assets/scss/ThemeVariables.scss b/src/assets/scss/ThemeVariables.scss index c46a10324..6e35b48d6 100644 --- a/src/assets/scss/ThemeVariables.scss +++ b/src/assets/scss/ThemeVariables.scss @@ -54,4 +54,8 @@ $modal-content-border-width: 3px; $badge-font-size:85%; $badge-font-weight: 500; $badge-padding-y: 0.3rem; -$badge-padding-x: 0.8rem; \ No newline at end of file +$badge-padding-x: 0.8rem; + +// Bootstrap Vars +$list-group-border-color:rgba(0, 0, 0, 0.125); + diff --git a/src/components/AddPaper/Contributions/Contribution.js b/src/components/AddPaper/Contributions/Contribution.js index 64de26bd1..29c3565bc 100644 --- a/src/components/AddPaper/Contributions/Contribution.js +++ b/src/components/AddPaper/Contributions/Contribution.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { Form, FormGroup, Label } from 'reactstrap'; import Tooltip from '../../Utils/Tooltip'; import ResearchProblemInput from './ResearchProblemInput'; -import styles from './Contributions.module.scss'; +import { StyledContribution } from './styled'; import StatementBrowser from '../../StatementBrowser/Statements'; import { connect } from 'react-redux'; import { updateResearchProblems } from '../../../actions/addPaper'; @@ -19,7 +19,7 @@ class Contribution extends Component { render() { return ( -
+
-
-
+ ); } } diff --git a/src/components/AddPaper/Contributions/Contributions.js b/src/components/AddPaper/Contributions/Contributions.js index ac88513d5..18147018a 100644 --- a/src/components/AddPaper/Contributions/Contributions.js +++ b/src/components/AddPaper/Contributions/Contributions.js @@ -3,12 +3,11 @@ import { Container, Row, Col, Button } from 'reactstrap'; import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome'; import { faTrash, faPen } from '@fortawesome/free-solid-svg-icons'; import Tooltip from '../../Utils/Tooltip'; -import styles from './Contributions.module.scss'; +import { StyledContributionsList, StyledContentEditable} from './styled'; import { connect } from 'react-redux'; import { nextStep, previousStep, createContribution, deleteContribution, selectContribution, updateContributionLabel, saveAddPaper } from '../../../actions/addPaper'; import Confirm from 'reactstrap-confirm'; import Contribution from './Contribution'; -import ContentEditable from 'react-contenteditable' import { CSSTransitionGroup } from 'react-transition-group' import styled from 'styled-components'; import PropTypes from 'prop-types'; @@ -117,21 +116,20 @@ class Contributions extends Component { -
    + {this.props.contributions.allIds.map((contribution, index) => { let contributionId = this.props.contributions.byId[contribution]['id']; return ( -
  • - this.handleSelectContribution(contributionId)}> +
  • + this.handleSelectContribution(contributionId)}> {/* TODO: add the contenteditable into a seperate component */} - { this.inputRefs[contribution] = input; }} html={this.props.contributions.byId[contribution]['label']} disabled={!this.state.editing[contribution]} onChange={(e) => this.handleChange(contributionId, e)} tagName="span" - className={styles.contributionEditableLabel} onPaste={this.pasteAsPlainText} onKeyDown={e => e.keyCode === 13 && e.target.blur()} // Disable multiline Input onBlur={(e) => this.toggleEditLabelContribution(contributionId)} @@ -140,13 +138,13 @@ class Contributions extends Component { {!this.state.editing[contribution] && ( <> {this.props.contributions.allIds.length !== 1 && ( - + this.toggleDeleteContribution(contributionId)} /> )} - + this.toggleEditLabelContribution(contributionId, e)} /> @@ -158,10 +156,10 @@ class Contributions extends Component { ) })} -
  • +
  • + Add another contribution
    • -
+ li { - padding: 9px 10px 9px 15px; - margin-bottom: 5px; - transition: 0.3s background; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; - - > span { - cursor: pointer; - } - &.activeContribution { - background: $ORKG-primary-color; - color: #fff; - cursor: initial !important; - } - &.activeContribution a{ - color: #fff; - } - .deleteContribution { - cursor: pointer; - color:#fff; - } - .selectContribution { - cursor:pointer; - - &:hover { - text-decoration: underline; - } - } - &.addContribution span:hover { - text-decoration: underline; - } - } -} -.contribution { - border-radius: $border-radius; - border-width: $border-width; - border-color: $ORKG-primary-color; - border-style: solid; - padding: 15px 30px; -} - -.listGroupOpen { - border-left-width: $border-width; - border-right-width: $border-width; - border-left-style: solid; - border-right-style: solid; - border-left-color: #DFDFDF; //don't use default color, since it is partially transparent $list-group-border-color;$list-group-border-color; - border-right-color: #DFDFDF; //don't use default color, since it is partially transparent $list-group-border-color; $list-group-border-color; - padding: 10px 20px; -} - -.listGroupOpenBorderBottom { - border-bottom-width: $border-width; - border-bottom-style: solid; - border-bottom-color: #DFDFDF; //don't use default color, since it is partially transparent $list-group-border-color;$list-group-border-color; -} - -.statementItem { - padding: 0.5rem 0.75rem !important; //overwrite bootstrap - cursor: pointer; - background-color: $ultra-light-blue !important; - border-color: $ultra-light-blue-darker!important; - - > .statementItemIcon { - font-size: 18px; - margin-top: 3px; - color: $ORKG-primary-color; - - &.open { - color: #fff; - } - } - - > .deletePredicate { - font-size: 90%; - display: none; - - &:hover { - text-decoration: underline; - } - } - - &.statementActive { - background-color: $darkblue !important; - border-color: $darkblue !important; - - .deletePredicate { - display: inline-block !important; - } - } - - &.statementItemInput { - cursor: default; - } -} - -.valueItem { - padding: 8px 0px !important; - - .objectLink { - text-decoration: underline; - cursor: pointer; - } - .deleteValue { - font-size: 90%; - //display: none; - cursor: pointer; - color: $ORKG-primary-color; - display: none; - - &:hover { - text-decoration: underline; - } - } - &:hover { - .deleteValue { - display: inline-block; - } - } - .valueTypeDropdown { - font-size: 95%; - padding: 0 15px; - min-width: 95px; - } - .valueActionButton { - padding: 0 15px; - font-size: 95%; - border-color: $list-group-border-color; - } -} - -.addStatement { - input[type="text"] { - background: #fff !important; - } - .addStatementActionButton { - padding: 0 15px; - font-size: 95%; - border-color: $list-group-border-color; - } -} -.dropdownItem { - outline: 0; - svg { - display: none; - color: #989898 !important; - } - &:hover svg { - display: inline-block; - } -} -.levelBox { - border-color: #DFDFDF; //don't use default color, since it is partially transparent $list-group-border-color; - border-radius: $border-radius; - padding-left: 8px; - border-style: solid; - border-width: 2px; - //box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.06); - margin-top: -2px; - margin-right: -2px; - margin-bottom: -2px; - - .listGroupEnlarge { - margin-top: -2px; - margin-right: -2px; - margin-bottom: -2px; - } -} - -// this class for overwriting default bootstrap .form-control -.researchFieldsInput { - padding-top: 0 !important; - padding-bottom: 0 !important; - height: auto !important; - min-height: calc(2.25rem + 4px); - cursor: text; - padding: 0 !important; -} -.researchFieldsInput input { - border: 0; - background: transparent; - max-width: 100%; - outline: 0; - margin: 5px 2px; -} -.researchFieldBrowser { - margin: 5px auto; - height: auto !important; - cursor: text; -} - -.contributionEditableLabel:focus { - background: #fff; - color: $ORKG-primary-color; - outline: 0; - border: dotted 2px $list-group-border-color; - padding: 0 4px; - display: block; - } \ No newline at end of file diff --git a/src/components/AddPaper/Contributions/ResearchProblemInput.js b/src/components/AddPaper/Contributions/ResearchProblemInput.js index 98bd1f222..1d7d37a90 100644 --- a/src/components/AddPaper/Contributions/ResearchProblemInput.js +++ b/src/components/AddPaper/Contributions/ResearchProblemInput.js @@ -1,5 +1,5 @@ import React, { Component, Fragment } from 'react'; -import styles from './Contributions.module.scss'; +import { StyledResearchFieldsInputFormControl, StyledResearchFieldBrowser } from './styled'; import PropTypes from 'prop-types'; import CreatableSelect from 'react-select/creatable'; import { components } from 'react-select'; @@ -72,7 +72,7 @@ class ResearchProblemInput extends Component { }), menu: (provided) => ({ ...provided, - zIndex:10 + zIndex: 10 }) } @@ -99,7 +99,7 @@ class ResearchProblemInput extends Component { return ( <> -
+ this.props.value.includes(id))} value={this.props.value} @@ -116,14 +116,14 @@ class ResearchProblemInput extends Component { options={this.state.researchProblems} openMenuOnClick={false} /> -
+ {this.state.problemBrowser && ( -
- + + <>Problem browser :
<>ID {this.state.problemBrowser.id}
<>Label {this.state.problemBrowser.label} -
)} + )} ); } diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js new file mode 100644 index 000000000..89443d4ed --- /dev/null +++ b/src/components/AddPaper/Contributions/styled.js @@ -0,0 +1,231 @@ +import styled from 'styled-components'; +import ContentEditable from 'react-contenteditable' +import { ListGroupItem, InputGroup, DropdownItem } from 'reactstrap'; + +/*contribution*/ +export const StyledContribution = styled.div` + border-radius: ${props => props.theme.borderRadius}; + border-width: ${props => props.theme.borderWidth}; + border-color: ${props => props.theme.orkgPrimaryColor}; + border-style: solid; + padding: 15px 30px; +`; + +/*contributionsList*/ +export const StyledContributionsList = styled.ul` + list-style: none; + padding: 0; + padding-top: 15px; + + > li { + padding: 9px 10px 9px 15px; + margin-bottom: 5px; + transition: 0.3s background; + border-top-left-radius: ${props => props.theme.borderRadius}; + border-bottom-left-radius: ${props => props.theme.borderRadius}; + + > span { + cursor: pointer; + } + &.activeContribution { + background: ${props => props.theme.orkgPrimaryColor}; + color: #fff; + cursor: initial !important; + } + &.activeContribution a{ + color: #fff; + } + .deleteContribution { + cursor: pointer; + color:#fff; + } + .selectContribution { + cursor:pointer; + + &:hover { + text-decoration: underline; + } + } + &.addContribution span:hover { + text-decoration: underline; + } + } +`; + +/*contributionsList*/ +export const StyledContentEditable = styled(ContentEditable)` + &:focus { + background: #fff; + color: ${props => props.theme.orkgPrimaryColor}; + outline: 0; + border: dotted 2px ${props => props.theme.listGroupBorderColor}; + padding: 0 4px; + display: block; + } +`; + +/*researchFieldsInput*/ +export const StyledResearchFieldsInputFormControl = styled.div.attrs(props => ({ + className: 'form-control', +}))` + padding-top: 0 !important; + padding-bottom: 0 !important; + height: auto !important; + min-height: calc(2.25rem + 4px); + cursor: text; + padding: 0 !important; + + & input { + border: 0; + background: transparent; + max-width: 100%; + outline: 0; + margin: 5px 2px; + } +`; + +/*researchFieldBrowser*/ +export const StyledResearchFieldBrowser = styled.div.attrs(props => ({ + className: 'form-control', +}))` + margin: 5px auto; + height: auto !important; + cursor: text; +`; + +/*statementItem*/ +export const StyledStatementItem = styled(ListGroupItem).attrs(props => ({ + className: props.className || '', +}))` + padding: 0.5rem 0.75rem !important; + cursor: default; + background-color: ${props => props.theme.ultraLightBlue} !important; + border-color: ${props => props.theme.ultraLightBlueDarker} !important; + + & > .statementItemIcon { + font-size: 18px; + margin-top: 3px; + color: ${props => props.theme.orkgPrimaryColor}; + + &.open { + color: #fff; + } + } + + & > .deletePredicate { + font-size: 90%; + display: none; + + &:hover { + text-decoration: underline; + } + } + + &.statementActive { + background-color: ${props => props.theme.darkblue} !important; + border-color: ${props => props.theme.darkblue} !important; + + & .deletePredicate { + display: inline-block !important; + } + } +`; + +/*addStatement*/ +export const StyledAddStatement = styled(InputGroup)` + & input[type="text"] { + background: #fff !important; + } + & .addStatementActionButton { + padding: 0 15px; + font-size: 95%; + border-color: ${props => props.theme.listGroupBorderColor}; + } +`; + +/*listGroupOpen*/ +export const StyledListGroupOpen = styled.div.attrs(props => ({ + className: props.className || '', +}))` + border-left-width: ${props => props.theme.borderWidth}; + border-right-width: ${props => props.theme.borderWidth}; + border-left-style: solid; + border-right-style: solid; + border-left-color: #DFDFDF; /*don't use default color, since it is partially transparent $list-group-border-color;$list-group-border-color;*/ + border-right-color: #DFDFDF; /*don't use default color, since it is partially transparent $list-group-border-color; $list-group-border-color;*/ + padding: 10px 20px; + + &.listGroupOpenBorderBottom { + border-bottom-width: ${props => props.theme.borderWidth}; + border-bottom-style: solid; + border-bottom-color: #DFDFDF; /*don't use default color, since it is partially transparent $list-group-border-color;$list-group-border-color;*/ + } +`; + + +/*levelBox*/ +export const StyledLevelBox = styled.div` + border-color: #DFDFDF; /*don't use default color, since it is partially transparent $list-group-border-color;*/ + border-radius: ${props => props.theme.borderRadius}; + padding-left: 8px; + border-style: solid; + border-width: 2px; + //box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.06); + margin-top: -2px; + margin-right: -2px; + margin-bottom: -2px; + + .listGroupEnlarge { + margin-top: -2px; + margin-right: -2px; + margin-bottom: -2px; + } +`; + +/* valueItem */ +export const StyledValueItem = styled(ListGroupItem)` + padding: 8px 0px !important; + + & .objectLink { + text-decoration: underline; + cursor: pointer; + } + & .deleteValue { + font-size: 90%; + //display: none; + cursor: pointer; + color: ${props => props.theme.orkgPrimaryColor}; + display: none; + + &:hover { + text-decoration: underline; + } + } + &:hover { + & .deleteValue { + display: inline-block; + } + } + & .valueTypeDropdown { + font-size: 95%; + padding: 0 15px; + min-width: 95px; + } + & .valueActionButton { + padding: 0 15px; + font-size: 95%; + border-color: ${props => props.theme.listGroupBorderColor}; + } +`; + +/*dropdownItem*/ +export const StyledDropdownItem = styled(DropdownItem)` + outline: 0; + & svg { + display: none; + color: #989898 !important; + } + &:hover svg { + display: inline-block; + } +`; \ No newline at end of file diff --git a/src/components/StatementBrowser/AddStatement.js b/src/components/StatementBrowser/AddStatement.js index 8d6e0618a..1c6c28fb9 100644 --- a/src/components/StatementBrowser/AddStatement.js +++ b/src/components/StatementBrowser/AddStatement.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { predicatesUrl } from '../../network'; -import { InputGroup, InputGroupAddon, Button, ListGroupItem, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; -import styles from '../AddPaper/Contributions/Contributions.module.scss'; +import { InputGroupAddon, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; +import { StyledStatementItem, StyledAddStatement } from '../AddPaper/Contributions/styled'; import AutoComplete from './AutoComplete'; import { connect } from 'react-redux'; import { createProperty } from '../../actions/statementBrowser'; @@ -74,29 +74,29 @@ class AddStatement extends Component { render() { return ( <> - + {this.state.showAddStatement ? - - + { }} - disableBorderRadiusRight + disableBorderRadiusRight /> - + - + : + Add property } - + Are you sure you need a new property? diff --git a/src/components/StatementBrowser/DeleteStatement.js b/src/components/StatementBrowser/DeleteStatement.js index 059c54a86..0e61b3eaa 100644 --- a/src/components/StatementBrowser/DeleteStatement.js +++ b/src/components/StatementBrowser/DeleteStatement.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome'; import { faTrash } from '@fortawesome/free-solid-svg-icons'; import Tooltip from '../Utils/Tooltip'; -import styles from '../AddPaper/Contributions/Contributions.module.scss'; import { connect } from 'react-redux'; import { deleteProperty } from '../../actions/statementBrowser'; import Confirm from 'reactstrap-confirm'; @@ -28,7 +27,7 @@ class DeleteStatement extends Component { render() { return ( <> - + Delete diff --git a/src/components/StatementBrowser/StatementItem.js b/src/components/StatementBrowser/StatementItem.js index 419f7cfc0..eb4143d6b 100644 --- a/src/components/StatementBrowser/StatementItem.js +++ b/src/components/StatementBrowser/StatementItem.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import { ListGroup, ListGroupItem, Collapse } from 'reactstrap'; +import { ListGroup, Collapse } from 'reactstrap'; import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome'; import { faChevronCircleDown, faChevronCircleUp } from '@fortawesome/free-solid-svg-icons'; -import styles from '../AddPaper/Contributions/Contributions.module.scss'; +import { StyledStatementItem, StyledListGroupOpen } from '../AddPaper/Contributions/styled'; import classNames from 'classnames'; import ValueItem from './Value/ValueItem'; import AddValue from './Value/AddValue'; @@ -30,20 +30,19 @@ class StatementItem extends Component { const isCollapsed = this.props.selectedProperty === this.props.id; const listGroupClass = classNames({ - [styles.statementActive]: isCollapsed, - [styles.statementItem]: true, + 'statementActive': isCollapsed, + 'statementItem': true, 'rounded-bottom': this.props.isLastItem && !isCollapsed && !this.props.enableEdit, }); const chevronClass = classNames({ - [styles.statementItemIcon]: true, - [styles.open]: isCollapsed, + 'statementItemIcon': true, + 'open': isCollapsed, 'float-right': true, }); const openBoxClass = classNames({ - [styles.listGroupOpen]: true, - [styles.listGroupOpenBorderBottom]: this.props.isLastItem && !this.props.enableEdit, + 'listGroupOpenBorderBottom': this.props.isLastItem && !this.props.enableEdit, 'rounded-bottom': this.props.isLastItem && !this.props.enableEdit, }); @@ -51,9 +50,9 @@ class StatementItem extends Component { return ( <> - this.props.togglePropertyCollapse(this.props.id)} className={listGroupClass}> + this.props.togglePropertyCollapse(this.props.id)} className={listGroupClass}> {this.props.predicateLabel.charAt(0).toUpperCase() + this.props.predicateLabel.slice(1)} - + {valueIds.length === 1 && !isCollapsed ? <> : {' '} @@ -77,14 +76,14 @@ class StatementItem extends Component { {!this.props.isExistingProperty ? : ''} - + -
+ {valueIds.map((valueId, index) => { let value = this.props.values.byId[valueId]; - + return ( ) : ''} -
+ ); @@ -126,7 +125,7 @@ StatementItem.propTypes = { const mapStateToProps = state => { return { - selectedProperty: state.statementBrowser.selectedProperty, + selectedProperty: state.statementBrowser.selectedProperty, properties: state.statementBrowser.properties, values: state.statementBrowser.values, } diff --git a/src/components/StatementBrowser/Statements.js b/src/components/StatementBrowser/Statements.js index ea9970b18..9cebc10fe 100644 --- a/src/components/StatementBrowser/Statements.js +++ b/src/components/StatementBrowser/Statements.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import { ListGroup, ListGroupItem } from 'reactstrap'; -import styles from '../AddPaper/Contributions/Contributions.module.scss'; +import { ListGroup } from 'reactstrap'; +import { StyledLevelBox, StyledStatementItem } from '../AddPaper/Contributions/styled'; import StatementItem from './StatementItem'; import AddStatement from './AddStatement'; import { connect } from 'react-redux'; @@ -32,7 +32,7 @@ class Statements extends Component { let propertyIds = Object.keys(this.props.resources.byId).length !== 0 && this.props.selectedResource ? this.props.resources.byId[this.props.selectedResource].propertyIds : []; return ( - + {!this.props.isFetchingStatements ? ( propertyIds.length > 0 ? ( propertyIds.map((propertyId, index) => { @@ -51,11 +51,11 @@ class Statements extends Component { /> ) })) - : No values + : No values ) : ( - + Loading - + )} {this.props.enableEdit ? : ''} @@ -65,10 +65,10 @@ class Statements extends Component { addLevel = (level, maxLevel) => { return maxLevel !== 0 ? ( -
+ {maxLevel !== level + 1 && this.addLevel(level + 1, maxLevel)} {maxLevel === level + 1 && this.statements()} -
+ ) : this.statements(); } diff --git a/src/components/StatementBrowser/Value/AddValue.js b/src/components/StatementBrowser/Value/AddValue.js index e4bd53dca..c6f722bd9 100644 --- a/src/components/StatementBrowser/Value/AddValue.js +++ b/src/components/StatementBrowser/Value/AddValue.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import { resourcesUrl } from '../../../network'; -import { Input, InputGroup, InputGroupAddon, Button, ListGroupItem, DropdownToggle, DropdownMenu, InputGroupButtonDropdown, DropdownItem } from 'reactstrap'; +import { Input, InputGroup, InputGroupAddon, Button, DropdownToggle, DropdownMenu, InputGroupButtonDropdown } from 'reactstrap'; import Tooltip from '../../Utils/Tooltip'; -import styles from '../../AddPaper/Contributions/Contributions.module.scss'; +import { StyledValueItem, StyledDropdownItem } from '../../AddPaper/Contributions/styled'; import AutoComplete from '../AutoComplete'; import { connect } from 'react-redux'; import { createValue } from '../../../actions/statementBrowser'; @@ -78,24 +78,24 @@ class AddValue extends Component { render() { return ( <> - + {this.state.showAddValue ? - + {this.state.valueType.charAt(0).toUpperCase() + this.state.valueType.slice(1)} - this.handleDropdownSelect('object')}> + this.handleDropdownSelect('object')}> Object - - this.handleDropdownSelect('literal')}> + + this.handleDropdownSelect('literal')}> Literal - + @@ -121,14 +121,14 @@ class AddValue extends Component { } - - + + : + Add value } - + ); diff --git a/src/components/StatementBrowser/Value/ValueItem.js b/src/components/StatementBrowser/Value/ValueItem.js index fba0d817c..cb43705b1 100644 --- a/src/components/StatementBrowser/Value/ValueItem.js +++ b/src/components/StatementBrowser/Value/ValueItem.js @@ -1,9 +1,8 @@ import React, { Component } from 'react'; -import { ListGroupItem } from 'reactstrap'; import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome'; import { faTrash, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import Tooltip from '../../Utils/Tooltip'; -import styles from '../../AddPaper/Contributions/Contributions.module.scss'; +import { StyledValueItem } from '../../AddPaper/Contributions/styled'; import classNames from 'classnames'; import Confirm from 'reactstrap-confirm'; import { connect } from 'react-redux'; @@ -69,7 +68,7 @@ class ValueItem extends Component { render() { const labelClass = classNames({ - [styles.objectLink]: this.props.type === 'object' + 'objectLink': this.props.type === 'object' }); let resource = this.props.resources.byId[this.props.resourceId]; @@ -84,7 +83,7 @@ class ValueItem extends Component { return ( <> {!this.props.inline ? - + {this.props.label} {existingResourceId && this.props.openExistingResourcesInDialog ? @@ -92,12 +91,12 @@ class ValueItem extends Component { : ''} {!this.props.existingStatement ? - + Delete : ''} - + : this.props.type === 'object' ? diff --git a/src/components/ViewPaper/Contributions.js b/src/components/ViewPaper/Contributions.js index e7e595206..d32200607 100644 --- a/src/components/ViewPaper/Contributions.js +++ b/src/components/ViewPaper/Contributions.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { Container, Row, Col, Form, FormGroup, Alert } from 'reactstrap'; import { connect } from 'react-redux'; import { selectContribution } from '../../actions/viewPaper'; -import styles from '../AddPaper/Contributions/Contributions.module.scss'; +import { StyledContribution, StyledContributionsList } from '../AddPaper/Contributions/styled'; import StatementBrowser from '../StatementBrowser/Statements'; import { getSimilaireContribution, getResource } from '../../network'; import styled from 'styled-components'; @@ -120,17 +120,17 @@ class Contributions extends Component { )} {!this.state.loading && ( -
    + {this.props.contributions.map((contribution, index) => { return ( -
  • - +
  • + {contribution.label}
    • ) })} -
+ )} -
+ {!this.state.loading && ( -
+ From 3bbd07dd67173e353ed9861232e0bec0497f2a30 Mon Sep 17 00:00:00 2001 From: "K.E Farfar" Date: Mon, 24 Jun 2019 10:08:57 +0200 Subject: [PATCH 2/5] remove unuseful attrs constructor --- .../Contributions/ResearchProblemInput.js | 4 ++-- src/components/AddPaper/Contributions/styled.js | 16 ++++------------ 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/src/components/AddPaper/Contributions/ResearchProblemInput.js b/src/components/AddPaper/Contributions/ResearchProblemInput.js index 1d7d37a90..044ab2987 100644 --- a/src/components/AddPaper/Contributions/ResearchProblemInput.js +++ b/src/components/AddPaper/Contributions/ResearchProblemInput.js @@ -99,7 +99,7 @@ class ResearchProblemInput extends Component { return ( <> - + this.props.value.includes(id))} value={this.props.value} @@ -118,7 +118,7 @@ class ResearchProblemInput extends Component { /> {this.state.problemBrowser && ( - + <>Problem browser :
<>ID {this.state.problemBrowser.id}
diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js index 89443d4ed..ac6f9e26e 100644 --- a/src/components/AddPaper/Contributions/styled.js +++ b/src/components/AddPaper/Contributions/styled.js @@ -65,9 +65,7 @@ export const StyledContentEditable = styled(ContentEditable)` `; /*researchFieldsInput*/ -export const StyledResearchFieldsInputFormControl = styled.div.attrs(props => ({ - className: 'form-control', -}))` +export const StyledResearchFieldsInputFormControl = styled.div` padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; @@ -85,18 +83,14 @@ export const StyledResearchFieldsInputFormControl = styled.div.attrs(props => ({ `; /*researchFieldBrowser*/ -export const StyledResearchFieldBrowser = styled.div.attrs(props => ({ - className: 'form-control', -}))` +export const StyledResearchFieldBrowser = styled.div` margin: 5px auto; height: auto !important; cursor: text; `; /*statementItem*/ -export const StyledStatementItem = styled(ListGroupItem).attrs(props => ({ - className: props.className || '', -}))` +export const StyledStatementItem = styled(ListGroupItem)` padding: 0.5rem 0.75rem !important; cursor: default; background-color: ${props => props.theme.ultraLightBlue} !important; @@ -144,9 +138,7 @@ export const StyledAddStatement = styled(InputGroup)` `; /*listGroupOpen*/ -export const StyledListGroupOpen = styled.div.attrs(props => ({ - className: props.className || '', -}))` +export const StyledListGroupOpen = styled.div` border-left-width: ${props => props.theme.borderWidth}; border-right-width: ${props => props.theme.borderWidth}; border-left-style: solid; From 0405ec91dcb29fdcdd8c540ac95547e828c471aa Mon Sep 17 00:00:00 2001 From: "K.E Farfar" Date: Tue, 25 Jun 2019 14:24:40 +0200 Subject: [PATCH 3/5] replace react-tagsinput with react-select --- package.json | 1 - src/actions/addPaper.js | 9 +- .../Contributions/ResearchProblemInput.js | 5 - .../AddPaper/GeneralData/GeneralData.js | 20 ++-- src/components/Utils/AuthorsInput.js | 112 ++++++++++++++++++ src/components/Utils/TagsInput.js | 57 --------- src/components/Utils/TagsInput.module.scss | 43 ------- src/components/Utils/styled.js | 36 ++++++ 8 files changed, 167 insertions(+), 116 deletions(-) create mode 100644 src/components/Utils/AuthorsInput.js delete mode 100644 src/components/Utils/TagsInput.js delete mode 100644 src/components/Utils/TagsInput.module.scss create mode 100644 src/components/Utils/styled.js diff --git a/package.json b/package.json index 097a46dd1..8e513d255 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "react-select": "^3.0.4", "react-sortable-hoc": "^1.9.1", "react-split-pane": "^0.1.84", - "react-tagsinput": "^3.19.0", "react-transition-group": "^1.2.1", "reactstrap": "^7.1.0", "reactstrap-confirm": "^1.0.4", diff --git a/src/actions/addPaper.js b/src/actions/addPaper.js index a7d60ad22..9b9333ba5 100644 --- a/src/actions/addPaper.js +++ b/src/actions/addPaper.js @@ -167,8 +167,13 @@ export const saveAddPaper = (data) => { // authors for (let author of data.authors) { - let authorResource = await network.createResource(author); - await network.createResourceStatement(paper.id, authorPredicate, authorResource.id); + // check if the author is already a resource + if (author.hasOwnProperty('_class') && author._class === 'resource'){ + await network.createResourceStatement(paper.id, authorPredicate, author.id); + }else{ + let authorResource = await network.createResource(author.label); + await network.createResourceStatement(paper.id, authorPredicate, authorResource.id); + } } // publication month diff --git a/src/components/AddPaper/Contributions/ResearchProblemInput.js b/src/components/AddPaper/Contributions/ResearchProblemInput.js index d52fad754..33f85be6d 100644 --- a/src/components/AddPaper/Contributions/ResearchProblemInput.js +++ b/src/components/AddPaper/Contributions/ResearchProblemInput.js @@ -5,11 +5,6 @@ import CreatableSelect from 'react-select/creatable'; import { components } from 'react-select'; import { getStatementsByPredicate } from '../../../network'; -/** - * Functional stateless component (still have to decide on whether this should be standard or use the regular class structure) - * TODO: consistency: try to replace some of the classes via props of TagsInputReact, instead of different render methods - */ - class ResearchProblemInput extends Component { diff --git a/src/components/AddPaper/GeneralData/GeneralData.js b/src/components/AddPaper/GeneralData/GeneralData.js index 2fa39c61c..b68076843 100644 --- a/src/components/AddPaper/GeneralData/GeneralData.js +++ b/src/components/AddPaper/GeneralData/GeneralData.js @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSpinner } from '@fortawesome/free-solid-svg-icons'; import { range } from '../../../utils'; import Tooltip from '../../Utils/Tooltip'; -import TagsInput from '../../Utils/TagsInput'; +import AuthorsInput from '../../Utils/AuthorsInput'; import FormValidator from '../../Utils/FormValidator'; import { connect } from 'react-redux'; import { updateGeneralData, nextStep } from '../../../actions/addPaper'; @@ -98,14 +98,17 @@ class GeneralData extends Component { try { const responseJson = await submitGetRequest(crossrefUrl + this.state.doi); - console.log(responseJson); let paperTitle = '', paperAuthors = [], paperPublicationMonth = 0, paperPublicationYear = 0; try { paperTitle = responseJson.message.title[0]; paperAuthors = responseJson.message.author.map((author, index) => { - return author.given + ' ' + author.family; + const newAuthor = { + label: author.given + ' ' + author.family, + id: author.given + ' ' + author.family, + }; + return newAuthor; }); paperPublicationMonth = responseJson.message.created['date-parts'][0][1]; paperPublicationYear = responseJson.message.created['date-parts'][0][0]; @@ -247,8 +250,9 @@ class GeneralData extends Component { Authors: {this.state.paperAuthors.map((author, index) => ( - {this.state.paperAuthors.length > index + 1 ? author + ', ' : author} - ))} + {this.state.paperAuthors.length > index + 1 ? author.label + ', ' : author.label} + ) + )} @@ -277,7 +281,7 @@ class GeneralData extends Component { - + @@ -289,8 +293,8 @@ class GeneralData extends Component { {moment.months().map((el, index) => { - return - }) } + return + })} diff --git a/src/components/Utils/AuthorsInput.js b/src/components/Utils/AuthorsInput.js new file mode 100644 index 000000000..5d4625207 --- /dev/null +++ b/src/components/Utils/AuthorsInput.js @@ -0,0 +1,112 @@ +import React, { Component } from 'react'; + +import CreatableSelect from 'react-select/creatable'; +import { StyledAuthorsInputFormControl } from './styled' +import { withTheme } from 'styled-components' +import PropTypes from 'prop-types'; +import { getStatementsByPredicate } from '../../network'; + + +class AuthorsInput extends Component { + + constructor(props) { + super(props) + + this.state = { + authors: [], + } + } + + componentDidMount() { + // Get the statements that contains the has a author as a predicate + getStatementsByPredicate(process.env.REACT_APP_PREDICATES_HAS_AUTHOR).then((result) => { + // Get the authors without duplicates + var authors = result.map((contribution) => { + return contribution.object + }).filter((author, index, self) => + index === self.findIndex((t) => ( + t.id === author.id && t.label === author.label + )) + ) + // Set them to the list of authors and add the created options + this.setState({ + authors: [...authors, ...this.props.value.filter(({ id }) => !authors.map(({ id }) => id).includes(id))], + loading: false + }) + }) + } + + handleCreate = (inputValue) => { + const newOption = { + label: inputValue, + id: inputValue, + }; + this.setState({ + authors: [...this.state.authors, newOption] + }); + this.props.handler([...this.props.value, newOption]) + }; + + render() { + + const customStyles = { + control: (provided, state) => ({ + ...provided, + background: 'inherit', + boxShadow: state.isFocused ? 0 : 0, + border: 0, + padding: '2px 5px' + }), + menu: (provided) => ({ + ...provided, + zIndex: 10 + }), + multiValueLabel: (provided) => ({ + ...provided, + color: '#fff', + padding: '0', + }), + multiValue: (provided) => ({ + ...provided, + backgroundColor: this.props.theme.orkgPrimaryColor, + borderRadius: '999px', + border: `1px solid ${this.props.theme.orkgPrimaryColor}`, + color: '#fff', + padding: '0', + margin: '0 0 2px 2px', + fontSize: '90%', + }), + input: (provided) => ({ + ...provided, + padding: '0', + margin: '0 0 0 2px' + }), + } + + return ( + + label} + getOptionValue={({ id }) => id} + key={({ id }) => id} + value={this.props.value} + onChange={this.props.handler} + isClearable + isMulti + styles={customStyles} + onCreateOption={this.handleCreate} + options={this.state.authors} + /> + + ); + + } +} + +AuthorsInput.propTypes = { + handler: PropTypes.func.isRequired, + value: PropTypes.array.isRequired, + theme: PropTypes.object.isRequired, +} + +export default withTheme(AuthorsInput); \ No newline at end of file diff --git a/src/components/Utils/TagsInput.js b/src/components/Utils/TagsInput.js deleted file mode 100644 index effaeefba..000000000 --- a/src/components/Utils/TagsInput.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome'; -import { faTimes } from '@fortawesome/free-solid-svg-icons'; -import TagsInputReact from 'react-tagsinput'; -import AutosizeInput from 'react-input-autosize'; -import styles from './TagsInput.module.scss'; -import PropTypes from 'prop-types'; - -/** - * Functional stateless component (still have to decide on whether this should be standard or use the regular class structure) - * TODO: consistency: try to replace some of the classes via props of TagsInputReact, instead of different render methods - */ -const TagsInput = ({handler, value}) => { - const autosizingRenderInput = ({ addTag, ...props }) => { - let { onChange, value, ...other } = props - return ( - - ) - } - - const defaultRenderTag = (props) => { - let { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props - return ( - - {getTagDisplayValue(tag)} - {!disabled && - onRemove(key)}> - - - } - - ) - } - - return ( -
- -
- ); -} - -TagsInput.propTypes = { - handler: PropTypes.func.isRequired, - value: PropTypes.array.isRequired, -} - -export default TagsInput; \ No newline at end of file diff --git a/src/components/Utils/TagsInput.module.scss b/src/components/Utils/TagsInput.module.scss deleted file mode 100644 index 61348495c..000000000 --- a/src/components/Utils/TagsInput.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import '../../assets/scss/ThemeVariables.scss'; - -// this class for overwriting default bootstrap .form-control -.tagsInput { - padding-top: 0 !important; - padding-bottom: 0 !important; - height: auto !important; - min-height: calc(2.25rem + 4px); - cursor: text; -} -.tagsInputInner { - overflow: hidden; -} -.reactTagsinputTag { - background-color: $ORKG-primary-color; - border-radius: 2px; - border: 1px solid $ORKG-primary-color; - color: #fff; - border-radius: 999px; - display: inline-block; - padding: 0 7px; - margin: 7px 2px 0; - font-size: 90%; -} -.reactTagsinputRemove { - cursor: pointer; - font-weight: bold; - margin-left:5px; - font-size: 99%; /* fix stretched icon */ - color:#fff; - - &:hover { - color:#fff; - opacity: 0.7; - } -} -.tagsInput input { - border: 0; - background: transparent; - max-width: 100%; - outline: 0; - margin: 5px 2px; -} diff --git a/src/components/Utils/styled.js b/src/components/Utils/styled.js new file mode 100644 index 000000000..736e6f088 --- /dev/null +++ b/src/components/Utils/styled.js @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import { components } from 'react-select'; + +/*reactTagsinputTag*/ +export const StyledMultiValueLabel = styled(components.MultiValueLabel)` + background-color: ${props => props.theme.orkgPrimaryColor}; + border-radius: 2px; + border: 1px solid ${props => props.theme.orkgPrimaryColor}; + color: #fff; + border-radius: 999px; + display: inline-block; + padding: 0 7px; + margin: 7px 2px 0; + font-size: 90%; +`; + + + +/*researchFieldsInput*/ +export const StyledAuthorsInputFormControl = styled.div` + padding-top: 0 !important; + padding-bottom: 0 !important; + height: auto !important; + min-height: calc(2.25rem + 4px); + cursor: text; + padding: 0 !important; + + & input { + border: 0; + background: transparent; + max-width: 100%; + outline: 0; + margin: 0; + padding: 0; + } +`; \ No newline at end of file From eba354167203abc568deb61a02a0608bb91daa4d Mon Sep 17 00:00:00 2001 From: "K.E Farfar" Date: Tue, 25 Jun 2019 14:54:12 +0200 Subject: [PATCH 4/5] fix authors input style --- .../AddPaper/GeneralData/GeneralData.js | 1 + src/components/Utils/AuthorsInput.js | 11 ++++--- src/components/Utils/styled.js | 29 ++++--------------- src/components/ViewPaper/ViewPaper.js | 2 +- 4 files changed, 15 insertions(+), 28 deletions(-) diff --git a/src/components/AddPaper/GeneralData/GeneralData.js b/src/components/AddPaper/GeneralData/GeneralData.js index b68076843..715eab9ff 100644 --- a/src/components/AddPaper/GeneralData/GeneralData.js +++ b/src/components/AddPaper/GeneralData/GeneralData.js @@ -156,6 +156,7 @@ class GeneralData extends Component { } handleAuthorsChange(tags) { + tags = tags ? tags : []; this.setState({ paperAuthors: tags }); diff --git a/src/components/Utils/AuthorsInput.js b/src/components/Utils/AuthorsInput.js index 5d4625207..f1b37f2a9 100644 --- a/src/components/Utils/AuthorsInput.js +++ b/src/components/Utils/AuthorsInput.js @@ -55,7 +55,7 @@ class AuthorsInput extends Component { background: 'inherit', boxShadow: state.isFocused ? 0 : 0, border: 0, - padding: '2px 5px' + padding: '0 5px' }), menu: (provided) => ({ ...provided, @@ -64,15 +64,13 @@ class AuthorsInput extends Component { multiValueLabel: (provided) => ({ ...provided, color: '#fff', - padding: '0', + padding: '0' }), multiValue: (provided) => ({ ...provided, backgroundColor: this.props.theme.orkgPrimaryColor, borderRadius: '999px', - border: `1px solid ${this.props.theme.orkgPrimaryColor}`, color: '#fff', - padding: '0', margin: '0 0 2px 2px', fontSize: '90%', }), @@ -81,6 +79,11 @@ class AuthorsInput extends Component { padding: '0', margin: '0 0 0 2px' }), + multiValueRemove: (provided) => ({ + ...provided, + borderRadius: '0 999px 999px 0', + marginLeft: '2px', + }) } return ( diff --git a/src/components/Utils/styled.js b/src/components/Utils/styled.js index 736e6f088..58a559b44 100644 --- a/src/components/Utils/styled.js +++ b/src/components/Utils/styled.js @@ -1,22 +1,5 @@ import styled from 'styled-components'; -import { components } from 'react-select'; -/*reactTagsinputTag*/ -export const StyledMultiValueLabel = styled(components.MultiValueLabel)` - background-color: ${props => props.theme.orkgPrimaryColor}; - border-radius: 2px; - border: 1px solid ${props => props.theme.orkgPrimaryColor}; - color: #fff; - border-radius: 999px; - display: inline-block; - padding: 0 7px; - margin: 7px 2px 0; - font-size: 90%; -`; - - - -/*researchFieldsInput*/ export const StyledAuthorsInputFormControl = styled.div` padding-top: 0 !important; padding-bottom: 0 !important; @@ -26,11 +9,11 @@ export const StyledAuthorsInputFormControl = styled.div` padding: 0 !important; & input { - border: 0; - background: transparent; - max-width: 100%; - outline: 0; - margin: 0; - padding: 0; + border: 0; + background: transparent; + max-width: 100%; + outline: 0; + margin: 0; + padding: 0; } `; \ No newline at end of file diff --git a/src/components/ViewPaper/ViewPaper.js b/src/components/ViewPaper/ViewPaper.js index 6bae2132d..2b0c3f355 100644 --- a/src/components/ViewPaper/ViewPaper.js +++ b/src/components/ViewPaper/ViewPaper.js @@ -152,7 +152,7 @@ class ViewPaper extends Component { {moment(this.state.publicationMonth, 'M').format('MMMM')} {this.state.publicationYear} - {this.state.researchField && ( + {this.state.researchField && this.state.researchField.object && ( {this.state.researchField.object.label} From 12886a7f298bec796efa8d5aeb0a0f6de0ba8bd9 Mon Sep 17 00:00:00 2001 From: Allard Oelen Date: Thu, 27 Jun 2019 16:49:16 +0200 Subject: [PATCH 5/5] Fix cursor pointer on expandable items --- src/components/AddPaper/Contributions/styled.js | 4 ++++ src/components/StatementBrowser/StatementItem.js | 1 + 2 files changed, 5 insertions(+) diff --git a/src/components/AddPaper/Contributions/styled.js b/src/components/AddPaper/Contributions/styled.js index ac6f9e26e..9733b1cfa 100644 --- a/src/components/AddPaper/Contributions/styled.js +++ b/src/components/AddPaper/Contributions/styled.js @@ -96,6 +96,10 @@ export const StyledStatementItem = styled(ListGroupItem)` background-color: ${props => props.theme.ultraLightBlue} !important; border-color: ${props => props.theme.ultraLightBlueDarker} !important; + &.selectable { + cursor: pointer; + } + & > .statementItemIcon { font-size: 18px; margin-top: 3px; diff --git a/src/components/StatementBrowser/StatementItem.js b/src/components/StatementBrowser/StatementItem.js index eb4143d6b..0f95664d9 100644 --- a/src/components/StatementBrowser/StatementItem.js +++ b/src/components/StatementBrowser/StatementItem.js @@ -32,6 +32,7 @@ class StatementItem extends Component { const listGroupClass = classNames({ 'statementActive': isCollapsed, 'statementItem': true, + 'selectable': true, 'rounded-bottom': this.props.isLastItem && !isCollapsed && !this.props.enableEdit, });