#208: overflow menu on files

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

@@ -9,18 +9,17 @@
        ngf-allow-dir="false">
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
       <div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id">
-        <a ng-click="openFile(file)">
+        <a class="file-thumbnail" ng-click="openFile(file)">
           <img ng-src="../api/file/{{ file.id }}/data?size=thumb" uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
         </a>
-        <div class="caption caption-hover-inverse btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
+        <div class="file-info">
-        <div class="caption caption-hover">
+          <div class="caption caption-hover-inverse file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
-          <div class="pull-left">
+          <div class="caption caption-hover">
-            <input type="checkbox" ng-model="file.checked" />
-          </div>
-          <div class="pull-right">
             <button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="fas fa-trash"></span></button>
           </div>
-          <div class="clearfix"></div>
+          <div class="v-align">
+            <input type="checkbox" ng-model="file.checked" />
+          </div>
         </div>
       </div>
 

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

@@ -44,24 +44,37 @@
      ngf-allow-dir="false">
   <div ui-sortable="fileSortableOptions" ng-model="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 handle" ng-if="file.id">
+      <div class="thumbnail" ng-if="file.id">
         <div class="file-processing-indicator" ng-show="file.processing"
              uib-tooltip="{{ 'document.view.content.file_processing_indicator' | translate }}">
           <span class="fas fa-spin fa-circle-notch"></span>
         </div>
 
-        <a ng-click="openFile(file)">
+        <a class="file-thumbnail" ng-click="openFile(file)">
           <img ng-src="../api/file/{{ file.id }}/data?size=thumb" uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top" />
         </a>
-        <div class="caption caption-hover-inverse btn btn-link file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
+
-        <div class="caption caption-hover" ng-show="document.writable">
+        <div class="file-info">
-          <div class="pull-left">
+          <div class="caption caption-hover-inverse file-name" ng-click="openFile(file)" ng-if="file.name">{{ file.name }}</div>
+          <div class="caption caption-hover" ng-show="document.writable">
             <div class="btn btn-default handle"><span class="fas fa-arrows-alt-h"></span></div>
           </div>
-          <div class="pull-right">
+
-            <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="fas fa-trash"></span></button>
+          <div class="v-align">
+            <div uib-dropdown>
+              <button class="btn btn-default" uib-dropdown-toggle>
+                <span class="fas fa-ellipsis-v"></span>
+              </button>
+              <ul class="dropdown-menu" uib-dropdown-menu>
+                <li>
+                  <a href ng-click="deleteFile(file)">
+                    <span class="fas fa-trash"></span>
+                    Delete
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
-          <div class="clearfix"></div>
         </div>
       </div>
 

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

@@ -187,16 +187,46 @@ ul.tag-tree {
 
 // File thumbnails
 .thumbnail {
-  a {
+  .file-processing-indicator {
+    position: absolute;
+    z-index: 2;
+    margin-left: 8px;
+    margin-top: 8px;
+    color: #2ab2dc;
+  }
+
+  a.file-thumbnail {
     height: 200px;
     display: block;
     overflow: hidden;
     background: #eee;
   }
 
-  .caption {
+  .file-name {
-    height: 60px;
+    word-wrap: break-word;
-    overflow: hidden;
+    white-space: normal;
+    display: block;
+    text-overflow: ellipsis;
+  }
+
+  .file-info {
+    display: flex;
+    justify-content: space-between;
+
+    .caption {
+      height: 42px;
+      padding: 0;
+      margin: 9px;
+    }
+
+    .v-align {
+      display: flex;
+      align-items: center;
+
+      > * {
+        margin-right: 8px;
+      }
+    }
   }
 
   input[type="checkbox"] {
@@ -217,11 +247,13 @@ ul.tag-tree {
 
   .caption-hover-inverse {
     display: block;
+    overflow: hidden;
   }
 
   &:hover {
     .caption-hover {
-      display: block;
+      display: flex;
+      align-items: center;
     }
 
     .caption-hover-inverse {
@@ -230,22 +262,6 @@ ul.tag-tree {
   }
 }
 
-// File processing indicator
-.file-processing-indicator {
-  position: absolute;
-  z-index: 2;
-  margin-left: 8px;
-  margin-top: 8px;
-  color: #2ab2dc;
-}
-
-// File name
-.file-name {
-  word-wrap: break-word;
-  white-space: normal;
-  display: block;
-}
-
 // Permissions table
 .table-permissions {
   .label-acl {
@@ -670,7 +686,6 @@ 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;