Setting page update

This commit is contained in:
Harry Bomrah 2012-04-11 17:26:25 +08:00
parent c55cd5c9bb
commit 5a6541a592
6 changed files with 137 additions and 152 deletions

View File

@ -335,82 +335,58 @@ var orbitDesktop = function(dom){
o.currenthtml = target; o.currenthtml = target;
o.currentface = "settings"; o.currentface = "settings";
var bindHandlers = function(){ var bindHandlers = function(){
$(".theme_list > li").click(function(){
o.changeTheme($(this).find('.theme_name').text()); }
$(".theme_list > li") var loadThemePage = function(){
.removeClass('thmc1') var bindHandlers = function(){
.data('clicked',null) $(".theme_list > li").click(function(){
.find('.theme_name') o.changeTheme($(this).find('.theme_name').text());
.removeClass('thmtxt'); $(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
$(this) $(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
.addClass('thmc1') od.tempFunc($(this).text());
.data('clicked',true) });
.find('.theme_name') $('.tinycanvas').each(function(){
.addClass('thmtxt'); var h = $(this).parent().height(),
od.tempFunc($(this).text()); sh = $(this).siblings('.s_tab').height();
}); $(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
});
$('.tinycanvas').each(function(){ var $anchor = $('.s_tab a[href*=#]'),
var h = $(this).parent().height(), $tabcontent = $('.st_c');
sh = $(this).siblings('.s_tab').height();
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
}); $anchor.each(function(){
$(this).click(function(){
// simple tab navgation var target = $(this).attr('href');
var $anchor = $('.s_tab a[href*=#]'), $anchor.removeClass('thmc2 thmtxt admtxt admbg').addClass('admtxt admbg');
$tabcontent = $('.st_c'); $(this).toggleClass('thmc2 thmtxt admtxt admbg');
$tabcontent.hide();
$anchor.each(function(){ $(target).show();
$(this).click(function(){ $('.tinycanvas').tinyscrollbar_update();
var target = $(this).attr('href'); return false;
});
$anchor });
.removeClass('thmc2 thmtxt admtxt admbg') $('.color-picker').miniColors();
.addClass('admtxt admbg'); $('.theme_list li:first-child').data('clicked',true); // this line just for demo
$(this).toggleClass('thmc2 thmtxt admtxt admbg'); $('.theme_list li').hover(function(){
$tabcontent.hide(); $(this).addClass('thmc1').find('.theme_name').addClass('thmtxt');
$(target).show(); }, function(){
$('.tinycanvas').tinyscrollbar_update(); var c = 'thmc1',
t = 'thmtxt';
return false; if( $(this).data('clicked') ){
}); t = '', c = '';
}); }
$(this).removeClass(c).find('.theme_name').removeClass(t);
// simple menu });
// miniColors
$('.color-picker').miniColors({
});
$('.theme_list li:first-child').data('clicked',true); // this line just for demo
$('.theme_list li').hover(function(){
$(this)
.addClass('thmc1')
.find('.theme_name')
.addClass('thmtxt');
}, function(){
var c = 'thmc1',
t = 'thmtxt';
if( $(this).data('clicked') ){
t = '', c = '';
} }
$(this) $("div#panel_r").load("/desktop/settingthemes/",function(){
.removeClass(c) bindHandlers();
.find('.theme_name') })
.removeClass(t);
});
} }
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers(); loadThemePage();
}); });
// }else{
// $(o.contentHolder).html(o.desktopData[o.currentface]);
// bindHandlers();
// }
}; };
this.loadWallpaper = function(wallpaper){ this.loadWallpaper = function(wallpaper){
if(!wallpaper)wallpaper = o.themesettings.background; if(!wallpaper)wallpaper = o.themesettings.background;

View File

@ -31,10 +31,15 @@ class DesktopController< ApplicationController
@desktop = Desktop.find(params["id"]) @desktop = Desktop.find(params["id"])
render :json => @desktop.to_json render :json => @desktop.to_json
end end
def settings def settings
render :layout => false render :layout => false
end end
def settingthemes
render "desktop/settings/themes", :layout => false
end
def getgroups def getgroups
@section = Section.find(params["sectionid"]) @section = Section.find(params["sectionid"])
@groups = @section.groups @groups = @section.groups

View File

@ -12,87 +12,13 @@
<li><a href="" class="admtxt hh2 w2 hp">Overview</a></li> <li><a href="" class="admtxt hh2 w2 hp">Overview</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Account</a></li> <li><a href="" class="admtxt hh2 w2 hp">Account</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Sections</a></li> <li><a href="" class="admtxt hh2 w2 hp">Sections</a></li>
<li><a href="" class="admtxt hh2 w2 hp thmtxt thmc1">Theme</a></li> <li><a href="themes" class="admtxt hh2 w2 hp thmtxt thmc1">Theme</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Connection</a></li> <li><a href="" class="admtxt hh2 w2 hp">Connection</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div id="panel_r" class="ph pw admbg hp"> <div id="panel_r" class="ph pw admbg hp">
<div class="s_tab stb_h">
<ul>
<li><a href="#st1" class="hh2 hp thmtxt thmc2">Select Theme</a></li>
<li><a href="#st2" class="hh2 hp admtxt admbg">Custom Theme</a></li>
</ul>
</div>
<div class="tinycanvas vp">
<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<div id="st1" class="st_c">
<ul class="theme_list">
<li class="thmc1"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name thmtxt">default</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">snake</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">sexy</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">vintage</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">natural</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">chris</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
</ul>
</div>
<div id="st2" class="st_c">
<div class="s_title hh3">Preview</div>
<div class="theme_preview vp" style="background-image: url(/desktop_themes/default/images/background.jpg);">
<div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
<div class="theme_plate">
<div class="thmc4 h1 wh3"></div>
<div class="thmc1 h1 w1"><div class="thmtxt hp">Theme Text2</div></div>
<div class="g_sep h1 op07"></div>
<div class="thmc2 h1 w1"><div class="thmtxt hp">Theme Text</div></div>
</div>
</div>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="528">
<tr>
<th class="s_title hh3" width="190px">Theme Color</th>
<th class="s_title hh3">Line Color</th>
<th class="s_title hh3" width="120px">Text Color</th>
<th class="s_title hh3" width="120px">Background Color</th>
</tr>
<tr>
<td>
<input type="hidden" class="color-picker black" value="#000000">
<input type="hidden" class="color-picker black" value="#0099cc">
<input type="hidden" class="color-picker black" value="#3366cc">
</td>
<td>
<input type="hidden" class="color-picker black" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker black" value="#ffffff">
<input type="hidden" class="color-picker black" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker black" value="#000000">
</td>
</tr>
</table>
<div class="s_action">
<a href="" id="theme_submit" class="thmc1 thmtxt w1 hh2 hp">Confirm</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<!-- <select id="change_theme"> <!-- <select id="change_theme">

View File

@ -0,0 +1,75 @@
<div class="s_tab stb_h">
<ul>
<li><a href="#st1" class="hh2 hp thmtxt thmc2">Select Theme</a></li>
<li><a href="#st2" class="hh2 hp admtxt admbg">Custom Theme</a></li>
</ul>
</div>
<div class="tinycanvas vp">
<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<div id="st1" class="st_c">
<ul class="theme_list">
<li class="thmc1"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name thmtxt">default</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">snake</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">sexy</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">vintage</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">natural</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">chris</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
</ul>
</div>
<div id="st2" class="st_c">
<div class="s_title hh3">Preview</div>
<div class="theme_preview vp" style="background-image: url(/desktop_themes/default/images/background.jpg);">
<div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
<div class="theme_plate">
<div class="thmc4 h1 wh3"></div>
<div class="thmc1 h1 w1"><div class="thmtxt hp">Theme Text2</div></div>
<div class="g_sep h1 op07"></div>
<div class="thmc2 h1 w1"><div class="thmtxt hp">Theme Text</div></div>
</div>
</div>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="528">
<tr>
<th class="s_title hh3" width="190px">Theme Color</th>
<th class="s_title hh3">Line Color</th>
<th class="s_title hh3" width="120px">Text Color</th>
<th class="s_title hh3" width="120px">Background Color</th>
</tr>
<tr>
<td>
<input type="hidden" class="color-picker black" value="#000000">
<input type="hidden" class="color-picker black" value="#0099cc">
<input type="hidden" class="color-picker black" value="#3366cc">
</td>
<td>
<input type="hidden" class="color-picker black" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker black" value="#ffffff">
<input type="hidden" class="color-picker black" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker black" value="#000000">
</td>
</tr>
</table>
<div class="s_action">
<a href="" id="theme_submit" class="thmc1 thmtxt w1 hh2 hp">Confirm</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>

View File

@ -110,7 +110,10 @@ Orbit::Application.routes.draw do
match '/desktop/save_desktop_settings/'=>'desktop#save_desktop_settings' match '/desktop/save_desktop_settings/'=>'desktop#save_desktop_settings'
match '/desktop/getgroups/'=>'desktop#getgroups' match '/desktop/getgroups/'=>'desktop#getgroups'
match '/desktop/getsectionlist/'=>'desktop#getsectionlist' match '/desktop/getsectionlist/'=>'desktop#getsectionlist'
match '/desktop/settingthemes/'=>'desktop#settingthemes'
match '/desktop/temp_func/'=>'desktop#temp_func' match '/desktop/temp_func/'=>'desktop#temp_func'
match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request| match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request|
!request.query_string.include?("inner=true") !request.query_string.include?("inner=true")
} }

View File

@ -21,7 +21,7 @@
.rotate.right{ .rotate.right{
display:none; display:none;
z-index:11; z-index:9;
} }
.clock .bg, .clock .front{ .clock .bg, .clock .front{
@ -37,18 +37,18 @@
position:absolute; position:absolute;
width:75px; width:75px;
font-family: Orbitron, sans-serif; font-family: Orbitron, sans-serif;
z-index:20; z-index:10;
color:#F5F5F5; color:#F5F5F5;
font-size:21px; font-size:21px;
text-align:center; text-align:center;
top:27.5px; top:27.5px;
left:0; left:0px;
} }
/* The left part of the background: */ /* The left part of the background: */
.clock .bg.left{ left:0; } .clock .bg.left{ left:0px; }
/* Individual styles for each color: */ /* Individual styles for each color: */
.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; } .orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
@ -65,7 +65,7 @@
.clock .front.left{ .clock .front.left{
left:0; left:0;
z-index:10; z-index:15;
} }
#fancyClock { #fancyClock {
position: absolute; position: absolute;