Bouton de déconnection ajouté

css/header.css

@@ -179,3 +179,42 @@
 #SUBHEADER nav > span.active{
 	border-bottom-color: #2cab5f;
 }
+
+
+/* BOUTON POUR LA DÉCONNECTION */
+#SUBHEADER #LOGOUT{
+	/* position */
+	/*display: block;*/ display: none;
+	position: absolute;
+		top: 10px;
+		left: calc( 100% - 2.5em - 10px );
+		width: calc( 2.5em - 2*2px );
+		height: calc( 2.5em - 2*2px );
+	
+	/* border */
+	border-radius: 100% / 100%;
+	border: 2px solid #ccc;
+
+	/* background */
+	background: transparent url(../src/header/logout.svg) center center no-repeat;
+	background-size: 70% auto;
+	
+	/* animation */
+	transition: all .1s ease-in-out, background-size 0s;
+	-moz-transition: all .1s ease-in-out, background-size 0s;
+	-webkit-transition: all 0s;
+	-ms-transition: all .1s ease-in-out, background-size 0s;
+	-o-transition: all .1s ease-in-out, background-size 0s;
+
+	/* extra */
+	cursor: pointer;
+}
+
+/* BOUTON ACTIVÉ */
+#SUBHEADER #LOGOUT.active{ display: block; }
+
+/* BOUTON SURVOL */
+#SUBHEADER #LOGOUT:hover{
+	border-color: #28B965;
+	background-image: url(../src/header/logout@hover.svg);
+}

index.php

@@ -29,8 +29,6 @@ $memberNotifNum  = 10;
 $messageNotifNum = 0;
 $notifNotifNum   = 5;
 
-
-
 ?>
 
 
@@ -104,14 +102,19 @@ $notifNotifNum   = 5;
 			</div>
 
 			<div id='SUBHEADER'>
+				<?php if( $_SESSION['username'] == null )
+					echo "<div id='LOGOUT'></div>";
+				else
+					echo "<div id='LOGOUT' class='active'></div>";
+				?>
 
 				<nav>
-					<span data-sectname='home' class='active'>Accueil    </span>
+					<!-- <span data-sectname='home' class='active'>Accueil    </span>
 					<span data-sectname='groups'>Groupes    </span>
 					<span data-sectname='case'>Suivi      </span>
 					<span data-sectname='modules'>Modules    </span>
 					<span data-sectname='marks'>Notes      </span>
-					<span data-sectname='settings'>Paramètres </span>
+					<span data-sectname='settings'>Paramètres </span> -->
 				</nav>
 
 			</div>

js/actionScript.js

@@ -42,10 +42,14 @@ var DOM = {
 			SUBSECTIONS : document.querySelector("#SUBHEADER > nav"),
 		CONTAINER : document.querySelector('#CONTAINER'),
 	AUTHFILTER : document.querySelector('#AUTH_FILTER'),
-	AUTH       : document.querySelector('#AUTH')
+	AUTH       : document.querySelector('#AUTH'),
+	LOGOUT     : document.querySelector('#SUBHEADER #LOGOUT')
 
 };
 
+/* VRAI = utilisateur connecté */
+var connected = !( DOM.AUTH.children[0].innerHTML == 'Connection' );
+
 
 /* [1] GESTIONNAIRES DE NAVIGATION
 ==============================================================*/
