liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新添加便签，分类界面操作方式

This commit is contained in:
luchenqun 2018-04-02 15:43:07 +08:00
parent 0f61da40ae
commit 2c947d233c
5 changed files with 85 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/back-tag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

24
public/scripts/controllers/note-controller.js
View File

@ -80,8 +80,6 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
} }
}) })
} }
updateEditPos();
} }
$scope.addNote = function(close) { $scope.addNote = function(close) {
@ -121,7 +119,6 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}) })
$scope.preContent = $scope.content; $scope.preContent = $scope.content;
$scope.content = ''; $scope.content = '';
updateEditPos();
$scope.currentTagId = null; $scope.currentTagId = null;
$scope.currentPage = 1; $scope.currentPage = 1;
$scope.searchWord = ''; $scope.searchWord = '';
@ -221,7 +218,6 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}) })
$scope.add = false; $scope.add = false;
$scope.edit = false; $scope.edit = false;
updateEditPos();
} else { } else {
toastr.error('备忘更新失败！请刷新页面再尝试', "提示"); toastr.error('备忘更新失败！请刷新页面再尝试', "提示");
} }
@ -367,24 +363,4 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
duration: 500, duration: 500,
}); });
} }
// TODO: 我要将编辑按钮固定在容器的右上角
$(window).resize(updateEditPos);
updateEditPos();
function updateEditPos() {
for (var i = 1; i <= 100; i += 10) {
setTimeout(function() {
var offset = $('.js-note-card').offset();
if (offset) {
var t = offset.top;
var l = offset.left;
var w = $('.js-note-card').width();
$('.js-note-add').offset({
top: t + 10,
left: l + w - 10,
})
}
}, 100 * i)
}
}
}]); }]);

100
public/scripts/controllers/tags-controller.js
View File

