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) {
@ -121,7 +119,6 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
})
$scope.preContent = $scope.content;
$scope.content = '';
updateEditPos();
$scope.currentTagId = null;
$scope.currentPage = 1;
$scope.searchWord = '';
@ -221,7 +218,6 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
})
$scope.add = false;
$scope.edit = false;
updateEditPos();
} else {
toastr.error('备忘更新失败！请刷新页面再尝试', "提示");
}
@ -367,24 +363,4 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
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) {
@ -493,12 +492,10 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
toastr.info('您还没有书签分类，请点击菜单栏的添加按钮进行添加', "提示");
}
$scope.loadTags = false;
updateEditPos();
})
.catch((err) => {
console.log('getTags err', err);
$scope.loadTags = false;
updateEditPos();
});
pubSubService.publish('Common.menuActive', {
@ -547,30 +544,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}
});
// TODO: 我要将编辑按钮固定在容器的右上角
$(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)
}
}
$('.js-tag-label .ui.label .icon').popup();
function clickCmp(a, b) {
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 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="required field">
<label>内容</label>
@ -50,9 +51,6 @@
</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 style="height:20px;" ng-show="notes.length === 0"></div>
<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="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)">
{{ tag.name }}
({{ tag.cnt || 0 }})
{{ tag.name }} ({{ tag.cnt || 0 }})
</div>
</div>
<div class="two wide column js-tag-label">
<div class="ui small label" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)">
{{ costomTag.name }}
({{ costomTag.cnt || 0 }})
{{ costomTag.name }} ({{ costomTag.cnt || 0 }})
</div>
</div>
<div class="two wide column js-tag-label">
<div class="ui small label" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)">
{{ costomAllUsersTag.name }}
({{ costomAllUsersTag.cnt || 0 }})
{{ costomAllUsersTag.name }} ({{ costomAllUsersTag.cnt || 0 }})
</div>
</div>
<div class="two wide column js-tag-label">
<div class="ui small label" ng-click="showAddTag()">
&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;&nbsp;
<div class="ui small label">
<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>
@ -29,6 +29,16 @@
<div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
<p>提示：拖拽分类即可进行排序。如果添加新的分类，返回之后不会显示添加的分类，因为默认只显示有书签的分类。</p>
<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="content">
<div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
@ -45,31 +55,22 @@
</div>
</div>
<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">
<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>
</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 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>
<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>
<tr>
<th class="forbid_sorted">标题</th>
@ -84,7 +85,8 @@
<tbody>
<tr ng-repeat="bookmark in bookmarksByTag" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<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;">
{{ bookmark.title }}
</span>
@ -105,9 +107,12 @@
</div>
</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/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="书签详情">
<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/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>
</tr>
</tbody>
@ -119,23 +124,13 @@
</tr>
</tfoot>
</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
ng-repeat="bookmark in bookmarksByTag"
class="column js-costomTag-item"
ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}"
ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)"
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">
<div ng-repeat="bookmark in bookmarksByTag" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}"
ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" 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>
</div>
</div>