@@ -177,10 +181,15 @@ var DOM = {
 
 /* [3] GESTION DE L'AUTHENTIFICATION
 ==============================================================*/
-// ouvre l'interface d'authentification quand clic sur zone verte
+// ouvre l'interface d'authentification quand click
-DOM.MENU.children[0].addEventListener('click', function(e){
+	if( !connected ) // zone verte si pas connecté
-	DOM.AUTHFILTER.className = 'active';
+		DOM.MENU.children[0].addEventListener('click', function(e){
-}, false);
+			DOM.AUTHFILTER.className = 'active';
+		}, false);
+	else             // sinon bouton de déconnection
+		DOM.LOGOUT.addEventListener('click', function(e){
+			DOM.AUTHFILTER.className = 'active';
+		}, false);
 
 // ferme l'interface d'authentification quand clic sur filtre
 DOM.AUTHFILTER.addEventListener('click', function(e){
@@ -273,10 +282,6 @@ function initForm(pForm, pHandler){
 
 
 
-/* SI ON EST PAS DEJA CONNECTE */
-var connected = !( DOM.AUTH.children[0].innerHTML == 'Connection' );
-
-
 initForm( // initialisation du formulaire de connection
 	DOM.AUTH, // formulaire (élément DOM)
 	function(request){ // handler

src/header/logout.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 128 128"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 132.28162 100.1875"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   width="100%"
+   height="100%"
+   sodipodi:docname="logout.svg"><metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs9" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="789"
+     inkscape:window-height="480"
+     id="namedview7"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="1.3037281"
+     inkscape:cx="69.503986"
+     inkscape:cy="39.059701"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><path
+     d="m 111.87056,31.893749 16.3,16.4 c 0.4,0.4 0.6,0.9 0.6,1.4 0,0.6 -0.2,1.1 -0.6,1.4 l -16.2,16.2 c -0.8,0.8 -2,0.8 -2.8,0 -0.4,-0.4 -0.6,-0.9 -0.6,-1.4 0,-0.5 0.2,-1.1 0.6,-1.4 l 12.8,-12.9 H 58.27057 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 h 63.69999 l -12.9,-12.9 c -0.4,-0.4 -0.6,-0.9 -0.6,-1.4 0,-0.5 0.2,-1 0.6,-1.4 0.7,-0.8 2,-0.8 2.8,0 z"
+     id="path3"
+     inkscape:connector-curvature="0"
+     style="fill:#cccccc;fill-opacity:1;stroke:#cccccc;stroke-width:1.89999998;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
+     d="m 45.07057,1.5937484 h 44 c 5.5,0 10,4.5 10,10.0000006 v 16.3 h -4 v -16.3 c 0,-3.3000006 -2.7,-6.0000006 -6,-6.0000006 h -44 c -3.3,0 -6,2.7 -6,6.0000006 v 77 c 0,3.3 2.7,6 6,6 h 44 c 3.3,0 6,-2.7 6,-6 v -17.3 h 4 v 17.3 c 0,5.5 -4.5,10 -10,10 h -44 c -5.5,0 -10,-4.5 -10,-10 v -77 c 0,-5.5000006 4.5,-10.0000006 10,-10.0000006 z"
+     id="path5"
+     inkscape:connector-curvature="0"
+     style="fill:#cccccc;fill-opacity:1;stroke:#cccccc;stroke-width:3.20000005;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></svg>

src/header/logout@hover.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 128 128"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 132.28162 100.1875"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   width="100%"
+   height="100%"
+   sodipodi:docname="logout@hovre.svg"><metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs9" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="789"
+     inkscape:window-height="480"
+     id="namedview7"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="1.3037281"
+     inkscape:cx="87.529217"
+     inkscape:cy="39.059701"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><path
+     d="m 111.87056,31.893749 16.3,16.4 c 0.4,0.4 0.6,0.9 0.6,1.4 0,0.6 -0.2,1.1 -0.6,1.4 l -16.2,16.2 c -0.8,0.8 -2,0.8 -2.8,0 -0.4,-0.4 -0.6,-0.9 -0.6,-1.4 0,-0.5 0.2,-1.1 0.6,-1.4 l 12.8,-12.9 H 58.27057 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 h 63.69999 l -12.9,-12.9 c -0.4,-0.4 -0.6,-0.9 -0.6,-1.4 0,-0.5 0.2,-1 0.6,-1.4 0.7,-0.8 2,-0.8 2.8,0 z"
+     id="path3"
+     inkscape:connector-curvature="0"
+     style="fill:#28b965;fill-opacity:1;stroke:#28b965;stroke-width:1.89999998000000003;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /><path
+     d="m 45.07057,1.5937484 h 44 c 5.5,0 10,4.5 10,10.0000006 v 16.3 h -4 v -16.3 c 0,-3.3000006 -2.7,-6.0000006 -6,-6.0000006 h -44 c -3.3,0 -6,2.7 -6,6.0000006 v 77 c 0,3.3 2.7,6 6,6 h 44 c 3.3,0 6,-2.7 6,-6 v -17.3 h 4 v 17.3 c 0,5.5 -4.5,10 -10,10 h -44 c -5.5,0 -10,-4.5 -10,-10 v -77 c 0,-5.5000006 4.5,-10.0000006 10,-10.0000006 z"
+     id="path5"
+     inkscape:connector-curvature="0"
+     style="fill:#28b965;fill-opacity:1;stroke:#28b965;stroke-width:3.20000004999999987;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></svg>