Skip to content

Commit

Permalink
Merge branch 'Move-css-to-styled-components' into 'master'
Browse files Browse the repository at this point in the history
Move scss styles of Contributions.module into styled components #52

See merge request TIBHannover/orkg/orkg-frontend!44
  • Loading branch information
aoelen committed Jun 27, 2019
2 parents 10e1e97 + 12886a7 commit d209e2f
Show file tree
Hide file tree
Showing 20 changed files with 460 additions and 403 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,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",
Expand Down
9 changes: 7 additions & 2 deletions src/actions/addPaper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion src/assets/scss/ThemeVariables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
$badge-padding-x: 0.8rem;

// Bootstrap Vars
$list-group-border-color:rgba(0, 0, 0, 0.125);

8 changes: 4 additions & 4 deletions src/components/AddPaper/Contributions/Contribution.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,7 +19,7 @@ class Contribution extends Component {

render() {
return (
<div className={styles.contribution}>
<StyledContribution>
<Form>
<FormGroup>
<Label>
Expand All @@ -32,13 +32,13 @@ class Contribution extends Component {
<Tooltip message="Provide details about this contribution by making statements. Some suggestions are already displayed, you can use this when it is useful, or delete it when it is not">Contribution data</Tooltip>
</Label>

<StatementBrowser
<StatementBrowser
enableEdit={true}
openExistingResourcesInDialog={true}
/>
</FormGroup>
</Form>
</div>
</StyledContribution>
);
}
}
Expand Down
20 changes: 9 additions & 11 deletions src/components/AddPaper/Contributions/Contributions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -117,21 +116,20 @@ class Contributions extends Component {
<Container>
<Row noGutters={true}>
<Col xs="3">
<ul className={styles.contributionsList}>
<StyledContributionsList>
{this.props.contributions.allIds.map((contribution, index) => {
let contributionId = this.props.contributions.byId[contribution]['id'];

return (
<li className={contributionId === this.props.selectedContribution ? styles.activeContribution : ''} key={contributionId}>
<span className={styles.selectContribution} onClick={() => this.handleSelectContribution(contributionId)}>
<li className={contributionId === this.props.selectedContribution ? 'activeContribution' : ''} key={contributionId}>
<span className={'selectContribution'} onClick={() => this.handleSelectContribution(contributionId)}>
{/* TODO: add the contenteditable into a seperate component */}
<ContentEditable
<StyledContentEditable
innerRef={(input) => { 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)}
Expand All @@ -140,13 +138,13 @@ class Contributions extends Component {
{!this.state.editing[contribution] && (
<>
{this.props.contributions.allIds.length !== 1 && (
<span className={`${styles.deleteContribution} float-right mr-1 ${contributionId !== this.props.selectedContribution && 'd-none'}`}>
<span className={`deleteContribution float-right mr-1 ${contributionId !== this.props.selectedContribution && 'd-none'}`}>
<Tooltip message="Delete contribution" hideDefaultIcon={true}>
<Icon icon={faTrash} onClick={() => this.toggleDeleteContribution(contributionId)} />
</Tooltip>
</span>
)}
<span className={`${styles.deleteContribution} float-right mr-1 ${contributionId !== this.props.selectedContribution && 'd-none'}`}>
<span className={`deleteContribution float-right mr-1 ${contributionId !== this.props.selectedContribution && 'd-none'}`}>
<Tooltip message="Edit the contribution label" hideDefaultIcon={true}>
<Icon icon={faPen} onClick={(e) => this.toggleEditLabelContribution(contributionId, e)} />
</Tooltip>
Expand All @@ -158,10 +156,10 @@ class Contributions extends Component {
)
})}

<li className={`${styles.addContribution} text-primary`}>
<li className={'addContribution text-primary'}>
<span onClick={this.props.createContribution}>+ Add another contribution</span>
</li>
</ul>
</StyledContributionsList>
</Col>

<CSSTransitionGroup
Expand Down
208 changes: 0 additions & 208 deletions src/components/AddPaper/Contributions/Contributions.module.scss

This file was deleted.

15 changes: 5 additions & 10 deletions src/components/AddPaper/Contributions/ResearchProblemInput.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
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';
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 {

Expand Down Expand Up @@ -110,7 +105,7 @@ class ResearchProblemInput extends Component {

return (
<>
<div className={`${styles.researchFieldsInput} form-control`} >
<StyledResearchFieldsInputFormControl className="form-control">
<CreatableSelect
//value={this.state.researchProblems.filter(({ id }) => this.props.value.includes(id))}
value={this.props.value}
Expand All @@ -128,14 +123,14 @@ class ResearchProblemInput extends Component {
onKeyDown={this.onKeyDown}
openMenuOnClick={false}
/>
</div >
</StyledResearchFieldsInputFormControl>
{this.state.problemBrowser && (
<div className={`${styles.researchFieldBrowser} form-control`} >
<StyledResearchFieldBrowser className="form-control">
<button type="button" className={'close'} onClick={this.closeProblemBrowser}><span>×</span></button>
<>Problem browser :</><br />
<><b>ID</b> {this.state.problemBrowser.id}</><br />
<><b>Label</b> {this.state.problemBrowser.label}</>
</div >)}
</StyledResearchFieldBrowser>)}
</>
);
}
Expand Down
Loading

0 comments on commit d209e2f

Please sign in to comment.