Face Manager : tag each face image with their name when listed

build-default-monitor-config-from-definitions
Moe 2020-04-23 10:31:23 -07:00
parent 2434b5e687
commit b54ce6b965
2 changed files with 25 additions and 4 deletions

View File

@ -3,10 +3,23 @@
background-position: center; background-position: center;
border-radius: 5px; border-radius: 5px;
} }
#faceManagerImages .face-image .controls { #faceManagerImages .face-image .controls,
#faceManagerImages .face-image .controls-bottom {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;
left: 0; left: 0;
padding: 5px; 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
} }

View File

@ -14,9 +14,17 @@ $(document).ready(function(){
}) })
} }
var getFaceImageHtml = function(name,image){ 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}')"> 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"> <div class="controls row m-0">
<a href="#" class="btn btn-sm btn-danger delete"><i class="fa fa-trash-o"></i></a> <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>
</div>` </div>`
} }