备忘录使用列表显示

This commit is contained in:
luchenqun 2018-04-15 21:59:09 +08:00
parent 5d90a022b2
commit 0d5cc8ffc1
2 changed files with 89 additions and 61 deletions

View File

@ -130,8 +130,9 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}); });
} }
$scope.copy = function(content) { $scope.copy = function (content, $event) {
dataService.clipboard(content); dataService.clipboard(content);
$event && $event.stopPropagation();
} }
$scope.delNote = function (id, content) { $scope.delNote = function (id, content) {
@ -264,6 +265,21 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
} }
} }
$scope.noteClick = function (note, flag, $event) {
if (!note.detail || flag) {
var detail = note.detail;
$scope.notes.forEach((note) => {
note.detail = false;
$("#" + note.id).css("background", "none");
})
note.detail = !detail;
$("#" + note.id).css("background", note.detail ? "#f8f8f8" : "none");
}
if (flag) {
$event && $event.stopPropagation();
}
}
function updateSelectTag(tagId) { function updateSelectTag(tagId) {
$scope.tags.forEach((tag) => { $scope.tags.forEach((tag) => {
tag.clicked = false; tag.clicked = false;
@ -306,6 +322,13 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
bookmarkService.getNotes(params) bookmarkService.getNotes(params)
.then((data) => { .then((data) => {
$scope.notes = data.notes; $scope.notes = data.notes;
$scope.notes.forEach((note) => {
note.brief = note.content;
while (note.brief.indexOf("\n") > 0) {
note.brief = note.brief.replace(/\n/g, "");
}
note.brief = " " + note.brief.substring(0, 200) + (note.content.length > 200 ? " ......" : "");
})
$scope.totalPages = Math.ceil(data.totalItems / perPageItems); $scope.totalPages = Math.ceil(data.totalItems / perPageItems);
$scope.totalItems = data.totalItems; $scope.totalItems = data.totalItems;
$timeout(function () { $timeout(function () {

View File

@ -1,6 +1,12 @@
<div class="ui segment js-note-card"> <div class="ui segment js-note-card" style="padding:14px 0px 0px 0px;">
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id)">{{ tag.name }} ({{ tag.ncnt || 0 }})</div> <div class="ui container" style="padding-left:14px">
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。"><i class="plus icon" style="margin-right:0px;"></i></div> <div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags"
ng-click="clickTag(tag.id)">{{ tag.name }} ({{ tag.ncnt || 0 }})</div>
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。">
<i class="plus icon" style="margin-right:0px;"></i>
</div>
</div>
<div class="ui container" style="padding-left:14px;padding-bottom:14px">
<div class="ui form" ng-show="add"> <div class="ui form" ng-show="add">
<div class="required field"> <div class="required field">
<label>内容</label> <label>内容</label>
@ -15,8 +21,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="ui divider" ng-show="notes.length > 0"></div> </div>
<div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0"> <div class="ui divider" ng-show="notes.length > 0" style="margin:0px;"></div>
<div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0" style="margin-left:14px;margin-right:14px">
<i class="close icon" ng-click="closeNote()"></i> <i class="close icon" ng-click="closeNote()"></i>
<div class="content"> <div class="content">
<div class="header">系统提示! <div class="header">系统提示!
@ -26,35 +33,33 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="ui five stackable cards"> <div class="ui vertical segment" ng-repeat="note in notes" ng-click="noteClick(note)" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)" id="{{note.id}}" style="margin:0px;padding-top:10px;padding-bottom: 10px;">
<div class="card" ng-repeat="note in notes" id="{{note.id}}" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)"> <pre class="note-content" title="单击查看详情C复制D删除E编辑" style="margin:0px;padding-left:14px;padding-right:14px" ng-if="!note.detail">{{ note.brief }}</pre>
<div class="content" style="height:200px;margin-bottom:8px;" ng-dblclick="detailNote(note.content)"> <pre class="note-content" title="双击复制" ng-dblclick="copy(note.content)" style="margin:0px; font-size:16px;padding-left:14px;padding-right:14px" ng-if="note.detail">{{ note.content }}</pre>
<div class="description" style="word-break:break-all;max-width:175px;height:184px;line-height:21px; word-wrap:break-word;text-overflow:ellipsis;overflow:hidden;"> <div class="ui right aligned grid" ng-show="note.detail">
<pre class="note-content" style="margin-top:0px;">{{ note.content }}</pre> <div class="sixteen wide column" style="margin:0px 20px 0px 0px;padding:20px 0px 0px 0px;">
</div> <div class="extra content" ng-show="true" ng-mouseleave="note.edit=false;" style="height:50px;">
</div> <div class="ui mini label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName || "未分类" }}</div>
<div class="extra content" ng-show="!note.edit" style="height:50px;padding-right:2px;padding-left:8px;"> <span style="margin:0 8px;">
<span class="left floated like" style="margin-top:6px;"> <span title="添加于{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
<i class="add to calendar icon"></i> <span style="margin-left:-3px;">添加</span>
<span title="{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
</span> </span>
<div class="ui label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName }}</div> <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)"
<i class="ellipsis horizontal icon right floated" style="margin-top:8px;" ng-mouseover="note.edit=true;"></i> title="删除备忘">
</div>
<div class="extra content" ng-show="note.edit" ng-mouseleave="note.edit=false;" style="height:50px;">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)" title="删除备忘">
<label for="noteedit"> <label for="noteedit">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tag_id)" title="编辑备忘"> <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tag_id)"
title="编辑备忘">
</label> </label>
<img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘"> <img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/copy.png"
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/detail.png" ng-click="detailNote(note.content)" title="备忘详情"> id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘">
<i class="chevron up icon" title="收起详情" ng-click="noteClick(note, true, $event)"></i>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ui divider" ng-show="notes.length > 0"></div>
<div style="height:20px;" ng-show="notes.length === 0"></div> <div style="height:20px;" ng-show="notes.length === 0"></div>
<div class="ui grid" ng-show="totalItems>0"> <div class="ui grid" ng-show="totalItems>0" style="margin:0px;padding:0px 14px">
<div class="eight wide column" style="margin-top:10px;"> <div class="eight wide column" style="padding-top:26px;">
<span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)</span>共找到备忘一共约{{totalItems}}个 <span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)</span>共找到备忘一共约{{totalItems}}个
</div> </div>
<div class="eight wide column"> <div class="eight wide column">