Stylisation de l'application.

GoogleMeteo.php

@@ -2,10 +2,11 @@
 	require('class/GoogleWeather.class.php');
 
 	//ça récupère un truc du style : http://www.google.com/ig/api?weather=paris&hl=fr
-	if($city != '' || $city != null){
+	if($ville != '' || $ville != null){
-	$gweather = new GoogleWeatherAPI($city,'fr');
+	$gweather = new GoogleWeatherAPI($ville,'fr');
 	
 	if($gweather->isFound()) {
+		$city		= $gweather->getCity();
 		$currentTemp = $gweather->getCurrent();
 		$forecastTemp = $gweather->getForecast();
 	

class/AccueilModules.php

@@ -44,7 +44,7 @@ class AccueilModules {
 	 * Construit et insère le menu de changement de config
 	 */
 	function buildConfigMenu(){
-		echo '<a href="#config" id="config-menu">Configuration</a>
+		echo '<a href="#config" id="config-menu"><img src="images/interface/config.png" /></a>
 				<div style="display:none;">
 				<div id="config">
 				<form id="config_form" action="" method="post">
@@ -56,10 +56,27 @@ class AccueilModules {
 			if ($moduleConf->visibility == "false") echo " checked";
 			echo '/>false<br/><br/>';
 		}
-		echo '<a id="config-submit" href="" class="green-button">Enregistrer</a>
+		echo '<span id="config-submit" class="green-button">Enregistrer</span>
 				</form>
 				</div>
 				</div>';
+		echo '<script>$(document).ready(function(){
+					$(\'#config-submit\').live(\'click\',function(e){
+						$(this).replaceWith(\'<img src="images/interface/ajax_load.gif" style="margin:30px auto;display:block" />\');
+						var data3 = {';
+		foreach($this->modules as $module=>$moduleConf){
+			echo '\''.$module.'\'	: $(\'input[type=radio][name='.$module.'_group]:checked\').attr(\'value\'),';
+		}
+		echo '};
+				$.post(\'ajax/post-config.php\',data3,function(msg3){
+					if(msg3=="1"){
+						location.reload();
+					}			
+				});
+				e.preventDefault();
+				});
+			});
+			</script>';
 	}
 	
 	/**

class/Blogs.php

@@ -6,7 +6,7 @@ class blogs {
 		$this->setParams($params);
 		require('blogs_last_post.php');
 		echo '<script type="text/javascript" src="js/jquery.blogs.js"></script>';
-		echo '<a href="#blogLinksManager" id="blog-links-manager">Manage blog links</a>';
+		echo '<a href="#blogLinksManager" id="blog-links-manager"><img src="images/interface/blogs_edit.png" /></a>';
 		echo '<div style="display:none;">
 				<div id="blogLinksManager">
 				<h3>Blogs Management</h3><br/>

class/Links.php

@@ -9,7 +9,7 @@ class links {
 		<ul class="iconlist"> 
 			<li class="item"><a href="http://mail.google.com" onclick="spawnLink(this);return false;"><img src="images/links/gmail_128.png" /><br>Gmail</a></li> 
 			<li class="item"><a href="http://mail.live.com" onclick="spawnLink(this);return false;"><img src="images/links/mail-msn.png" /><br>Hotmail</a></li> 
-			<li class="item"><a href="http://mail1.voila.fr/webmail/fr_FR/login.html" onclick="spawnLink(this);return false;"><img src="images/voila.png" /><br>Voila.fr mail</a></li> 
+			<li class="item"><a href="http://mail1.voila.fr/webmail/fr_FR/login.html" onclick="spawnLink(this);return false;"><img src="images/links/voila.png" /><br>Voila.fr mail</a></li> 
 			<li class="item"><a href="http://calendar.google.com" onclick="spawnLink(this);return false;"><img src="images/links/calendar_128.png" /><br>Google&nbsp;Calendar</a></li> 
 			<li class="item"><a href="http://reader.google.com" onclick="spawnLink(this);return false;"><img src="images/links/reader_128.png" /><br>Google Reader</a></li>
 			<li class="item"><a href="http://docs.google.com" onclick="return spawnLink(this);"><img src="images/links/docs_128.png" /><br>Google Docs</a></li> 

class/Todo.php

@@ -21,6 +21,10 @@ class todo {
 				$id		= $xmla->id;
 				echo '</div><script type="text/javascript" src="js/getUncompletedTasks.php?token='.$token.'&id='.$id.'"></script>';
 			}
+			echo '<script>
+					$(document).ready(function(){
+					$(\'#todoList\').resizable();
+					});</script>';
 		}else{
 			echo 'baaaaad persistance...';
 		}

class/Weather.php

@@ -10,11 +10,12 @@ class weather {
 
 	public function __construct($params){
 		//$this->setParams($params);
-		$city = $params['city'];
+		$ville = $params['city'];
 		include 'GoogleMeteo.php';
 		echo '<script type="text/javascript" src="js/jquery.weather.js"></script>
 				<link rel="stylesheet" type="text/css" href="css/weather.css">';
 		echo '<div id="weather" style="left:'.$params['x'].'; top:'.$params['y'].';">
+				'.$city.'<br/>
 				<div class="weatherpic"></div>
 				<strong>'.$present_weather.'</strong><br/>
 				'.$future_weather1.'<br/>

css/clock.css

@@ -1,152 +0,0 @@
-#fancyClock{
-
-	margin:40px auto;
-
-	height:100px;
-
-	/*border:1px solid #111111;*/
-
-	width:300px;
-float:left;
-
-}
-#fancyClock:after{content: div;clear:both;}
-
-.clock{
-
-	/* The .clock div. Created dynamically by jQuery */
-	background:url(../images/interface/clock.png) top left no-repeat;
-	background-color:#FFF;
-
-	height:100px;
-
-	width:100px;
-
-	position:relative;
-
-	overflow:hidden;
-
-	float:left;
-
-}
-
-
-
-.clock .rotate{
-
-	/* There are two .rotate divs - one for each half of the background */
-
-	position:absolute;
-
-	width:100px;
-
-	height:100px;
-
-	top:0;
-
-	left:0;
-
-}
-
-
-
-.rotate.right{
-
-	display:none;
-
-	z-index:11;
-
-}
-
-
-
-.clock .bg, .clock .front{
-
-	width:50px;
-
-	height:100px;
-
-	background-color:#FFF;
-
-	position:absolute;
-
-	top:0;
-
-}
-
-
-
-.clock .display{
-
-	/* Holds the number of seconds, minutes or hours respectfully */
-
-	position:absolute;
-
-	width:100px;
-
-	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
-
-	z-index:20;
-
-	color:#F5F5F5;
-
-	font-size:30px;
-
-	text-align:center;
-
-	top:33px;
-
-	left:0;
-
-	
-
-	/* CSS3 text shadow: */
-
-	text-shadow:4px 4px 5px #333333;
-
-}
-
-
-
-/* The left part of the background: */
-
-
-
-.clock .bg.left{ left:0; }
-
-
-
-/* Individual styles for each color: */
-
-.orange .bg.left{ background:url(../images/bg_orange.png) no-repeat left top; }
-
-.green .bg.left{ background:url(../images/bg_green.png) no-repeat left top; }
-
-.blue .bg.left{	background:url(../images/bg_blue.png) no-repeat left top; }
-
-
-
-/* The right part of the background: */
-
-.clock .bg.right{ left:100px; }
-
-
-
-.orange .bg.right{ background:url(../images/bg_orange.png) no-repeat right top; }
-
-.green .bg.right{ background:url(../images/bg_green.png) no-repeat right top; }
-
-.blue .bg.right{ background:url(../images/bg_blue.png) no-repeat right top; }
-
-
-
-
-
-.clock .front.left{
-
-	left:0;
-
-	z-index:10;
-
-}
-

css/jquery.fancybox-1.3.0.css

@@ -305,7 +305,7 @@ div#fancy-bg-s {
 	left: 0;
 	width: 100%;
 	height: 20px;
-	background: transparent url('../fancy_shadow_s.png') repeat-x;
+	background: transparent url('../images/fancy/fancy_shadow_s.png') repeat-x;
 }
 
 div#fancy-bg-sw {

