- [x] [css/container.css + js/action-script.js] Gestion de l'affichage de la page associee au sous-menu (.active)

- [x] [view/*.php] Modification des views
2016-02-06 11:41:50 +01:00 · 2016-02-06 11:41:50 +01:00 · 8c5e716163
parent 9c12485c38
commit 8c5e716163
8 changed files with 121 additions and 31 deletions
--- a/css/container.css
+++ b/css/container.css
@ -1,2 +1,2 @@
-#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}#WRAPPER>#CONTAINER>section{flex-grow:1}#WRAPPER>#CONTAINER>section>.inline-box{display:block;position:relative;width:calc( 100% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.3em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#777}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#777 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;position:relative;margin:1em;color:#777}
+#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section>.inline-box{display:block;position:relative;width:calc( 100% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#777}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#777 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#777}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#777 !important}
 /*# sourceMappingURL=container.css.map */
--- a/css/container.scss
+++ b/css/container.scss
@ -74,10 +74,15 @@
 	/* [2] Section (contenu)
 	=========================================================*/
 	& > section{
-		// background-color: #f00;
+		display: none;
 		flex-grow: 1;
 	}

+	// @active
+	& > section.active{
+		display: block;
+	}
+


 	/* [3] INLINE-BOX pour afficher les listes de donnees
@ -98,8 +103,13 @@
 			.title{
 				display: inline-block;

-				font-size: 1.3em;
+				font-size: 1.15em;
 				font-weight: bold;
+
+				& > span{
+					font-size: .8em;
+					color: #333;
+				}
 			}

 			/* (2) Code RFID */
@ -127,11 +137,24 @@
 			/* (3) Adresse mail */
 			.mail{
 				display: block;
-				position: relative;
-
 				margin: 1em;
-
 				color: #777;
+				
+				// svg (icone)
+				svg{
+					display: inline-block;
+					position: relative;
+						margin-left: .5em;
+						margin-right: .5em;
+						margin-bottom: -.6em;
+						width: 1.5em;
+						height: 2em;
+
+					path{
+						fill: #777 !important;
+					}
+				}
+
 			}
 			
 	}
