--- a/client/src/App.scss Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/App.scss Mon Oct 08 04:09:19 2018 +0200
@@ -1,195 +1,13 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.App {
- text-align: center;
-}
-
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 80px;
-}
-
-.App-header {
- background-color: #222;
- height: 150px;
- padding: 20px;
- color: white;
-}
-
-.App-intro {
- font-size: large;
-}
-
-.toolbar-menu {
- padding-bottom: 10px;
- border-bottom: 2px solid #eee;
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- .button {
- color: #ccc;
- cursor: pointer;
- margin-right: 10px;
- }
- .button[data-active="true"] {
- color: black;
- }
- > *:last-child {
- margin-left: auto;
- .checkbox {
- display: inline-block;
- margin-right: 10px;
- }
- }
-}
-
-.navbar {
- .material-icons {
- font-size: 20px;
- line-height: 20px;
- }
-}
-
-.hovering-menu {
- position: absolute;
- z-index: 1;
- top: -10000px;
- left: -10000px;
- margin-top: -20px;
- opacity: 0;
- transition: opacity .75s;
-}
-
-.categories-tooltip {
- background-color: #efefef;
- border-radius: 4px;
- border: 1px solid #ccc;
- padding: 5px;
- .buttons {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- button {
- background-color: yellow;
- border: 1px solid #ccc;
- }
- button:not(:last-child) {
- margin-right: 10px;
- }
- }
- .form-group:last-child {
- margin-bottom: 0;
- }
-}
-
-.editor {
- display: flex;
- margin-bottom: 10px;
- &-left {
- width: 66.6666%;
- border: 1px solid #efefef;
- padding: 20px;
- }
- &-right {
- width: 33.3333%;
- padding-left: 20px;
- .form-control {
- height: 100%;
- }
- }
-}
-
-.session-container {
- position: absolute;
- top: 71px;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- .session-notes {
- overflow-y: hidden;
- width: 100%;
- display: flex;
- flex: 1;
- > * {
- padding-left: ($grid-gutter-width / 2);
- padding-right: ($grid-gutter-width / 2);
- }
- .notes-affix {
- min-width: 25%;
- > *:first-child {
- max-height: calc(100% - 20px);
- overflow-y: auto;
- }
- }
- .notes-list {
- min-width: 75%;
- overflow-y: auto;
- }
- }
-}
-
-@keyframes App-logo-spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-.note {
- display: flex;
- position: relative;
- padding: 20px 10px 20px 80px;
- margin-bottom: 10px;
- cursor: pointer;
- // min-height: ($line-height-computed * 4);
- border: 1px solid transparent;
-
- &:before {
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- left: 37px;
- z-index: -1;
- display: block;
- width: 2px;
- background-color: #e6ebf1;
- }
-
- &:hover {
- border: 1px solid #efefef;
- }
-
- .start, .finish {
- position: absolute;
- background-color: #fff;
- }
-
- .start {
- top: 0;
- left: 0;
- padding: 20px 0 0 10px;
- }
- .finish {
- bottom: 0;
- left: 0;
- padding: 0 0 10px 10px;
- }
-
- &-content {
- width: 66.6666%;
- }
-
- &-margin-comment {
- width: 33.3333%;
- padding-left: 15px;
- }
-}
-
span.annotation {
background-color: yellow;
text-decoration-line: underline;
text-decoration-style: dotted;
}
+
+.ReactModal__Overlay {
+ z-index: 1020;
+}
+
+a {
+ cursor: pointer;
+}
--- a/client/src/components/CategoriesTooltip.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CategoriesTooltip.js Mon Oct 08 04:09:19 2018 +0200
@@ -50,7 +50,7 @@
{this.props.categories.map((category) =>
<button type="button"
key={ category.name }
- className="btn btn-primary"
+ className="btn btn-sm text-secondary"
style={{ backgroundColor: category.color }}
active={ this.isCategoryActive(category) }
onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</button>
--- a/client/src/components/Clock.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Clock.js Mon Oct 08 04:09:19 2018 +0200
@@ -23,7 +23,7 @@
render() {
return (
- <span className="label label-info">{ this.state.time }</span>
+ <span className="text-warning bg-success">{ this.state.time }</span>
);
}
}
--- a/client/src/components/CreateGroup.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CreateGroup.js Mon Oct 08 04:09:19 2018 +0200
@@ -88,12 +88,12 @@
</div>
<div className="form-group mb-2" /*validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }*/>
<label className="col-form-label text-secondary font-weight-bold mt-2">Description</label>
- <textarea className="form-control bg-secondary text-primary border-0 w-100" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Entrez une description de groupe" row="3"></textarea>
+ <textarea className="form-control bg-secondary text-primary border-0 w-100" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Entrez une description de groupe"></textarea>
{/* { this.renderErrorMessage(errorMessages, 'description') } */}
</div>
{/* { this.renderNonFieldErrors(errorMessages) } */}
<div className="text-center">
- <button type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled}>Créer</button>
+ <button type="submit" value="Submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled} onClick={this.submit}>Créer</button>
<button type="button" className="btn btn-danger text-muted btn-lg font-weight-bold" onClick={this.cancel}>Annuler</button>
</div>
</form>
--- a/client/src/components/CreateSession.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CreateSession.js Mon Oct 08 04:09:19 2018 +0200
@@ -78,14 +78,13 @@
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <div className="modal-content bg-primary w-75">
- <div className="modal-body">
+ <div className="modal-content bg-primary w-75 mt-5">
+ <div className="modal-body mt-3">
<form onSubmit={ e => { e.preventDefault() } }>
<div className="form-group">
<label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
<input className="form-control text-primary w-100"
name="title"
- // defaultValue={ this.props.currentSession.title }
onChange={ this.onChange }
type="text"
placeholder="Entrez un titre"
@@ -96,16 +95,15 @@
<textarea className="form-control text-primary w-100"
type="textarea"
name="description"
- // defaultValue={ this.props.currentSession.description }
onChange={ this.onChange }
placeholder="Entrez une description"
></textarea>
</div>
<div className="form-group">
<label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label>
- <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
+ <div className={ "collapse" + (this.state.protocolOpen?'in':'')} >
{/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
- <pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
+ <pre className="text-secondary">{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
</div>
</div>
<div className="text-center">
--- a/client/src/components/CreateSession.scss Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CreateSession.scss Mon Oct 08 04:09:19 2018 +0200
@@ -3,7 +3,7 @@
}
#session-button {
- font-size: 22px;
+ font-size: 1.5rem;
cursor: pointer;
}
--- a/client/src/components/Login.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Login.js Mon Oct 08 04:09:19 2018 +0200
@@ -77,12 +77,12 @@
<form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
<div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
<label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
- <input className="form-control bg-danger text-muted" type="text" onChange={this.handleInputChange} name="username" />
+ <input className="form-control bg-danger border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" />
{/* { this.renderErrorMessage(errorMessages, 'username') } */}
</div>
<div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
<label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
- <input className="form-control bg-danger text-muted" type="password" onChange={this.handleInputChange} name="password" />
+ <input className="form-control bg-danger border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" />
{/* { this.renderErrorMessage(errorMessages, 'password') } */}
</div>
{/* { this.renderNonFieldErrors(errorMessages) } */}
--- a/client/src/components/Navbar.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Navbar.js Mon Oct 08 04:09:19 2018 +0200
@@ -149,7 +149,7 @@
<div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
- <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
+ <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
</li>
</ul>
<ul className="navbar-nav navbar-center">
@@ -169,7 +169,7 @@
</ul>
</div>
<Modal
- className="Modal__Bootstrap modal-dialog mt-5 pt-5"
+ className="Modal__Bootstrap modal-dialog modal-dialog-centered"
// closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
@@ -177,13 +177,13 @@
<div id="logout-modal" className="modal-content">
<span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
<div className="modal-body text-center">
- <span className="material-icons modal-warning">warning</span>
+ <span className="material-icons modal-warning text-info pb-5">warning</span>
<p className="modal-text">
- Certaines données n'ont pas encore été sauvegardées.
+ Certaines sessions n'ont pas encore été sauvegardées.
<br />
Si vous continuez, elles seront perdues.
</p>
- <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+ <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
</div>
</div>
</Modal>
@@ -205,7 +205,7 @@
isSynchronizing: isSynchronizing(state),
isSynchronized: isSynchronized(state),
currentGroup: getCurrentGroup(state),
- groups: getGroups(state)
+ groups: getGroups(state),
};
}
--- a/client/src/components/Navbar.scss Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Navbar.scss Mon Oct 08 04:09:19 2018 +0200
@@ -88,10 +88,9 @@
}
.modal-warning{
- color:#F95B5B;
- font-size:60px;
+ font-size: 4rem;
}
#logout-modal-button {
- font-size: 14px;
+ font-size: .9rem;
}
--- a/client/src/components/Note.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Note.js Mon Oct 08 04:09:19 2018 +0200
@@ -2,6 +2,7 @@
import PropTypes from 'prop-types';
import { formatTimestamp } from '../utils';
import SlateEditor from './SlateEditor';
+import './Note.css';
class Note extends Component {
@@ -18,14 +19,14 @@
const raw = this.refs.editor.asRaw();
const html = this.refs.editor.asHtml();
const categories = this.refs.editor.asCategories();
- const marginComment = this.marginComment.value;
+ // const marginComment = this.marginComment.value;
const data = {
plain,
raw,
html,
categories,
- marginComment
+ // marginComment
}
this.props.onSave(this.props.note, data);
@@ -41,7 +42,7 @@
renderNoteContent() {
if (this.props.isEditing) {
return (
- <div className="note-content">
+ <div className="note-content w-100 pl-2 pt-2">
<SlateEditor ref="editor"
onButtonClick={ this.onClickButton }
note={ this.props.note }
@@ -51,31 +52,33 @@
}
return (
- <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
+ <div className="note-content w-100 pl-2 pt-2" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
)
}
- renderNoteMarginComment() {
- if (this.props.isEditing) {
- return (
- <div className="note-margin-comment">
- <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; } } />
- ref={(marginComment) => { this.marginComment = marginComment; }} />
- </div>
- )
- }
+ // renderNoteMarginComment() {
+ // if (this.props.isEditing) {
+ // return (
+ // <div className="row">
+ // <div className="note-margin-comment w-25 mt-3">
+ // <input type="text" className="form-control"
+ // name="margin"
+ // componentClass="textarea"
+ // placeholder="Espace pour un commentaire de marge"
+ // defaultValue={ this.props.note.marginComment }
+ // // inputRef={ ref => { this.marginComment = ref; } } />
+ // ref={(marginComment) => { this.marginComment = marginComment; }} />
+ // </div>
+ // </div>
+ // )
+ // }
- return (
- <div className="note-margin-comment">
- <small className="text-muted">{ this.props.note.marginComment }</small>
- </div>
- )
- }
+ // return (
+ // <div className="note-margin-comment w-25 mt-5">
+ // <small className="text-muted">{ this.props.note.marginComment }</small>
+ // </div>
+ // )
+ // }
renderNoteRight() {
if (this.props.isEditing) {
@@ -95,13 +98,17 @@
render() {
return (
- <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }>
- <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
- <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
+ <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1" onClick={ this.props.onClick }>
+ <div className="mr-5">
+ <small className="start text-warning pt-2">{ formatTimestamp(this.props.note.startedAt) }</small>
+ <small className="finish text-warning pb-2">{ formatTimestamp(this.props.note.finishedAt) }</small>
+ </div>
{ this.renderNoteContent() }
- { this.renderNoteMarginComment() }
+ {/* { this.renderNoteMarginComment() } */}
+ <div className="float-right">
{ this.renderNoteRight() }
- </div>
+ </div>
+ </div>
);
};
}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Note.scss Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,52 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.note {
+ min-width: 95%;
+ display: flex;
+ position: relative;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ cursor: pointer;
+ min-height: ($line-height-base * 4);
+
+ &:before {
+ content: "";
+
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: -1;
+ display: block;
+ width: 2px;
+ }
+
+ &:hover {
+ // opacity: .6;
+ border-bottom-color: black;
+ }
+
+ .start, .finish {
+ position: absolute;
+ padding-right: 5rem;
+ font-size: .72rem;
+ }
+
+ .start {
+ top: 0;
+ left: 0;
+ }
+ .finish {
+ bottom: 0;
+ left: 0;
+ }
+
+ &-content {
+ min-width: 95%;
+ font-size: .8rem;
+
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ }
+}
+
--- a/client/src/components/NoteInput.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/NoteInput.js Mon Oct 08 04:09:19 2018 +0200
@@ -2,7 +2,7 @@
import PropTypes from 'prop-types';
import SlateEditor from './SlateEditor';
import { now } from '../utils';
-
+import './NoteInput.css';
class NoteInput extends Component {
@@ -35,9 +35,11 @@
startedAt: this.state.startedAt,
finishedAt: now(),
categories: categories,
+
// marginComment: marginComment,
});
+
this.refs.editor.clear();
setTimeout(() => this.refs.editor.focus(), 250);
}
@@ -54,8 +56,8 @@
render() {
return (
<form>
- <div className="editor p-3 mb-3">
- <div className="editor-left w-100 border-0 pl-3 pb-3 sticky-bottom">
+ <div className="editor mb-3">
+ <div className="editor-left sticky-bottom px-2">
<SlateEditor ref="editor"
onChange={this.onEditorChange}
onEnterKeyDown={this.onAddNoteClick}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/NoteInput.scss Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,26 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.editor {
+ display: flex;
+ &-left {
+ border: .125rem solid;
+ // border-color: transparent;
+ border-color: #769FED;
+ border-radius: .5rem;
+ max-height: 8.5rem;
+ height: 8.5rem;
+ width: 97%;
+ overflow-y: auto;
+ }
+ // &-left:hover {
+ // border-color: #769FED;
+ // }
+
+ // &-right {
+ // white-space: pre-wrap;
+ // overflow-wrap: break-word;
+ // .form-control {
+ // min-width: 25%;
+ // }
+}
--- a/client/src/components/NoteList.scss Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/NoteList.scss Mon Oct 08 04:09:19 2018 +0200
@@ -49,9 +49,9 @@
}
.modal-text{
- font-size: 16px;
+ font-size: .9rem;
}
#delete-note-modal-button {
- font-size: 14px;
+ font-size: .8rem;
}
--- a/client/src/components/NotesList.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/NotesList.js Mon Oct 08 04:09:19 2018 +0200
@@ -21,12 +21,6 @@
}
}
- // componentDidUpdate(prevProps) {
- // if (this.props.notes.size > prevProps.notes.size) {
- // this.node.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})
- // }
- // }
-
componentWillMount() {
Modal.setAppElement('body');
}
--- a/client/src/components/Register.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Register.js Mon Oct 08 04:09:19 2018 +0200
@@ -52,22 +52,22 @@
<form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
<div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
<label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
- <input className="form-control bg-danger text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
+ <input className="form-control bg-danger border-0 text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
{/* { this.renderErrorMessage(errorMessages, 'username') } */}
</div>
<div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
<label className="col-form-label text-primary font-weight-bold mt-2">Email</label>
- <input className="form-control bg-danger text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
+ <input className="form-control bg-danger border-0 text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
{/* { this.renderErrorMessage(errorMessages, 'email') } */}
</div>
<div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
<label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
- <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
+ <input className="form-control bg-danger border-0 text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
{/* { this.renderErrorMessage(errorMessages, 'password1') } */}
</div>
<div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
<label className="col-form-label text-primary font-weight-bold mt-2">Confirmer le mot de passe</label>
- <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
+ <input className="form-control bg-danger border-0 text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
{/* { this.renderErrorMessage(errorMessages, 'password2') } */}
</div>
<div className="text-center mr-5 pr-5">
--- a/client/src/components/Session.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Session.js Mon Oct 08 04:09:19 2018 +0200
@@ -2,6 +2,7 @@
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import '../App.css';
+import './Session.css';
import Navbar from './Navbar';
import NoteInput from './NoteInput';
import NotesList from './NotesList';
@@ -21,12 +22,11 @@
<Navbar history={this.props.history} />
<div className="session-container">
<div className="session-notes">
- <div className="notes-affix">
- <SessionSummary notes={this.props.notes} />
- </div>
+ <div className="notes-affix">
+ <SessionSummary notes={this.props.notes} />
+ </div>
<div className="notes-list">
<SessionForm session={this.props.currentSession} />
- <hr />
<NotesList
notes={this.props.notes}
deleteNote={this.props.notesActions.deleteNote}
@@ -34,11 +34,11 @@
annotationCategories={this.props.annotationCategories}
/>
</div>
- </div>
- <section className="editor-fixed">
+ </div>
+ <section className="editor-fixed pl-5">
<div className="container-fluid">
<div className="row">
- <div className="col-lg-9 offset-md-3">
+ <div className="col-lg-10 offset-md-2">
<NoteInput
session={this.props.currentSession}
autoSubmit={this.props.autoSubmit}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Session.scss Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,38 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+ .session-container {
+ position: absolute;
+ top: 4rem;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ // justify-content: flex-end;
+ justify-content: flex;
+ overflow-y: hidden;
+ .session-notes {
+ overflow-y: hidden;
+ width: 100%;
+ display: flex;
+ flex: 1;
+ > * {
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
+ }
+ .notes-affix {
+ min-width: 17%;
+ max-width: 17%;
+ > *:first-child {
+ max-height: calc(100%);
+ overflow-y: auto;
+ }
+ }
+ .notes-list {
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+ }
+}
--- a/client/src/components/SessionForm.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionForm.js Mon Oct 08 04:09:19 2018 +0200
@@ -11,26 +11,37 @@
state = {
createGroup: false,
- protocolOpen: false
- }
-
- onChange = (e) => {
- const { name, value } = e.target;
- const changes = { [name]: value }
- this.onChangeThrottle(changes);
+ protocolOpen: false,
+ titleEditMode: false,
+ descriptionEditMode: false,
+ enterKeyValue: false,
}
- onChangeThrottle = _.debounce((changes) => {
- this.props.sessionsActions.updateSession(this.props.currentSession, changes);
- }, 750)
+onChange = (e) => {
+ const { name, value } = e.target;
+ const changes = { [name]: value }
+ this.onChangeThrottle(changes);
+}
+
+onChangeThrottle = _.debounce((changes) => {
+ this.props.sessionsActions.updateSession(this.props.currentSession, changes);
+}, 750)
+
+onGroupChange = (e) => {
+ const groupName = e.target.value;
- onGroupChange = (e) => {
- const groupName = e.target.value;
+ const group = this.props.groups.find((g) => g.get('name') === groupName);
+
+ this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
+}
- const group = this.props.groups.find((g) => g.get('name') === groupName);
+componentDidMount() {
+ document.addEventListener('mousedown', this.handleClickOutside);
+}
- this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
- }
+componentWillUnmount() {
+ document.removeEventListener('mousedown', this.handleClickOutside);
+}
componentWillUpdate = (nextProps, nextState) => {
if (nextState.createGroup && nextProps.createGroup.get('success')) {
@@ -45,6 +56,129 @@
});
}
+ toggleOnTitleEditMode = (e) => {
+ e.preventDefault();
+ this.setState({
+ titleEditMode: true,
+ });
+ }
+
+ toggleOnDescriptionEditMode = (e) => {
+ e.preventDefault();
+ this.setState({
+ descriptionEditMode: true,
+ });
+ }
+
+ toggleOffTitleEditMode = (e) => {
+ e.preventDefault();
+ this.setState({
+ titleEditMode: false,
+ });
+ }
+
+ toggleOffDescriptionEditMode = (e) => {
+ e.preventDefault();
+ this.setState({
+ descriptionEditMode: false,
+ });
+ }
+
+ handleClickOutside = (e) => {
+ if (this.title && !this.title.contains(e.target)) {
+ this.toggleOffTitleEditMode(e)
+ }
+
+ if (this.desc && !this.desc.contains(e.target)) {
+ this.toggleOffDescriptionEditMode(e)
+ }
+ }
+
+ saveEdit = (e) => {
+
+ e.preventDefault();
+
+ if (e.key === 'Enter') {
+ this.setState({enterKeyValue: true})
+ }
+
+ if (e.key !== 'Enter') {
+ this.setState({enterKeyValue: false})
+ }
+
+ if (e.key === 'Enter' && this.state.enterKeyValue === true) {
+
+ e.preventDefault();
+ this.setState({
+ enterKeyValue: false,
+ titleEditMode: false,
+ descriptionEditMode: false,
+ })
+ }
+ }
+
+ titleEditMode = () => {
+
+ if (this.state.titleEditMode === false) {
+ return (
+ <div
+ onClick={this.toggleOnTitleEditMode}
+ className='session-page-title border-0 bg-success text-muted ml-3'
+ >
+ { this.props.currentSession.title || 'Espace titre' }
+ </div>
+ );
+ }
+
+ if (this.state.titleEditMode === true) {
+ return (
+ <div className="form-group pr-5">
+ <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3'
+ onKeyDown={ this.saveEdit }
+ onChange={ this.onChange }
+ type="textarea"
+ name="title"
+ defaultValue={ this.props.currentSession.title || 'Espace titre' }
+ placeholder="Espace titre"
+ ref={title => this.title = title}
+ >
+ </textarea>
+ </div>
+ );
+ }
+ }
+
+ descriptionEditMode = () => {
+
+ if (this.state.descriptionEditMode === false) {
+ return (
+ <div
+ onClick={this.toggleOnDescriptionEditMode}
+ className="session-page-description border-0 bg-success text-muted ml-3"
+ >
+ { this.props.currentSession.description || 'Espace description' }
+ </div>
+ );
+ }
+
+ if (this.state.descriptionEditMode === true) {
+ return (
+ <div className="form-group mt-2 pb-2">
+ <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3"
+ onKeyDown={ this.saveEdit }
+ onChange={ this.onChange }
+ type="textarea"
+ name="description"
+ defaultValue={ this.props.currentSession.description || 'Espace description' }
+ placeholder="Espace description"
+ ref={desc => this.desc = desc}
+ >
+ </textarea>
+ </div>
+ );
+ }
+}
+
render() {
if (!this.props.currentSession) {
@@ -54,39 +188,21 @@
}
return (
- <div className="panel-default">
- <div className="card-body">
+ <div className="session-page-panel panel-default sticky-top">
+ <div className="session-page-card card-body bg-secondary pr-5">
<form onSubmit={ e => { e.preventDefault() } }>
- <div className="form-group">
- <label className="col-form-label text-primary">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="col-form-label text-primary">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">
+ {this.titleEditMode()}
+ {this.descriptionEditMode()}
+ {/* <div className="form-group">
<label className="col-form-label">Group</label>
<p>{this.props.currentSession.group}</p>
- </div>
- <div className="form-group">
+ </div> */}
+ {/* <div className="form-group">
<label className="col-form-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label>
- <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
+ <div className={ "collapse" + (this.state.protocolOpen?'in':'')} >
<pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
</div>
- </div>
+ </div> */}
</form>
</div>
</div>
--- a/client/src/components/SessionForm.scss Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionForm.scss Mon Oct 08 04:09:19 2018 +0200
@@ -2,3 +2,37 @@
font-size: 1rem;
cursor: pointer;
}
+
+.session {
+
+ &-page-panel {
+ z-index: 5;
+ }
+
+ &-page-card {
+ background: linear-gradient(white, transparent);
+ }
+
+ &-page-title{
+ font-size: 1.8rem;
+ resize: auto;
+ font-weight: bolder;
+ overflow: hidden;
+ height: auto;
+ transition: height 0.2s ease;
+ box-sizing: border-box;
+ line-height: 1.1;
+ }
+
+ &-page-description{
+ font-size: .9rem;
+ resize: auto;
+ overflow: hidden;
+ height: auto;
+ transition: height 0.2s ease;
+ box-sizing: border-box;
+ }
+}
+
+
+
--- a/client/src/components/SessionSummary.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionSummary.js Mon Oct 08 04:09:19 2018 +0200
@@ -1,16 +1,18 @@
import React from 'react';
import _ from 'lodash';
import '../App.css';
+import './SessionSummary.css'
import {formatTimestamp} from '../utils';
const SessionSummary = ({notes}) => (
- <ul className="list-group">
+ <ul className="list-group sticky-left">
{notes.map((note) =>
- <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="float-right">{_.words(note.plain).length} words</span>
- </a>
+ <li className="list-group-item border-0" key={note.get('_id')}>
+ <a href={'#note-' + note.get('_id')}>
+ <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.startedAt)}</small>
+ <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small>
+ <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
+ </a>
</li>
)}
</ul>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SessionSummary.scss Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,10 @@
+.note {
+ &-length {
+ color: black;
+ font-size: .6rem;
+ }
+ &-time {
+ font-size: .7rem;
+ }
+}
+
--- a/client/src/components/SlateEditor.js Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SlateEditor.js Mon Oct 08 04:09:19 2018 +0200
@@ -7,7 +7,7 @@
import HtmlSerializer from '../HtmlSerializer'
import AnnotationPlugin from '../AnnotationPlugin'
import CategoriesTooltip from './CategoriesTooltip'
-// import './SlateEditor.css';
+import './SlateEditor.css';
import { now } from '../utils';
import { defaultAnnotationsCategories } from '../constants';
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SlateEditor.scss Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,58 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.toolbar-menu {
+ align-items: center;
+ .button {
+ cursor: pointer;
+ }
+ .material-icons {
+ font-size: 1.3rem;
+ }
+// .button[data-active="true"] {
+// }
+ > *:last-child {
+ margin-left: auto;
+ // .checkbox {
+ // display: inline-block;
+ // margin-right: 10px;
+ // }
+ }
+}
+
+#btn-editor {
+ padding: .1rem .2rem .1rem .2rem;
+ font-size: .8rem;
+ }
+
+.hovering-menu {
+ position: absolute;
+ z-index: 1;
+ top: -10000px;
+ left: -10000px;
+ margin-top: -20px;
+ opacity: 0;
+ transition: opacity .75s;
+}
+
+.categories-tooltip {
+ background-color: #efefef;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ padding: 5px;
+ .buttons {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ button {
+ background-color: yellow;
+ border: 1px solid #ccc;
+ }
+ button:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
+ .form-group:last-child {
+ margin-bottom: 0;
+ }
+}
--- a/client/src/scss/_custom.scss Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/scss/_custom.scss Mon Oct 08 04:09:19 2018 +0200
@@ -4,9 +4,16 @@
$theme-colors: (
"primary": #769FED,
"secondary": white,
- "danger": rgba(196, 196, 196, .5)
+ "danger": rgba(196, 196, 196, .5),
+ "warning": #C4C4C4,
+ "success": transparent,
+ "info": #F95B5B,
);
+$line-height-base: 1.3;
+$font-weight-normal: 500;
+$spacer: .5rem;
+
$link-color: theme-color("secondary");
$link-hover-color: darken($link-color, 15%);