Closes #174, closes #176: add a tag from the navigation

docs-web/src/main/webapp/src/app/docs/controller/document/Document.js

@@ -338,4 +338,27 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
 
     return _.pluck(children, 'name').join(', ') + (tag.children.length > 2 ? '...' : '');
   };
+
+  /**
+   * Add a tag in the current navigation context.
+   */
+  $scope.addTagHere = function () {
+    $uibModal.open({
+      templateUrl: 'partial/docs/document.add.tag.html',
+      controller: 'DocumentModalAddTag'
+    }).result.then(function (tag) {
+      if (tag === null) {
+        return;
+      }
+
+      // Create the tag
+      tag.parent = $scope.navigatedTag ? $scope.navigatedTag.id : undefined;
+      Restangular.one('tag').put(tag).then(function (data) {
+        // Add the new tag to the list
+        tag.id = data.id;
+        tag.children = [];
+        $scope.tags.push(tag);
+      })
+    });
+  };
 });

docs-web/src/main/webapp/src/app/docs/controller/document/DocumentModalAddTag.js

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Document modal add tag controller.
+ */
+angular.module('docs').controller('DocumentModalAddTag', function ($scope, $uibModalInstance) {
+  $scope.tag = { name: '', color: '#3a87ad' };
+  $scope.close = function(tag) {
+    $uibModalInstance.close(tag);
+  }
+});

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

@@ -3,7 +3,7 @@
 /**
  * Tag controller.
  */
-angular.module('docs').controller('Tag', function($scope, Restangular, $state) {
+angular.module('docs').controller('Tag', function($scope, Restangular) {
   $scope.tag = { name: '', color: '#3a87ad' };
 
   // Retrieve tags

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

@@ -66,6 +66,7 @@
     <script src="app/docs/controller/document/DocumentViewActivity.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentModalShare.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/DocumentModalPdf.js" type="text/javascript"></script>
+    <script src="app/docs/controller/document/DocumentModalAddTag.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/FileView.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/FileModalView.js" type="text/javascript"></script>
     <script src="app/docs/controller/tag/Tag.js" type="text/javascript"></script>

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

@@ -0,0 +1,19 @@
+<div class="modal-header">
+  <h3>{{ 'tag.new_tag' | translate }}</h3>
+</div>
+<form name="tagForm" novalidate>
+  <div class="modal-body">
+      <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
+        <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
+        <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
+               ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
+      </p>
+      <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
+  </div>
+  <div class="modal-footer">
+    <button ng-click="close(tag)" ng-disabled="!tagForm.$valid" class="btn btn-primary">
+      <span class="fas fa-plus"></span> {{ 'add' | translate }}
+    </button>
+    <button ng-click="close(null)" class="btn btn-default">{{ 'cancel' | translate }}</button>
+  </div>
+</form>

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

@@ -174,12 +174,22 @@
                 ng-if="navigatedTag">
           <span class="fas fa-chevron-up"></span>
         </button>
+        <!-- Toggle navigation -->
         <button class="btn btn-default" ng-click="navigationToggle()"
                 ng-class="{ active: navigationEnabled }"
                 uib-tooltip="{{ 'document.toggle_navigation' | translate }}"
                 tooltip-append-to-body="true">
           <span class="far" ng-class="{ 'fa-folder-open': navigationEnabled, 'fa-folder': !navigationEnabled }"></span>
         </button>
+        <!-- Add a tag here -->
+        <button class="btn btn-primary btn-add-tag"
+                uib-tooltip="{{ 'tag.new_tag' | translate }}"
+                ng-click="addTagHere()">
+          <span>
+            <i class="fas fa-tag"></i>
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
       </div>
 
       <!-- Current folder -->

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

@@ -20,7 +20,7 @@
             ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
           <span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
         </p>
-        <span class="help-block" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
+        <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
       </form>
 
       <ul class="tag-tree">

docs-web/src/main/webapp/src/style/colorpicker.css

@@ -62,6 +62,7 @@
   min-width: 120px;
   margin-top: 1px;
   border-radius: 4px;
+  z-index: 1100;
 }
 .colorpicker:after {
   clear: both;

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

@@ -92,6 +92,16 @@ ul.tag-tree {
   }
 }
 
+// Button to add tag from the navigation
+.btn-add-tag {
+  .fa-plus {
+    font-size: 70%;
+    position: absolute;
+    right: 7px;
+    top: 5px;
+  }
+}
+
 // Documents list
 .table-documents {
   margin-top: 18px !important;