css/main.css

@@ -43,66 +43,6 @@
 		border-color:#BFBFBF;
 	}
  
-	#googlemenu {
-		width: 100%;
-		padding: 0 0 0 0;
-		margin-left: 0px;
-		margin-top: 5px;
-		overflow:auto;
-		height:395px;
-	}
- 
-	#googlemenu ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
- 
-	#googlemenu li.item {
-		margin-top: 0px;
-		margin-bottom: 0px;
-		padding-left: 4px;
-		padding-top: 2px;
-		padding-bottom: 2px;
-		height:18px;
-		border-color:white;
-		border-width:1px;
-		line-height:20px;
-		border-left:none;
-		border-right:none;
-		background-color:rgba(235,239,249,0.0);
- 
-		-webkit-transition: background-color 0.3s ease-out ;
-	}
- 
-	#googlemenu li.item:hover {
-		background-color:#ebeff9;
-		border-color:#BFCDF6;
- 
-		-webkit-transition: background-color 0s ease-out ;
-	}
- 
-	#googlemenu li.disabled {
-		background-color:#fff;
-	}
- 
-	#googlemenu li img {
-		margin-top: 2px;
-		margin-right:4px;
-	}
- 
-	#googlemenu li.empty {
-		margin-top: 0px;
-		margin-bottom: 0px;
-		padding-left: 4px;
-		padding-top: 2px;
-		padding-bottom: 2px;
-	}
- 
-	#googlemenu li.empty a:hover{
-		text-decoration:underline;
-	}
- 
 	ul.iconlist li{
 		display:inline-block;
 		text-align:center;
@@ -273,14 +213,14 @@
 		border:1px solid #ccc;
 		height:32px;
 	}
