Merge branch 'pr/166'

# Conflicts: # public/themes/default.css
2025-10-13 22:57:22 +00:00 · 2016-09-21 18:59:57 +08:00
parent 5ac8a282d3 fbc39e7918
commit ca24e8ef72
8 changed files with 164 additions and 70 deletions
--- a/note.html
+++ b/note.html
@@ -237,6 +237,10 @@ function log(o) {
              <div class="pull-left" id="tagSearch" style="line-height: 38px">
              </div>

+              <div id="viewModeDropdown">
+                <span class="fa fa-th-list" title="Switch view"></span>                
+              </div>
+
              <div id="newMyNote">
                <a id="newNoteBtn" title="New note">
                  <span class="new-note-text"  title="New note">+</span>
--- a/public/js/app/note.js
+++ b/public/js/app/note.js
@@ -11,21 +11,6 @@ Note.curNoteId = "";

 Note.interval = ""; // 定时器

-// 这里, settings, blog, star
-Note.itemIsBlog = '<div class="item-blog"><i class="fa fa-bold" title="' + getMsg('Blog') + '"></i></div><div class="item-conflict-info"><i class="fa fa-bug" title="' + getMsg('Conflict') + '!!"></i></div><div class="item-star"><i class="fa fa-star-o" title="' + getMsg('Star') + '"></i></div><div class="item-setting"><i class="fa fa-cog" title="' +  getMsg('Setting') + '"></i></div>';
-
-// for render
-Note.itemTplNoImg = '<li href="#" class="item ?" data-seq="?" noteId="?">'
-Note.itemTplNoImg += Note.itemIsBlog +'<div class="item-desc"><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
-
-// 有image
-Note.itemTpl = '<li href="#" class="item ? item-image" data-seq="?" noteId="?"><div class="item-thumb" style=""><img src="?"/></div>'
-Note.itemTpl +=Note.itemIsBlog + '<div class="item-desc" style=""><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
-
-// for new
-Note.newItemTpl = '<li href="#" class="item item-active ?" data-seq="?" fromUserId="?" noteId="?">'
-Note.newItemTpl += Note.itemIsBlog + '<div class="item-desc" style="right: 0px;"><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
-
 Note.noteItemListO = $("#noteItemList");
 Note.$itemList = $('#noteItemList');

@@ -34,6 +19,34 @@ Note.$itemList = $('#noteItemList');
 Note.cacheByNotebookId = {all: {}};
 Note.notebookIds = {}; // notebookId => true

+// 初始化模版字符串
+(function() {
+  Note.itemTpl = {};
+  Note.itemTplNoImg = {};
+  // blog, star, settings
+  var itemIsBlog = '<div class="item-blog"><i class="fa fa-bold" title="' + getMsg('Blog') + '"></i></div><div class="item-conflict-info"><i class="fa fa-bug" title="' + getMsg('Conflict') + '!!"></i></div><div class="item-star"><i class="fa fa-star-o" title="' + getMsg('Star') + '"></i></div><div class="item-setting"><i class="fa fa-cog" title="' +  getMsg('Setting') + '"></i></div>';
+
+  // list view
+  Note.itemTplNoImg.list = '<li href="#" class="item list-item ?" data-seq="?" noteId="?">';
+  Note.itemTplNoImg.list += itemIsBlog + '<div class="item-desc"><p class="item-title">?</p><p class="hidden">?</p><p class="hidden">?</p><p class="hidden">?</p></div></li>';
+  Note.itemTpl.list = '<li href="#" class="item list-item ?" data-seq="?" noteId="?"><p class="hidden">?</p>';
+  Note.itemTpl.list += itemIsBlog + '<div class="item-desc"><p class="item-title">?</p><p class="hidden">?</p><p class="hidden">?</p><p class="hidden">?</p></div></li>';
+
+  // summary view
+  Note.itemTplNoImg.summary = '<li href="#" class="item summary-item ?" data-seq="?" noteId="?">';
+  Note.itemTplNoImg.summary += itemIsBlog + '<div class="item-desc"><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
+  Note.itemTpl.summary = '<li href="#" class="item summary-item ? item-image" data-seq="?" noteId="?"><div class="item-thumb" style=""><img src="?"/></div>';
+  Note.itemTpl.summary += itemIsBlog + '<div class="item-desc" style=""><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
+})();
+
+Note.getItemTpl = function() {
+  return Note.itemTpl[Config.view || 'summary'];
+}
+
+Note.getItemTplNoImg = function() {
+  return Note.itemTplNoImg[Config.view ||'summary'];
+}
+
 // 定时保存信息
 Note.intervalTime = 10 * 1000; // 10秒
 Note.startInterval = function() {
@@ -266,7 +279,7 @@ Note.curHasChanged = function(force) {
 		hasChanged.hasChanged = true; // 本页使用用小写
 		hasChanged.Title = title; // 要传到后台的用大写
 	}
-	
+
 	if(!arrayEqual(cacheNote.Tags, tags)) {
 		hasChanged.hasChanged = true;
 		hasChanged.Tags = tags;
@@ -312,14 +325,14 @@ Note.curHasChanged = function(force) {
 	else {
 		content = contents;
 	}
-	
+
 	if (cacheNote.Content != content) {
 		hasChanged.hasChanged = true;
 		hasChanged.Content = content;
-		
+
 		// 从html中得到...
 		var c = preview || content;
-		
+
 		// 不是博客或没有自定义设置的
 		if(!cacheNote.HasSelfDefined || !cacheNote.IsBlog) {
 			hasChanged.Desc = Note.genDesc(c);
@@ -658,7 +671,7 @@ Note.setCurNoteId = function(noteId) {
 	Note.curNoteId = noteId;
 	Note.inChangeNoteId = '';
 };
-// 清空curNoteId, 
+// 清空curNoteId,
 Note.clearCurNoteId = function () {
 	// 为什么要++? 避免刚清空, 因为内容的延迟又设置回去了
 	Note.contentAjaxSeq++;
@@ -771,8 +784,6 @@ Note.reRenderNote = function(noteId) {
 	});
 };

-// 渲染
-
 // 更改信息到左侧
 // 定时更改 当前正在编辑的信息到左侧导航
 // 或change select. 之前的note, 已经改变了
@@ -788,6 +799,9 @@ Note.renderChangedNote = function(changedNote) {
 		// 如果标题改了, 如果也在star列表中, 那也要改star的标题啊
 		Note.changeStarNoteTitle(changedNote.NoteId, trimTitle(changedNote.Title));
 	}
+  if($leftNoteNav.hasClass("list-item")) {
+    return; //list view只需要更新title
+  }
 	if(changedNote.Desc) {
 		$leftNoteNav.find(".desc").html(trimTitle(changedNote.Desc));
 	}
@@ -869,7 +883,7 @@ Note.renderNoteContent = function(content, dontNeedSetReadonly, seq2) {
 		}
 	});

-	// 只有在renderNoteContent时才设置curNoteId
+  // 只有在renderNoteContent时才设置curNoteId
 	// Note.setCurNoteId(content.NoteId);

 	// 重新渲染到左侧 desc, 因为笔记传过来是没有desc的
@@ -887,25 +901,6 @@ Note.renderNoteDesc = function(note) {
 	Note.renderChangedNote(note);
 };

-// 初始化时渲染最初的notes
-/**
-    <div id="noteItemList">
-	  <!--
-      <div href="#" class="item">
-        <div class="item-thumb" style="">
-          <img src="images/a.gif"/>
-        </div>
-
-        <div class="item-desc" style="">
-            <p class="item-title">?</p>
-            <p class="item-text">
-            	?
-            </p>
-        </div>
-      </div>
-      -->
-*/
-
 Note.showEditorMask = function() {
 	$("#editorMask").css("z-index", 10).show();
 	// 要判断是否是垃圾筒
@@ -1002,9 +997,9 @@ Note._getNoteHtmlObjct = function(note, isShared) {

 	var tmp;
 	if(note.ImgSrc) {
-		tmp = tt(Note.itemTpl, classes, this.newNoteSeq(), note.NoteId, Note.fixImageSrc(note.ImgSrc), note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc);
+		tmp = tt(Note.getItemTpl(), classes, this.newNoteSeq(), note.NoteId, Note.fixImageSrc(note.ImgSrc), note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc);
 	} else {
-		tmp = tt(Note.itemTplNoImg, classes, this.newNoteSeq(), note.NoteId, note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc);
+		tmp = tt(Note.getItemTplNoImg(), classes, this.newNoteSeq(), note.NoteId, note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc);
 	}
 	// blog ?
 	if(!note.IsBlog) {
@@ -1049,9 +1044,9 @@ Note._renderNotes = function(notes, forNewNote, isShared, tang) { // 第几趟

 		var tmp;
 		if(note.ImgSrc) {
-			tmp = tt(Note.itemTpl, classes, i, note.NoteId, Note.fixImageSrc(note.ImgSrc), note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc || '');
+			tmp = tt(Note.getItemTpl(), classes, i, note.NoteId, Note.fixImageSrc(note.ImgSrc), note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc || '');
 		} else {
-			tmp = tt(Note.itemTplNoImg, classes, i, note.NoteId, note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc || '');
+			tmp = tt(Note.getItemTplNoImg(), classes, i, note.NoteId, note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc || '');
 		}
 		if(!note.IsBlog) {
 			tmp = $(tmp);
@@ -1127,7 +1122,7 @@ Note.newNote = function(notebookId, isShare, fromUserId, isMarkdown) {
 	// 是否是为共享的notebook添加笔记, 如果是, 则还要记录fromUserId
 	var newItem = "";

-	var baseClasses = "item-my";
+	var baseClasses = "item-my item-active";
 	if(isShare) {
 		baseClasses = "item-shared";
 	}
@@ -1136,7 +1131,7 @@ Note.newNote = function(notebookId, isShare, fromUserId, isMarkdown) {
 	var notebookTitle = notebook ? notebook.Title : "";
 	var curDate = getCurDatetime();

-	newItem = tt(Note.newItemTpl, baseClasses, me.newNoteSeq(), "", note.NoteId, note.Title, notebookTitle, curDate, "");
+	newItem = tt(Note.getItemTplNoImg(), baseClasses, me.newNoteSeq(), note.NoteId, note.Title, notebookTitle, curDate, "");

 	newItem = $(newItem);
 	newItem.find(".item-blog").hide();
@@ -1801,7 +1796,7 @@ Note.toggleReadOnly = function(needSave) {
 	if (needSave) {
 		Note.curChangedSaveIt(true);
 	}
-	
+
 	Note.readOnly = true;
 	LEA.readOnly = true;

@@ -2141,7 +2136,7 @@ Note.addGetNoteContentLazy = function(noteId) {
 	me.startGetNoteContentLazy();
 };

-// render notes后, 
+// render notes后,
 // 开始加载
 Note.startGetNoteContentLazy = function() {
 	var me = this;
@@ -2336,7 +2331,7 @@ Note.initContextmenu = function() {
 	    });
 	    function dialogOperateNotes(options) {
 	    	$("#leanoteDialog #modalTitle").html(getMsg("selectNotebook"));
-	    	
+
 	    	$("#leanoteDialog .modal-body").html('<p><strong>'+getMsg("doubleClick")+'</strong></p><ul id="notebookTree" class="ztree showIcon"></ul>');
 	    	$("#leanoteDialog .modal-footer").html('\
            	<button type="button" class="btn btn-default" data-dismiss="modal">'+getMsg("Close")+'</button>\
@@ -2788,7 +2783,7 @@ Note.getBatchNoteIds = function () {
 };
 Note.batch = {
 	$noteItemList: $("#noteItemList"),
-	
+
 	cancelInBatch: function () {
 		Note.inBatch = false;
 		this.$body.removeClass('batch');
@@ -2947,7 +2942,7 @@ Note.batch = {
 			//----------
 			// 多选操作
 			//----------
-			
+
 			if (isMulti || isConti) {
 				Note.curChangedSaveIt();
 			}
@@ -2955,7 +2950,7 @@ Note.batch = {
 			// 多选
 			if (isMulti) {
 				me.select($this);
-				
+
 			// 连续选
 			} else if (isConti) {
 				// 选择 开始位置到结束位置
@@ -2974,7 +2969,7 @@ Note.batch = {

 			me.finalFix();
 		});
-		
+
 		//----------

 		// 鼠标拖动开始
@@ -3226,6 +3221,38 @@ $(function() {
 		Notebook.searchNotebookForList(key);
 	});

+  // 切换列表视图
+  $("#viewModeDropdown").click(function() {
+    console.log("*******");
+    var themeSubmenus = new gui.Menu();
+    themeSubmenus.append(new gui.MenuItem({
+      checked: Config.view === "summary",
+      label: "摘要视图",
+      type: "checkbox",
+      click: function() {
+        Config.view = 'summary';
+        Notebook.renderCurNotebook();
+        Api.writeConfig(Config);
+      }
+    }));
+    themeSubmenus.append(new gui.MenuItem({
+      checked: Config.view === "list",
+      label: "列表视图",
+      type: "checkbox",
+      click: function() {
+        Config.view = 'list';
+        Notebook.renderCurNotebook();
+        Api.writeConfig(Config);
+      }
+    }));
+    
+    var $this = $(this);
+    var x = $this.offset().left;
+    var y = $this.offset().top + $this.height();
+    themeSubmenus.popup(gui.getCurrentWindow(), Math.round(x), Math.round(y));
+  });
+ 
+
 	//---------------------------
 	// 搜索, 按enter才搜索
 	/*
@@ -3452,7 +3479,7 @@ Note.addSync = function(notes) {
 		// 避免trash的也加进来
 		if (!note.IsDeleted) {
 			if (
-				(note.IsTrash && Notebook.curNotebookIsTrash()) 
+				(note.IsTrash && Notebook.curNotebookIsTrash())
 				|| !note.IsTrash) {

 				Note.addNoteCache(note);
--- a/public/js/app/notebook.js
+++ b/public/js/app/notebook.js
@@ -730,6 +730,9 @@ Notebook.curActiveNotebookIsTrash = function() {
 	return Notebook.isTrashNotebookId($("#notebookList .curSelectedNode").attr("notebookId"));
 };

+Notebook.renderCurNotebook = function() {
+  Notebook.changeNotebook(Notebook.curNotebookId);
+}
 // 改变笔记本
 // 0. 改变样式
 // 1. 改变note, 此时需要先保存
--- a/public/js/app/page.js
+++ b/public/js/app/page.js
@@ -1964,7 +1964,7 @@ function setMacTopMenu() {
          accelerator: isMac_ ? 'Command+R' : 'Ctrl+R',
          click: function() {
          	onClose(function() {
-				gui.win.reload();
+				      gui.win.reload();
          	});
          }
        },
@@ -1973,6 +1973,25 @@ function setMacTopMenu() {
          accelerator: isMac_ ? 'Alt+Command+I' : 'Ctrl+I',
          click: function() { gui.win.toggleDevTools(); }
        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Summary View',
+          click: function() {
+            Config.view = 'summary';
+            Notebook.renderCurNotebook();
+            Api.writeConfig(Config);
+          },
+        },
+        {
+          label: 'List View',
+          click: function() {
+            Config.view = 'list';
+            Notebook.renderCurNotebook();
+            Api.writeConfig(Config);
+          },
+        },
      ]
    },
    {
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -1176,7 +1176,6 @@ h3 {
 }
 #noteItemList .item {
  position: relative;
-  height: 70px;
  overflow: hidden;
  cursor: default;
  border: 1px solid #ebeff2;
@@ -1185,7 +1184,7 @@ h3 {
  background-color: #fff;
 }
 /*
-#noteItemList .item:hover, 
+#noteItemList .item:hover,
 #noteItemList .contextmenu-hover {
  background-color: #ddd !important;
  //color: @aBlackColor;
@@ -1226,16 +1225,18 @@ h3 {
  border-radius: 3px;
  text-align: center;
 }
-.item-thumb img {
+#noteItemList .item-thumb img {
  max-width: 66px;
 }
-.item-title {
+#noteItemList .item-title {
+  /*font-weight: 400;*/
  font-size: 16px;
  height: 22px;
  line-height: 20px;
  overflow: hidden;
  margin-bottom: 0px;
  border-bottom: dashed 1px #ebeff2;
+  color: #000000;
 }
 #noteItemList .item-desc {
  position: absolute;
@@ -1250,13 +1251,13 @@ h3 {
 #noteItemList .item-image .item-desc {
  right: 70px;
 }
-.item-info {
+#noteItemList .item-info {
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
 }
-.desc {
+#noteItemList .desc {
  margin: 0;
  word-wrap: break-word;
  text-overflow: ellipsis;
@@ -1264,6 +1265,16 @@ h3 {
  overflow: hidden;
  white-space: nowrap;
 }
+/*list view & summary view*/
+#noteItemList .summary-item {
+  height: 70px;
+}
+#noteItemList .list-item {
+  height: 30px;
+}
+#noteItemList .summary-item .item-title {
+  border-bottom: dashed 1px #ebeff2;
+}
 #editorMask {
  position: absolute;
  top: 0px;
@@ -1457,6 +1468,15 @@ h3 {
 .close:focus {
  outline: none;
 }
+#viewModeDropdown {
+  width: 30px;
+  height:35px;
+  line-height: 30px;
+  text-align: center;
+  position: relative;
+  z-index: 10000;
+  cursor: pointer;
+}
 #newMyNote {
  position: absolute;
  right: 3px;
@@ -1908,9 +1928,9 @@ img::selection {
  margin-top: -2px;
 }
 /*
-#starNotes li a, 
-.ztree li a, 
-.ztree li span.button, 
+#starNotes li a,
+.ztree li a,
+.ztree li span.button,
 .folderHeader,
 #myProfile .dropdown-toggle,
 #tagNav li a {
@@ -2676,7 +2696,7 @@ a.raw:hover {
 ::-webkit-scrollbar-thumb {
  background-color: @sbc;
  border:1px solid #dadada;
-  border-radius: 5px; 
+  border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb:hover {
  background-color:#dadada
--- a/public/themes/themes/night/theme.css
+++ b/public/themes/themes/night/theme.css
@@ -102,13 +102,20 @@
  /* 不显示图片 */
 }
 #noteItemList .item {
-  height: 69px;
  border: none;
  border-bottom: 1px solid #363636;
  background-color: transparent;
  color: #c2c2c2;
  overflow: hidden;
 }
+#noteItemList .summary-item {
+  /*summary view*/
+  height: 69px;
+}
+#noteItemList .list-item {
+  /*list view*/
+  height: 29px;
+}
 #noteItemList .item-title {
  color: #c2c2c2;
  border-bottom: none;
--- a/public/themes/themes/pebbles_night/theme.css
+++ b/public/themes/themes/pebbles_night/theme.css
@@ -102,13 +102,20 @@
  /* 不显示图片 */
 }
 #noteItemList .item {
-  height: 69px;
  border: none;
  border-bottom: 1px solid #363636;
  background-color: transparent;
  color: #c2c2c2;
  overflow: hidden;
 }
+#noteItemList .summary-item {
+  /*summary view*/
+  height: 69px;
+}
+#noteItemList .list-item {
+  /*list view*/
+  height: 29px;
+}
 #noteItemList .item-title {
  color: #c2c2c2;
  border-bottom: none;
--- a/public/themes/themes/water_night/theme.css
+++ b/public/themes/themes/water_night/theme.css
@@ -102,13 +102,20 @@
  /* 不显示图片 */
 }
 #noteItemList .item {
-  height: 69px;
  border: none;
  border-bottom: 1px solid #363636;
  background-color: transparent;
  color: #c2c2c2;
  overflow: hidden;
 }
+#noteItemList .summary-item {
+  /*summary view*/
+  height: 69px;
+}
+#noteItemList .list-item {
+  /*list view*/
+  height: 29px;
+}
 #noteItemList .item-title {
  color: #c2c2c2;
  border-bottom: none;