From 6006f1b3c6e186a9afdb4fcf7c8dcd5b9eb4b6fc Mon Sep 17 00:00:00 2001
From: devin <devin@rulincom.com>
Date: Tue, 10 Apr 2012 01:06:29 +0800
Subject: [PATCH] start editing setting page

some relevant stuff updated
---
 app/assets/javascripts/orbitdesktop.js | 12 ++--
 app/assets/stylesheets/desktopmain.css | 40 +++++++++---
 app/views/desktop/app_manager.html.erb |  2 +-
 app/views/desktop/desktop.html.erb     |  2 +-
 app/views/desktop/sections.html.erb    | 90 +++++++++++++-------------
 app/views/desktop/settings.html.erb    | 42 +++++++-----
 6 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js
index f6346951..c8db9a44 100755
--- a/app/assets/javascripts/orbitdesktop.js
+++ b/app/assets/javascripts/orbitdesktop.js
@@ -151,6 +151,8 @@ var orbitDesktop = function(dom){
 			}, function(){
 				$(this).addClass('op01');
 			});
+
+			// simple dropdown menu
 			var $sdm = $('.sdm');
 
 			if( !$sdm.children('.sdm_o') ){
@@ -255,12 +257,13 @@ var orbitDesktop = function(dom){
 					}
 					else
 						$("#"+$(this).attr("data-category")).append(element);
-		},over:function(){
+				},
+				over:function(){
 				    $(this).find('span.tile').removeClass('op06');
 				},
-				 out:function(){
+				out:function(){
 					$(this).find('span.tile').addClass('op06');
-				 }
+				}
 	 		});
 			$('#holder').tinyscrollbar({ axis: 'x'});
 			var $sdm = $('.sdm');
@@ -291,7 +294,8 @@ var orbitDesktop = function(dom){
 		var bindHandlers = function(){
 			$("select#change_theme").change(function(){
 				o.changeTheme($(this).val());	
-			})
+			});
+			$('#panel_r').tinyscrollbar({ axis: 'y'});
 		}
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){
diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css
index de18a161..09a1061d 100644
--- a/app/assets/stylesheets/desktopmain.css
+++ b/app/assets/stylesheets/desktopmain.css
@@ -173,6 +173,7 @@ a, a:hover { text-decoration: none; }
 	}
 .appholder {
 	position: relative;
+	z-index: 2;
 	padding-bottom: 12px;
 	}
 .holder_f {
@@ -180,8 +181,8 @@ a, a:hover { text-decoration: none; }
 	width: 100%;
 	height: 100%;
 	padding: 0;
-/*	left: 0;
-	top: 0; */
+	left: 0;
+	top: 0;
 	}
 .dtitle { 
 	font-size: 30px;
@@ -213,6 +214,10 @@ a, a:hover { text-decoration: none; }
 	top: 0;
 	}
 
+/* panel */
+#panel_l { background-color: #f0f0f0; float: left; }
+#panel_r { margin-left: 252px; position: relative;}
+
 /* simple dropdown menu */
 .sdm {}
 .sdm:hover .sdm_o { display: block; }
@@ -227,6 +232,22 @@ a, a:hover { text-decoration: none; }
 .sdm_o li:first-child { border: none; }
 .sdm_o .admtxt { display: block; line-height: 36px; }
 .sdm_o .admtxt:hover { background-color: #F0F0F0; }
+
+/* simple menu */
+.s_menu { font-size: 15px; line-height: 36px; }
+.s_menu li { border-top: solid 1px #ddd; }
+.s_menu li:first-child { border: none; }
+.s_menu a { display: block; }
+
+/* simple tabs */
+.s_tab { font-size: 15px; line-height: 36px; }
+.stb_h {}
+.stb_v {}
+.s_tab li { display: inline-block; }
+.s_tab a { display: block; }
+.st_c { display: none; }
+.st_c:first-child { display: block; }
+
 /* theme color opacity */
 .op10 { opacity: 1; }
 .op09 { opacity: 0.9; }
@@ -247,6 +268,8 @@ a, a:hover { text-decoration: none; }
 .wh1 { width: 30px; }
 .wh2 { width: 36px; }
 .wh3 { width: 60px; }
+.w100 { width: 100%; }
+.pw { width: 572px; }
 
 .h1 { height: 96px; }
 .h2 { height: 228px; }
@@ -254,6 +277,7 @@ a, a:hover { text-decoration: none; }
 .hh1 { height: 30px; }
 .hh2 { height: 36px; }
 .hh3 { height: 60px; }
+.ph { height: 516px; }
 
 .hp { padding-left: 12px; padding-right: 12px; }
 .vp { padding-top: 12px; padding-bottom: 12px; }
@@ -287,12 +311,9 @@ a, a:hover { text-decoration: none; }
 /* tiny scrollbar */
 #holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; }
 #holder .overview { position: absolute; left: 0; top: 0; }
-#holder .scrollbar { 
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 12px;
-}
+#holder .scrollbar { position: absolute; }
+#holder .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
+#holder .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
 #holder .track { height: 100%; width: 12px; position: relative; }
 #holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
 #holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
@@ -330,5 +351,4 @@ a, a:hover { text-decoration: none; }
 }
 .grp{
 	min-height:540px;
-}
-
+}
\ No newline at end of file
diff --git a/app/views/desktop/app_manager.html.erb b/app/views/desktop/app_manager.html.erb
index 057fd934..030b072f 100755
--- a/app/views/desktop/app_manager.html.erb
+++ b/app/views/desktop/app_manager.html.erb
@@ -13,7 +13,7 @@
 				
 			</div>
 	<div id="holder">
