fixed tags overflowing and added confirm dialog for song removal

package.json

 {
   "name": "spinshare-client",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "./main.js",
   "description": "SpinSha.re Client",
   "scripts": {

src/app.htm

@@ -403,6 +403,26 @@
         </div>
       </div>
 
+      <div class="delete-overlay">
+        <div class="delete-content">
+          <div class="delete-main">
+            <div class="delete-title" locale>library.deletemodal.title</div>
+            <div class="delete-text" locale>library.deletemodal.text</div>
+            <div class="delete-files">
+              <span>C:\Windows\system32\notepad.exe</span>
+              <span>C:\Windows\system32\notepad.exe</span>
+              <span>C:\Windows\system32\notepad.exe</span>
+              <span>C:\Windows\system32\notepad.exe</span>
+              <span>C:\Windows\system32\notepad.exe</span>
+            </div>
+          </div>
+          <div class="delete-actions">
+            <button class="button" onclick="DeleteConfirm()" locale>library.deletemodal.delete</button>
+            <button class="button" onclick="DeleteDeny()" locale>library.deletemodal.close</button>
+          </div>
+        </div>
+      </div>
+
       <div class="contextmenu">
         <div class="menu-item">
           <div class="icon"><i class="mdi mdi-close"></i></div>

src/assets/css/library.css

@@ -9,16 +9,54 @@
   align-items: center;
   font-size: 32px;
 }
-.song-delete-button {
-  position: absolute;
+.delete-overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: rgba(0, 0, 0, 0.75);
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.delete-overlay .delete-content {
+  width: 500px;
+  background: #212629;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+}
+.delete-overlay .delete-content .delete-main {
+  padding: 25px;
+}
+.delete-overlay .delete-content .delete-main .delete-title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.delete-overlay .delete-content .delete-main .delete-text {
+  padding: 15px 0px;
+  opacity: 0.6;
+}
+.delete-overlay .delete-content .delete-main .delete-files {
+  font-size: 12px;
+}
+.delete-overlay .delete-content .delete-main .delete-files span {
+  display: block;
+  padding: 5px 0px;
+}
+.delete-overlay .delete-content .delete-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 25px;
+  background: rgba(0, 0, 0, 0.4);
+}
+.delete-overlay .delete-content .delete-actions button {
+  margin-left: 10px;
+}
+.delete-overlay.active {
   display: flex;
-  align-self: flex-start;
-  background-color: rgba(0, 0, 0, 0.8);
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 0;
-  color: white;
-}
-.song-delete-button:hover {
-  background-color: #000000;
-  color: white;
 }

src/assets/css/library.less

@@ -13,17 +13,61 @@
         }
     }
 }
