choose notebook to add note/markdown [ok]

app/views/Note/note-dev.html

@@ -81,8 +81,13 @@ function log(o) {
 								id="dropdownMenu2" data-toggle="dropdown"> 
 								<i class="fa fa-angle-down"></i>
 							</a>
-							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2" style="width: 180px;left: -5px;" id="notebookNavForNewNote">
+							<div class="dropdown-menu dropdown-list" style="left: -200px;" >
-							</ul>
+								<!--
+								<input type="text" placeholder="search notebook"/>
+								-->
+								<ul class="clearfix" role="menu" aria-labelledby="dropdownMenu2" id="notebookNavForNewNote">
+								</ul>
+							</div>
 						</div>
 					</div>
 					
@@ -313,19 +318,23 @@ function log(o) {
 							<div class="dropdown" id="myNotebookNavForListNav">
 								<a class="ios7-a dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
 									<span id="curNotebookForListNote">{{msg . "all"}}</span>
+									<!--
 									<i class="fa fa-angle-down"></i>
+									-->
 								</a>
 								<!-- 如果notebook过多, 则会产生滚动 -->
-								<ul class="dropdown-menu" role="menu"
+								<div class="dropdown-menu dropdown-list" style="left: 5px;">
-									aria-labelledby="dropdownMenu1" style="left: 5px;" id="notebookNavForListNote">
+									<ul role="menu" aria-labelledby="dropdownMenu1" id="notebookNavForListNote"></ul>
-								</ul>
+								</div>
 							</div>
 							
 							<!-- 共享的笔记本 -->
 							<div class="dropdown" id="sharedNotebookNavForListNav" style="display: none">
 								<a class="ios7-a dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
 									<span id="curSharedNotebookForListNote">{{msg . "all"}}</span>
+									<!--
 									<i class="fa fa-angle-down"></i>
+									-->
 								</a>
 								<ul class="dropdown-menu" role="menu"
 									aria-labelledby="dropdownMenu2" style="left: 5px;" id="sharedNotebookNavForListNote">

public/css/theme/basic.less

@@ -59,3 +59,123 @@
 #switcher span:before {
 	content: "b";
 }
+
+.dropdown-menu {
+  border-radius: 0;
+  margin:0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid @hColor;
+  /*overflow-x: hidden; */
+  /*overflow-y: scroll;*/
+}
+
+.dropdown-menu li {
+	list-style: none;
+  padding-left: 10px;
+  width: 100%;
+  height: 30px; // 父设置了line-height, 子下拉也受影响, "新建笔记"
+  line-height: 30px;
+}
+.dropdown-menu li > a {
+  color: @aBlackColor;
+  display: block;
+  padding-right: 20px;
+}
+.dropdown-menu > li > a {
+  padding: 3px 20px 3px 0;
+}
+
+#noteList {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  /*
+  overflow-x: hidden;
+  overflow-y: hidden;
+  */
+}
+
+//-----------------
+// 下拉菜单
+.dropdown-submenu {
+    position: relative;
+}
+.dropdown-submenu > ul.dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-left: -3px !important;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    padding-top: 10px !important;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+    display: block;
+}
+// 箭头
+.dropdown-submenu:after {
+    display: block;
+    content: " ";
+    position: absolute;
+    right: 0;
+    top: 10px;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #666;
+}
+
+.dropdown-submenu:hover > a:after {
+    border-left-color: #fff;
+}
+.dropdown-submenu.pull-left {
+    float: none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+    -moz-border-radius: 6px 0 6px 6px;
+    border-radius: 6px 0 6px 6px;
+}
+
+// 动画
+.open > .dropdown-list {
+  -webkit-transform: scale(1, 1);
+  transform: scale(1, 1);  
+}
+.dropdown-list {
+  -webkit-transform-origin: left;
+  transform-origin: top;
+  -webkit-animation-fill-mode: forwards;  
+  animation-fill-mode: forwards; 
+  -webkit-transform: scale(0, 0);
+  display: block;
+  
+  transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
+  -webkit-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
+}
+
+.dropdown-list {
+	width: 530px;
+	border-radius: 3px;
+  ul {
+  	margin: 0;
+  	padding: 0;
+  	li {
+  		float: left;
+  		width: 120px;
+  		margin-left: 10px;
+  		margin-bottom: 10px;
+  		border: 1px dashed #ccc;
+  	}
+  }
+}
+
+.new-note-right {
+	padding: 0 5px;
+	padding-left: 3px
+}

public/css/theme/default.less

@@ -169,29 +169,15 @@ a.raw:hover {
 }
 
 .dropdown-menu {
-  border-radius: 0;
-  margin:0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
   border: 1px solid @hColor;
-  overflow-x: hidden; 
-  overflow-y: auto;
 }
