From b54ce6b96551fcae90ab736973b8e05cb73b1377 Mon Sep 17 00:00:00 2001
From: Moe <github@m03.ca>
Date: Thu, 23 Apr 2020 10:31:23 -0700
Subject: [PATCH] Face Manager : tag each face image with their name when
 listed

---
 .../web/libs/css/super.faceManager.css            | 15 ++++++++++++++-
 .../web/libs/js/super.faceManager.js              | 14 +++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
index 4c131ebc..3198a8bf 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
@@ -3,10 +3,23 @@
     background-position: center;
     border-radius: 5px;
 }
-#faceManagerImages .face-image .controls {
+#faceManagerImages .face-image .controls,
+#faceManagerImages .face-image .controls-bottom {
     position: absolute;
     width: 100%;
     top: 0;
     left: 0;
     padding: 5px;
+    line-height: 1;
+}
+#faceManagerImages .face-image .controls-bottom {
+    top: initial;
+    bottom: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+#faceManagerImages .face-image:hover .controls .badge,
+#faceManagerImages .face-image:hover .controls-bottom .badge{
+    opacity: 0.1
 }
diff --git a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
index 736cb636..d2bb9355 100644
--- a/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
+++ b/plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
@@ -14,9 +14,17 @@ $(document).ready(function(){
         })
     }
     var getFaceImageHtml = function(name,image){
-        return `<div class="col-3 face-image" face="${name}" image="${image}" style="background-image:url('${superApiPrefix}${$user.sessionKey}/faceManager/image/${name}/${image}')">
-           <div class="controls">
-               <a href="#" class="btn btn-sm btn-danger delete"><i class="fa fa-trash-o"></i></a>
+        return `<div class="col-3 p-0 face-image" face="${name}" image="${image}" style="background-image:url('${superApiPrefix}${$user.sessionKey}/faceManager/image/${name}/${image}')">
+           <div class="controls row m-0">
+               <div class="col p-0">
+                    <a href="#" class="btn btn-sm btn-danger m-0 delete"><i class="fa fa-trash-o"></i></a>
+               </div>
+               <div class="col p-0 text-right">
+                    <span class="badge badge-sm bg-dark pull-right">${name}</span>
+               </div>
+           </div>
+           <div class="controls-bottom">
+               <span class="badge badge-sm bg-dark">${image}</span>
            </div>
        </div>`
     }