--- a/js/action-script.js
+++ b/js/action-script.js
@ -41,10 +41,23 @@ function navSubMenu(subsection){
 	// On desactive l'element courant
 	if( current != null )
 		current.remClass('active');
+	
+	// On cache les sections visibles
+	var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
+	for( var i = 0 ; i < visibleSections.length ; i++ )
+		visibleSections[i].remClass('active');
+
 	// On active le nouveau
-	if( target != null )
+	if( target != null ){
 		target.addClass('active');

+		// On affiche la section associee
+		var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
+		if( targetSection != null )
+			targetSection.addClass('active');
+
+	}
+
 	/* [3] Gestion de pageManager
 	------------------------------------------------*/
 	// Si element, on recupere le data-link
@ -59,7 +72,8 @@ function navSubMenu(subsection){
 	pageManager.vars[0] = target.getData('sublink');

 	if( mustRefresh )
-		navMenu(pageManager.page);
+		// navMenu(pageManager.page);
+		pageManager.updateURL();

 }

--- a/src/static/container/mail.svg
+++ b/src/static/container/mail.svg
@ -0,0 +1,45 @@
+<?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 32 32"
+   height="32px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 32 32"
+   width="32px"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="1454688634_mail.svg"><metadata
+     id="metadata8"><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="defs6" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="7.375"
+     inkscape:cx="16"
+     inkscape:cy="18.033898"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="M28,5H4C1.791,5,0,6.792,0,9v13c0,2.209,1.791,4,4,4h24c2.209,0,4-1.791,4-4V9  C32,6.792,30.209,5,28,5z M2,10.25l6.999,5.25L2,20.75V10.25z M30,22c0,1.104-0.898,2-2,2H4c-1.103,0-2-0.896-2-2l7.832-5.875  l4.368,3.277c0.533,0.398,1.166,0.6,1.8,0.6c0.633,0,1.266-0.201,1.799-0.6l4.369-3.277L30,22L30,22z M30,20.75l-7-5.25l7-5.25  V20.75z M17.199,18.602c-0.349,0.262-0.763,0.4-1.199,0.4c-0.436,0-0.851-0.139-1.2-0.4L10.665,15.5l-0.833-0.625L2,9.001V9  c0-1.103,0.897-2,2-2h24c1.102,0,2,0.897,2,2L17.199,18.602z"
+     fill="#333333"
+     id="mail"
+     style="fill:#000000" /></svg>
--- a/todo.md
+++ b/todo.md
@ -32,6 +32,8 @@
 ########
 # FAIT #
 ########
+- [x] [css/container.css + js/action-script.js] Gestion de l'affichage de la page associee au sous-menu (.active)
+	- [x] [view/*.php] Modification des views
 - [x] Mise a jour / Modification / Correction des images du menu-side 
 - [x] [ModuleRequest->dispatch]  Passage de l'erreur a la reponse
 - [x] [ModuleAnswer->serialize]  Integration de l'erreur dans la serialisation
--- a/view/analytics.php
+++ b/view/analytics.php
@ -43,14 +43,14 @@
 	/* PAGE DES STATISTIQUES
 	*
 	*/
-	if( $sublink == 'analytics' ){
+	// if( $sublink == 'analytics' ){

-		echo '<section>';
+		echo "<section data-sublink='analytics'>";
 			echo 'Statistiques';
 			var_dump( manager\Database::getPDO()->query('SELECT * from user')->fetchAll() );
 		echo '</section>';

-	}
+	// }



@ -69,13 +69,13 @@
 	/* CONSULTATION DU SUIVI
 	*
 	*/
-	if( $sublink == 'view' ){
+	// if( $sublink == 'view' ){

-		echo '<section>';
+		echo "<section data-sublink='view'>";
 			echo 'Consultation du suivi';
 		echo '</section>';

-	}
+	// }



@ -94,13 +94,13 @@
 	/* DEMARRER UN SUIVI
 	*
 	*/
-	if( $sublink == 'start' ){
+	// if( $sublink == 'start' ){

-		echo '<section>';
+		echo "<section data-sublink='start'>";
 			echo 'Demarrer un suivi';
 		echo '</section>';

-	}
+	// }



@ -119,13 +119,13 @@
 	/* RECHERCHE
 	*
 	*/
-	if( $sublink == 'search' ){
+	// if( $sublink == 'search' ){

-		echo '<section>';
+		echo "<section data-sublink='search'>";
 			echo 'Recherche';
 		echo '</section>';

-	}
+	// }



--- a/view/profile.php
+++ b/view/profile.php
@ -33,13 +33,13 @@
 	/* MON PROFIL
 	*
 	*/
-	if( $sublink == 'view' ){
+	// if( $sublink == 'view' ){

-		echo '<section>';
+		echo "<section data-sublink='view'>";
 			echo 'Profil';
 		echo '</section>';

-	}
+	// }



@ -56,12 +56,12 @@
 	/* CHANGER MOT DE PASSE
 	*
 	*/
-	if( $sublink == 'password' ){
+	// if( $sublink == 'password' ){

-		echo '<section>';
+		echo "<section data-sublink='password'>";
 			echo 'Changement de mot de passe';
 		echo '</section>';

-	}
+	// }

 ?>
--- a/view/users.php
+++ b/view/users.php
@ -52,7 +52,7 @@
 	/* PAGE DES STATISTIQUES
 	*
 	*/
-	if( $sublink == 'view' ){
+	// if( $sublink == 'view' ){

 		// On recupere tous les utilisateurs
 		debug();
@ -60,7 +60,7 @@
 		$request = new \manager\ModuleRequest('userDefaultModule/getAll'); // On utilise la methode 'getAll' du module 'userDefaultModule'
 		$answer = $request->dispatch();                                    // On recupere la reponse

-		echo '<section>';
+		echo "<section data-sublink='view'>";
 			echo 'Liste des utilisateurs: <br>';
 			
 			// si erreur, on affiche l'explicitation
@ -72,7 +72,7 @@
 				foreach( $answer->get('users') as $user){
 					echo "<article class='inline-box'>";
 						// Prenom Nom 
-						echo "<span class='title'>".$user['firstname']." ".$user['lastname']."</span>";
+						echo "<span class='title'>".$user['username']." <span>(".$user['firstname']." ".$user['lastname'].")</span></span>";

 						// Code RFID
 						echo "<span class='code'>";
@ -84,7 +84,13 @@
 						echo"</span>";

 						// Adresse email
-						echo "<span class='mail'>".$user['mail']."</span>";
+						echo "<span class='mail'>";
+							echo \manager\ResourceDispatcher::getResource('/f/svg/mail/st/container');
+							
+							echo "<span>";
+								echo $user['mail'];
+							echo "</span>";
+						echo"</span>";
 							


@ -96,4 +102,4 @@

 		echo '</section>';

-	}
+	// }