Closes #198: show hierarchy in tag screen

README.md

@@ -5,7 +5,6 @@
 [![Twitter: @sismicsdocs](https://img.shields.io/badge/contact-@sismicsdocs-blue.svg?style=flat)](https://twitter.com/sismicsdocs)
 [![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)
 [![Build Status](https://secure.travis-ci.org/sismics/docs.png)](http://travis-ci.org/sismics/docs)
-[![Read the Docs](https://img.shields.io/readthedocs/pip.svg)](https://demo.sismicsdocs.com/apidoc/)
 
 Docs is an open source, lightweight document management system for individuals and businesses.
 

docs-web/src/main/webapp/src/app/docs/controller/tag/Tag.js

@@ -7,6 +7,7 @@ angular.module('docs').controller('Tag', function($scope, Restangular, $state) {
   $scope.tag = { name: '', color: '#3a87ad' };
 
   // Retrieve tags
+  $scope.tags = [];
   $scope.loadTags = function() {
     Restangular.one('tag/list').get().then(function(data) {
       $scope.tags = data.tags;
@@ -14,13 +15,6 @@ angular.module('docs').controller('Tag', function($scope, Restangular, $state) {
   };
   $scope.loadTags();
 
-  /**
-   * Display a tag.
-   */
-  $scope.viewTag = function(id) {
-    $state.go('tag.edit', { id: id });
-  };
-  
   /**
    * Add a tag.
    */
@@ -30,4 +24,14 @@ angular.module('docs').controller('Tag', function($scope, Restangular, $state) {
       $scope.tag = { name: '', color: '#3a87ad' };
     });
   };
+
+  /**
+   * Find children tags.
+   * @param parent
+   */
+  $scope.getChildrenTags = function(parent) {
+    return _.filter($scope.tags, function(tag) {
+      return tag.parent === parent;
+    });
+  };
 });

docs-web/src/main/webapp/src/locale/en.json

@@ -199,7 +199,6 @@
   "tag": {
     "new_tag": "New tag",
     "search": "Search",
-    "edit_tag": "Edit tag",
     "default": {
       "title": "Tags",
       "message_1": "<strong>Tags</strong> are labels associated to documents.",

docs-web/src/main/webapp/src/partial/docs/document.html

@@ -265,6 +265,10 @@
         <span ng-if="totalDocuments" translate="document.count" translate-values="{ count: totalDocuments }"></span>
         <span ng-if="!totalDocuments">&nbsp;</span>
       </div>
+
+      <div class="well-3d-background">
+        <span class="fas fa-book"></span>
+      </div>
     </div>
   </div>
 

docs-web/src/main/webapp/src/partial/docs/tag.html

@@ -1,3 +1,15 @@
+<script type="text/ng-template" id="tag-tree-item">
+  <span ng-class="{ active: $stateParams.id == tag.id }">
+    <span class="fas fa-tag" ng-style="{ 'color': tag.color }"></span>
+    <a href="#/tag/{{ tag.id }}">
+      {{ tag.name }}
+    </a>
+  </span>
+  <ul class="list-unstyled">
+    <li ng-repeat="tag in getChildrenTags(tag.id)" ng-include="'tag-tree-item'"></li>
+  </ul>
+</script>
+
 <div class="row">
   <div class="col-md-4">
     <div class="well well-3d">
@@ -11,27 +23,13 @@
         <span class="help-block" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
       </form>
 
-      <p class="input-group">
-        <span class="input-group-addon"><span class="fas fa-search"></span></span>
-        <input type="search" class="form-control" ng-attr-placeholder="{{ 'tag.search' | translate }}" ng-model="search.name">
-      </p>
+      <ul class="tag-tree">
+        <li ng-repeat="tag in getChildrenTags()" ng-include="'tag-tree-item'"></li>
+      </ul>
 
-      <table class="row table table-hover table-tags">
-        <tbody>
-          <tr ng-repeat="tag in tags | filter:search" class="pointer"
-              ng-class="{ active: $stateParams.id == tag.id }" ng-click="viewTag(tag.id)">
-            <td>
-              <span class="fas fa-tag"></span>&nbsp;
-              <span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span>
-            </td>
-            <td class="col-xs-1">
-              <a href="#/tag/{{ tag.id }}" class="btn btn-primary pull-right" title="{{ 'tag.edit_tag' | translate }}">
-                <span class="fas fa-pencil-alt"></span>
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="well-3d-background">
+        <span class="fas fa-tags"></span>
+      </div>
     </div>
   </div>
 

docs-web/src/main/webapp/src/partial/docs/usergroup.html

@@ -16,6 +16,10 @@
         </tr>
         </tbody>
       </table>
+
+      <div class="well-3d-background">
+        <span class="fas fa-users"></span>
+      </div>
     </div>
 
     <div class="well well-3d">
@@ -36,6 +40,10 @@
         </tr>
         </tbody>
       </table>
+
+      <div class="well-3d-background">
+        <span class="fas fa-user"></span>
+      </div>
     </div>
   </div>
 

docs-web/src/main/webapp/src/style/main.less

@@ -23,14 +23,20 @@
   }
 }
 
-// Tags list
-.table-tags {
-  td {
-    vertical-align: middle !important;
-  }
+// Tag tree
+ul.tag-tree {
+  list-style-type: none;
+  padding: 0;
 
-  .label {
-    font-size: 100%;
+  li {
+    margin-left: 20px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    white-space: nowrap;
+
+    .active {
+      font-weight: 500;
+    }
   }
 }
 
@@ -329,20 +335,6 @@ input[readonly].share-link {
   margin-top: 20px;
 }
 
-// Tag tree
-.tag-tree-dropdown {
-  padding-left: 0;
-
-  .tag-tree {
-    li {
-      margin-left: 20px;
-      margin-top: 8px;
-      margin-bottom: 8px;
-      white-space: nowrap;
-    }
-  }
-}
-
 // Advanced search
 .btn-open-search > * {
   vertical-align: middle;
@@ -668,6 +660,7 @@ input[readonly].share-link {
   box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
   background: none;
   border-radius: 4px;
+  overflow: hidden;
 
   .well-3d-header {
     font-size: 20px;
@@ -681,6 +674,18 @@ input[readonly].share-link {
   }
 }
 
+.well-3d-background {
+  position: absolute;
+  top: 60px;
+  right: 60px;
+  z-index: -1;
+  opacity: 0.03;
+
+  .fas {
+    font-size: 15vw;
+  }
+}
+
 // Cards
 .card {
   min-width: 0;