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

Merge pull request #1636 from lod9/esx_menu_default

Browse Source 
Esx menu default
This commit is contained in:
Kenshin13
2025-05-20 14:27:32 +02:00
committed by GitHub
parent 78b8b21f2e 76ccc4790e
commit 52a06a75b8
4 changed files with 216 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_menu_default/fxmanifest.lua
+1 -1
View File
@@ -3,7 +3,7 @@ fx_version 'adamant'
game 'gta5'
description 'A basic menu system for ESX Legacy.'
lua54 'yes'
version '1.12.2'
version '1.12.4'
client_scripts { '@es_extended/imports.lua', 'client/main.lua' }
[core]/esx_menu_default/html/css/app.css
+161 -72
View File
@@ -1,109 +1,198 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
::-webkit-scrollbar {
display: none;
}
.menu {
font-family: "Poppins", sans-serif;
min-width: 350px;
color: #fff;
.menu-container {
position: absolute;
background: rgba(15, 15, 15, 0.0);
text-align: center;
border-radius: 5px;
min-width: 20.8333vw;
height: fit-content;
display: flex;
flex-direction: column;
gap: 0.9259vh;
transform-origin: center center;
}
.menu-container.align-left {
left: 0;
top: 50%;
transform: translateY(-50%) scale(var(--scale, 1));
transform-origin: left center;
}
.menu-container.align-top-left {
left: 4rem;
top: 0.8rem;
transform: scale(var(--scale, 1));
transform-origin: left top;
}
.menu-container.align-top {
left: 50%;
top: 0.8rem;
transform: translateX(-50%) scale(var(--scale, 1));
transform-origin: center top;
}
.menu-container.align-top-right {
right: 3rem;
top: 0.8rem;
transform: scale(var(--scale, 1));
transform-origin: right top;
}
.menu-container.align-right {
right: 0;
top: 50%;
transform: translateY(-50%) scale(var(--scale, 1));
transform-origin: right center;
}
.menu-container.align-bottom-right {
right: 3rem;
bottom: 0.8rem;
transform: scale(var(--scale, 1));
transform-origin: right bottom;
}
.menu-container.align-bottom {
left: 50%;
bottom: 0.8rem;
transform: translateX(-50%) scale(var(--scale, 1));
transform-origin: center bottom;
}
.menu-container.align-bottom-left {
left: 4rem;
bottom: 0.8rem;
transform: scale(var(--scale, 1));
transform-origin: left bottom;
}
.menu-container.align-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(var(--scale, 1));
transform-origin: center center;
}
.menu-buttons {
display: flex;
justify-content: center;
gap: .5208vw;
color: #FFF;
font-family: Poppins;
font-size: .8333vw;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.menu-button {
display: flex;
align-items: center;
justify-content: center;
gap: .4167vw;
cursor: pointer;
transition: all 0.3s ease;
}
.backspace-btn, .close-btn {
width: 10.6771vw;
height: 6.0185vh;
border-radius: .2604vw;
background: #161616;
}
.menu-button:hover {
background-color: #252525;
transform: scale(1.02);
}
.menu {
display: flex;
flex-direction: column;
gap: 0.9259vh;
font-family: "Poppins", sans-serif;
color: #fff;
padding: 8px;
background-color: #161616;
border-radius: 4px;
}
.head {
display: block;
overflow: hidden;
padding-bottom: 3px;
min-width: 20.4688vw;
min-height: 6.0185vh;
padding-bottom: 0.2778vh;
text-align: center;
white-space: nowrap;
background: rgba(10, 10, 10, 1);
border-bottom: 2px solid #fb9b04;
border-radius: .2604vw;
background: #FB9B04;
}
.menu .head {
text-align: center;
height: 28px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
color: #252525;
font-family: Poppins;
font-size: 1.25vw;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: normal;
height: 100%;
}
.menu .menu-items {
max-height: 450px;
display: flex;
flex-direction: column;
gap: 0.9259vh;
max-height: 41.6667vh;
overflow-y: auto;
font-weight: 550;
}
.menu-items {
margin-bottom: 2px;
margin-bottom: 0.1852vh;
}
.menu .menu-items .menu-item {
display: block;
padding: 7px;
font-size: 13px;
height: 16px;
text-indent: 5px;
background: rgba(30, 30, 30, 0.9);
color: rgb(243, 243, 243);
display: flex;
justify-content: center;
align-items: center;
gap: 1.0833vw;
min-width: 20.4688vw;
min-height: 6.0185vh;
border-radius: .2604vw;
background: #252525;
color: #FFF;
font-family: Poppins;
font-size: .8333vw;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.menu .menu-items .menu-item.selected {
border: 1px solid #fb9c04ec;
background: rgba(15, 15, 15, 0.9);
color: rgba(243, 243, 243);
letter-spacing: 0.2px;
font-weight: 500;
border: 2px solid #FB9B04;
background: #252525;
}
.menu.align-left {
left: 0;
top: 50%;
.menu-item {
display: flex;
align-items: center;
padding: .4167vw 0.9259vh;
}
.menu.align-top-left {
left: 4rem;
top: 0;
.menu-item-icon {
font-size: 1vw;
text-align: center;
}
.menu.align-top {
left: 50%;
top: 0;
.menu-item.selected {
background-color: rgba(255, 255, 255, 0.1);
}
.menu.align-top-right {
right: 3rem;
top: 0;
}
.menu.align-right {
right: 0;
top: 50%;
}
.menu.align-bottom-right {
right: 3rem;
bottom: 0;
}
.menu.align-bottom {
left: 50%;
bottom: 0;
transform: translate(0, -50%);
}
.menu.align-bottom-left {
left: 4rem;
bottom: 0;
}
.menu.align-center {
left: 50%;
top: 35%;
transform: translate(-50%, 50%);
.fas {
color: white;
}
[core]/esx_menu_default/html/js/app.js
+36 -3
View File
@@ -1,21 +1,31 @@
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="menu{{#align}} align-{{align}}{{/align}}">' +
'<div id="menu_{{_namespace}}_{{_name}}" class="menu-container{{#align}} align-{{align}}{{/align}}" style="transform: scale({{scale}});">' +
'<div class="menu">' +
'<div class="head"><span>{{{title}}}</span></div>' +
'<div class="menu-items">' +
"{{#elements}}" +
'<div class="menu-item {{#selected}}selected{{/selected}}">' +
"{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}" +
'{{#icon}}<div class="menu-item-icon"><i class="fas fa-{{icon}}"></i></div>{{/icon}}' +
'<div class="menu-item-label">{{{label}}}{{#isSlider}} : &lt;{{{sliderLabel}}}&gt;{{/isSlider}}</div>' +
"</div>" +
"{{/elements}}" +
"</div>" +
"</div>" +
'</div>' +
'<div class="menu-buttons">' +
'<div class="menu-button backspace-btn"><i class="fa-solid fa-delete-left"></i> {{locales.backspace}}</div>' +
'<div class="menu-button close-btn"><i class="fa-solid fa-right-to-bracket"></i> {{locales.select}}</div>' +
'</div>' +
"</div>";
window.ESX_MENU = {};
ESX_MENU.ResourceName = "esx_menu_default";
ESX_MENU.opened = {};
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.locales = {
backspace: "BACK",
select: "SELECT"
};
ESX_MENU.open = function (namespace, name, data) {
if (typeof ESX_MENU.opened[namespace] === "undefined") {
@@ -30,6 +40,12 @@
ESX_MENU.pos[namespace] = {};
}
if (data.locales) {
ESX_MENU.locales = data.locales;
}
data.scale = data.scale || 1;
for (let i = 0; i < data.elements.length; i++) {
if (typeof data.elements[i].type === "undefined") {
data.elements[i].type = "default";
@@ -39,6 +55,7 @@
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
data.locales = ESX_MENU.locales;
for (let i = 0; i < data.elements.length; i++) {
data.elements[i]._namespace = namespace;
@@ -362,5 +379,21 @@
window.addEventListener("message", (event) => {
onData(event.data);
});
document.addEventListener('click', function(event) {
if (event.target.closest('.backspace-btn')) {
let focused = ESX_MENU.getFocused();
if (typeof focused != "undefined") {
ESX_MENU.cancel(focused.namespace, focused.name);
}
}
if (event.target.closest('.close-btn')) {
let focused = ESX_MENU.getFocused();
if (typeof focused != "undefined") {
ESX_MENU.close(focused.namespace, focused.name);
}
}
});
};
})();
[core]/esx_menu_default/html/ui.html
+18 -13
View File
@@ -1,16 +1,21 @@
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
</head>
<body>
<div id="menus"></div>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="nui://esx_menu_default/html/css/app.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="nui://esx_menu_default/html/js/mustache.min.js" type="text/javascript"></script>
<script src="nui://esx_menu_default/html/js/app.js" type="text/javascript"></script>
</body>
</html>
<body>
<div id="menus"></div>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="nui://esx_menu_default/html/js/mustache.min.js" type="text/javascript"></script>
<script src="nui://esx_menu_default/html/js/app.js" type="text/javascript"></script>
</body>
</html>