-.dropdown-menu li {
+.dropdown-menu li > a {
-  padding-left: 10px;
-  width: 100%;
-  height: 30px; // 父设置了line-height, 子下拉也受影响, "新建笔记"
-  line-height: 30px;
-}
-.dropdown-menu > li > a {
   color: @aBlackColor;
-  display: inline-block;
-  padding: 3px 3px;
 }
-.dropdown-menu>li:hover, .dropdown-menu>li:focus {
+.dropdown-menu li:hover, .dropdown-menu li:focus {
   background-color: @borderColor;
 }
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+.dropdown-menu  li > a:hover, .dropdown-menu li > a:focus {
   background-color: @borderColor;
 }
 
@@ -353,13 +339,7 @@ a.raw:hover {
   left: @leftNotebookWidth;
 }
 #noteList {
-  position: absolute;
-  bottom: 0;
-  top: 0;
   width: @noteListWidth;
-  
-  overflow-x: hidden;
-  overflow-y: hidden;
   border-right: 1px solid #cfcfcf;
   border-left: 1px solid #cfcfcf;
 }
@@ -1149,7 +1129,6 @@ background-position:-1px -670px
 	}
 }
 .new-note-right {
-	padding: 0 5px;
 	&:hover {
 		background-color:@borderColor;
 	}

public/css/theme/simple.less

@@ -160,29 +160,15 @@ a.raw:hover {
 }
 
 .dropdown-menu {
-  border-radius: 0;
-  margin:0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
   border: 1px solid @hColor;
-  overflow-x: hidden; 
-  overflow-y: auto;
 }
-.dropdown-menu li {
+.dropdown-menu li > a {
-  padding-left: 10px;
-  width: 100%;
-  height: 30px; // 父设置了line-height, 子下拉也受影响, "新建笔记"
-  line-height: 30px;
-}
-.dropdown-menu > li > a {
   color: @aBlackColor;
-  display: inline-block;
-  padding: 3px 3px;
 }
-.dropdown-menu>li:hover, .dropdown-menu>li:focus {
+.dropdown-menu li:hover, .dropdown-menu li:focus {
   background-color: @borderColor;
 }
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+.dropdown-menu  li > a:hover, .dropdown-menu li > a:focus {
   background-color: @borderColor;
 }
 
@@ -342,12 +328,7 @@ a.raw:hover {
 }
 
 #noteList {
-  position: absolute;
-  bottom: 0;
-  top: 0;
   width: @noteListWidth;
-  overflow-x: hidden;
-  overflow-y: hidden;
   border-right: 1px solid @borderColor;
   border-left: 1px solid @borderColor;
 }
@@ -1108,7 +1089,6 @@ background-position:-1px -670px
 	}
 }
 .new-note-right {
-	padding: 0 5px;
 	&:hover {
 		background-color:@borderColor;
 	}

public/css/zTreeStyle/zTreeStyle.css

@@ -8,7 +8,7 @@ website:	http://code.google.com/p/jquerytree/
 
 -------------------------------------*/
 
-.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
+.ztree * {padding:0; margin:0; font-size:12px;}
 .ztree {margin:0; padding:5px; color:#333}
 .ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
 .ztree li ul{ margin:0; padding:0 0 0 18px}

public/js/app/note.js

@@ -1288,7 +1288,7 @@ $(function() {
 	});
 	$("#notebookNavForNewNote").on("click", "li div", function() {
 		var notebookId = $(this).attr("notebookId");
-		if($(this).text() == "Markdown") {
+		if($(this).hasClass("new-note-right")) {
 			Note.newNote(notebookId, false, "", true);
 		} else {
 			Note.newNote(notebookId);

public/js/app/notebook.js

@@ -224,6 +224,9 @@ Notebook.cacheAllNotebooks = function(notebooks) {
 // nav 为了新建, 快速选择, 移动笔记
 // 这些在添加,修改,删除notebooks都要变动!!!
 Notebook.renderNav = function(nav) {
+	var self = this;
+	self.changeNav();
+	return;
 	var navForListNote = "";
 	var navForNewNote = "";
 	var navForMoveNote = "";
@@ -248,10 +251,40 @@ Notebook.renderNav = function(nav) {
 // 修改,添加,删除notebook后调用
 // 改变nav
 // 直接从html中取!
+Notebook.getChangedNotebooks = function(notebooks) {
+	var self = this;
+	var navForNewNote = "";
+	
+	var len = notebooks.length;
+	for(var i = 0; i < len; ++i) {
+		var notebook = notebooks[i];
+		
+		var classes = "";
+		if(!isEmpty(notebook.Subs)) {
+			classes = "dropdown-submenu";
+		}
+		var eachForNew = t('<li role="presentation" class="clearfix ?"><div class="new-note-left pull-left" title="为该笔记本新建笔记" href="#" notebookId="?">?</div><div title="为该笔记本新建markdown笔记" class="new-note-right pull-left" notebookId="?">M</div>', classes, notebook.NotebookId, notebook.Title, notebook.NotebookId);
+		
+		if(!isEmpty(notebook.Subs)) {
+			eachForNew  += "<ul class='dropdown-menu'>";
+			eachForNew  += self.getChangedNotebooks(notebook.Subs);
+			eachForNew  += "</ul>";
+		}
+		
+		eachForNew  += '</li>';
+		
+		navForNewNote += eachForNew;
+	}
+	return navForNewNote;
+}
 Notebook.changeNav = function() {
+	var self = Notebook;
 	var navForListNote = "";
 	var navForNewNote = "";
 	
+	var notebooks = Notebook.tree.getNodes();
+	var html = self.getChangedNotebooks(notebooks);
+	
 	var i = 0;
 	var $list = $("#notebookList li a");
 	var len = $list.length - 1;
@@ -277,9 +310,9 @@ Notebook.changeNav = function() {
 		}
 	});
 	
-	$("#notebookNavForListNote").html(navForListNote);
+	$("#notebookNavForListNote").html(html);
-	$("#notebookNavForNewNote").html(navForNewNote);
+	$("#notebookNavForNewNote").html(html);
-	$("#notebookNavForMoveNote").html(navForNewNote);
+	$("#notebookNavForMoveNote").html(html);
 	
 	// 移动, 复制重新来, 因为nav变了, 移动至-----的notebook导航也变了
 	Note.initContextmenu();

public/js/app/page.js

@@ -631,7 +631,7 @@ $(function() {
 	// dropdown
 	$('.dropdown').on('shown.bs.dropdown', function () {
 		var $ul = $(this).find("ul");
-		$ul.height(getMaxDropdownHeight(this));
+		// $ul.css("max-height", getMaxDropdownHeight(this));
 	});
 	
 	//--------