Merge branch 'desktop_devin' into desktop_harry

app/assets/javascripts/desktop.js

@@ -7,6 +7,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui
+//= require jquery.tinyscrollbar.min
 //= require bootstrap
 //= require orbitdesktopAPI
 //= require orbitdesktop

app/assets/javascripts/orbitdesktop.js

@@ -33,7 +33,7 @@ var orbitDesktop = function(dom){
 		
 	};
 	this.bindDesktopEvents = function(){
-		$("a#app_manager").click(function(){
+		$("a#d_app_manager").click(function(){
 			var target = $(this).attr("href");
 			if(o.currenthtml!=target){
 				o.desktopData[o.currentface] = $(o.contentHolder).html();
@@ -42,7 +42,7 @@ var orbitDesktop = function(dom){
 				});
 			}
 		});
-		$("a#desktop").click(function(){
+		$("a#d_desktop").click(function(){
 			var target = $(this).attr("href");
 			if(o.currenthtml!=target){
 				o.desktopData[o.currentface] = $(o.contentHolder).html();
@@ -51,7 +51,7 @@ var orbitDesktop = function(dom){
 				});
 			}
 		});
-		$("a#sections").click(function(){
+		$("a#d_sections").click(function(){
 			var target = $(this).attr("href");
 			if(o.currenthtml!=target){
 				o.desktopData[o.currentface] = $(o.contentHolder).html();
@@ -122,6 +122,7 @@ var orbitDesktop = function(dom){
 				}
 			
 			});
+			$('#holder').tinyscrollbar({ axis: 'x'});
 		}
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){
@@ -174,9 +175,10 @@ var orbitDesktop = function(dom){
 				$(".group_search").html(allApps);
 				return false;
 			})
+			$('#holder').tinyscrollbar({ axis: 'x'});
 		}
 		if(!o.desktopData[o.currentface]){
-			$(o.contentHolder).empty().load("desktop_pages/"+target,function(){
+			$(o.contentHolder).empty().load("/desktop/"+target,function(){
 				bindHandlers();
 			});
 		}else{
@@ -213,9 +215,10 @@ var orbitDesktop = function(dom){
 			$(".section_label ul li:not(:nth-child(1)) span.tile").hover(function(){
 				$(this).toggleClass("op06");
 			})//.mouseleave(function(){$(this).addClass("op06");});
+			$('#holder').tinyscrollbar({ axis: 'x'});
 		};
 		if(!o.desktopData[o.currentface]){
-			$(o.contentHolder).empty().load("desktop_pages/"+target,function(){
+			$(o.contentHolder).empty().load("/desktop/"+target,function(){
 				bindHandlers();
 			});
 		}else{
@@ -239,9 +242,69 @@ var orbitDesktop = function(dom){
 		$("#home_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.home);
 		$("#app_manager_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.app_manager);
 		$("#sections_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.sections);
+		$("#settings_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.settings);
+		$("#publication_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.publication);
+		$("#journal_p_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.journal_p);
+		$("#seminar_p_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.seminar_p);
+		$("#books_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.books);
+		$("#research_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.research);
+		$("#research_d_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.research_d);
+		$("#research_p_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.research_p);
+		$("#patents_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.patents);
+		$("#labs_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.labs);
+		$("#experience_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.experience);
+		$("#working_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.working);
+		$("#education_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.education);
+		$("#honors_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.honors);
+		$("#activities_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.activities);
+		$("#clubs_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.clubs);
+		$("#landt_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.landt);
+		$("#courses_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.courses);
+		$("#homework_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.homework);
+		$("#certification_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.certification);
+		$("#personal_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.personal);
+		$("#mypage_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.mypage);
+		$("#blog_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.blog);
+		$("#album_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.album);
+		$("#calendar_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.calendar);
+		$("#files_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.files);
+		$("#orbit_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.orbit);
+		$("#connection_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.connection);
+		$("#appstore_icon").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+o.themesettings.icons.appstore);
 	}
 	o.initialize();
 }
 
 orbitDesktop.prototype.themefolder = "themes";
 
+// devin
+(function(){
+	$(document).ready(function(){
+		var $widget_fn = $('.widget_fn'),
+			$fn_des = $('.fn_des');
+
+		$widget_fn.hover(function(){
+			var fn_name = $(this).find('img').attr('alt'),
+				nth = $(this).parents('.d_cate').index(),
+				des_left = $('.dock_child').eq(nth).width();
+
+
+			$(this).addClass('thmc1');
+			$fn_des
+				.text(fn_name)
+				.css({
+					'top':nth * 60,
+					'left': des_left + 60
+				})
+				.stop(true, true)
+				.fadeIn();
+		}, function(){
+			$(this).removeClass('thmc1');
+			$fn_des.stop(true, true).fadeOut();
+		});
+		
+
+	});
+	
+
+}());

app/assets/stylesheets/desktop.css

@@ -2,9 +2,8 @@
  *This is a manifest file that'll automatically include all the stylesheets available in this directory
  *and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  *the top of the compiled file, but it's generally better to create a new file per style scope.
- *= require reset
  *= require style
-*= require bootstrap
+ *= require bootstrap
  *= require bootstrap-orbit
  *= require desktopmain
 */

app/assets/stylesheets/desktopmain.css

@@ -1,5 +1,57 @@
 @import url(http://fonts.googleapis.com/css?family=Cuprum);
-@import url(reset.css);
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+#container input, #container textarea, #container select, #container input:focus, #container textarea:focus {
+	border-radius: 0;
+	box-shadow: none;
+	font: inherit;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
 
 /* basic setting */
 body {
@@ -7,7 +59,7 @@ body {
 	font-size: 12px;
 	background-color: #000;
 	}
-a { text-decoration: none; }
+a, a:hover { text-decoration: none; }
 /* desktop layout */
 #container {
 	margin: 72px 0 0 156px;
@@ -22,16 +74,17 @@ a { text-decoration: none; }
 	position: absolute;
 	top: 144px;
 	left: 0;
-	z-index: 999;
+	z-index: 9;
 	}
 #holder {
-	overflow: hidden;
+	/*overflow: hidden;
-	overflow-x: auto;
+	overflow-x: auto;*/
 	height: 540px;
+	width: auto;
+	position: relative;
 	}
 #rwidget {
 	height: 516px;
-	overflow: hidden;
 	}
 .widget_fn {
 	display: block;
@@ -43,6 +96,32 @@ a { text-decoration: none; }
 	height: 30px;
 	margin: 15px 0 0 15px;
 	}
+.docklist {
+
+	}
+.docklist li {
+	position: relative;
+	}
+.dock_child {
+	display: none;
+	overflow: hidden;
+	position: absolute;
+	left: 60px;
+	top: 0;
+	}
+.docklist > li:hover .dock_child { display: block; }
+.dock_item { float: left; }
+.fn_des.admtxt {
+	line-height: 60px;
+	padding: 0 6px;
+	font-size: 15px;
+	position: absolute;
+	min-width: 48px;
+	text-align: center;
+	white-space: nowrap;
+	display: none;
+	}
+
 .ini_input {
 	margin: 0;
 	padding: 0;
@@ -82,7 +161,7 @@ a { text-decoration: none; }
 	float: left;
 	margin: 0 12px 0 0;
 	position: relative;
-	z-index: 99;
+	z-index: 9;
 	}
 .dtitle:hover {
 	/* $(this).addClass( .thmc1 or .thmc2 ); */
@@ -102,6 +181,7 @@ a { text-decoration: none; }
 .section_slc li:hover { background-color: #F0F0F0; }
 .admbg { background-color: #fff; }
 .admtxt { color: #666; }
+.admtxt:hover { color: #666; }
 .hfn {
 	font-size: 15px;
 	line-height: 36px;
@@ -174,6 +254,19 @@ a { text-decoration: none; }
 
 .clear { clear: both; }
 
+/* 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 .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; }
+#holder .disable{ display: none; }
 
 /* Orbit Notification */
 #orbitnote {
@@ -202,19 +295,6 @@ a { text-decoration: none; }
 	font-size: 15px;
 }
 
-/* fake Orbit bar */
-#orbitbar {
-	height: 28px;
-	border-radius: 0px;
-	padding-top: 2px;
-	padding-bottom: 1px;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
-	background-image: -webkit-linear-gradient(top, #444, #111);
-	position: absolute;
-	z-index: 9999;
-	top: 0;
-	width: 100%;
-}
 #group_wrapper{
 	
 }

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/app_manager.html.erb

@@ -13,8 +13,9 @@
 				
 			</div>
 	<div id="holder">
-    
+    	<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
-		<div id="group_wrapper">
+		<div class="viewport">
+		<div id="group_wrapper" class="overview">
 			
 			<div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div>
 			<div class="group_search">
@@ -118,4 +119,5 @@
 			<div class="clear"></div>
 		</div>
 	</div>
+	</div>
 </div>

app/views/desktop/desktop.html.erb

@@ -1,6 +1,6 @@
 		<div id="content">
 			<div id="header" class="hh3">
-				<div class="dtitle thmc1 w2 hh3 hp">
+				<div class="dtitle w2 hh3 hp">
 					<span class="thmtxth">Desktop</span>
 					<div class="section_slc admbg">
 						<ul>
@@ -12,7 +12,9 @@
 				</div>
 			</div>
 			<div id="holder">
-			        <div id="group_wrapper">
+				<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
+					<div class="viewport">
+			        <div id="group_wrapper" class="overview">
 			        <div class="group">
 			            <ul class="grp ui-sortable">
                         	 <li class="element w2 h2 hp vp thmc1 op07" data-category="abc">
@@ -104,6 +106,7 @@
                         <div class="clear"></div>
 						</div>
 					</div>
+					</div>
                     
 			        </div>
 			<div class="clear"></div>

app/views/desktop/index.html.erb

@@ -1,8 +1,61 @@
 <div id="side">
 	<div id="rwidget" class="wh3 thmc4">
-		<a href="desktop" class="widget_fn wh3 hh3" id='desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="home_icon" width="30" height="30"/></span></a>
+		<ul class="docklist">
-		<a href="app_manager" class="widget_fn wh3 hh3" id="app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="app_manager_icon" width="30" height="30"/></span></a>
+			<li class="d_cate"><a href="desktop" class="widget_fn wh3 hh3" id='d_desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="Home" id="home_icon" width="30" height="30"/></span></a>
-		<a href="sections" class="widget_fn wh3 hh3" id="sections" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="sections_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 180px;">
+					<li class="dock_item"><a href="app_manager" class="widget_fn wh3 hh3" id="d_app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="App Manager" id="app_manager_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="sections" class="widget_fn wh3 hh3" id="d_sections" onclick="return false;"><span class="widget_icon"><img src="" alt="All Sections" id="sections_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="settings" class="widget_fn wh3 hh3" id="d_settings" onclick="return false;"><span class="widget_icon"><img src="" alt="Settings" id="settings_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="publication" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="Publication" id="publication_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 180px;">
+					<li class="dock_item"><a href="journal_p" class="widget_fn wh3 hh3" id='d_journal_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Journal Papers" id="journal_p_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="seminar_p" class="widget_fn wh3 hh3" id='d_seminar_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Seminar Papers" id="seminar_p_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="books" class="widget_fn wh3 hh3" id='d_books' onclick="return false;"><span class="widget_icon"><img src="" alt="Books" id="books_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="research" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="Research" id="research_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 240px;">
+					<li class="dock_item"><a href="research_d" class="widget_fn wh3 hh3" id='d_research_d' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Domain" id="research_d_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="research_p" class="widget_fn wh3 hh3" id='d_research_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Project" id="research_p_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="patents" class="widget_fn wh3 hh3" id='d_patents' onclick="return false;"><span class="widget_icon"><img src="" alt="Patents" id="patents_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="labs" class="widget_fn wh3 hh3" id='d_labs' onclick="return false;"><span class="widget_icon"><img src="" alt="Labs" id="labs_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="experience" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="Experience" id="experience_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 300px;">
+					<li class="dock_item"><a href="working" class="widget_fn wh3 hh3" id='d_working' onclick="return false;"><span class="widget_icon"><img src="" alt="Working" id="working_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="education" class="widget_fn wh3 hh3" id='d_education' onclick="return false;"><span class="widget_icon"><img src="" alt="Education" id="education_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="honors" class="widget_fn wh3 hh3" id='d_honors' onclick="return false;"><span class="widget_icon"><img src="" alt="Honors" id="honors_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="activities" class="widget_fn wh3 hh3" id='d_activities' onclick="return false;"><span class="widget_icon"><img src="" alt="Activities" id="activities_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="clubs" class="widget_fn wh3 hh3" id='d_clubs' onclick="return false;"><span class="widget_icon"><img src="" alt="Clubs" id="clubs_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="landt" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="Learning & Teaching" id="landt_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 180px;">
+					<li class="dock_item"><a href="courses" class="widget_fn wh3 hh3" id='d_courses' onclick="return false;"><span class="widget_icon"><img src="" alt="Courses" id="courses_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="homework" class="widget_fn wh3 hh3" id='d_homework' onclick="return false;"><span class="widget_icon"><img src="" alt="Homework" id="homework_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="certification" class="widget_fn wh3 hh3" id='d_certification' onclick="return false;"><span class="widget_icon"><img src="" alt="Certification" id="certification_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="personal" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="Personal" id="personal_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 300px;">
+					<li class="dock_item"><a href="mypage" class="widget_fn wh3 hh3" id='d_mypage' onclick="return false;"><span class="widget_icon"><img src="" alt="myPage" id="mypage_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="blog" class="widget_fn wh3 hh3" id='d_blog' onclick="return false;"><span class="widget_icon"><img src="" alt="Blog" id="blog_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="album" class="widget_fn wh3 hh3" id='d_album' onclick="return false;"><span class="widget_icon"><img src="" alt="Album" id="album_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="calendar" class="widget_fn wh3 hh3" id='d_calendar' onclick="return false;"><span class="widget_icon"><img src="" alt="Calendar" id="calendar_icon" width="30" height="30"/></span></a></li>
+					<li class="dock_item"><a href="files" class="widget_fn wh3 hh3" id='d_files' onclick="return false;"><span class="widget_icon"><img src="" alt="Files" id="files_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="orbit" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="Orbit" id="orbit_icon" width="30" height="30"/></span></a>
+				<ul class="dock_child hh3 thmc4" style="width: 60px;">
+					<li class="dock_item"><a href="connection" class="widget_fn wh3 hh3" id='d_connection' onclick="return false;"><span class="widget_icon"><img src="" alt="Academia Connection" id="connection_icon" width="30" height="30"/></span></a></li>
+				</ul>
+			</li>
+			<li class="d_cate"><a href="appstore" class="widget_fn wh3 hh3" id='d_appstore' onclick="return false;"><span class="widget_icon"><img src="" alt="AppStore" id="appstore_icon" width="30" height="30"/></span></a></li>
+		</ul>
+		<div class="fn_des hh3 admbg admtxt"></div>
 	</div>
 </div>
 <div id="container">

app/views/desktop/sections.html.erb

@@ -1,11 +1,13 @@
 <div id="content">
 		<div id="header" class="hh3">
-			<div class="dtitle thmc1 w2 hh3 hp">
+			<div class="dtitle w2 hh3 hp">
 				<span class="thmtxth">All Sections</span>
 			</div>
 		</div>
 		<div id="holder">
-			<div id="group_wrapper">
+			<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
+			<div class="viewport">
+			<div id="group_wrapper" class="overview">
 				<div class="group">
 					<div class="section_label" >
 						<ul>
@@ -169,3 +171,4 @@
 			</div>
 		</div>
 		</div>
+	</div>

public/desktop_pages/desktop.html

@@ -1,6 +1,6 @@
 		<div id="content">
 			<div id="header" class="hh3">
-				<div class="dtitle thmc1 w2 hh3 hp">
+				<div class="dtitle w2 hh3 hp">
 					<span class="thmtxth">Desktop</span>
 					<div class="section_slc admbg">
 						<ul>

public/desktop_pages/sections.html

@@ -1,6 +1,6 @@
 <div id="content">
 		<div id="header" class="hh3">
-			<div class="dtitle thmc1 w2 hh3 hp">
+			<div class="dtitle w2 hh3 hp">
 				<span class="thmtxth">All Sections</span>
 			</div>
 		</div>

public/desktop_themes/default/settings/default.json

@@ -1 +1,39 @@
-{"css":"default.css","background":"background.jpg","tilecolor":["thmc1","thmc2"],"icons":{"home":"home.png","app_manager":"apps.png","sections":"sections.png"}}
+{
+	"css":"default.css",
+	"background":"background.jpg",
+	"tilecolor":["thmc1","thmc2"],
+	"icons":{
+		"home":"d_home.png",
+		"app_manager":"d_app_manager.png",
+		"sections":"d_sections.png",
+		"settings":"d_settings.png",
+		"publication":"d_publication.png",
+		"journal_p":"d_journal_p.png",
+		"seminar_p":"d_seminar_p.png",
+		"books":"d_books.png",
+		"research":"d_research.png",
+		"research_d":"d_research_d.png",
+		"research_p":"d_research_p.png",
+		"patents":"d_patents.png",
+		"labs":"d_labs.png",
+		"experience":"d_experience.png",
+		"working":"d_working.png",
+		"education":"d_education.png",
+		"honors":"d_honors.png",
+		"activities":"d_activities.png",
+		"clubs":"d_clubs.png",
+		"landt":"d_landt.png",
+		"courses":"d_courses.png",
+		"homework":"d_homework.png",
+		"certification":"d_certification.png",
+		"personal":"d_personal.png",
+		"mypage":"d_mypage.png",
+		"blog":"d_blog.png",
+		"album":"d_album.png",
+		"calendar":"d_calendar.png",
+		"files":"d_files.png",
+		"orbit":"d_orbit.png",
+		"connection":"d_connection.png",
+		"appstore":"d_appstore.png"
+		}
+	}