journal start

app/assets/javascripts/orbitdesktop.js

@@ -247,7 +247,7 @@ var orbitDesktop = function(dom){
 					var tempstyle="";
 					if(i==0){
 						tempstyle = "style='display:none;'";
-						$("div#desktop span#section_heading").text(section.name);
+						$("#desktop #section_heading").text(section.name);
 					}
 					$("div#desktop ul#section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp w2 hh2" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>'));
 				})
@@ -721,28 +721,30 @@ var orbitDesktop = function(dom){
 		o.currenthtml = target;
 		o.currentface = "journal_p";
 		var bindHandlers = function(){ // bind handler for journal paper
-			$("div#settings ul#setting_left_nav li a").on({
+			$('.s_menu a').on({
 				click: function(){
-					if(!$(this).data("clicked")){
+					if(!$(this).hasClass('active')){
-					var tfunc = $(this).attr("href");
+						var tfunc = $(this).attr('href');
 						switch(tfunc){
-						case "list":
+							case 'list':
 								list();
 							break;
-						case "addpaper":
+							case 'addpaper':
 								addpaper();
 							break;
 						}
-					$("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
+						$('.s_menu a').removeClass('thmc1 thmtxt active');
-					$(this).addClass('thmc1 thmtxt').data('clicked',true);
+						$(this).addClass('thmc1 thmtxt active');
 					}
 				},
 				mouseenter: function(){
-					$(this).removeClass('admtxt').addClass('thmc1 thmtxt');
+					if(!$(this).hasClass('active')){
+						$(this).switchClass('admtxt','thmc1 thmtxt',0);
+					}
 				},
 				mouseleave: function(){
-					var t = $(this).data('clicked') ? '' : 'thmc1 thmtxt';
+					var t = $(this).hasClass('active') ? '' : 'thmc1 thmtxt';
-					$(this).removeClass(t).addClass('admtxt');
+					$(this).switchClass(t,'admtxt',0);
 				}
 			});
 		}

app/assets/stylesheets/desktopmain.css

@@ -229,7 +229,8 @@ a:focus { outline: none; }
 #panel_r { margin-left: 252px; position: relative;}
 
 /* simple dropdown menu */
-.sdm {}
+.sdm { position: relative; }
+.sdm_t { cursor: default; }
 .sdm:hover .sdm_o { display: block; }
 .sdm_o {
 	display: none;
@@ -240,6 +241,7 @@ a:focus { outline: none; }
 	}
 .sdm_o li { border-top: solid 1px #f2f2f2; }
 .sdm_o li:first-child { border: none; }
+.sdm_o a { display: block; }
 .sdm_o .admtxt { display: block; line-height: 36px; }
 .sdm_o .admtxt:hover { background-color: #F0F0F0; }
 
@@ -260,6 +262,17 @@ a:focus { outline: none; }
 .st_c { display: none; }
 .st_c:first-child { display: block; }
 
+
+/* tool bar */
+.toolbar {
+	background-color: #f0f0f0;
+	font-size: 15px;
+	line-height: 36px;
+}
+.toolbar .sdm { display: inline-block; }
+.toolbar .sdm_o { top: 36px; background-color: #f0f0f0; }
+
+
 /* Setting Page */
 .theme_list {}
 .theme_list .ssl_item, .stock_wallpaper .ssl_item { 

app/views/desktop/desktop.html.erb

@@ -2,7 +2,7 @@
 <div id="content">
 	<div id="header" class="hh3">
 		<div class="dtitle w2 hh3 hp sdm">
-			<span class="thmtxth" id="section_heading">Loading...</span>
+			<div class="thmtxth sdm_t" id="section_heading">Loading...</div>
 			<div class="admbg sdm_o">
 				<ul id="section_list">
 				<!--	<li><a class="admtxt hp w2 hh2" href="">Campus</a></li>

app/views/desktop/journal_pages/list.html.erb

@@ -1 +1,64 @@
-This is list page
+<div class="toolbar hh2">
+	<div class="hh2 hp sdm">
+		<div class="sdm_t hh2">[]</div>
+		<div class="admbg sdm_o">
+			<ul id="section_list">
+				<li><a class="hp hh2 admtxt" href="">All</a></li>
+				<li><a class="hp hh2 admtxt" href="">None</a></li>
+			</ul>
+		</div>
+	</div>
+	<div class="hh2 hp sdm">
+		<div class="sdm_t hh2">More</div>
+		<div class="admbg sdm_o">
+			<ul id="section_list">
+				<li><a class="hp hh2 admtxt" href="">Delete</a></li>
+				<li><a class="hp hh2 admtxt" href="">Tag</a></li>
+			</ul>
+		</div>
+	</div>
+	<div class="hh2 hp sdm">
+		<div class="sdm_t hh2">Tag</div>
+		<div class="admbg sdm_o">
+			<ul id="section_list">
+				<li><a class="hp hh2 admtxt" href="">All</a></li>
+				<li><a class="hp hh2 admtxt" href="">Starred</a></li>
+				<li><a class="hp hh2 admtxt" href="">MIT</a></li>
+			</ul>
+		</div>
+	</div>
+	<div class="hh2 hp sdm">
+		<div class="sdm_t hh2">Status</div>
+		<div class="admbg sdm_o">
+			<ul id="section_list">
+				<li><a class="hp hh2 admtxt" href="">All</a></li>
+				<li><a class="hp hh2 admtxt" href="">Published</a></li>
+				<li><a class="hp hh2 admtxt" href="">Pending</a></li>
+			</ul>
+		</div>
+	</div>
+	<div class="hh2 hp sdm">
+		<div class="sdm_t hh2">View</div>
+		<div class="admbg sdm_o">
+			<ul id="section_list">
+				<li><a class="hp hh2 admtxt" href="">Title</a></li>
+				<li><a class="hp hh2 admtxt" href="">File</a></li>
+				<li><a class="hp hh2 admtxt" href="">Journal</a></li>
+				<li><a class="hp hh2 admtxt" href="">Keywords</a></li>
+				<li><a class="hp hh2 admtxt" href="">Abstract</a></li>
+			</ul>
+		</div>
+	</div>
+	<div class="hh2 hp sdm">
+		<div class="sdm_t hh2">Share</div>
+		<div class="admbg sdm_o">
+			<ul id="section_list">
+				<li><a class="hp hh2 admtxt" href="">Full</a></li>
+				<li><a class="hp hh2 admtxt" href="">Abstract</a></li>
+				<li><a class="hp hh2 admtxt" href="">Friends</a></li>
+				<li><a class="hp hh2 admtxt" href="">Private</a></li>
+				<li><a class="hp hh2 admtxt" href="">Group</a></li>
+			</ul>
+		</div>
+	</div>
+</div>