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)
}
}
}]); }]);

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

@ -256,7 +256,6 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
} }
}); });
} }
updateEditPos();
} }
$scope.toggleShowMode = function (showMode) { $scope.toggleShowMode = function (showMode) {
@ -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', {
@ -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>
<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 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>