theme setting update

This commit is contained in:
devin 2012-04-11 13:46:32 +08:00
parent ee85380ab2
commit 42f45aa137
6 changed files with 64 additions and 13 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -292,8 +292,10 @@ var orbitDesktop = function(dom){
o.currenthtml = target;
o.currentface = "settings";
var bindHandlers = function(){
$("select#change_theme").change(function(){
o.changeTheme($(this).val());
$(".theme_list > li").click(function(){
o.changeTheme($(this).find('.theme_name').text());
$(".theme_list > li").removeClass('thmc1').data('clicked',null);
$(this).addClass('thmc1').data('clicked',true);
});
$('.tinycanvas').each(function(){
@ -312,9 +314,9 @@ var orbitDesktop = function(dom){
var target = $(this).attr('href');
$anchor
.removeClass('thmc2 thmtxt admtxt')
.addClass('admtxt');
$(this).toggleClass('thmc2 thmtxt admtxt');
.removeClass('thmc2 thmtxt admtxt admbg')
.addClass('admtxt admbg');
$(this).toggleClass('thmc2 thmtxt admtxt admbg');
$tabcontent.hide();
$(target).show();
$('.tinycanvas').tinyscrollbar_update();
@ -330,6 +332,23 @@ var orbitDesktop = function(dom){
});
$('.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);
});
}
// if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){

View File

@ -1,4 +1,3 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum);
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
@ -247,10 +246,24 @@ a:focus { outline: none; }
.s_tab ul { overflow: hidden; }
.s_tab li { float: left; }
.s_tab a { display: block; }
.s_tab .admbg { background-color: #f0f0f0; }
.st_c { display: none; }
.st_c:first-child { display: block; }
/* Setting Page */
.theme_list {}
.theme_list li {
display: inline-block;
vertical-align: top;
margin: 0 0 24px 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_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; }

View File

@ -19,8 +19,8 @@
}
.miniColors-selector.black {
background: #000;
border-color: #000;
background: #222;
border-color: #222;
}
.miniColors-colors {

View File

@ -1,3 +1,4 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum);
@font-face{
font-family: 'WebSymbolsRegular';
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);

View File

@ -21,14 +21,32 @@
<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">Custom 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 hp">
<div id="st1" class="st_c">try</div>
<div class="overview">
<div id="st1" class="st_c">
<ul class="theme_list">
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">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">Woodstock westwood allenwood</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);">
@ -77,7 +95,7 @@
</div>
</div>
<div class="clear"></div>
<select id="change_theme">
<!-- <select id="change_theme">
<option value='default'>Default Theme</option>
<option value='snake'>Snake Theme</option>
<option value='sexy'>Sexy Theme</option>
@ -85,6 +103,6 @@
<option value='chris'>Chris Theme</option>
</select>
<br />
<button onClick="od.tempFunc();">Save</button>
<button onClick="od.tempFunc();">Save</button> -->
</div>
</div>