From 2b981fd7d19a810f882423165885ea220571842c Mon Sep 17 00:00:00 2001 From: MoskalykA <100430077+MoskalykA@users.noreply.github.com> Date: Mon, 6 Feb 2023 13:44:26 +0100 Subject: [PATCH] style(esx_notify): run prettier --- [core]/esx_notify/nui/css/style.css | 94 ++++++++++++++-------------- [core]/esx_notify/nui/index.html | 17 ++--- [core]/esx_notify/nui/js/script.js | 96 +++++++++++++++-------------- 3 files changed, 104 insertions(+), 103 deletions(-) diff --git a/[core]/esx_notify/nui/css/style.css b/[core]/esx_notify/nui/css/style.css index e86093e3..f1022a6d 100644 --- a/[core]/esx_notify/nui/css/style.css +++ b/[core]/esx_notify/nui/css/style.css @@ -1,88 +1,84 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap"); :root { - --color: #919191; + --color: #919191; } * { - border: 0; - margin: 0; - padding: 0; - box-sizing: border-box; + border: 0; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - width: 100vw; - height: 100vh; - color: var(--color); - font-weight: 100; - font-family: 'Poppins', sans-serif; - overflow: hidden; + width: 100vw; + height: 100vh; + color: var(--color); + font-weight: 100; + font-family: "Poppins", sans-serif; + overflow: hidden; } #root { - display: grid; - justify-content: center; + display: grid; + justify-content: center; } #root .notify { - display: flex; - position: relative; - flex: auto; - min-width: 20rem; - width: fit-content; - height: 3.5rem; - background: rgba(5,5, 5, 0.9); - border-radius: .5rem; - margin-top: .5rem; - animation: anim 300ms ease-in-out; - align-items: center; + display: flex; + position: relative; + flex: auto; + min-width: 20rem; + width: fit-content; + height: 3.5rem; + background: rgba(5, 5, 5, 0.9); + border-radius: 0.5rem; + margin-top: 0.5rem; + animation: anim 300ms ease-in-out; + align-items: center; } #root .innerText { - padding-left: .4rem; - padding-right: .4rem; - width: 100%; + padding-left: 0.4rem; + padding-right: 0.4rem; + width: 100%; } #root .icon { - float: left; - color: #fff; + float: left; + color: #fff; } #root .text { - display: inline-block; - margin-left: .5rem; + display: inline-block; + margin-left: 0.5rem; } #root .error { - border-bottom: 3px solid #c0392b; + border-bottom: 3px solid #c0392b; } #root .success { - border-bottom: 3px solid #2ecc71; + border-bottom: 3px solid #2ecc71; } #root .info { - border-bottom: 3px solid #2980b9; + border-bottom: 3px solid #2980b9; } .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; } @keyframes anim { - 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); + } } diff --git a/[core]/esx_notify/nui/index.html b/[core]/esx_notify/nui/index.html index 2852ba79..01c1ff39 100644 --- a/[core]/esx_notify/nui/index.html +++ b/[core]/esx_notify/nui/index.html @@ -1,15 +1,18 @@ - + - - + + ESX Notify - - + +
- +
- + diff --git a/[core]/esx_notify/nui/js/script.js b/[core]/esx_notify/nui/js/script.js index 55591a8a..9ca5648c 100644 --- a/[core]/esx_notify/nui/js/script.js +++ b/[core]/esx_notify/nui/js/script.js @@ -1,74 +1,76 @@ -const w = window +const w = window; // Gets the current icon it needs to use. const types = { - ["success"]: { - ["icon"]: "check_circle", - }, - ["error"]: { - ["icon"]: "error", - }, - ["info"]: { - ["icon"]: "info", - } -} + ["success"]: { + ["icon"]: "check_circle", + }, + ["error"]: { + ["icon"]: "error", + }, + ["info"]: { + ["icon"]: "info", + }, +}; // 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) => { - notification({ - type: event.data.type, - message: event.data.message, - length: event.data.length, - }); + notification({ + type: event.data.type, + message: event.data.message, + length: event.data.length, + }); }); 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; } + } - const notification = $(` + const notification = $(`
- ${types[data.type]["icon"]} + ${ + types[data.type]["icon"] + }

${data["message"]}

`).appendTo(`#root`); - setTimeout(() => { - notification.fadeOut(700); - }, data.length); + setTimeout(() => { + notification.fadeOut(700); + }, data.length); - return notification; -} + return notification; +};