-	
+	#menu-bar{height:40px;background: -moz-linear-gradient(top, #ECD9D9 0%, #fff 100%);background: -webkit-gradient(linear, left top, left bottom, from(#ECD9D9), to(#fff)); position:relative; top:0; left:0; border-bottom:1px solid #ECD9D9;}
 	#recherche{margin-top:70px;}
 	
 	#config {width:300px;}
-	#config-menu, #blog-links-manager {width:100px; margin:0 auto; text-align:center;display:block;}
+	#config-menu, #blog-links-manager, #city-menu {float:right; margin:12px 10px 0 0;}
 	
 	/* Green button class: */
-a.green-button,a.green-button:visited{
+a.green-button,a.green-button:visited, span.green-button{
 	color:black;
 	display:block;
 	font-size:10px;
@@ -295,7 +235,7 @@ a.green-button,a.green-button:visited{
 	background:url(../images/interface/button_green.png) no-repeat left top;
 }
 
-a.green-button:hover{
+a.green-button:hover, span.green-button:hover{
 	text-decoration:none;
 	background-position:left bottom;
 }

css/todo.css

@@ -1,4 +1,4 @@
-#todoList {/*position:absolute; bottom:10px; left: 100px;*/padding:5px;width:350px;-webkit-border-radius: 5px;
+#todoList {padding:5px;width:350px;-webkit-border-radius: 5px;
 		-moz-border-radius: 5px;border: 1px solid rgba(0,0,0,0.3);
 		-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
 		-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);}

css/weather.css

@@ -1,4 +1,6 @@
 	#weather {position:absolute; top:10px; left: 100px;padding:5px;-webkit-border-radius: 5px;
 		-moz-border-radius: 5px;border: 1px solid rgba(0,0,0,0.3);
 		-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
-		-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);}
+		-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);}
+		
+	#city-submit{cursor:pointer;}

js/getUncompletedTasks.php