@ -1,4 +1,4 @@
app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function($scope, $filter, $window, $stateParams, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) { app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function ($scope, $filter, $window, $stateParams, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
console.log("Hello tagsCtr...", $stateParams); console.log("Hello tagsCtr...", $stateParams);
getTags({}); getTags({});
@ -42,12 +42,12 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
var timeagoInstance = timeago(); var timeagoInstance = timeago();
pubSubService.subscribe('MenuCtr.tags', $scope, function(event, data) { pubSubService.subscribe('MenuCtr.tags', $scope, function (event, data) {
console.log('subscribe MenuCtr.tags', data); console.log('subscribe MenuCtr.tags', data);
getTags({}); getTags({});
}); });
$scope.changeOrder = function(index) { $scope.changeOrder = function (index) {
if (index < 0 || index >= $scope.order.length) { if (index < 0 || index >= $scope.order.length) {
return; return;
} }
@ -78,13 +78,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}) })
} }
$timeout(function() { $timeout(function () {
timeagoInstance.cancel(); timeagoInstance.cancel();
timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN'); timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
}, 100) }, 100)
} }
$scope.getBookmarks = function(tagId, currentPage) { $scope.getBookmarks = function (tagId, currentPage) {
console.log(tagId, currentPage) console.log(tagId, currentPage)
$scope.bookmarkClicked = true; $scope.bookmarkClicked = true;
$scope.currentTagId = tagId; $scope.currentTagId = tagId;
@ -97,7 +97,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
perPageItems = ($scope.showMode == 'item') ? 50 : 20; perPageItems = ($scope.showMode == 'item') ? 50 : 20;
$scope.tags.forEach(function(tag) { $scope.tags.forEach(function (tag) {
tag.bookmarkClicked = false; tag.bookmarkClicked = false;
if (tag.id == tagId) { if (tag.id == tagId) {
tag.bookmarkClicked = true; tag.bookmarkClicked = true;
@ -137,7 +137,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
if (!forbidTransition) { if (!forbidTransition) {
dataService.transition($scope.showMode == 'item' ? '.js-tag-costomTag' : '.js-tags-table'); dataService.transition($scope.showMode == 'item' ? '.js-tag-costomTag' : '.js-tags-table');
} }
$timeout(function() { $timeout(function () {
dataService.transition('#' + addBookmarkId, { dataService.transition('#' + addBookmarkId, {
duration: 1000, duration: 1000,
}); });
@ -153,7 +153,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
}; };
$scope.changeCurrentPage = function(currentPage) { $scope.changeCurrentPage = function (currentPage) {
currentPage = parseInt(currentPage) || 0; currentPage = parseInt(currentPage) || 0;
console.log(currentPage); console.log(currentPage);
if (currentPage <= $scope.totalPages && currentPage >= 1) { if (currentPage <= $scope.totalPages && currentPage >= 1) {
@ -162,27 +162,27 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
} }
} }
$scope.jumpToUrl = function(url, id) { $scope.jumpToUrl = function (url, id) {
if (!$scope.editMode) { if (!$scope.editMode) {
$window.open(url, '_blank'); $window.open(url, '_blank');
bookmarkService.clickBookmark({ bookmarkService.clickBookmark({
id: id id: id
}); });
$scope.bookmarkData.bookmarks.forEach(function(bookmark, index) { $scope.bookmarkData.bookmarks.forEach(function (bookmark, index) {
if (bookmark.id == id) { if (bookmark.id == id) {
bookmark.click_count += 1; bookmark.click_count += 1;
bookmark.last_click = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss"); bookmark.last_click = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss");
} }
}) })
// $scope.changeOrder($scope.order.indexOf(true)); // $scope.changeOrder($scope.order.indexOf(true));
$timeout(function() { $timeout(function () {
timeagoInstance.cancel(); timeagoInstance.cancel();
timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN'); timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
}, 100) }, 100)
} }
} }
$scope.delBookmark = function(bookmark) { $scope.delBookmark = function (bookmark) {
$scope.waitDelBookmark = $.extend(true, {}, bookmark); // 利用jQuery执行深度拷贝 $scope.waitDelBookmark = $.extend(true, {}, bookmark); // 利用jQuery执行深度拷贝
console.log(JSON.stringify(bookmark)); console.log(JSON.stringify(bookmark));
dialog = ngDialog.open({ dialog = ngDialog.open({
@ -192,7 +192,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
$scope.confirmDelBookmark = function(bookmarkId) { $scope.confirmDelBookmark = function (bookmarkId) {
var params = { var params = {
id: bookmarkId id: bookmarkId
} }
@ -202,7 +202,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
$("#" + bookmarkId).transition({ $("#" + bookmarkId).transition({
animation: dataService.animation(), animation: dataService.animation(),
duration: 500, duration: 500,
onComplete: function() { onComplete: function () {
$("#" + bookmarkId).remove(); $("#" + bookmarkId).remove();
} }
}); });
@ -221,13 +221,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
$scope.editBookmark = function(bookmarkId) { $scope.editBookmark = function (bookmarkId) {
pubSubService.publish('bookmarksCtr.editBookmark', { pubSubService.publish('bookmarksCtr.editBookmark', {
'bookmarkId': bookmarkId 'bookmarkId': bookmarkId
}); });
} }
$scope.detailBookmark = function(bookmark) { $scope.detailBookmark = function (bookmark) {
bookmark.own = true; bookmark.own = true;
pubSubService.publish('TagCtr.showBookmarkInfo', bookmark); pubSubService.publish('TagCtr.showBookmarkInfo', bookmark);
bookmarkService.clickBookmark({ bookmarkService.clickBookmark({
@ -235,11 +235,11 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
$scope.copy = function(url) { $scope.copy = function (url) {
dataService.clipboard(url); dataService.clipboard(url);
} }
$scope.toggleMode = function() { $scope.toggleMode = function () {
$scope.editMode = !$scope.editMode; $scope.editMode = !$scope.editMode;
if (!$scope.editMode) { if (!$scope.editMode) {
getTags({}); getTags({});
@ -251,20 +251,19 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
animation: dataService.animation(), animation: dataService.animation(),
reverse: 'auto', // default setting reverse: 'auto', // default setting
interval: 50, interval: 50,
onComplete: function() { onComplete: function () {
$('.js-edit').transition('show'); $('.js-edit').transition('show');
} }
}); });
} }
updateEditPos();
} }
$scope.toggleShowMode = function(showMode) { $scope.toggleShowMode = function (showMode) {
$scope.showMode = showMode; $scope.showMode = showMode;
$scope.getBookmarks($scope.currentTagId, 1); $scope.getBookmarks($scope.currentTagId, 1);
} }
$scope.editTag = function(tag) { $scope.editTag = function (tag) {
if (tag.name == "未分类" || tag.name == "收藏") { if (tag.name == "未分类" || tag.name == "收藏") {
toastr.warning('这个是系统默认分类，暂时不允许更新名字！', "警告"); toastr.warning('这个是系统默认分类，暂时不允许更新名字！', "警告");
return; return;
@ -272,7 +271,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
tag.oldName = tag.name; tag.oldName = tag.name;
tag.edit = true; tag.edit = true;
} }
$scope.updateTag = function(tag) { $scope.updateTag = function (tag) {
if (tag.name == tag.oldName) { if (tag.name == tag.oldName) {
toastr.warning('您没有编辑分类', "警告"); toastr.warning('您没有编辑分类', "警告");
return; return;
@ -298,7 +297,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
$scope.delTag = function(tag) { $scope.delTag = function (tag) {
console.log('delTag..........') console.log('delTag..........')
$scope.waitDelTag = $.extend(true, {}, tag); // 利用jQuery执行深度拷贝 $scope.waitDelTag = $.extend(true, {}, tag); // 利用jQuery执行深度拷贝
dialog = ngDialog.open({ dialog = ngDialog.open({
@ -308,7 +307,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
$scope.confirmDelTag = function(tagId, tagName) { $scope.confirmDelTag = function (tagId, tagName) {
ngDialog.close(dialog); ngDialog.close(dialog);
var params = { var params = {
del: (tagName == '未分类' || tagName == "收藏") ? false : true, del: (tagName == '未分类' || tagName == "收藏") ? false : true,
@ -328,7 +327,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
$("#tag" + tagId).transition({ $("#tag" + tagId).transition({
animation: dataService.animation(), animation: dataService.animation(),
duration: 500, duration: 500,
onComplete: function() { onComplete: function () {
$("#tag" + tagId).remove(); $("#tag" + tagId).remove();
$scope.tags.splice(index, 1); $scope.tags.splice(index, 1);
} }
@ -347,7 +346,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
$scope.showAddTag = function() { $scope.showAddTag = function () {
if ($scope.tags.length < 30) { if ($scope.tags.length < 30) {
console.log('showAddTag..........') console.log('showAddTag..........')
$scope.newTag = ""; $scope.newTag = "";
@ -361,7 +360,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
} }
} }
$scope.addTag = function(tag) { $scope.addTag = function (tag) {
console.log(tag); console.log(tag);
if ($scope.tags.length >= 30) { if ($scope.tags.length >= 30) {
toastr.error('标签个数总数不能超过30个！不允许再添加新分类，如有需求，请联系管理员。', "提示"); toastr.error('标签个数总数不能超过30个！不允许再添加新分类，如有需求，请联系管理员。', "提示");
@ -395,12 +394,12 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
} }
} }
$scope.backTag = function(tag) { $scope.backTag = function (tag) {
tag.edit = false; tag.edit = false;
tag.name = tag.oldName; tag.name = tag.oldName;
} }
$scope.storeTagIndex = function() { $scope.storeTagIndex = function () {
$scope.tagsIndex = []; $scope.tagsIndex = [];
$scope.tags.forEach((tag, index) => { $scope.tags.forEach((tag, index) => {
$scope.tagsIndex[index] = { $scope.tagsIndex[index] = {
@ -411,9 +410,9 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
console.log('storeTagIndex'); console.log('storeTagIndex');
} }
$scope.updateTagIndex = function() { $scope.updateTagIndex = function () {
// 要开个timer，因为释放鼠标模型还没更新 // 要开个timer，因为释放鼠标模型还没更新
setTimeout(function() { setTimeout(function () {
var needUpdate = false; var needUpdate = false;
for (var i = 0; i < $scope.tags.length; i++) { for (var i = 0; i < $scope.tags.length; i++) {
if ($scope.tags[i].id != $scope.tagsIndex[i].id) { if ($scope.tags[i].id != $scope.tagsIndex[i].id) {
@ -443,13 +442,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}, 300) }, 300)
} }
$scope.setHoverBookmark = function(bookmark) { $scope.setHoverBookmark = function (bookmark) {
$scope.hoverBookmark = bookmark; $scope.hoverBookmark = bookmark;
} }
// 在输入文字的时候也会触发，所以不要用Ctrl,Shift之类的按键 // 在输入文字的时候也会触发，所以不要用Ctrl,Shift之类的按键
$document.bind("keydown", function(event) { $document.bind("keydown", function (event) {
$scope.$apply(function() { $scope.$apply(function () {
var key = event.key.toUpperCase(); var key = event.key.toUpperCase();
if ($scope.hoverBookmark && dataService.keyShortcuts()) { if ($scope.hoverBookmark && dataService.keyShortcuts()) {
if (key == 'E') { if (key == 'E') {
@ -493,12 +492,10 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
toastr.info('您还没有书签分类，请点击菜单栏的添加按钮进行添加', "提示"); toastr.info('您还没有书签分类，请点击菜单栏的添加按钮进行添加', "提示");
} }
$scope.loadTags = false; $scope.loadTags = false;
updateEditPos();
}) })
.catch((err) => { .catch((err) => {
console.log('getTags err', err); console.log('getTags err', err);
$scope.loadTags = false; $scope.loadTags = false;
updateEditPos();
}); });
pubSubService.publish('Common.menuActive', { pubSubService.publish('Common.menuActive', {
@ -507,7 +504,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}); });
} }
pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function(event, data) { pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function (event, data) {
console.log('subscribe EditCtr.inserBookmarsSuccess', data); console.log('subscribe EditCtr.inserBookmarsSuccess', data);
var menusScope = $('div[ng-controller="menuCtr"]').scope(); var menusScope = $('div[ng-controller="menuCtr"]').scope();
if (menusScope.login && menusScope.selectLoginIndex == 1) { if (menusScope.login && menusScope.selectLoginIndex == 1) {
@ -538,7 +535,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
} }
}); });
pubSubService.subscribe('EditCtr.addTagsSuccess', $scope, function(event, data) { pubSubService.subscribe('EditCtr.addTagsSuccess', $scope, function (event, data) {
console.log('subscribe EditCtr.addTagsSuccess', data); console.log('subscribe EditCtr.addTagsSuccess', data);
var menusScope = $('div[ng-controller="menuCtr"]').scope(); var menusScope = $('div[ng-controller="menuCtr"]').scope();
@ -547,30 +544,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
} }
}); });
// TODO: 我要将编辑按钮固定在容器的右上角 $('.js-tag-label .ui.label .icon').popup();
$(window).resize(updateEditPos);
updateEditPos();
function updateEditPos() {
for (var i = 1; i <= 100; i += 10) {
setTimeout(function() {
var offset = $('.js-tags').offset();
if (offset) {
var t = offset.top;
var l = offset.left;
var w = $('.js-tags').width();
$('.js-tag-edit').offset({
top: t + 10,
left: l + w - 10,
})
$('.js-tag-show-mode').offset({
top: t + 40,
left: l + w - 10,
})
}
}, 100 * i)
}
}
function clickCmp(a, b) { function clickCmp(a, b) {
var click1 = parseInt(a.click_count); var click1 = parseInt(a.click_count);

4
public/views/note.html
View File

@ -1,5 +1,6 @@
<div class="ui segment js-note-card"> <div class="ui segment js-note-card">
<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)" ng-show="!loadBusy">{{ tag.name }}</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)" ng-show="!loadBusy">{{ tag.name }}</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 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>
@ -50,9 +51,6 @@
</div> </div>
</div> </div>
</div> </div>
<div style="width:22px;height:22px;" class="js-note-add" ng-click="showAddNote()" data-tooltip="添加备忘" ng-show="!add">
<img class="ui ui middle aligned tiny image" src="./images/add-note.png" ng-show="!loadBusy && false">
</div>
<div class="ui divider" ng-show="notes.length > 0"></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">

81
public/views/tags.html
View File

@ -3,25 +3,25 @@
<div class="ui grid"> <div class="ui grid">
<div class="two wide column js-tag-label" ng-if="tag.cnt" ng-repeat="tag in tags"> <div class="two wide column js-tag-label" ng-if="tag.cnt" ng-repeat="tag in tags">
<div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)"> <div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
{{ tag.name }} {{ tag.name }} ({{ tag.cnt || 0 }})
({{ tag.cnt || 0 }})
</div> </div>
</div> </div>
<div class="two wide column js-tag-label"> <div class="two wide column js-tag-label">
<div class="ui small label" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)"> <div class="ui small label" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)">
{{ costomTag.name }} {{ costomTag.name }} ({{ costomTag.cnt || 0 }})
({{ costomTag.cnt || 0 }})
</div> </div>
</div> </div>
<div class="two wide column js-tag-label"> <div class="two wide column js-tag-label">
<div class="ui small label" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)"> <div class="ui small label" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)">
{{ costomAllUsersTag.name }} {{ costomAllUsersTag.name }} ({{ costomAllUsersTag.cnt || 0 }})
({{ costomAllUsersTag.cnt || 0 }})
</div> </div>
</div> </div>
<div class="two wide column js-tag-label"> <div class="two wide column js-tag-label">
<div class="ui small label" ng-click="showAddTag()"> <div class="ui small label">
&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;&nbsp; <i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i>
<i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode()"></i>
<i class="table icon" data-content="点击以条目显示" data-position="top center" ng-show="showMode=='table'" ng-click="toggleShowMode('item')"></i>
<i class="list icon" data-content="点击以表格显示" data-position="top center" ng-show="showMode=='item'" ng-click="toggleShowMode('table')"></i>
</div> </div>
</div> </div>
</div> </div>
@ -29,6 +29,16 @@
<div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()"> <div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
<p>提示：拖拽分类即可进行排序。如果添加新的分类，返回之后不会显示添加的分类，因为默认只显示有书签的分类。</p> <p>提示：拖拽分类即可进行排序。如果添加新的分类，返回之后不会显示添加的分类，因为默认只显示有书签的分类。</p>
<div class="ui six stackable cards" sv-root sv-part="tags"> <div class="ui six stackable cards" sv-root sv-part="tags">
<div class="card" style="background-color:#F5F5F5;" ng-click="showAddTag()" data-tooltip="添加书签">
<div class="image">
<img src="./images/add-tag.png">
</div>
</div>
<div class="card" style="background-color:#F5F5F5;" ng-click="toggleMode()" data-tooltip="退出编辑模式">
<div class="image">
<img src="./images/back-tag.png">
</div>
</div>
<div class="card" ng-repeat="tag in tags" id="tag{{tag.id}}" sv-element> <div class="card" ng-repeat="tag in tags" id="tag{{tag.id}}" sv-element>
<div class="content"> <div class="content">
<div class="header" ng-if="!tag.edit">{{ tag.name }}</div> <div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
@ -45,31 +55,22 @@
</div> </div>
</div> </div>
<div class="extra content"> <div class="extra content">
<img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png" ng-click="delTag(tag)" title="删除分类"> <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png"
ng-click="delTag(tag)" title="删除分类">
<label for="tagedit{{tag.id}}" ng-show="!tag.edit"> <label for="tagedit{{tag.id}}" ng-show="!tag.edit">
<img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png" ng-click="editTag(tag)" title="编辑分类"> <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png"
ng-click="editTag(tag)" title="编辑分类">
</label> </label>
</div> </div>
</div> </div>
<div class="card" style="background-color:#F5F5F5;" ng-click="showAddTag()">
<div class="image">
<img src="./images/add-tag.png">
</div> </div>
</div> </div>
</div>
</div>
</div>
<div style="width:22px;height:22px;" class="js-tag-edit" ng-click="toggleMode()" data-tooltip="{{editMode ? '退出编辑模式' : '点击进入分类编辑模式'}}">
<img class="ui ui middle aligned tiny image" ng-src="./images/{{ editMode ? 'back' : 'edit'}}.png" ng-show="!loadTags">
</div>
<div style="width:22px;height:22px;" class="js-tag-show-mode" data-tooltip="{{showMode=='table' ? '点击以条目显示' : '点击以表格显示'}}" ng-show="!editMode">
<i class="table large icon" ng-if="showMode=='table'" ng-click="toggleShowMode('item')"></i>
<i class="list layout large icon" ng-if="showMode=='item'" ng-click="toggleShowMode('table')"></i>
</div> </div>
<div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}"> <div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}">
正在加载中... 正在加载中...
</div> </div>
<table class="ui selectable sortable celled table js-tags-table" ng-if="bookmarkCount > 0 && showMode=='table'" style="margin-top:-55px;" ng-show="!loadBookmarks && !editMode"> <table class="ui selectable sortable celled table js-tags-table" ng-if="bookmarkCount > 0 && showMode=='table'" style="margin-top:-15px;"
ng-show="!loadBookmarks && !editMode">
<thead> <thead>
<tr> <tr>
<th class="forbid_sorted">标题</th> <th class="forbid_sorted">标题</th>
@ -84,7 +85,8 @@
<tbody> <tbody>
<tr ng-repeat="bookmark in bookmarksByTag" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)"> <tr ng-repeat="bookmark in bookmarksByTag" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<td> <td>
<img class="ui ui middle aligned tiny image" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" favicon-err="./images/favicon/{{bookmark.id}}.ico"> <img class="ui ui middle aligned tiny image" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;cursor:pointer;"
ng-click="jumpToUrl(bookmark.url, bookmark.id)" favicon-err="./images/favicon/{{bookmark.id}}.ico">
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;"> <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;">
{{ bookmark.title }} {{ bookmark.title }}
</span> </span>
@ -105,9 +107,12 @@
</div> </div>
</td> </td>
<td> <td>
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签"> <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)"
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签"> title="删除书签">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情"> <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)"
title="编辑书签">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)"
title="书签详情">
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -119,23 +124,13 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
<div class="ui segment js-tag-costomTag" ng-if="bookmarkCount > 0 && showMode=='item'" style="margin-top:-55px;" ng-show="!loadBookmarks && !editMode"> <div class="ui segment js-tag-costomTag" ng-if="bookmarkCount > 0 && showMode=='item'" style="margin-top:-15px;" ng-show="!loadBookmarks && !editMode">
<div class="ui five column grid"> <div class="ui five column grid">
<div <div ng-repeat="bookmark in bookmarksByTag" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}"
ng-repeat="bookmark in bookmarksByTag" ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)"
class="column js-costomTag-item" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}" <img class="ui ui middle aligned tiny image bookmarkInfo" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;"
ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-click="detailBookmark(bookmark);$event.stopPropagation()" favicon-err="./images/favicon/{{bookmark.id}}.ico">
ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)"
ng-click="jumpToUrl(bookmark.url, bookmark.id)"
title="{{ bookmark.title }}"
id="{{bookmark.id}}">
<img
class="ui ui middle aligned tiny image bookmarkInfo"
ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico"
style="width:16px;height:16px;"
ng-click="detailBookmark(bookmark);$event.stopPropagation()"
favicon-err="./images/favicon/{{bookmark.id}}.ico">
<span>{{ bookmark.title}}</span> <span>{{ bookmark.title}}</span>
</div> </div>
</div> </div>