theme setting update

app/assets/javascripts/orbitdesktop.js

@@ -292,8 +292,10 @@ var orbitDesktop = function(dom){
 		o.currenthtml = target;
 		o.currentface = "settings";
 		var bindHandlers = function(){
-			$("select#change_theme").change(function(){
+			$(".theme_list > li").click(function(){
-				o.changeTheme($(this).val());	
+				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')
+						.removeClass('thmc2 thmtxt admtxt admbg')
-						.addClass('admtxt');
+						.addClass('admtxt admbg');
-					$(this).toggleClass('thmc2 thmtxt admtxt');
+					$(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(){

app/assets/stylesheets/desktopmain.css

@@ -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; }

app/assets/stylesheets/jquery.miniColors.css

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

app/assets/stylesheets/style.css.erb

@@ -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' %>);

app/views/desktop/settings.html.erb

@@ -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 class="overview">
-								<div id="st1" class="st_c">try</div>
+								<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>