@@ -1,7 +1,4 @@
-<?header('Content-type: application/javascript');
+<?header('Content-type: application/javascript');
$token		= $_GET['token'];
$id			= $_GET['id'];
?>
-$token		= $_GET['token'];
-$id			= $_GET['id'];
-?>
 function cbfunc(o){
 	$('#results').append('<ul id="uncompletedList"><ul>');
 	for(var i in o)
@@ -14,8 +11,7 @@ function cbfunc2(o){
 	$('#uncompletedList').append('<li id="'+o.id+'">'+o.content+' - '+o.date_string+' <img src="images/interface/delete.png" id="delete-'+o.id+'"/> <img src="images/interface/complete.png" class="completeTask" id="complete-'+o.id+'"/> </li>');
 }
 		
-$(document).ready(function(){
+$(document).ready(function(){
	$('#todoList').resizable();
	$('#todoList').draggable();
	$('#todoList').append('<div id="results"></div><img src="images/interface/add.png" id="showNewTask"/><fieldset id="newTaskFieldset" style="display:none; width:200px;"><input type="text" name="newtask" id="newtask"/> <select id="priority"><option id="1" value="1">1</option><option id="2" value="2">2</option><option id="3" value="3">3</option><option id="4" value="4">4</option></select> <br/><input type="text" name="date_string" id="date_string"/>  <img src="images/interface/add.png" id="addTask"/></fieldset>');
	
-	$('#todoList').append('<div id="results"></div><img src="images/interface/add.png" id="showNewTask"/><fieldset id="newTaskFieldset" style="display:none; width:200px;"><input type="text" name="newtask" id="newtask"/> <select id="priority"><option id="1" value="1">1</option><option id="2" value="2">2</option><option id="3" value="3">3</option><option id="4" value="4">4</option></select> <br/><input type="text" name="date_string" id="date_string"/>  <img src="images/interface/add.png" id="addTask"/></fieldset>');
 	var token = "<?=$token?>";
 	var project_id = "<?=$id?>";
 	var script = document.createElement('script');

js/jquery.blogs.js

@@ -1,6 +1,7 @@
 $(document).ready(function(){
 
 var zIndex = 0;
+$('#menu-bar').prepend($('#blog-links-manager'));
 
 function make_draggable(elements)
 {

js/jquery.weather.js

@@ -1,5 +1,6 @@
 $(document).ready(function(){
-	$('body').append('<a href="#city" id="city-menu">Weather City Choice</a><div style="display:none;"><div id="city"></div></div>');
+	$('body').append('<a href="#city" id="city-menu"><img src="images/interface/weather.png" /></a><div style="display:none;"><div id="city"></div></div>');
+	$('#menu-bar').prepend($('#city-menu'));
 	$('#city').append('<h3>Quelle ville pour la météo ?</h3><br/><input type="text" id="cityChoice" name="cityChoice"/><span id="city-submit" class="green-button">Enregistrer</span>');
 	$('#city-menu').fancybox({
 		'zoomSpeedIn'		: 600,

js/main.js

@@ -36,6 +36,9 @@
 		window.open("calculator.html", "Calc", "menubar=0,resizable=0,width=320,height=360")
 	} 
 $(document).ready(function(){
+	$('body').prepend('<div id="menu-bar"></div>');
+	$('#menu-bar').prepend($('#config-menu'));
+	
 	$("#q").focus(); //focus sur la recherche
 	//$('.iconlist').sortable();
 	$('#config-menu').fancybox({
@@ -54,24 +57,25 @@ $(document).ready(function(){
 		'hideOnContentClick': false,
 		'padding'			: 15
 	});
-	$('#config-submit').live('click',function(e){
+	/*$('#config-submit').live('click',function(e){
 		$(this).replaceWith('<img src="images/interface/ajax_load.gif" style="margin:30px auto;display:block" />');
 		var data3 = {
 			'clock' 	: $('input[type=radio][name=clock_group]:checked').attr('value'),
-			'meteo'		: $('input[type=radio][name=meteo_group]:checked').attr('value'),
+			'weather'	: $('input[type=radio][name=weather_group]:checked').attr('value'),
 			'notes'		: $('input[type=radio][name=notes_group]:checked').attr('value'),
 			'search' 	: $('input[type=radio][name=search_group]:checked').attr('value'),
 			'links'		: $('input[type=radio][name=links_group]:checked').attr('value'),
-			'blogs'		: $('input[type=radio][name=blogs_group]:checked').attr('value')
+			'blogs'		: $('input[type=radio][name=blogs_group]:checked').attr('value'),
+			'todo'		: $('input[type=radio][name=todo_group]:checked').attr('value')
 		};
-		/* Sending an AJAX POST request: */
+		
 		$.post('ajax/post-config.php',data3,function(msg3){
 			if(msg3=="1"){
 				location.reload();
 			}			
 		});
 		e.preventDefault();
-	});
+	});*/