starred/esx_core-esx-framework
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-09-04 08:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(esx_notify): run prettier

Browse Source
This commit is contained in:
MoskalykA
2023-02-06 13:44:26 +01:00
parent ae2d81d6b1
commit 2b981fd7d1
3 changed files with 104 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_notify/nui/css/style.css
+45 -49
View File
@@ -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);
}
}
[core]/esx_notify/nui/index.html
+10 -7
View File
@@ -1,15 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="css/style.css">
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
<title>ESX Notify</title>
</head>
<body>
</head>
<body>
<div id="root">
<!-- this is just a template! No touchy touchy -->
<!-- this is just a template! No touchy touchy -->
</div>
</body>
</body>
</html>
[core]/esx_notify/nui/js/script.js
+49 -47
View File
@@ -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] = `<span style="color: ${codes[color]}">`;
objArr["~s~"] = "</span>";
for (color in codes) {
if (data["message"].includes(color)) {
let objArr = {};
objArr[color] = `<span style="color: ${codes[color]}">`;
objArr["~s~"] = "</span>";
let newStr = replaceColors(data["message"], objArr);
let newStr = replaceColors(data["message"], objArr);
data["message"] = newStr
}
data["message"] = newStr;
}
}
const notification = $(`
const notification = $(`
<div class="notify ${data.type}">
<div class="innerText">
<span class="material-symbols-outlined icon">${types[data.type]["icon"]}</span>
<span class="material-symbols-outlined icon">${
types[data.type]["icon"]
}</span>
<p class="text">${data["message"]}</p>
</div>
</div>
`).appendTo(`#root`);
setTimeout(() => {
notification.fadeOut(700);
}, data.length);
setTimeout(() => {
notification.fadeOut(700);
}, data.length);
return notification;
}
return notification;
};