--- a/client/src/App.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/App.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,5 @@
import React, { Component } from 'react';
-
// import logo from './logo.svg';
-import { Grid, Row, Col, Alert } from 'react-bootstrap';
import './App.css';
import Navbar from './components/Navbar';
@@ -10,13 +8,13 @@
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3} className="text-center">
- <Alert bsStyle="info">Welcome to IRI Notes</Alert>
- </Col>
- </Row>
- </Grid>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3 text-center">
+ <div class="alert alert-info" role="alert" bsStyle="info"><span>Bienvenue sur</span><br/>IRI Notes</div>
+ </div>
+ </div>
+ </div>
</div>
);
}
--- a/client/src/components/CategoriesTooltip.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/CategoriesTooltip.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
-import { FormGroup, FormControl, Button } from 'react-bootstrap';
class CategoriesTooltip extends Component {
@@ -47,20 +46,22 @@
return (
<div className="categories-tooltip">
<form onSubmit={ this.onSubmit }>
- <FormGroup className="buttons">
+ <div className="form-group buttons">
{this.props.categories.map((category) =>
- <Button
+ <button type="button"
key={ category.name }
- bsStyle="primary"
+ className="btn btn-primary"
style={{ backgroundColor: category.color }}
active={ this.isCategoryActive(category) }
- onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</Button>
+ onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</button>
)}
- </FormGroup>
+ </div>
{this.state.showCommentControl &&
- <FormGroup>
- <FormControl inputRef={(ref) => { this.commentControl = ref; }} />
- </FormGroup>}
+ <div className="form-group">
+ <input className="form-control"
+ // inputRef={(ref) => { this.commentControl = ref; }}
+ ref={(commentControl) => { this.commentControl = commentControl; }}/>
+ </div>}
</form>
</div>
);
--- a/client/src/components/Clock.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Clock.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
-import { Label } from 'react-bootstrap';
import moment from 'moment';
class Clock extends Component {
@@ -24,7 +23,7 @@
render() {
return (
- <Label bsStyle="info">{ this.state.time }</Label>
+ <span className="label label-info">{ this.state.time }</span>
);
}
}
--- a/client/src/components/CreateGroup.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/CreateGroup.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
import '../App.css';
import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
@@ -42,7 +41,7 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && fieldname in errorMessages) {
return errorMessages[fieldname].map((message, key) =>
- <HelpBlock key={ key }>{ message }</HelpBlock>
+ <p className="help-block" key={ key }>{ message }</p>
);
}
}
@@ -51,11 +50,11 @@
if (errorMessages && 'non_field_errors' in errorMessages) {
const errors = errorMessages['non_field_errors'];
return (
- <Alert bsStyle="danger">
+ <div class="alert alert-danger" role="alert">
{ errors.map((message, key) =>
<p key={ key }>{ message }</p>
) }
- </Alert>
+ </div>
)
}
}
@@ -68,41 +67,40 @@
render() {
- const panelHeader = (
- <h4 className="text-uppercase text-center">New Group</h4>
- )
-
const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
const okDisabled = (!this.state.name || this.state.name.trim() === "");
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3}>
- <Panel header={ panelHeader } className="panel-login">
- <form onSubmit={this.submit}>
- <FormGroup validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
- <ControlLabel>Nom</ControlLabel>
- <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
- { this.renderErrorMessage(errorMessages, 'name') }
- </FormGroup>
- <FormGroup validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
- <ControlLabel>Password</ControlLabel>
- <FormControl componentClass="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
- { this.renderErrorMessage(errorMessages, 'description') }
- </FormGroup>
- { this.renderNonFieldErrors(errorMessages) }
- <Row>
- <Col md={6}><Button type="submit" block bsStyle="primary" disabled={okDisabled}>Ok</Button></Col>
- <Col md={6}><Button block bsStyle="default" onClick={this.cancel}>Cancel</Button></Col>
- </Row>
- </form>
- </Panel>
- </Col>
- </Row>
- </Grid>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3">
+ <div className="panel-login panel panel-default">
+ <div className="panel-heading">
+ <h4 className="text-uppercase text-center">New Group</h4>
+ <form onSubmit={this.submit}>
+ <div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
+ <label className="control-label">Nom</label>
+ <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
+ { this.renderErrorMessage(errorMessages, 'name') }
+ </div>
+ <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
+ <label className="control-label">Password</label>
+ <input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
+ { this.renderErrorMessage(errorMessages, 'description') }
+ </div>
+ { this.renderNonFieldErrors(errorMessages) }
+ <div className="row">
+ <div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div>
+ <div className="col-md-6"><button type="button" className="btn btn-default btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
);
}
--- a/client/src/components/Login.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Login.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
import '../App.css';
+import './Login.css';
import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
@@ -44,7 +44,7 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && errorMessages.has(fieldname)) {
return errorMessages.get(fieldname).map((message, key) =>
- <HelpBlock key={ key }>{ message }</HelpBlock>
+ <p className="help-block" key={ key }>{ message }</p>
);
}
}
@@ -53,51 +53,50 @@
if (errorMessages && errorMessages.has('non_field_errors')) {
const errors = errorMessages.get('non_field_errors');
return (
- <Alert bsStyle="danger">
+ <div class="alert alert-danger" role="alert">
{ errors.map((message, key) =>
<p key={ key }>{ message }</p>
) }
- </Alert>
+ </div>
)
}
}
render() {
- const panelHeader = (
- <h4 className="text-uppercase text-center">Login</h4>
- )
-
const errorMessages = this.props.login.get('errorMessages');
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3}>
- <Panel header={ panelHeader } className="panel-login">
- <form onSubmit={this.submit}>
- <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
- <ControlLabel>Username</ControlLabel>
- <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="username" />
- { this.renderErrorMessage(errorMessages, 'username') }
- </FormGroup>
- <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
- <ControlLabel>Password</ControlLabel>
- <FormControl componentClass="input" type="password" onChange={this.handleInputChange} name="password" />
- { this.renderErrorMessage(errorMessages, 'password') }
- </FormGroup>
- { this.renderNonFieldErrors(errorMessages) }
- <Button type="submit" block bsStyle="primary" onClick={this.login}>Login</Button>
- </form>
- </Panel>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3">
+ <div className="panel-login panel panel-default">
+ <div className="panel-heading">
+ <h4 className="text-center panel-title">IRI Notes</h4>
+ <form onSubmit={this.submit}>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
+ <label className="control-label">Nom d'utilisateur</label>
+ <input className="form-control" type="text" onChange={this.handleInputChange} name="username" />
+ { this.renderErrorMessage(errorMessages, 'username') }
+ </div>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
+ <label className="control-label">Mot de passe</label>
+ <input className="form-control" type="password" onChange={this.handleInputChange} name="password" />
+ { this.renderErrorMessage(errorMessages, 'password') }
+ </div>
+ { this.renderNonFieldErrors(errorMessages) }
+ <button type="submit" className="btn btn-primary btn-lg">Se connecter</button>
+ </form>
+ </div>
+ </div>
<p className="text-center">
- <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Not registered yet? Create an account.</a>
+ <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a>
</p>
- </Col>
- </Row>
- </Grid>
+ </div>
+ </div>
+ </div>
</div>
);
}
--- a/client/src/components/Navbar.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Navbar.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,16 +1,16 @@
+import './Navbar.css';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { bindActionCreators } from 'redux';
// import logo from './logo.svg';
-import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
+import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
import * as authActions from '../actions/authActions';
import { forceSync } from '../actions/networkActions';
import { groupSetCurrent } from '../actions/groupActions';
import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
-import './Navbar.css';
const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
@@ -26,26 +26,34 @@
if (isAuthenticated) {
return (
- <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
- <MenuItem onClick={onClickSettings}>Settings</MenuItem>
- <MenuItem onClick={onLogout}>Logout</MenuItem>
- </NavDropdown>
+ <NavDropdown title={ currentUser.get('username') }>
+ <li>
+ <a href="#settings" onClick={onClickSettings}>Paramètres</a>
+ </li>
+ <li>
+ <a href="#logout" onClick={onLogout}>Se déconnecter</a>
+ </li>
+ </NavDropdown>
);
}
return (
- <NavItem onClick={onClickLogin} href="/login">Login</NavItem>
+ <li>
+ <a onClick={onClickLogin} href="/login">Se connecter</a>
+ </li>
);
}
const Online = ({ online }) => {
return (
- <NavItem>
- <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span>
- </NavItem>
+ <li>
+ <a>
+ <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+ </a>
+ </li>
)
}
-const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => {
+const SyncButton = ({ isAuthenticated, onSyncClick, isSynchronizing, isSynchronized, id }) => {
const classnames = "material-icons"
+ ((!isSynchronized)?" sync-button-not-synchronized":"")
+ ((isSynchronizing)?" sync-button-synchronizing":"");
@@ -58,23 +66,34 @@
title += ": not synchronized";
}
+ if (isAuthenticated) {
+ return (
+ <li>
+ <a title={title} onClick={clickCb} id={id || null}>
+ <span className={classnames}></span> </a>
+ </li>
+ );
+ }
return (
- <NavItem title={title} onClick={clickCb} id={id || null}>
- <span className={classnames}></span>
- </NavItem>
- )
+ <li>
+ <a>
+ <span></span>
+ </a>
+ </li>
+ );
}
+
const GroupStatus = ({currentGroup, groups, onSelect}) => {
if(currentGroup) {
const currentGroupName = currentGroup.get('name');
return (
- <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}>
+ <NavDropdown title={currentGroupName} onSelect={onSelect}>
{ groups && groups.map((group, key) => {
const groupName = group.get('name');
const className = (groupName === currentGroupName)?'active':null;
- return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
+ return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
}
)}
<MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>
@@ -149,38 +168,46 @@
render() {
return (
- <Navbar fluid inverse fixedTop>
- <Navbar.Header>
- <Navbar.Brand>
- <a onClick={this.onClickHome} href="/">IRI Notes</a>
- </Navbar.Brand>
- <Navbar.Toggle />
- </Navbar.Header>
- <Navbar.Collapse>
- <Nav>
- <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
- </Nav>
- <Nav pullRight>
- <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
- <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
- <Online {...this.props} />
- <LoginNav {...this.props} onLogout={this.onClickLogout} />
- </Nav>
- </Navbar.Collapse>
- <Modal show={this.state.showModal} onHide={this.closeModal}>
- <Modal.Body>
- <p className="text-center">
- Some data is not synchronized with server.
- <br />
- If you continue, it will be lost.
- </p>
- </Modal.Body>
- <Modal.Footer>
- <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button>
- <Button onClick={this.closeModal}>Close</Button>
- </Modal.Footer>
- </Modal>
- </Navbar>
+ <nav className="navbar navbar-inverse navbar-fixed-top">
+ <div className="container-fluid">
+ <div className="navbar-header">
+ <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+ <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+ <span className="sr-only">Toggle navigation</span>
+ <span className="icon-bar"></span>
+ <span className="icon-bar"></span>
+ <span className="icon-bar"></span>
+ </button>
+ </div>
+ <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul className="nav navbar-nav">
+ <li>
+ <a onClick={this.onClickSessions} href="/sessions">Accueil</a>
+ </li>
+ </ul>
+ <ul className="nav navbar-nav navbar-right">
+ <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
+ <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
+ <Online {...this.props} />
+ <LoginNav {...this.props} onLogout={this.onClickLogout} />
+ </ul>
+ </div>
+ <Modal show={this.state.showModal} onHide={this.closeModal}>
+ <Modal.Body>
+ <p className="text-center">
+ Certaines données n'ont pas encore été sauvegardées.
+ <br />
+ Si vous continuez, elles seront perdues.
+ </p>
+ </Modal.Body>
+ <Modal.Footer>
+ <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
+ <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>
+ </Modal.Footer>
+ </Modal>
+ </div>
+ </nav>
+
);
}
}
--- a/client/src/components/Note.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Note.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { FormControl } from 'react-bootstrap';
import { formatTimestamp } from '../utils';
import SlateEditor from './SlateEditor';
@@ -60,12 +59,13 @@
if (this.props.isEditing) {
return (
<div className="note-margin-comment">
- <FormControl
+ <input type="text" className="form-control"
name="margin"
componentClass="textarea"
placeholder="Enter a margin comment for your note"
defaultValue={ this.props.note.marginComment }
- inputRef={ ref => { this.marginComment = ref; } } />
+ // inputRef={ ref => { this.marginComment = ref; } } />
+ ref={(marginComment) => { this.marginComment = marginComment; }} />
</div>
)
}
--- a/client/src/components/NoteInput.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/NoteInput.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,6 +1,4 @@
import React, { Component } from 'react';
-import { Form, FormControl } from 'react-bootstrap';
-
import PropTypes from 'prop-types';
import SlateEditor from './SlateEditor';
import { now } from '../utils';
@@ -55,7 +53,7 @@
render() {
return (
- <Form>
+ <form>
<div className="editor">
<div className="editor-left">
<SlateEditor ref="editor"
@@ -68,15 +66,15 @@
annotationCategories={ this.props.annotationCategories } />
</div>
<div className="editor-right">
- <FormControl
+ <input type="textarea" className="form-control"
name="margin"
- componentClass="textarea"
placeholder="Enter a margin comment for your note"
- inputRef={ ref => { this.marginComment = ref; } }
+ // inputRef={ ref => { this.marginComment = ref; } }
+ ref={(marginComment) => { this.marginComment = marginComment; }}
/>
</div>
</div>
- </Form>
+ </form>
);
}
}
--- a/client/src/components/NotesList.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/NotesList.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
-import { Alert, Modal, Button } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
import Note from './Note';
class NotesList extends Component {
@@ -47,7 +47,7 @@
render() {
if (this.props.notes.size === 0) {
return (
- <Alert bsStyle="warning">No notes yet. Add notes with the textarea below.</Alert>
+ <div className="alert alert-warning">Commencez votre première note en écrivant dans le champ texte ci-dessous</div>
);
}
@@ -68,11 +68,11 @@
<Modal show={this.state.showModal} onHide={this.closeModal}>
<Modal.Body>
- Are you sure?
+ Êtes vous sûr(e) ?
</Modal.Body>
<Modal.Footer>
- <Button bsStyle="primary" onClick={ this.deleteNote }>Confirm</Button>
- <Button onClick={ this.closeModal }>Close</Button>
+ <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirm</button>
+ <button type="submit" className="btn btn-default btn-lg" onClick={ this.closeModal }>Close</button>
</Modal.Footer>
</Modal>
--- a/client/src/components/Register.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Register.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, HelpBlock } from 'react-bootstrap';
import '../App.css';
+import './Register.css';
import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
@@ -31,56 +31,55 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && errorMessages.has(fieldname)) {
return errorMessages.get(fieldname).map((message, key) =>
- <HelpBlock key={ key }>{ message }</HelpBlock>
+ <p className="help-block" key={ key }>{ message }</p>
);
}
}
render() {
- const panelHeader = (
- <h4 className="text-uppercase text-center">Register</h4>
- )
-
const errorMessages = this.props.register.get('errorMessages');
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3}>
- <Panel header={ panelHeader } className="panel-login">
- <form onSubmit={this.submit}>
- <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
- <ControlLabel>Username</ControlLabel>
- <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} />
- { this.renderErrorMessage(errorMessages, 'username') }
- </FormGroup>
- <FormGroup validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
- <ControlLabel>Email</ControlLabel>
- <FormControl componentClass="input" type="email" inputRef={ref => { this.email = ref; }} />
- { this.renderErrorMessage(errorMessages, 'email') }
- </FormGroup>
- <FormGroup validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
- <ControlLabel>Password</ControlLabel>
- <FormControl componentClass="input" type="password" inputRef={ref => { this.password1 = ref; }} />
- { this.renderErrorMessage(errorMessages, 'password1') }
- </FormGroup>
- <FormGroup validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
- <ControlLabel>Confirm password</ControlLabel>
- <FormControl componentClass="input" type="password" inputRef={ref => { this.password2 = ref; }} />
- { this.renderErrorMessage(errorMessages, 'password2') }
- </FormGroup>
- <Button type="submit" block bsStyle="primary" onClick={this.register}>Register</Button>
- </form>
- </Panel>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3">
+ <div className="panel-login panel panel-default">
+ <div className="panel-heading">
+ <h4 className="text-center panel-title">IRI Notes</h4>
+ <form onSubmit={this.submit}>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
+ <label className="control-label">Nom d'utilisateur</label>
+ <input className="form-control" type="text" inputRef={ref => { this.username = ref; }} />
+ { this.renderErrorMessage(errorMessages, 'username') }
+ </div>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
+ <label className="control-label">Email</label>
+ <input className="form-control" type="email" inputRef={ref => { this.email = ref; }} />
+ { this.renderErrorMessage(errorMessages, 'email') }
+ </div>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
+ <label className="control-label">Mot de passe</label>
+ <input className="form-control" type="password" inputRef={ref => { this.password1 = ref; }} />
+ { this.renderErrorMessage(errorMessages, 'password1') }
+ </div>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
+ <label className="control-label">Confirmer le mot de passe</label>
+ <input className="form-control" type="password" inputRef={ref => { this.password2 = ref; }} />
+ { this.renderErrorMessage(errorMessages, 'password2') }
+ </div>
+ <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button>
+ </form>
+ </div>
+ </div>
<p className="text-center">
- <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Already registered? Sign in.</a>
+ <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a>
</p>
- </Col>
- </Row>
- </Grid>
+ </div>
+ </div>
+ </div>
</div>
);
}
--- a/client/src/components/Session.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Session.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col } from 'react-bootstrap';
import '../App.css';
import Navbar from './Navbar';
import NoteInput from './NoteInput';
@@ -37,18 +36,18 @@
</div>
</div>
<section className="editor-fixed">
- <Grid fluid>
- <Row>
- <Col md={9} mdOffset={3}>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-9 col-md-offset-3">
<NoteInput
session={this.props.currentSession}
autoSubmit={this.props.autoSubmit}
addNote={this.props.notesActions.addNote}
setAutoSubmit={this.props.userActions.setAutoSubmit}
annotationCategories={this.props.annotationCategories}/>
- </Col>
- </Row>
- </Grid>
+ </div>
+ </div>
+ </div>
</section>
</div>
</div>
--- a/client/src/components/SessionForm.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionForm.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Panel, FormGroup, ControlLabel, FormControl, Collapse } from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
import '../App.css';
import * as sessionsActions from '../actions/sessionsActions';
import * as authActions from '../actions/authActions';
@@ -55,40 +55,42 @@
}
return (
- <Panel>
- <form onSubmit={ e => { e.preventDefault() } }>
- <FormGroup>
- <ControlLabel>Title</ControlLabel>
- <FormControl
- name="title"
- defaultValue={ this.props.currentSession.title }
- onChange={ this.onChange }
- type="text"
- placeholder="Enter a title"
- />
- </FormGroup>
- <FormGroup>
- <ControlLabel>Description</ControlLabel>
- <FormControl
- name="description"
- componentClass="textarea"
- defaultValue={ this.props.currentSession.description }
- onChange={ this.onChange }
- placeholder="Enter a description"
- />
- </FormGroup>
- <FormGroup>
- <ControlLabel>Group</ControlLabel>
- <p>{this.props.currentSession.group}</p>
- </FormGroup>
- <FormGroup>
- <ControlLabel onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</ControlLabel>
- <Collapse in={this.state.protocolOpen}>
- <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
- </Collapse>
- </FormGroup>
- </form>
- </Panel>
+ <div className="panel-default">
+ <div class="panel-body">
+ <form onSubmit={ e => { e.preventDefault() } }>
+ <div className="form-group">
+ <label className="control-label">Titre</label>
+ <input className="form-control"
+ name="title"
+ defaultValue={ this.props.currentSession.title }
+ onChange={ this.onChange }
+ type="text"
+ placeholder="Entrez un titre"
+ />
+ </div>
+ <div className="form-group">
+ <label className="control-label">Description</label>
+ <input className="form-control"
+ type="textarea"
+ name="description"
+ defaultValue={ this.props.currentSession.description }
+ onChange={ this.onChange }
+ placeholder="Entrez une description"
+ />
+ </div>
+ <div className="form-group">
+ <label className="control-label">Group</label>
+ <p>{this.props.currentSession.group}</p>
+ </div>
+ <div className="form-group">
+ <label className="control-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label>
+ <Collapse in={this.state.protocolOpen}>
+ <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
+ </Collapse>
+ </div>
+ </form>
+ </div>
+ </div>
);
}
}
--- a/client/src/components/SessionList.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionList.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,9 +1,10 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, ListGroup, ListGroupItem, Button, Modal } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
import moment from 'moment';
import '../App.css';
+import './SessionList.css';
import Navbar from './Navbar';
import * as sessionsActions from '../actions/sessionsActions';
import uuidV1 from 'uuid/v1';
@@ -68,34 +69,33 @@
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3}>
- <ListGroup>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3">
+ <ul className="list-group">
{this.props.sessions.map((session) =>
- <ListGroupItem key={session.get('_id')}>
+ <li className="list-group-item" key={session.get('_id')}>
<span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span>
- <a className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
+ <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
<span className="material-icons">delete</span>
</a>
- </ListGroupItem>
+ </li>
)}
- </ListGroup>
- <Button bsStyle="success" onClick={this.createSession}>Create new session</Button>
- </Col>
- </Row>
- </Grid>
+ </ul>
+ <button type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
+ </div>
+ </div>
+ </div>
<Modal show={ this.state.showModal } onHide={ this.closeModal }>
<Modal.Body>
- Are you sure?
+ Êtes-vous sûr(e) ?
</Modal.Body>
<Modal.Footer>
- <Button bsStyle="primary" onClick={ this.deleteSession }>Confirm</Button>
- <Button onClick={ this.closeModal }>Close</Button>
+ <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
+ <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button>
</Modal.Footer>
</Modal>
-
</div>
);
}
--- a/client/src/components/SessionSummary.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionSummary.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,20 +1,19 @@
import React from 'react';
-import { ListGroup, ListGroupItem } from 'react-bootstrap';
import _ from 'lodash';
import '../App.css';
import {formatTimestamp} from '../utils';
const SessionSummary = ({notes}) => (
- <ListGroup>
+ <ul className="list-group">
{notes.map((note) =>
- <ListGroupItem key={note.get('_id')}>
+ <li className="list-group-item" key={note.get('_id')}>
<a href={'#note-' + note.get('_id')}>
<span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
<span className="pull-right">{_.words(note.plain).length} words</span>
</a>
- </ListGroupItem>
+ </li>
)}
- </ListGroup>
+ </ul>
)
export default SessionSummary;
--- a/client/src/components/Settings.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Settings.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Button, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
import '../App.css';
import Navbar from './Navbar';
import * as userActions from '../actions/userActions';
@@ -24,33 +23,33 @@
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3}>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3">
<form>
- <FormGroup>
- <ControlLabel>First name</ControlLabel>
- <FormControl
+ <div className="form-group">
+ <label className="control-label">Prénom</label>
+ <input className="form-control"
name="firstname"
defaultValue={ firstname }
- placeholder="First Name"
- inputRef={ ref => { this.firstname = ref; } }
+ placeholder="Entrez un prénom"
+ ref={(firstname) => { this.firstname = firstname; }}
/>
- </FormGroup>
- <FormGroup>
- <ControlLabel>Last name</ControlLabel>
- <FormControl
+ </div>
+ <div className="form-group">
+ <label className="control-label">Nom</label>
+ <input className="form-control"
name="lastname"
defaultValue={ lastname }
- placeholder="Last Name"
- inputRef={ ref => { this.lastname = ref; } }
+ placeholder="Entrez un nom"
+ ref={(lastname) => { this.lastname = lastname; }}
/>
- </FormGroup>
+ </div>
</form>
- <Button block bsStyle="success" onClick={this.updateSettings}>Save settings</Button>
- </Col>
- </Row>
- </Grid>
+ <button type="submit" className="btn btn-primary btn-lg" onClick={this.updateSettings}>Enregistrer</button>
+ </div>
+ </div>
+ </div>
</div>
);
}
--- a/client/src/components/SlateEditor.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SlateEditor.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
import { Editor, Plain, Raw } from 'slate'
import React from 'react'
import Portal from 'react-portal'
-import { Button } from 'react-bootstrap'
import Immutable from 'immutable'
import HtmlSerializer from '../HtmlSerializer'
import AnnotationPlugin from '../AnnotationPlugin'
@@ -439,7 +438,7 @@
return (
<div className="checkbox">
<label>
- <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note
+ <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Entrée</kbd>= Ajouter une note
</label>
</div>
)
@@ -449,9 +448,9 @@
return (
<div>
{ !this.props.note && this.renderToolbarCheckbox() }
- <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
- { this.props.note ? 'Save note' : 'Add note' }
- </Button>
+ <button type="button" className="btn btn-primary btn-lg" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
+ { this.props.note ? 'Save note' : 'Ajouter' }
+ </button>
</div>
);
}