saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

function update

This commit is contained in:
devin 2012-04-18 13:17:12 +08:00
parent 7b391904f7
commit b743413be9
4 changed files with 148 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
app/assets/javascripts/orbitdesktop.js
View File

@ -169,12 +169,11 @@ var orbitDesktop = function(dom){
}
}
});
$('div#desktop .tinycanvas').tinyscrollbar({ axis: 'x'});
$("div#desktop div.scrollbar").hover(function(){
$(this).removeClass('op01');
}, function(){
$(this).addClass('op01');
});
$('div#desktop .tinycanvas')
.tinyscrollbar({ axis: 'x' })
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
// simple dropdown menu
var $sdm = $('.sdm');
@ -305,7 +304,11 @@ var orbitDesktop = function(dom){
$("div#app_manager .group_search").html(allApps);
return false;
})
$('.tinycanvas').tinyscrollbar({ axis: 'x'});
$('.tinycanvas')
.tinyscrollbar({ axis: 'x'})
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
}
var loadApps = function(){
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
@ -371,7 +374,11 @@ var orbitDesktop = function(dom){
$(this).find('span.tile').addClass('op06');
}
});
$('.tinycanvas').tinyscrollbar({ axis: 'x'});
$('.tinycanvas')
.tinyscrollbar({ axis: 'x'})
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){
@ -431,7 +438,8 @@ var orbitDesktop = function(dom){
o.currenthtml = target;
o.currentface = "settings";
var bindHandlers = function(){
$("div#settings ul#setting_left_nav li a").click(function(){
$("div#settings ul#setting_left_nav li a").on({
click: function(){
if(!$(this).data("clicked")){
var tfunc = $(this).attr("href");
switch(tfunc){
@ -445,20 +453,28 @@ var orbitDesktop = function(dom){
$("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
$(this).addClass('thmc1 thmtxt').data('clicked',true);
}
});
$("div#settings ul#setting_left_nav li a").hover(function(){
},
mouseenter: function(){
$(this).removeClass('admtxt').addClass('thmc1 thmtxt');
}, function(){
},
mouseleave: function(){
var t = $(this).data('clicked') ? '' : 'thmc1 thmtxt';
$(this).removeClass(t).addClass('admtxt');
}
});
}
var sections = function(){
var bindHandlers = function(){
$('.tinycanvas').each(function(){
var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').height();
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
$(this)
.css({'height': h-sh-24})
.tinyscrollbar({ axis: 'y'})
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
});
$("a#name_save_btn").click(function(){
@ -493,27 +509,51 @@ var orbitDesktop = function(dom){
}
var themes = function(){
var bindHandlers = function(){
$(".theme_list > li").click(function(){
// live change theme
$(".theme_list > .ssl_item").click(function(){
o.changeTheme($(this).attr("id"));
$(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
$(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
// $(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
// $(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
$.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).attr("id")},function(result,status){
if(status=="success"){
if(result[0].success=="true")
if(result[0].success=="true"){
o.notify("Theme Saved!!","success",2);
else
loadthmc();
} else {
o.notify("Theme saving failed!!","imp",2);
}
}else{
o.notify("Connection problem!!","alert",2);
}
});
});
// single select
$('.ssl .ssl_item').each(function(){
$(this).on({
click: function(){
$(this).switchClass('','thmc1 active',300);
$(this).siblings('.thmc1').switchClass('thmc1 active','',100);
if( $(this).find('.ssl_des') ){
$(this).parents('.ssl').find('.ssl_des').removeClass('thmtxt');
$(this).find('.ssl_des').addClass('thmtxt');
}
}
});
});
$('.tinycanvas').each(function(){
var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').height();
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
$(this)
.css({'height': h-sh-24})
.tinyscrollbar({ axis: 'y'})
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
});
// tab
var $anchor = $('.s_tab a[href*=#]'),
$tabcontent = $('.st_c');
@ -528,12 +568,38 @@ var orbitDesktop = function(dom){
return false;
});
});
/* $("tr#color_inputs input").each(function(){
var what = $(this).attr("for");
alert($("#theme_preview_area ."+what).css("background-color"))
$(this).val()
}) */
loadthmc();
function loadthmc(){
$('#color_input .color-picker').each(function(){
var cc = $(this).attr('for'), hex, color;
switch(cc){
case 'thmtxt':
case 'thmtxth':
hex = 'color';
break;
case 'g_sep':
hex = 'borderColor';
break;
default:
hex = 'backgroundColor';
break;
}
color = $('.'+cc).css( hex );
$(this).val(rgb2hex(color));
});
}
// Awesome RGBA to HEX (alpha ignored)
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
$('.color-picker').miniColors({
change:function(hex){
var changewhat = $(this).attr("for");
@ -546,7 +612,7 @@ var orbitDesktop = function(dom){
case "g_sep":
previewarea.find("."+changewhat).css({"border-color":hex});
break;
case "background":
case "thmbgc":
previewarea.css({"background-color":hex});
break;
default:

23
app/assets/stylesheets/desktopmain.css
View File

@ -259,29 +259,34 @@ a:focus { outline: none; }
/* Setting Page */
.theme_list {}
.theme_list li {
.theme_list .ssl_item, .stock_wallpaper .ssl_item {
display: inline-block;
vertical-align: top;
margin: 0 0 24px 0;
margin: 0 0 12px 0;
padding: 6px 0px;
width: 132px;
text-align: center;
cursor: pointer
}
.theme_thumb { border: solid 1px #fff; width: 120px; margin: 0 auto; }
.theme_thumb img { display: block; }
.theme_thumb, .stock_wallpaper img { border: solid 1px #fff; width: 120px; margin: 0 auto; }
.theme_thumb img, .stock_wallpaper img { display: block; }
.theme_name { font-size: 15px; padding: 8px 6px; display: block; }
.theme_preview { width: 528px; height: 150px; line-height: 36px; font-size: 15px; }
.theme_plate { overflow: hidden; }
.theme_plate > div { float: left; margin-right: 12px; }
.theme_plate > div:first-child { margin-right: 48px;}
.stock_background ul { overflow: hidden; }
.stock_background li { float: left; margin: 6px; }
.stock_background a { border: solid 3px #f6f6f6; display: block; }
.stock_background img { display: block; margin: 0 auto; border: solid 1px #fff; }
.stock_wallpaper { }
.stock_wallpaper .ssl_item { margin-bottom: 6px; }
.stock_wallpaper img { }
.s_title { font-size: 15px; line-height: 60px; text-align: left; }
.s_action { padding: 24px 0; overflow: hidden; }
.s_action {
padding: 24px 0;
margin-top: 12px;
overflow: hidden;
border-top: solid 1px #eee;
background-color: #fff;
}
.setting_btn {
display: block;
float: right;

2
app/views/desktop/desktop.html.erb
View File

@ -15,7 +15,7 @@
</div>
<div id="holder">
<div class="tinycanvas">
<div class="scrollbar sb_h op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">

54
app/views/desktop/settings/themes.html.erb
View File

@ -2,7 +2,7 @@
<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>
<li><a href="#st3" class="hh2 hp admtxt admbg">Custom Background</a></li>
<li><a href="#st3" class="hh2 hp admtxt admbg">Wallpaper</a></li>
</ul>
</div>
<div class="tinycanvas vp">
@ -10,18 +10,18 @@
<div class="viewport">
<div class="overview">
<div id="st1" class="st_c">
<ul class="theme_list">
<li id="4f8d3f493b67fcd05f086359"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Default</span></li>
<li id="4f8d3f673b67fcd05f08635c"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Snake</span></li>
<li id="4f8d3f5d3b67fcd05f08635b"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Sexy</span></li>
<li id="4f8d3f783b67fcd05f08635d"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Vintage</span></li>
<li id="4f8d3f533b67fcd05f08635a"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Natural</span></li>
<li id="4f8d3f3c3b67fcd05f086358"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Chris</span></li>
</ul>
<div class="theme_list ssl">
<div id="4f8d3f493b67fcd05f086359" class="ssl_item"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name ssl_des">Default</span></div>
<div id="4f8d3f673b67fcd05f08635c" class="ssl_item"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name ssl_des">Snake</span></div>
<div id="4f8d3f5d3b67fcd05f08635b" class="ssl_item"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name ssl_des">Sexy</span></div>
<div id="4f8d3f783b67fcd05f08635d" class="ssl_item"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name ssl_des">Vintage</span></div>
<div id="4f8d3f533b67fcd05f08635a" class="ssl_item"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name ssl_des">Natural</span></div>
<div id="4f8d3f3c3b67fcd05f086358" class="ssl_item"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name ssl_des">Chris</span></div>
</div>
</div>
<div id="st2" class="st_c">
<div class="s_title hh3">Preview</div>
<div class="theme_preview vp" style="background-color:#000000;" id="theme_preview_area">
<div class="theme_preview vp thmbgc" style="background-color: #000;" id="theme_preview_area">
<div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
<div class="theme_plate">
<div class="thmc4 h1 wh3"></div>
@ -31,14 +31,14 @@
</div>
</div>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="528">
<table id="color_input" 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 id="color_inputs">
<tr>
<td>
<input type="hidden" class="color-picker black" value="#000000" for="thmc4">
<input type="hidden" class="color-picker black" value="#0099cc" for="thmc1">
@ -52,7 +52,7 @@
<input type="hidden" class="color-picker black" value="#ffffff" for="thmtxt">
</td>
<td>
<input type="hidden" class="color-picker black" value="#000000" for="background">
<input type="hidden" class="color-picker black" value="#000000" for="thmbgc">
</td>
</tr>
</table>
@ -63,21 +63,19 @@
</div>
</div>
<div id="st3" class="st_c">
<div class="stock_background">
<ul>
<li><a href="" class="sb1"><img src="assets/stockBackground/thumb/1.jpg" alt=""></a></li>
<li><a href="" class="sb2"><img src="assets/stockBackground/thumb/2.jpg" alt=""></a></li>
<li><a href="" class="sb3"><img src="assets/stockBackground/thumb/3.jpg" alt=""></a></li>
<li><a href="" class="sb4"><img src="assets/stockBackground/thumb/4.jpg" alt=""></a></li>
<li><a href="" class="sb5"><img src="assets/stockBackground/thumb/5.jpg" alt=""></a></li>
<li><a href="" class="sb6"><img src="assets/stockBackground/thumb/6.jpg" alt=""></a></li>
<li><a href="" class="sb7"><img src="assets/stockBackground/thumb/7.jpg" alt=""></a></li>
<li><a href="" class="sb8"><img src="assets/stockBackground/thumb/8.jpg" alt=""></a></li>
<li><a href="" class="sb9"><img src="assets/stockBackground/thumb/9.jpg" alt=""></a></li>
<li><a href="" class="sb10"><img src="assets/stockBackground/thumb/10.jpg" alt=""></a></li>
<li><a href="" class="sb11"><img src="assets/stockBackground/thumb/11.jpg" alt=""></a></li>
<li><a href="" class="sb12"><img src="assets/stockBackground/thumb/12.jpg" alt=""></a></li>
</ul>
<div class="stock_wallpaper ssl">
<div class="sb1 ssl_item"><img src="assets/stockBackground/thumb/1.jpg" alt=""></div>
<div class="sb2 ssl_item"><img src="assets/stockBackground/thumb/2.jpg" alt=""></div>
<div class="sb3 ssl_item"><img src="assets/stockBackground/thumb/3.jpg" alt=""></div>
<div class="sb4 ssl_item"><img src="assets/stockBackground/thumb/4.jpg" alt=""></div>
<div class="sb5 ssl_item"><img src="assets/stockBackground/thumb/5.jpg" alt=""></div>
<div class="sb6 ssl_item"><img src="assets/stockBackground/thumb/6.jpg" alt=""></div>
<div class="sb7 ssl_item"><img src="assets/stockBackground/thumb/7.jpg" alt=""></div>
<div class="sb8 ssl_item"><img src="assets/stockBackground/thumb/8.jpg" alt=""></div>
<div class="sb9 ssl_item"><img src="assets/stockBackground/thumb/9.jpg" alt=""></div>
<div class="sb10 ssl_item"><img src="assets/stockBackground/thumb/10.jpg" alt=""></div>
<div class="sb11 ssl_item"><img src="assets/stockBackground/thumb/11.jpg" alt=""></div>
<div class="sb12 ssl_item"><img src="assets/stockBackground/thumb/12.jpg" alt=""></div>
</div>
<div class="s_action">
<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a>