Setting page update
This commit is contained in:
Harry Bomrah
parent
c55cd5c9bb
commit
5a6541a592
|
|
@ -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")
|
|
||||||
.removeClass('thmc1')
|
|
||||||
.data('clicked',null)
|
|
||||||
.find('.theme_name')
|
|
||||||
.removeClass('thmtxt');
|
|
||||||
$(this)
|
|
||||||
.addClass('thmc1')
|
|
||||||
.data('clicked',true)
|
|
||||||
.find('.theme_name')
|
|
||||||
.addClass('thmtxt');
|
|
||||||
od.tempFunc($(this).text());
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.tinycanvas').each(function(){
|
|
||||||
var h = $(this).parent().height(),
|
|
||||||
sh = $(this).siblings('.s_tab').height();
|
|
||||||
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// simple tab navgation
|
|
||||||
var $anchor = $('.s_tab a[href*=#]'),
|
|
||||||
$tabcontent = $('.st_c');
|
|
||||||
|
|
||||||
$anchor.each(function(){
|
|
||||||
$(this).click(function(){
|
|
||||||
var target = $(this).attr('href');
|
|
||||||
|
|
||||||
$anchor
|
|
||||||
.removeClass('thmc2 thmtxt admtxt admbg')
|
|
||||||
.addClass('admtxt admbg');
|
|
||||||
$(this).toggleClass('thmc2 thmtxt admtxt admbg');
|
|
||||||
$tabcontent.hide();
|
|
||||||
$(target).show();
|
|
||||||
$('.tinycanvas').tinyscrollbar_update();
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 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)
|
|
||||||
.removeClass(c)
|
|
||||||
.find('.theme_name')
|
|
||||||
.removeClass(t);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
var loadThemePage = function(){
|
||||||
|
var bindHandlers = function(){
|
||||||
|
$(".theme_list > li").click(function(){
|
||||||
|
o.changeTheme($(this).find('.theme_name').text());
|
||||||
|
$(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
|
||||||
|
$(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
|
||||||
|
od.tempFunc($(this).text());
|
||||||
|
});
|
||||||
|
$('.tinycanvas').each(function(){
|
||||||
|
var h = $(this).parent().height(),
|
||||||
|
sh = $(this).siblings('.s_tab').height();
|
||||||
|
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
|
||||||
|
});
|
||||||
|
|
||||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
var $anchor = $('.s_tab a[href*=#]'),
|
||||||
bindHandlers();
|
$tabcontent = $('.st_c');
|
||||||
});
|
|
||||||
// }else{
|
$anchor.each(function(){
|
||||||
// $(o.contentHolder).html(o.desktopData[o.currentface]);
|
$(this).click(function(){
|
||||||
// bindHandlers();
|
var target = $(this).attr('href');
|
||||||
// }
|
$anchor.removeClass('thmc2 thmtxt admtxt admbg').addClass('admtxt admbg');
|
||||||
|
$(this).toggleClass('thmc2 thmtxt admtxt admbg');
|
||||||
|
$tabcontent.hide();
|
||||||
|
$(target).show();
|
||||||
|
$('.tinycanvas').tinyscrollbar_update();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
$('.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).removeClass(c).find('.theme_name').removeClass(t);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
$("div#panel_r").load("/desktop/settingthemes/",function(){
|
||||||
|
bindHandlers();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||||
|
loadThemePage();
|
||||||
|
});
|
||||||
};
|
};
|
||||||
this.loadWallpaper = function(wallpaper){
|
this.loadWallpaper = function(wallpaper){
|
||||||
if(!wallpaper)wallpaper = o.themesettings.background;
|
if(!wallpaper)wallpaper = o.themesettings.background;
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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")
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue