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 .tinycanvas')
$("div#desktop div.scrollbar").hover(function(){ .tinyscrollbar({ axis: 'x' })
$(this).removeClass('op01'); .find('.scrollbar')
}, function(){ .delay(1500)
$(this).addClass('op01'); .addClass('op00', 500);
});
// simple dropdown menu // simple dropdown menu
var $sdm = $('.sdm'); var $sdm = $('.sdm');
@ -305,7 +304,11 @@ var orbitDesktop = function(dom){
$("div#app_manager .group_search").html(allApps); $("div#app_manager .group_search").html(allApps);
return false; return false;
}) })
$('.tinycanvas').tinyscrollbar({ axis: 'x'}); $('.tinycanvas')
.tinyscrollbar({ axis: 'x'})
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
} }
var loadApps = function(){ var loadApps = function(){
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){ $.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
@ -371,7 +374,11 @@ var orbitDesktop = function(dom){
$(this).find('span.tile').addClass('op06'); $(this).find('span.tile').addClass('op06');
} }
}); });
$('.tinycanvas').tinyscrollbar({ axis: 'x'}); $('.tinycanvas')
.tinyscrollbar({ axis: 'x'})
.find('.scrollbar')
.delay(1500)
.addClass('op00', 500);
var $sdm = $('.sdm'); var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){ if( !$sdm.children('.sdm_o') ){
@ -431,7 +438,8 @@ var orbitDesktop = function(dom){
o.currenthtml = target; o.currenthtml = target;
o.currentface = "settings"; o.currentface = "settings";
var bindHandlers = function(){ 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")){ if(!$(this).data("clicked")){
var tfunc = $(this).attr("href"); var tfunc = $(this).attr("href");
switch(tfunc){ switch(tfunc){
@ -445,20 +453,28 @@ var orbitDesktop = function(dom){
$("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null); $("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
$(this).addClass('thmc1 thmtxt').data('clicked',true); $(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'); $(this).removeClass('admtxt').addClass('thmc1 thmtxt');
}, function(){ },
mouseleave: function(){
var t = $(this).data('clicked') ? '' : 'thmc1 thmtxt'; var t = $(this).data('clicked') ? '' : 'thmc1 thmtxt';
$(this).removeClass(t).addClass('admtxt'); $(this).removeClass(t).addClass('admtxt');
}
}); });
} }
var sections = function(){ var sections = function(){
var bindHandlers = function(){ var bindHandlers = function(){
$('.tinycanvas').each(function(){ $('.tinycanvas').each(function(){
var h = $(this).parent().height(), var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').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(){ $("a#name_save_btn").click(function(){
@ -493,27 +509,51 @@ var orbitDesktop = function(dom){
} }
var themes = function(){ var themes = function(){
var bindHandlers = function(){ var bindHandlers = function(){
$(".theme_list > li").click(function(){ // live change theme
$(".theme_list > .ssl_item").click(function(){
o.changeTheme($(this).attr("id")); o.changeTheme($(this).attr("id"));
$(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('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'); // $(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){ $.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).attr("id")},function(result,status){
if(status=="success"){ if(status=="success"){
if(result[0].success=="true") if(result[0].success=="true"){
o.notify("Theme Saved!!","success",2); o.notify("Theme Saved!!","success",2);
else loadthmc();
} else {
o.notify("Theme saving failed!!","imp",2); o.notify("Theme saving failed!!","imp",2);
}
}else{ }else{
o.notify("Connection problem!!","alert",2); 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(){ $('.tinycanvas').each(function(){
var h = $(this).parent().height(), var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').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*=#]'), var $anchor = $('.s_tab a[href*=#]'),
$tabcontent = $('.st_c'); $tabcontent = $('.st_c');
@ -528,12 +568,38 @@ var orbitDesktop = function(dom){
return false; 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({ $('.color-picker').miniColors({
change:function(hex){ change:function(hex){
var changewhat = $(this).attr("for"); var changewhat = $(this).attr("for");
@ -546,7 +612,7 @@ var orbitDesktop = function(dom){
case "g_sep": case "g_sep":
previewarea.find("."+changewhat).css({"border-color":hex}); previewarea.find("."+changewhat).css({"border-color":hex});
break; break;
case "background": case "thmbgc":
previewarea.css({"background-color":hex}); previewarea.css({"background-color":hex});
break; break;
default: default:

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

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

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

@ -15,7 +15,7 @@
</div> </div>
<div id="holder"> <div id="holder">
<div class="tinycanvas"> <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 class="viewport">
<div id="group_wrapper" class="overview"> <div id="group_wrapper" class="overview">

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

@ -2,7 +2,7 @@
<ul> <ul>
<li><a href="#st1" class="hh2 hp thmtxt thmc2">Select Theme</a></li> <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="#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> </ul>
</div> </div>
<div class="tinycanvas vp"> <div class="tinycanvas vp">
@ -10,18 +10,18 @@
<div class="viewport"> <div class="viewport">
<div class="overview"> <div class="overview">
<div id="st1" class="st_c"> <div id="st1" class="st_c">
<ul class="theme_list"> <div class="theme_list ssl">
<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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
</ul> </div>
</div> </div>
<div id="st2" class="st_c"> <div id="st2" class="st_c">
<div class="s_title hh3">Preview</div> <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="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
<div class="theme_plate"> <div class="theme_plate">
<div class="thmc4 h1 wh3"></div> <div class="thmc4 h1 wh3"></div>
@ -31,14 +31,14 @@
</div> </div>
</div> </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> <tr>
<th class="s_title hh3" width="190px">Theme Color</th> <th class="s_title hh3" width="190px">Theme Color</th>
<th class="s_title hh3">Line 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">Text Color</th>
<th class="s_title hh3" width="120px">Background Color</th> <th class="s_title hh3" width="120px">Background Color</th>
</tr> </tr>
<tr id="color_inputs"> <tr>
<td> <td>
<input type="hidden" class="color-picker black" value="#000000" for="thmc4"> <input type="hidden" class="color-picker black" value="#000000" for="thmc4">
<input type="hidden" class="color-picker black" value="#0099cc" for="thmc1"> <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"> <input type="hidden" class="color-picker black" value="#ffffff" for="thmtxt">
</td> </td>
<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> </td>
</tr> </tr>
</table> </table>
@ -63,21 +63,19 @@
</div> </div>
</div> </div>
<div id="st3" class="st_c"> <div id="st3" class="st_c">
<div class="stock_background"> <div class="stock_wallpaper ssl">
<ul> <div class="sb1 ssl_item"><img src="assets/stockBackground/thumb/1.jpg" alt=""></div>
<li><a href="" class="sb1"><img src="assets/stockBackground/thumb/1.jpg" alt=""></a></li> <div class="sb2 ssl_item"><img src="assets/stockBackground/thumb/2.jpg" alt=""></div>
<li><a href="" class="sb2"><img src="assets/stockBackground/thumb/2.jpg" alt=""></a></li> <div class="sb3 ssl_item"><img src="assets/stockBackground/thumb/3.jpg" alt=""></div>
<li><a href="" class="sb3"><img src="assets/stockBackground/thumb/3.jpg" alt=""></a></li> <div class="sb4 ssl_item"><img src="assets/stockBackground/thumb/4.jpg" alt=""></div>
<li><a href="" class="sb4"><img src="assets/stockBackground/thumb/4.jpg" alt=""></a></li> <div class="sb5 ssl_item"><img src="assets/stockBackground/thumb/5.jpg" alt=""></div>
<li><a href="" class="sb5"><img src="assets/stockBackground/thumb/5.jpg" alt=""></a></li> <div class="sb6 ssl_item"><img src="assets/stockBackground/thumb/6.jpg" alt=""></div>
<li><a href="" class="sb6"><img src="assets/stockBackground/thumb/6.jpg" alt=""></a></li> <div class="sb7 ssl_item"><img src="assets/stockBackground/thumb/7.jpg" alt=""></div>
<li><a href="" class="sb7"><img src="assets/stockBackground/thumb/7.jpg" alt=""></a></li> <div class="sb8 ssl_item"><img src="assets/stockBackground/thumb/8.jpg" alt=""></div>
<li><a href="" class="sb8"><img src="assets/stockBackground/thumb/8.jpg" alt=""></a></li> <div class="sb9 ssl_item"><img src="assets/stockBackground/thumb/9.jpg" alt=""></div>
<li><a href="" class="sb9"><img src="assets/stockBackground/thumb/9.jpg" alt=""></a></li> <div class="sb10 ssl_item"><img src="assets/stockBackground/thumb/10.jpg" alt=""></div>
<li><a href="" class="sb10"><img src="assets/stockBackground/thumb/10.jpg" alt=""></a></li> <div class="sb11 ssl_item"><img src="assets/stockBackground/thumb/11.jpg" alt=""></div>
<li><a href="" class="sb11"><img src="assets/stockBackground/thumb/11.jpg" alt=""></a></li> <div class="sb12 ssl_item"><img src="assets/stockBackground/thumb/12.jpg" alt=""></div>
<li><a href="" class="sb12"><img src="assets/stockBackground/thumb/12.jpg" alt=""></a></li>
</ul>
</div> </div>
<div class="s_action"> <div class="s_action">
<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a> <a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a>