-//styling for delete button
-.song-delete-button {
-    position: absolute;
-    display: flex;
-    align-self: flex-start;
-    background-color: rgba(0, 0, 0, 0.8);
-    border-bottom-left-radius: 0;
-    border-top-right-radius: 0;
-    color: white;
-    &:hover {
-        background-color: rgba(0, 0, 0, 1);
-        color: white;
+.delete-overlay {
+    position: fixed;
+    z-index: 100;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background: rgba(0,0,0,0.75);
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    & .delete-content {
+        width: 500px;
+        background: #212629;
+        border-radius: 6px;
+        position: relative;
+        overflow: hidden;
+
+        & .delete-main {
+            padding: 25px;
+
+            & .delete-title {
+                letter-spacing: 0.25em;
+                font-size: 14px;
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+            & .delete-text {
+                padding: 15px 0px;
+                opacity: 0.6;
+            }
+            & .delete-files {
+                font-size: 12px;
+
+                & span {
+                    display: block;
+                    padding: 5px 0px;
+                }
+            }
+        }
+
+        & .delete-actions {
+            display: flex;
+            justify-content: flex-end;
+            padding: 25px;
+            background: rgba(0,0,0,0.4);
+
+            & button {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    &.active {
+        display: flex;
     }
 }
\ No newline at end of file

src/assets/css/songdetail.css

@@ -42,10 +42,10 @@
   word-break: break-all;
 }
 .section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags {
-  display: flex;
-  margin-top: 15px;
+  margin-top: 10px;
 }
 .section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag {
+  display: inline-block;
   font-size: 12px;
   font-weight: bold;
   color: #222;
@@ -53,6 +53,7 @@
   padding: 5px 20px;
   border-radius: 50px;
   margin-right: 10px;
+  margin-top: 5px;
   word-break: break-all;
   transition: 0.2s ease-in-out all;
 }

src/assets/css/songdetail.less

@@ -44,10 +44,10 @@
                         word-break: break-all;
                     }
                     & .song-tags {
-                        display: flex;
-                        margin-top: 15px;
+                        margin-top: 10px;
 
                         & .tag {
+                            display: inline-block;
                             font-size: 12px;
                             font-weight: bold;
                             color: #222;
@@ -55,6 +55,7 @@
                             padding: 5px 20px;
                             border-radius: 50px;
                             margin-right: 10px;
+                            margin-top: 5px;
                             word-break: break-all;
                             transition: 0.2s ease-in-out all;
 

src/assets/js/module.api.js

@@ -2,7 +2,7 @@ const axios = require('axios');
 
 class SHAPI {
     constructor() {
-        if(isDev) {
+        if(!isDev) {
             this.apiBase = "http://localhost/www/spinshare-server/public/index.php/api/";
         } else {
             this.apiBase = "https://spinsha.re/api/";

src/assets/js/section.library.js

 const DOMLibrarySongsList = document.querySelector(".song-row-library .song-list");
+const DOMDeleteOverlay = document.querySelector(".delete-overlay");
+const DOMDeleteOverlayFiles = document.querySelector(".delete-overlay .delete-files");
 
 async function ExtractionProcess(filePath) {
     console.log(filePath);
@@ -126,9 +128,43 @@ function BuildLibrarySongDOM(songDetail, spinShareReference) {
     songContainer.addEventListener('contextmenu', function(e) {
         e.preventDefault();
         ClearContextMenu();
-        AddContextMenuItem("delete", locale.get('library.contextmenu.delete'), function() { srxdControl.deleteFiles(songDetail) });
+        AddContextMenuItem("delete", locale.get('library.contextmenu.delete'), function() { ShowDeleteOverlay(songDetail); });
         ShowContextMenu(e.clientX, e.clientY);
     });
 
     return songContainer;
+}
+
+let songToDelete;
+function ShowDeleteOverlay(songDetail) {
+    songToDelete = songDetail;
+
+    let files = [];
+
+    files.push(songToDelete[2]);
+    files.push(songToDelete[3]);
+    files.push(songToDelete[4]);
+
+    DOMDeleteOverlayFiles.innerHTML = "";
+
+    files.forEach(function(file) {
+        let newFile = document.createElement("span");
+
+        newFile.innerText = file.replace(userSettings.get('gameDirectory'), "");
+
+        DOMDeleteOverlayFiles.appendChild(newFile);
+    })
+
+    DOMDeleteOverlay.classList.add("active");
+}
+
+function DeleteConfirm() {
+    srxdControl.deleteFiles(songToDelete);
+
+    DOMDeleteOverlay.classList.remove("active");
+}
+function DeleteDeny() {
+    songToDelete = "";
+
+    DOMDeleteOverlay.classList.remove("active");
 }
\ No newline at end of file

src/locale/de.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Installieren",
 	"library.installed.install.text": "Lokale .zip installieren",
 	"library.contextmenu.delete": "Löschen",
+	"library.deletemodal.title": "Bestätigung",
+	"library.deletemodal.text": "Diese Dateien werden entfernt.",
+	"library.deletemodal.delete": "Löschen",
+	"library.deletemodal.close": "Schließen",
 	
 	"songdetail.createdBy": "Erstellt von ",
 	"songdetail.actions.downloadButton": "Downloaden",

src/locale/en.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Install",
 	"library.installed.install.text": "Install a local .zip",
 	"library.contextmenu.delete": "Delete",
+	"library.deletemodal.title": "Confirmation",
+	"library.deletemodal.text": "These files will be removed.",
+	"library.deletemodal.delete": "Delete",
+	"library.deletemodal.close": "Close",
 	
 	"songdetail.createdBy": "Created by ",
 	"songdetail.actions.downloadButton": "Download",

src/locale/es.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Instalar",
 	"library.installed.install.text": "Instalar un .zip local",
 	"library.contextmenu.delete": "Eliminar",
+	"library.deletemodal.title": "Confirmación",
+	"library.deletemodal.text": "Estos archivos serán eliminados.",
+	"library.deletemodal.delete": "Eliminar",
+	"library.deletemodal.close": "Cerrar",
 	
 	"songdetail.createdBy": "Creado por ",
 	"songdetail.actions.downloadButton": "Descargar",

src/locale/fr.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Installer",
 	"library.installed.install.text": "Installer un .zip locale",
 	"library.contextmenu.delete": "Effacer",
+	"library.deletemodal.title": "Confirmation",
+	"library.deletemodal.text": "Ces fichiers vont être supprimés.",
+	"library.deletemodal.delete": "Effacer",
+	"library.deletemodal.close": "Fermer",
 	
 	"songdetail.createdBy": "Crée par ",
 	"songdetail.actions.downloadButton": "Télécharger",

src/locale/nl.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Installeer",
 	"library.installed.install.text": "Installeer een lokale .zip",
 	"library.contextmenu.delete": "Verwijder",
+	"library.deletemodal.title": "Bevestiging",
+	"library.deletemodal.text": "Deze bestanden zullen verwijderd worden.",
+	"library.deletemodal.delete": "Verwijder",
+	"library.deletemodal.close": "Sluit",
 	
 	"songdetail.createdBy": "Gemaakt door ",
 	"songdetail.actions.downloadButton": "Download",

src/locale/pt-BR.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Instalar",
 	"library.installed.install.text": "Instalar um arquivo .zip local",
 	"library.contextmenu.delete": "Excluir",
+	"library.deletemodal.title": "Confirmação",
+	"library.deletemodal.text": "Estes arquivos serão removidos.",
+	"library.deletemodal.delete": "Excluir",
+	"library.deletemodal.close": "Fechar",
 	
 	"songdetail.createdBy": "Criado por",
 	"songdetail.actions.downloadButton": "Baixar",

src/locale/ru.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "Установить",
 	"library.installed.install.text": "Установить через существующий .zip",
 	"library.contextmenu.delete": "удалять",
+	"library.deletemodal.title": "Подтверждение",
+	"library.deletemodal.text": "Эти файлы будут удалены.",
+	"library.deletemodal.delete": "удалять",
+	"library.deletemodal.close": "Закрыть",
 	
 	"songdetail.createdBy": "Автор ",
 	"songdetail.actions.downloadButton": "Скачать",

src/locale/speen.json

@@ -6,6 +6,10 @@
 	"search.results.users.header": "SPEEN",
 	"search.results.songs.header": "SPEEN",
 	"search.noresults.text": "SPEEN",
+	"library.deletemodal.title": "SPEEN",
+	"library.deletemodal.text": "SPEEN",
+	"library.deletemodal.delete": "SPEEN",
+	"library.deletemodal.close": "SPEEN",
 	
 	"library.installed.header": "SPEEN",
 	"library.installed.install.title": "SPEEN",

src/locale/zh-CN.json

@@ -11,6 +11,10 @@
 	"library.installed.install.title": "安装",
 	"library.installed.install.text": "安装一个 .zip",
 	"library.contextmenu.delete": "删除",
+	"library.deletemodal.title": "确认",
+	"library.deletemodal.text": "这些文件将会被删掉。",
+	"library.deletemodal.delete": "删除",
+	"library.deletemodal.close": "关闭",
 	
 	"songdetail.createdBy": "创作家 ",
 	"songdetail.actions.downloadButton": "下载",