Better display for tags in document list

docs-web/src/main/webapp/index.html

@@ -45,6 +45,7 @@
     <script src="js/service/User.js" type="text/javascript"></script>
     <script src="js/service/Tag.js" type="text/javascript"></script>
     <script src="js/filter/Newline.js" type="text/javascript"></script>
+    <script src="js/filter/Shorten.js" type="text/javascript"></script>
     <script src="js/directive/File.js" type="text/javascript"></script>
     <script src="js/directive/SelectTag.js" type="text/javascript"></script>
     <script src="js/directive/InlineEdit.js" type="text/javascript"></script>

docs-web/src/main/webapp/js/filter/Shorten.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Filter shortening text in one letter uppercase.
+ */
+App.filter('shorten', function() {
+  return function(text) {
+    if (!text) {
+      return '';
+    }
+    return text.substring(0, 1).toUpperCase();
+  }
+})

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

@@ -49,7 +49,9 @@
             <td>{{ document.title }}</td>
             <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
             <td class="hidden-phone cell-tags">
-              <span class="label label-info" ng-repeat="tag in document.tags">{{ tag.name }}</span>
+              <div class="tags">
+                <span class="label label-info" ng-repeat="tag in document.tags"><span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span></span>
+              </div>
             </td>
           </tr>
         </tbody>

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

@@ -18,6 +18,27 @@
     
     .label {
       margin-left: 2px;
+      
+      .full {
+        display: none;
+      }
+    }
+    
+    &:hover {
+      .tags {
+        position: absolute;
+        margin-top: -10px;
+        
+        .label {
+          .full {
+            display: inline;
+          }
+          
+          .shorten {
+            display: none;
+          }
+        }
+      }
     }
 	}
 }