-    	<div class="scrollbar"><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">
 			
diff --git a/app/views/desktop/desktop.html.erb b/app/views/desktop/desktop.html.erb
index ec08ed07..691425c5 100755
--- a/app/views/desktop/desktop.html.erb
+++ b/app/views/desktop/desktop.html.erb
@@ -13,7 +13,7 @@
 		</div>
 	</div>
 	<div id="holder">
-		<div class="scrollbar op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+		<div class="scrollbar sb_h op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 			<div class="viewport">
 	        <div id="group_wrapper" class="overview">
 	        <div class="group">
diff --git a/app/views/desktop/sections.html.erb b/app/views/desktop/sections.html.erb
index b32d9e02..9762c8fa 100644
--- a/app/views/desktop/sections.html.erb
+++ b/app/views/desktop/sections.html.erb
@@ -5,7 +5,7 @@
 			</div>
 		</div>
 		<div id="holder">
-			<div class="scrollbar"><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">
 				<div class="group">
@@ -19,70 +19,70 @@
 					</div>
 					<ul class="grp" id="section1">
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
                         <li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
                         <li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						
                         
@@ -99,70 +99,70 @@
 					</div>
 					<ul class="grp" id="section2">
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
                         <li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
                         <li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						<li class="element w1 hh2 hp vp" data-category="abc">
-							<h1 class="appname thmtxt">Garage Band</h1>
+							<h1 class="appname thmtxth">Garage Band</h1>
 						</li>
 						
 					</ul>
diff --git a/app/views/desktop/settings.html.erb b/app/views/desktop/settings.html.erb
index 6bd37175..ce88b2b3 100644
--- a/app/views/desktop/settings.html.erb
+++ b/app/views/desktop/settings.html.erb
@@ -5,19 +5,34 @@
 		</div>
 	</div>
 	<div id="holder">
-		<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
-		<div class="viewport">
-			<div class="overview">
-				<ul>
-					<li><a href="" class="admtxt">Overview</a></li>
-					<li><a href="" class="admtxt">Account</a></li>
-					<li><a href="" class="admtxt">Sections</a></li>
-					<li><a href="" class="admtxt">Theme</a></li>
-					<li><a href="" class="admtxt">Connection</a></li>
-				</ul>
+		
+				<div id="panel_l" class="ph">
+					<div class="s_menu sm_v">
+						<ul>
+							<li><a href="" class="admtxt hh2 w2 hp">Overview</a></li>
+							<li><a href="" class="admtxt hh2 w2 hp">Account</a></li>
+							<li><a href="" class="admtxt hh2 w2 hp">Sections</a></li>
+							<li><a href="" class="admtxt hh2 w2 hp">Theme</a></li>
+							<li><a href="" class="admtxt hh2 w2 hp">Connection</a></li>
+						</ul>
+					</div>
+				</div>
+				<div id="panel_r" class="ph pw admbg">
+					<div class="s_tab stb_h">
+						<ul>
+							<li><a href="#st1" class="hh2 hp thmtxt thmc1">Select Theme</a></li>
+							<li><a href="#st2" class="hh2 hp admtxt">Custom Theme</a></li>
+						</ul>
+					</div>
+					<div class="scrollbar sb_v"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+					<div class="viewport">
+						<div class="overview w100">
+							<div id="st1" class="st_c hp vp">try</div>
+							<div id="st2" class="st_c hp vp">test</div>
+						</div>
+					</div>
+				</div>
 				<div class="clear"></div>
-<<<<<<< HEAD
-=======
 				<select id="change_theme">
 				<option value='default'>Default Theme</option>
 				<option value='snake'>Snake Theme</option>
@@ -27,8 +42,5 @@
 				</select>
 				<br />
 				<button onClick="od.tempFunc();">Save</button>
->>>>>>> desktop_harry
-			</div>
-		</div>
 	</div>
 </div>
\ No newline at end of file