diff --git a/[core]/esx_textui/nui/css/style.css b/[core]/esx_textui/nui/css/style.css index 5f8d2726..1137b3f2 100644 --- a/[core]/esx_textui/nui/css/style.css +++ b/[core]/esx_textui/nui/css/style.css @@ -1,82 +1,77 @@ :root { - --color: white; - --bgColor: #212121; + --color: white; + --bgColor: #212121; } * { - padding: 0; - margin: 0; - border: 0; - box-sizing: border-box; + padding: 0; + margin: 0; + border: 0; + box-sizing: border-box; } body { - color: var(--color); - font-family: sans-serif; + color: var(--color); + font-family: sans-serif; } .notify { - display: none; - position: absolute; - right: 2%; - bottom: 50%; - flex: auto; - min-width: 15%; - width: fit-content; - height: 50px; - background: rgba(5,5,5,.9); - border-radius: .5rem; - animation: growDown 300ms ease-in-out; - align-items: center; + display: none; + position: absolute; + right: 2%; + bottom: 50%; + flex: auto; + min-width: 15%; + width: fit-content; + height: 50px; + background: rgba(5, 5, 5, 0.9); + border-radius: 0.5rem; + animation: growDown 300ms ease-in-out; + align-items: center; } .error { - border-left: 5px solid #c0392b; + border-left: 5px solid #c0392b; } .success { - border-left: 5px solid #2ecc71; + border-left: 5px solid #2ecc71; } .info { - border-left: 5px solid #2980b9; + border-left: 5px solid #2980b9; } .innerText { - padding-left: .4rem; - padding-right: .4rem; - padding-top: 12.5px; - width: 100%; - height: 100%; + padding-left: 0.4rem; + padding-right: 0.4rem; + padding-top: 12.5px; + width: 100%; + height: 100%; } .innerText .icon { - float: left; + float: left; } .innerText .text { - display: inline-block; - margin-left: .5rem; - margin-top: 4px; + display: inline-block; + margin-left: 0.5rem; + margin-top: 4px; } - @keyframes growDown { - 0% { - transform: scaleY(0); - } - 80% { - transform: scaleY(1.1) - } - 100% { - transform: scaleY(1) - } + 0% { + transform: scaleY(0); + } + 80% { + transform: scaleY(1.1); + } + 100% { + transform: scaleY(1); + } } .material-symbols-outlined { - font-variation-settings: - 'FILL' 0, - 'wght' 400, - 'GRAD' 0, - 'opsz' 48 + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; } diff --git a/[core]/esx_textui/nui/index.html b/[core]/esx_textui/nui/index.html index 97002883..13f5a2c8 100644 --- a/[core]/esx_textui/nui/index.html +++ b/[core]/esx_textui/nui/index.html @@ -1,30 +1,32 @@ - - - - - - - - -
-
- info -

-
-
-
-
- check_circle -

-
-
-
-
- error -

-
-
- + + + + + + + +
+
+ info +

+
+
+
+
+ check_circle +

+
+
+
+
+ error +

+
+
+ diff --git a/[core]/esx_textui/nui/js/script.js b/[core]/esx_textui/nui/js/script.js index b83b850d..8d19977a 100644 --- a/[core]/esx_textui/nui/js/script.js +++ b/[core]/esx_textui/nui/js/script.js @@ -4,82 +4,80 @@ let lastType = ""; // Gets the current icon it needs to use. const types = { - ["success"]: { - ["message"]: "successMessage", - ["id"]: "notifySuccess", - }, - ["error"]: { - ["message"]: "errorMessage", - ["id"]: "notifyError", - }, - ["info"]: { - ["message"]: "infoMessage", - ["id"]: "notifyInfo", - } -} + ["success"]: { + ["message"]: "successMessage", + ["id"]: "notifySuccess", + }, + ["error"]: { + ["message"]: "errorMessage", + ["id"]: "notifyError", + }, + ["info"]: { + ["message"]: "infoMessage", + ["id"]: "notifyInfo", + }, +}; // the color codes example `i ~r~love~s~ donuts` const codes = { - "~r~": "red", - "~b~": "#378cbf", - "~g~": "green", - "~y~": "yellow", - "~p~": "purple", - "~c~": "grey", - "~m~": "#212121", - "~u~": "black", - "~o~": "orange" -} + "~r~": "red", + "~b~": "#378cbf", + "~g~": "green", + "~y~": "yellow", + "~p~": "purple", + "~c~": "grey", + "~m~": "#212121", + "~u~": "black", + "~o~": "orange", +}; -w.addEventListener('message', (event) => { - if (event.data.action === "show") { - if (lastType) { - doc.getElementById(lastType).style.display = "none"; - notification({ - type: event.data.type, - message: event.data.message - }); - } else { - notification({ - type: event.data.type, - message: event.data.message - }); - } - } else - if (event.data.action === "hide") { - if (lastType !== "") { - doc.getElementById(lastType).style.display = "none" - } else { - console.log("There isn't a textUI displaying!?") - } +w.addEventListener("message", (event) => { + if (event.data.action === "show") { + if (lastType) { + doc.getElementById(lastType).style.display = "none"; + notification({ + type: event.data.type, + message: event.data.message, + }); + } else { + notification({ + type: event.data.type, + message: event.data.message, + }); } + } else if (event.data.action === "hide") { + if (lastType !== "") { + doc.getElementById(lastType).style.display = "none"; + } else { + console.log("There isn't a textUI displaying!?"); + } + } }); const replaceColors = (str, obj) => { - let strToReplace = str + let strToReplace = str; - for (let id in obj) { - strToReplace = strToReplace.replace(new RegExp(id, 'g'), obj[id]) - } + for (let id in obj) { + strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]); + } - return strToReplace -} + return strToReplace; +}; notification = (data) => { - for (color in codes) { - if (data["message"].includes(color)) { - let objArr = {}; - objArr[color] = ``; - objArr["~s~"] = ""; + for (color in codes) { + if (data["message"].includes(color)) { + let objArr = {}; + objArr[color] = ``; + objArr["~s~"] = ""; - let newStr = replaceColors(data["message"], objArr); + let newStr = replaceColors(data["message"], objArr); - data["message"] = newStr; - } + data["message"] = newStr; } + } - doc.getElementById(types[data.type]["id"]).style.display = "block"; - lastType = types[data.type]["id"] - doc.getElementById(types[data.type]["message"]).innerHTML = data["message"] - -} + doc.getElementById(types[data.type]["id"]).style.display = "block"; + lastType = types[data.type]["id"]; + doc.getElementById(types[data.type]["message"]).innerHTML = data["message"]; +};