Stylisation de l'application.
This commit is contained in:
Chouchen
parent
e5415117a1
commit
f6aae7e077
@ -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();
|
||||
|
||||
|
||||
@ -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>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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/>
|
||||
|
||||
@ -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 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>
|
||||
|
||||
@ -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...';
|
||||
}
|
||||
|
||||
@ -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/>
|
||||
|
||||
152
css/clock.css
152
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;
|
||||
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
68
css/main.css
68
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;
|
||||
}
|
||||
|
||||
@ -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);}
|
||||
@ -2,3 +2,5 @@
|
||||
-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);}
|
||||
|
||||
#city-submit{cursor:pointer;}
|
||||
BIN
images/interface/blogs_edit.png
Normal file
BIN
images/interface/blogs_edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 762 B |
BIN
images/interface/config.png
Normal file
BIN
images/interface/config.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
BIN
images/interface/weather.png
Normal file
BIN
images/interface/weather.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
@ -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');
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
var zIndex = 0;
|
||||
$('#menu-bar').prepend($('#blog-links-manager'));
|
||||
|
||||
function make_draggable(elements)
|
||||
{
|
||||
|
||||
@ -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,
|
||||
|
||||
14
js/main.js
14
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();
|
||||
});
|
||||
});*/
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user