分类默认用条目显示

public/scripts/controllers/tags-controller.js

@@ -2,7 +2,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
     console.log("Hello tagsCtr...", $stateParams);
     getTags({});
 
-    const perPageItems = 20;
+    var perPageItems = 20;
     var dialog = null;
     $scope.order = [false, false, false];
     $scope.order[($stateParams && $stateParams.orderIndex) || 1] = true;
@@ -18,10 +18,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
     $scope.inputPage = '';
     $scope.currentTagId = ($stateParams && $stateParams.tagId) || '';
     $scope.editMode = false;
+    $scope.showMode = 'item';
     $scope.newTag = '';
     $scope.waitDelTag = {};
     $scope.waitDelBookmark = {};
     $scope.bookmarkData = {};
+    $scope.bookmarkNormalHover = false;
+
     var timeagoInstance = timeago();
 
     pubSubService.subscribe('MenuCtr.tags', $scope, function(event, data) {
@@ -71,6 +74,8 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
         $scope.currentPage = currentPage;
         $scope.loadBookmarks = true;
 
+        perPageItems = ($scope.showMode == 'item') ? 50 : 20;
+
         $scope.tags.forEach(function(tag) {
             tag.bookmarkClicked = false;
             if (tag.id == tagId) {
@@ -123,12 +128,12 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
                 id: id
             });
             $scope.bookmarkData.bookmarks.forEach(function(bookmark, index) {
-                if (bookmark.id == id) {
-                    bookmark.click_count += 1;
-                    bookmark.last_click = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss");
-                }
-            })
-            // $scope.changeOrder($scope.order.indexOf(true));
+                    if (bookmark.id == id) {
+                        bookmark.click_count += 1;
+                        bookmark.last_click = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss");
+                    }
+                })
+                // $scope.changeOrder($scope.order.indexOf(true));
             $timeout(function() {
                 timeagoInstance.cancel();
                 timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
@@ -227,6 +232,10 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
         updateEditPos();
     }
 
+    $scope.toggleShowMode = function(showMode) {
+        $scope.showMode = showMode;
+    }
+
     $scope.editTag = function(tag) {
         if (tag.name == "未分类" || tag.name == "收藏") {
             toastr.warning('这个是系统默认分类，暂时不允许更新名字！', "警告");
@@ -484,6 +493,10 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
                         top: t + 10,
                         left: l + w - 10,
                     })
+                    $('.js-tag-show-mode').offset({
+                        top: t + 40,
+                        left: l + w - 10,
+                    })
                 }
             }, 100 * i)
         }

public/scripts/services/data-service.js

@@ -20,7 +20,7 @@ app.factory('dataService', [function() {
             title: '书签'
         }, {
             uiSref: 'tags',
-            title: '书签分类'
+            title: '分类'
         }, {
             uiSref: 'note',
             title: '备忘录'
@@ -30,7 +30,7 @@ app.factory('dataService', [function() {
         }, {
             uiSref: 'settings',
             title: '设置'
-        },{
+        }, {
             uiSref: 'advice',
             title: '留言'
         }],
@@ -56,13 +56,13 @@ app.factory('dataService', [function() {
         },
         historyTypes: ['书签', '谷歌', 'Github', '栈溢出', '百度', '备忘录'],
         showStyles: ['navigate', 'costomTag', 'card', 'table'],
-        forbidQuickKey:{
-            'A':'在备忘录界面，已用做新增备忘录',
-            'R':'在热门收藏界面，已用作随机查看热门收藏',
-            'INSERT':'全局页面，已用做添加书签',
-            'ESC':'全局页面，已用做退出弹窗',
+        forbidQuickKey: {
+            'A': '在任意界面，已用做新增备忘录',
+            'R': '在热门收藏界面，已用作随机查看热门收藏',
+            'INSERT': '全局页面，已用做添加书签',
+            'ESC': '全局页面，已用做退出弹窗',
         },
-        keyShortcuts: function() {  // 判断快捷方式是否生效
+        keyShortcuts: function() { // 判断快捷方式是否生效
             var ret = true;
             var menusScope = $('div[ng-controller="menuCtr"]').scope();
             var login = (menusScope && menusScope.login);

public/views/settings.html

@@ -159,6 +159,12 @@
             </div>
             <div class="ui container js-p-info" ng-show="form[4]">
                 <p>功能说明：可在该页面，设置全局快速打开的链接。快捷键只能是字母a ~ z，字母不区分大小写。</p>
+                <p>以下几个系统默认使用的按键无法使用：
+                    <br/>
+                    A: 在任意界面，已用做新增备忘录。
+                    <br/>
+                    R: 在热门收藏界面，已用作随机查看热门收藏。
+                </p>
                 <div class="ui divider"></div>
                 <table class="ui selectable sortable celled table js-quick-url-table">
                     <thead>

public/views/tags.html

@@ -41,14 +41,18 @@
             </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>
+<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" style="margin-top:-14px;" ng-show="!loadBookmarks && !editMode">
+<table class="ui selectable sortable celled table js-tags-table" ng-if="bookmarkCount > 0  && showMode=='table'" style="margin-top:-55px;" ng-show="!loadBookmarks && !editMode">
     <thead>
         <tr>
             <th class="forbid_sorted">标题</th>
@@ -98,3 +102,35 @@
         </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 five column grid">
+        <div
+            class="column js-costomTag-item"
+            ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}"
+            ng-mouseover="bookmarkNormalHover=true"
+            ng-mouseleave="bookmarkNormalHover=false"
+            ng-repeat="bookmark in bookmarksByTag"
+            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>
+    <div class="ui divider"></div>
+    <div class="ui grid">
+        <div class="eight wide column" style="margin-top:10px;">
+            <i class="sort numeric descending large icon" ng-class="{green: order[0]}" ng-click="changeOrder(0)" title="按点击次数排序" style="margin-left:10px;"></i>
+            <i class="add to calendar large icon" ng-class="{green: order[1]}" ng-click="changeOrder(1)" title="按添加日期排序" style="margin-left:10px;"></i>
+            <i class="sort alphabet descending large icon" ng-class="{green: order[2]}" ng-click="changeOrder(2)" title="按最后点击时间排序" style="margin-left:10px;"></i>
+        </div>
+        <div class="eight wide column">
+            <pagination></pagination>
+        </div>
+    </div>
+</div>