ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Face Manager : prettier UI 

- Access the Face Manager in the Super User panel
build-default-monitor-config-from-definitions
Moe 2020-04-23 21:30:32 -07:00
parent e7099d1dbb
commit 5e59a70897
4 changed files with 58 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/face/faceManagerCustomAutoLoadLibrary/languages/en_CA.json
View File

@ -1,4 +1,7 @@
{
"Upload Images": "Upload Images",
"Images Sent": "Images Sent",
"Click to Upload Images": "Click to Upload Images",
"Face Name": "Face Name",
"faceManager": "Face Manager",
"deleteImage": "Delete Image",

44
plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css
View File

@ -1,7 +1,7 @@
#faceManagerImages .face-image {
transition: 0s;
}
#faceManagerImages h3:first-child {
#faceManagerImages .face-title:first-child {
margin-top: 0!important;
}
#faceManagerImages > .row {
@ -45,3 +45,45 @@
#faceManagerImages .face-image:hover .controls-bottom .badge{
opacity: 0.1
}
/* ===================== FILE INPUT ===================== */
.file-area {
width: 100%;
position: relative;
}
.file-area input[type=file] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
}
.file-area .file-dummy {
width: 100%;
padding: 30px;
background: rgba(255, 255, 255, 0.2);
border: 2px dashed rgba(200, 200, 200, 0.2);
text-align: center;
transition: background 0.3s ease-in-out;
border-radius: 5px;
background-color: #f2f9ff;
}
.file-area .file-dummy .success {
display: none;
}
.file-area input[type=file]:focus + .file-dummy {
outline: 0;
}
.file-area input[type=file]:valid + .file-dummy {
border-color: rgba(0, 255, 0, 0.4);
background-color: rgba(0, 255, 0, 0.2);
}
.file-area input[type=file]:valid + .file-dummy .success {
display: inline-block;
}
.file-area input[type=file]:valid + .file-dummy .default {
display: none;
}

2
plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js
View File

@ -36,7 +36,7 @@ $(document).ready(function(){
</div>`
}
var createFaceHeader = function(name){
return `<span class="mt-4 mb-2 badge bg-dark badge-lg">${name}</span>`
return `<span class="mt-4 mb-2 badge bg-dark badge-lg face-title">${name}</span>`
}
var drawFaceImages = function(){
getFaceImages(function(faces){

14
plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs
View File

@ -10,10 +10,18 @@
<div class="modal-body overflow-hidden">
<div class="row">
<form id="faceManagerUploadForm" class="col-4">
<div class="form-group">
<input value="myFace" placeholder="<%- lang['Face Name'] %>" class="form-control form-control-lg" name="faceName" id="faceNameField">
<div class="form-group mb-3">
<div class="text-left mb-2"><span class="badge badge-default"><%- lang['Face Name'] %></span></div>
<input value="myFace" placeholder="<%- lang['Face Name'] %>" class="form-control form-control-lg" name="faceName" id="faceNameField" style="border-radius: .3rem;">
</div>
<div class="form-group file-area">
<div class="text-left mb-2"><span class="badge badge-default"><%- lang['Upload Images'] %></span></div>
<input type="file" id="fileinput" name="files" required multiple="multiple" accept="image/jpeg" />
<div class="file-dummy">
<div class="success"><span class="badge bg-light badge-success"><%- lang['Images Sent'] %></span></div>
<div class="default"><span class="badge bg-light badge-info"><%- lang['Click to Upload Images'] %> (JPG/JPEG)</span></div>
</div>
</div>
<input type="file" id="fileinput" name="files" multiple="multiple" />
</form>
<div class="col-8" id="faceManagerImages">