--- a/client/src/components/Navbar.js Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/Navbar.js Wed Aug 29 11:02:36 2018 +0200
@@ -159,17 +159,17 @@
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <div className="modal-content">
- <div className="modal-body">
- <p className="text-center">
+ <div id="logout-modal" className="modal-content text-center">
+ {/* <div className="modal-body"> */}
+ <button type="button" id="logout-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <span className="material-icons modal-warning">warning</span>
+ <p className="modal-text">
Certaines données n'ont pas encore été sauvegardées.
<br />
Si vous continuez, elles seront perdues.
</p>
- </div>
<div className="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.handleModalCloseRequest}>Fermer</button>
+ <button type="button" className="btn btn-primary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/Navbar.scss Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/Navbar.scss Wed Aug 29 11:02:36 2018 +0200
@@ -47,3 +47,82 @@
padding: 16px;
font-weight: bold;
}
+
+#logout-modal{
+ padding-top: 2%;
+ margin-top: 20%;
+
+ -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+ -moz-animation: fadein 0.5s; /* Firefox < 16 */
+ -ms-animation: fadein 0.5s; /* Internet Explorer */
+ -o-animation: fadein 0.5s; /* Opera < 12.1 */
+ animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+#logout-close-modal-button{
+ margin-top: -2.5%;
+ margin-right: -1%;
+ background-color: transparent;
+ border: transparent;
+}
+
+#logout-close-modal-button:hover{
+ background-color: transparent;
+ border: transparent;
+ color: #769FED;
+}
+
+.modal-text{
+ margin-top: 10%;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.modal-warning{
+ color:#F95B5B;
+ font-size:60px;
+ padding:0;
+ margin-top: 5%;
+ margin-right: -5%;
+}
+
+#logout-modal-button {
+ padding: 1.5%;
+ margin-top: 5%;
+ margin-right: 40%;
+ width: 20%;
+ font-size: 14px;
+}
+
+.modal-footer{
+ border: white;
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/NoteList.scss Wed Aug 29 11:02:36 2018 +0200
@@ -0,0 +1,70 @@
+#delete-note-modal{
+ padding-top: 2%;
+ margin-top: 30%;
+
+ -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+ -moz-animation: fadein 0.5s; /* Firefox < 16 */
+ -ms-animation: fadein 0.5s; /* Internet Explorer */
+ -o-animation: fadein 0.5s; /* Opera < 12.1 */
+ animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+#delete-note-close-modal-button{
+ margin-top: -2.5%;
+ margin-right: -1%;
+ background-color: transparent;
+ border: transparent;
+}
+
+#delete-note-close-modal-button:hover {
+ background-color: transparent;
+ border: transparent;
+ color: #769FED;
+}
+
+.modal-text{
+ margin-top: 10%;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+#delete-note-modal-button {
+ padding: 1.5%;
+ margin-top: 5%;
+ margin-right: 40%;
+ width: 20%;
+ font-size: 14px;
+}
+
+.modal-footer{
+ border: white;
+}
--- a/client/src/components/NotesList.js Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/NotesList.js Wed Aug 29 11:02:36 2018 +0200
@@ -3,6 +3,7 @@
import Immutable from 'immutable';
import Modal from 'react-modal';
import Note from './Note';
+import './NoteList.css';
class NotesList extends Component {
constructor(props) {
@@ -88,13 +89,11 @@
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <div className="modal-content">
- <div className="modal-body">
- Êtes vous sûr(e) ?
- </div>
+ <div id="delete-note-modal" className="modal-content text-center">
+ <button type="button" id="delete-note-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette note ?</span>
<div className="modal-footer">
- <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirmer</button>
- <button type="submit" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+ <button type="button" className="btn btn-primary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/SessionList.js Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/SessionList.js Wed Aug 29 11:02:36 2018 +0200
@@ -15,10 +15,30 @@
constructor(props) {
super(props);
- this.state = {
+ this.state = {
+ show: false,
modalIsOpen: false,
sessionToDelete: null,
- };
+ }
+ this.doSomething = this.doSomething.bind(this);
+ this.toggleShow = this.toggleShow.bind(this);
+ this.hide = this.hide.bind(this);
+ }
+
+ doSomething(e){
+ e.preventDefault();
+ console.log(e.target.innerHTML);
+ }
+
+ toggleShow(){
+ this.setState({show: !this.state.show});
+ }
+
+ hide(e){
+ if(e && e.relatedTarget){
+ e.relatedTarget.click();
+ }
+ this.setState({show: false});
}
openModal = () => {
@@ -82,23 +102,34 @@
render() {
return (
<div>
- <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
+ <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
<Navbar history={this.props.history} />
+ <div className="top-fade"></div>
<div className="container-fluid">
<div className="row">
{this.props.sessions.map((session) =>
- <a className="sessions" href="#session" key={"session_"+session.get('_id')} onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
- <div className="col-md-4 session" key={session.get('_id')}>
- <span className="session-title">{session.title || ''}<br /></span>
- <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
- <span className="session-description">{session.description}<br /></span>
- <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
- <span className="material-icons">delete</span>
- </a>
+ <div>
+ <div className="col-md-4 session" key={session.get('_id')}>
+ <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
+ <span className="session-title">{session.title || 'Session sans titre'}<br /></span>
+ <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
+ <span className="session-description">{session.description}<br /></span>
+ </a>
+ <button className="btn btn-link pull-left" key={session.get('_id')} id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
+ <span className="material-icons edit">edit</span>
+ </button>
+ {
+ this.state.show &&
+ (
+ <button type="button" className="btn btn-link pull-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
+ <span className="material-icons delete">delete</span>
+ </button>
+ )
+ }
+ </div>
</div>
- </a>
)}
- </div>
+ </div>
</div>
<Modal
className="Modal__Bootstrap modal-dialog"
@@ -106,13 +137,13 @@
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <div className="modal-content">
- <div className="modal-body">
- Êtes-vous sûr(e) ?
- </div>
+ <div id="delete-session-modal" className="modal-content text-center">
+ <button type="button" id="delete-session-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ {/* <div className="modal-body"> */}
+ <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
+ {/* </div> */}
<div className="modal-footer">
- <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.handleModalCloseRequest }>Fermer</button>
+ <button type="button" className="btn btn-primary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/SessionList.scss Tue Aug 28 18:52:12 2018 +0200
+++ b/client/src/components/SessionList.scss Wed Aug 29 11:02:36 2018 +0200
@@ -1,17 +1,6 @@
-#session-button {
- font-size: 18px;
- font-weight: bold;
- padding: 15px 15px;
- width: 400px;
- align-content: center;
- top: -10%;
- position:fixed;
- z-index: 1;
-}
-
-#session-button:hover {
- background-color: #769FED;
- top: -5%;
+.top-fade {
+ width: max-content;
+ height: 80px;
}
a.sessions{
@@ -19,10 +8,9 @@
}
.session {
- padding-top: 10%;
- padding-left: 3%;
- padding-right: 3%;
- padding-bottom: -20%;
+ padding-top: 5%;
+ padding-bottom: 1%;
+ padding-left: 5%;
}
span.session-title {
@@ -41,8 +29,86 @@
font-weight: 700;
}
-.material-icons{
- margin: 5%;
+#toggle-edit {
+ padding-top:-20%;
+}
+
+.edit{
+ font-size: 17px;
+}
+
+.delete{
+ font-size: 16px;
+ color: black;
+}
+
+#delete-session-modal{
+ padding-top: 2%;
+ margin-top: 30%;
+
+ -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+ -moz-animation: fadein 0.5s; /* Firefox < 16 */
+ -ms-animation: fadein 0.5s; /* Internet Explorer */
+ -o-animation: fadein 0.5s; /* Opera < 12.1 */
+ animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
}
+/* Internet Explorer */
+@-ms-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+#delete-session-close-modal-button{
+ margin-top: -2.5%;
+ margin-right: -1%;
+ background-color: transparent;
+ border: transparent;
+}
+
+#delete-session-close-modal-button:hover{
+ background-color: transparent;
+ border: transparent;
+ color: #769FED;
+}
+
+.modal-text{
+ margin-top: 10%;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+#delete-session-modal-button {
+ padding: 1.5%;
+ margin-top: 5%;
+ margin-right: 40%;
+ width: 20%;
+ font-size: 14px;
+}
+
+.modal-footer{
+ border: white;
+}