# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1535533356 -7200
# Node ID 97536386b3974f4bab98a64765263c260c58bac4
# Parent  298d0373812ec2e040cc0443d155ee769947ffc3
Improve Modals display and sessions list

diff -r 298d0373812e -r 97536386b397 client/src/components/Navbar.js
--- 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>
diff -r 298d0373812e -r 97536386b397 client/src/components/Navbar.scss
--- 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;
+}
diff -r 298d0373812e -r 97536386b397 client/src/components/NoteList.scss
--- /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;
+}
diff -r 298d0373812e -r 97536386b397 client/src/components/NotesList.js
--- 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>
diff -r 298d0373812e -r 97536386b397 client/src/components/SessionList.js
--- 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>
diff -r 298d0373812e -r 97536386b397 client/src/components/SessionList.scss
--- 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;
+}