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

使用jquery方法，将书签编辑按钮固定在右上角

This commit is contained in:
luchenqun 2016-11-21 17:55:28 +08:00
parent c7e09e6cf4
commit 2348e22d0a
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/scripts/controllers/bookmarks-controller.js
View File

@ -85,7 +85,15 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
.catch((err) => console.log('getBookmarks err', err)); .catch((err) => console.log('getBookmarks err', err));
} }
$scope.$on('viewContentLoaded', function(elementRenderFinishedEvent) { // TODO: 我要将编辑按钮固定在容器的右上角
$('.ui.dropdown').dropdown(); $(window).resize(function() {
var top = $('.js-segment-navigate').offset().top;
var left = $('.js-segment-navigate').offset().left;
var width = $('.js-segment-navigate').width();
// console.log('js-edit position update', top+10, left+width-10)
$('.js-edit').offset({
top: top+10,
left: left+width-10,
})
}); });
}]); }]);

17
public/views/bookmarks.html
View File

@ -1,21 +1,14 @@
<div class="ui segment" ng-if="showStyle === 'navigate'"> <div class="ui segment js-segment-navigate" ng-if="showStyle === 'navigate'">
<div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index"> <div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index">
<div class="ui grid"> <div class="ui grid">
<div class=" row"> <div class="row">
<div class="wrap" style="width:88px;color:#0aa770;text-align:left;margin-left:20px;"> <div class="wrap" style="width:88px;color:#0aa770;text-align:left;margin-left:20px;">
<span title="{{ tag.name }}">{{ tag.name }}</span> <span title="{{ tag.name }}">{{ tag.name }}</span>
</div> </div>
<div class="fourteen wide column" ng-if="tag.bookmarks.length"> <div class="fourteen wide column" ng-if="tag.bookmarks.length">
<div class="ui grid container"> <div class="ui grid container">
<div <div class="two wide column js-navigate-bookmark" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}" ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
class="two wide column js-navigate-bookmark" ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}"
ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)"
ng-repeat="bookmark in tag.bookmarks"
ng-click="jumpToUrl(bookmark.url, bookmark.id)"
title="{{ bookmark.title }}"
id="{{bookmark.id}}">
<img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)"> <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)">
<img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)"> <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
<img class="ui ui middle aligned tiny image" ng-src="http://www.google.com/s2/favicons?domain={{ bookmark.url }}" style="width:16px;height:16px" ng-if="!edit"> <img class="ui ui middle aligned tiny image" ng-src="http://www.google.com/s2/favicons?domain={{ bookmark.url }}" style="width:16px;height:16px" ng-if="!edit">
@ -23,7 +16,7 @@
</div> </div>
</div> </div>
</div> </div>
<div ng-if="tagIndex === 0" style="width:32px;height:32px;padding-right:10px;" ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}"><img class="ui ui middle aligned tiny image" ng-src="./images/{{ edit ? 'back' : 'edit'}}.png"></div> <div ng-if="tagIndex === 0" style="width:22px;height:22px;" class="js-edit"ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}"><img class="ui ui middle aligned tiny image" ng-src="./images/{{ edit ? 'back' : 'edit'}}.png"></div>
</div> </div>
</div> </div>
<div class="ui divider"></div> <div class="ui divider"></div>