#32 : Comments layout

+ fix file viewer navigation

docs-web/src/main/webapp/src/app/docs/app.js

@@ -173,6 +173,14 @@ angular.module('docs',
           }
         }
       })
+      .state('document.view.content.file', {
+        url: '/file/:fileId',
+        views: {
+          'file': {
+            controller: 'FileView'
+          }
+        }
+      })
       .state('document.view.permissions', {
         url: '/permissions',
         views: {
@@ -191,14 +199,6 @@ angular.module('docs',
           }
         }
       })
-      .state('document.view.file', {
-        url: '/file/:fileId',
-        views: {
-          'file': {
-            controller: 'FileView'
-          }
-        }
-      })
   .state('login', {
     url: '/login',
     views: {

docs-web/src/main/webapp/src/app/docs/controller/DocumentViewContent.js

@@ -38,7 +38,7 @@ angular.module('docs').controller('DocumentViewContent', function ($scope, $stat
    * Navigate to the selected file.
    */
   $scope.openFile = function (file) {
-    $state.go('document.view.file', { id: $stateParams.id, fileId: file.id })
+    $state.go('document.view.content.file', { id: $stateParams.id, fileId: file.id })
   };
 
   /**

docs-web/src/main/webapp/src/partial/docs/directive.auditlog.html

@@ -15,7 +15,7 @@
               <a ng-href="#/document/view/{{ log.target }}">{{ log.message }}</a>
             </span>
             <span ng-switch-when="File">
-              <a ng-href="#/document/view/{{ log.message }}/file/{{ log.target }}">Open</a>
+              <a ng-href="#/document/view/{{ log.message }}/content/file/{{ log.target }}">Open</a>
             </span>
             <span ng-switch-when="Comment">
               <a ng-href="#/document/view/{{ log.message }}/comments">See</a>

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

@@ -3,7 +3,7 @@
 <div ng-file-drop drag-over-class="bg-success" ng-multiple="true" allow-dir="false" ng-model="dropFiles"
      accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
   <div class="row upload-zone" ui-sortable="fileSortableOptions" ng-model="files">
-    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
+    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 text-center" ng-repeat="file in files">
       <div class="thumbnail" ng-if="file.id">
         <a ng-click="openFile(file)">
           <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
@@ -34,4 +34,6 @@
       Drag &amp; drop files here to upload
     </p>
   </div>
-</div>
+</div>
+
+<div ui-view="file"></div>

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

@@ -38,24 +38,29 @@
 	  </ul>
 	</div>
 
-  <ul class="nav nav-tabs">
-    <li ng-class="{ active: $state.current.name == 'document.view.content' }">
-      <a href="#/document/view/{{ document.id }}/content">
-        <span class="glyphicon glyphicon-file"></span> Content
-      </a>
-    </li>
-    <li ng-class="{ active: $state.current.name == 'document.view.permissions' }">
-      <a href="#/document/view/{{ document.id }}/permissions">
-        <span class="glyphicon glyphicon-user"></span> Permissions
-      </a>
-    </li>
-    <li ng-class="{ active: $state.current.name == 'document.view.activity' }">
-      <a href="#/document/view/{{ document.id }}/activity">
-        <span class="glyphicon glyphicon-tasks"></span> Activity
-      </a>
-    </li>
-  </ul>
-
-  <div ui-view="tab"></div>
-	<div ui-view="file"></div>
+  <div class="row">
+    <div class="col-md-9">
+      <ul class="nav nav-tabs">
+        <li ng-class="{ active: $state.current.name == 'document.view.content' }">
+          <a href="#/document/view/{{ document.id }}/content">
+            <span class="glyphicon glyphicon-file"></span> Content
+          </a>
+        </li>
+        <li ng-class="{ active: $state.current.name == 'document.view.permissions' }">
+          <a href="#/document/view/{{ document.id }}/permissions">
+            <span class="glyphicon glyphicon-user"></span> Permissions
+          </a>
+        </li>
+        <li ng-class="{ active: $state.current.name == 'document.view.activity' }">
+          <a href="#/document/view/{{ document.id }}/activity">
+            <span class="glyphicon glyphicon-tasks"></span> Activity
+          </a>
+        </li>
+      </ul>
+      <div ui-view="tab"></div>
+    </div>
+    <div class="col-md-3">
+      Comments
+    </div>
+  </div>
 </div>