developers
/
Orbit
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some updates

This commit is contained in:
Harry Bomrah 2012-04-18 18:15:02 +08:00
parent d14630769a
commit 6b35cf821e
4 changed files with 92 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -495,8 +495,8 @@ var orbitDesktop = function(dom){
var bindHandlers = function(){ var bindHandlers = function(){
$(".theme_list > li").click(function(){ $(".theme_list > li").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")
@ -508,6 +508,19 @@ var orbitDesktop = function(dom){
} }
}); });
}); });
$('.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();
@ -585,6 +598,28 @@ var orbitDesktop = function(dom){
}) })
} }
var loadthmc = function(){
$('.color-picker').each(function(){
var cc = $(this).attr('for'), hex, color;
switch(cc){
case 'thmtxt':
case 'thmtxth':
hex = 'color';
break;
case 'g_sep':
hex = 'border-left-color';
break;
default:
hex = 'background-color';
break;
}
if(cc=="background")
color = $("#theme_preview_area").css("background-color");
else
color = $('#theme_preview_area .'+cc).css(hex);
$(this).miniColors("value", o.rgb2hex(color));
});
}
$("div#settings div#panel_r").load("/desktop/settingthemes",function(){ $("div#settings div#panel_r").load("/desktop/settingthemes",function(){
$.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){ $.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){
$("#st1 ul.theme_list li#"+theme).addClass("thmc1").find("span").addClass("thmtxt"); $("#st1 ul.theme_list li#"+theme).addClass("thmc1").find("span").addClass("thmtxt");

7
app/assets/javascripts/orbitdesktopAPI.js
View File

@ -55,5 +55,12 @@ var orbitDesktopAPI = function(){
var A = key(a), B = key(b); var A = key(a), B = key(b);
return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse]; return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];
} }
};
this.rgb2hex = function(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var hex = function(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
} }
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
};
}; };

33
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;
@ -355,11 +360,11 @@ a:focus { outline: none; }
.tinycanvas .viewport { width: auto; height: 100%; overflow: hidden; position: relative; } .tinycanvas .viewport { width: auto; height: 100%; overflow: hidden; position: relative; }
.tinycanvas .overview { position: absolute; left: 0; top: 0; } .tinycanvas .overview { position: absolute; left: 0; top: 0; }
.tinycanvas .scrollbar { position: absolute; z-index: 9; } .tinycanvas .scrollbar { position: absolute; z-index: 9; }
.tinycanvas .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; } .tinycanvas .scrollbar.sb_h { left: 0; bottom: 0; height: 6px; }
.tinycanvas .scrollbar.sb_v { right: 0; top: 0; width: 12px; } .tinycanvas .scrollbar.sb_v { right: 0; top: 0; width: 6px; }
.tinycanvas .track { height: 100%; width: 12px; position: relative; } .tinycanvas .track { height: 100%; width: 6px; position: relative; }
.tinycanvas .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; } .tinycanvas .thumb { height: 6px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.tinycanvas .thumb .end { overflow: hidden; height: 12px; width: 12px; } .tinycanvas .thumb .end { overflow: hidden; height: 6px; width: 6px; }
.tinycanvas .disable{ display: none; } .tinycanvas .disable{ display: none; }
/* Orbit Notification */ /* Orbit Notification */

55
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">
@ -63,21 +63,22 @@
</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="" alt=""></a></li> <div class="sb2 ssl_item"><img src="assets/stockBackground/thumb/2.jpg" alt=""></div>
<li><a href="" class="sb2"><img src="" alt=""></a></li> <div class="sb3 ssl_item"><img src="assets/stockBackground/thumb/3.jpg" alt=""></div>
<li><a href="" class="sb3"><img src="" alt=""></a></li> <div class="sb4 ssl_item"><img src="assets/stockBackground/thumb/4.jpg" alt=""></div>
<li><a href="" class="sb4"><img src="" alt=""></a></li> <div class="sb5 ssl_item"><img src="assets/stockBackground/thumb/5.jpg" alt=""></div>
<li><a href="" class="sb5"><img src="" alt=""></a></li> <div class="sb6 ssl_item"><img src="assets/stockBackground/thumb/6.jpg" alt=""></div>
<li><a href="" class="sb6"><img src="" alt=""></a></li> <div class="sb7 ssl_item"><img src="assets/stockBackground/thumb/7.jpg" alt=""></div>
<li><a href="" class="sb7"><img src="" alt=""></a></li> <div class="sb8 ssl_item"><img src="assets/stockBackground/thumb/8.jpg" alt=""></div>
<li><a href="" class="sb8"><img src="" alt=""></a></li> <div class="sb9 ssl_item"><img src="assets/stockBackground/thumb/9.jpg" alt=""></div>
<li><a href="" class="sb9"><img src="" alt=""></a></li> <div class="sb10 ssl_item"><img src="assets/stockBackground/thumb/10.jpg" alt=""></div>
<li><a href="" class="sb10"><img src="" alt=""></a></li> <div class="sb11 ssl_item"><img src="assets/stockBackground/thumb/11.jpg" alt=""></div>
<li><a href="" class="sb11"><img src="" alt=""></a></li> <div class="sb12 ssl_item"><img src="assets/stockBackground/thumb/12.jpg" alt=""></div>
<li><a href="" class="sb12"><img src="" alt=""></a></li> </div>
</ul> <div class="s_action">
<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>