mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-29 01:08:54 +00:00
style(esx_textui): run prettier
This commit is contained in:
MoskalykA
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="notifyInfo" class="notify info">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">info</span>
|
||||
<p class="text" id="infoMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifySuccess" class="notify success">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">check_circle</span>
|
||||
<p class="text" id="successMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifyError" class="notify error">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">error</span>
|
||||
<p class="text" id="errorMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<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"
|
||||
/>
|
||||
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="notifyInfo" class="notify info">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">info</span>
|
||||
<p class="text" id="infoMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifySuccess" class="notify success">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">check_circle</span>
|
||||
<p class="text" id="successMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifyError" class="notify error">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">error</span>
|
||||
<p class="text" id="errorMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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] = `<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;
|
||||
}
|
||||
}
|
||||
|
||||
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"];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user