Stylisation de l'application.

This commit is contained in:
Chouchen 2010-09-17 13:38:57 +00:00
parent e5415117a1
commit f6aae7e077
18 changed files with 53 additions and 238 deletions

View File

@ -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){
$gweather = new GoogleWeatherAPI($city,'fr');
if($ville != '' || $ville != null){
$gweather = new GoogleWeatherAPI($ville,'fr');
if($gweather->isFound()) {
$city = $gweather->getCity();
$currentTemp = $gweather->getCurrent();
$forecastTemp = $gweather->getForecast();

View File

@ -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>';
}
/**

View File

@ -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/>

View File

@ -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>

View File

@ -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...';
}

View File

@ -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/>

View File

@ -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;
}

View File

@ -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 {

View File

@ -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;
}

View File

@ -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);}

View File

@ -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;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 762 B

BIN
images/interface/config.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 610 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 694 B

View File

@ -1,7 +1,4 @@
<?header('Content-type: application/javascript');
$token = $_GET['token'];
$id = $_GET['id'];
?>
<?header('Content-type: application/javascript'); $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(){
$('#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>');
$(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>');
var token = "<?=$token?>";
var project_id = "<?=$id?>";
var script = document.createElement('script');

View File

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

View File

@ -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,

View File

@ -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();
});
});*/