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.currentface = "settings";
|
||||
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());
|
||||
});
|
||||
|
||||
}
|
||||
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'});
|
||||
});
|
||||
|
||||
$('.tinycanvas').each(function(){
|
||||
var h = $(this).parent().height(),
|
||||
sh = $(this).siblings('.s_tab').height();
|
||||
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
|
||||
var $anchor = $('.s_tab a[href*=#]'),
|
||||
$tabcontent = $('.st_c');
|
||||
|
||||
});
|
||||
|
||||
// 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 = '';
|
||||
$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;
|
||||
});
|
||||
});
|
||||
$('.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);
|
||||
});
|
||||
|
||||
}
|
||||
$(this)
|
||||
.removeClass(c)
|
||||
.find('.theme_name')
|
||||
.removeClass(t);
|
||||
});
|
||||
|
||||
$("div#panel_r").load("/desktop/settingthemes/",function(){
|
||||
bindHandlers();
|
||||
})
|
||||
}
|
||||
|
||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||
bindHandlers();
|
||||
});
|
||||
// }else{
|
||||
// $(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
// bindHandlers();
|
||||
// }
|
||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||
loadThemePage();
|
||||
});
|
||||
};
|
||||
this.loadWallpaper = function(wallpaper){
|
||||
if(!wallpaper)wallpaper = o.themesettings.background;
|
||||
|
|
|
|||
|
|
@ -31,10 +31,15 @@ class DesktopController< ApplicationController
|
|||
@desktop = Desktop.find(params["id"])
|
||||
render :json => @desktop.to_json
|
||||
end
|
||||
|
||||
def settings
|
||||
render :layout => false
|
||||
end
|
||||
|
||||
def settingthemes
|
||||
render "desktop/settings/themes", :layout => false
|
||||
end
|
||||
|
||||
def getgroups
|
||||
@section = Section.find(params["sectionid"])
|
||||
@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">Account</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="clear"></div>
|
||||
<!-- <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/getgroups/'=>'desktop#getgroups'
|
||||
match '/desktop/getsectionlist/'=>'desktop#getsectionlist'
|
||||
match '/desktop/settingthemes/'=>'desktop#settingthemes'
|
||||
|
||||
match '/desktop/temp_func/'=>'desktop#temp_func'
|
||||
|
||||
match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request|
|
||||
!request.query_string.include?("inner=true")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
.rotate.right{
|
||||
display:none;
|
||||
z-index:11;
|
||||
z-index:9;
|
||||
}
|
||||
|
||||
.clock .bg, .clock .front{
|
||||
|
|
@ -37,18 +37,18 @@
|
|||
position:absolute;
|
||||
width:75px;
|
||||
font-family: Orbitron, sans-serif;
|
||||
z-index:20;
|
||||
z-index:10;
|
||||
color:#F5F5F5;
|
||||
font-size:21px;
|
||||
text-align:center;
|
||||
top:27.5px;
|
||||
left:0;
|
||||
left:0px;
|
||||
|
||||
}
|
||||
|
||||
/* The left part of the background: */
|
||||
|
||||
.clock .bg.left{ left:0; }
|
||||
.clock .bg.left{ left:0px; }
|
||||
|
||||
/* Individual styles for each color: */
|
||||
.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
.clock .front.left{
|
||||
left:0;
|
||||
z-index:10;
|
||||
z-index:15;
|
||||
}
|
||||
#fancyClock {
|
||||
position: absolute;
|
||||
|
|
|
|||
Reference in New Issue