Merge pull request #246 from izMystic/main

feat: esx_textui
2026-08-29 01:08:54 +00:00 · 2022-05-07 22:25:56 +02:00
parent 2b9fe366f8 7b90018930
commit f32f40ff9a
6 changed files with 169 additions and 0 deletions
@@ -92,6 +92,14 @@ function ESX.ShowNotification(message, type, length)
    end
 end

+function ESX.TextUI(message, type)
+	exports["esx_textui"]:TextUI(message, type)
+end
+
+function ESX.HideUI()
+	exports["esx_textui"]:HideUI()
+end
+

 function ESX.ShowAdvancedNotification(sender, subject, msg, textureDict, iconType, flash, saveToBrief, hudColorIndex)
 	if saveToBrief == nil then saveToBrief = true end
@@ -0,0 +1,18 @@
+local function TextUI(message, type)
+    SendNUIMessage({
+        action = 'show',
+        message = message or 'ESX-TextUI',
+        type = type or 'info'
+    })
+end
+
+local function HideUI()
+    SendNUIMessage({
+        action = 'hide'
+    })
+end
+
+exports('TextUI', TextUI)
+exports('HideUI', HideUI)
+RegisterNetEvent('ESX:TextUI', TextUI)
+RegisterNetEvent('ESX:HideUI', HideUI)
@@ -0,0 +1,14 @@
+fx_version 'adamant'
+game 'gta5'
+author 'ESX-Framework'
+description 'ESX TextUI'
+
+client_scripts { 'TextUI.lua' }
+shared_script '@es_extended/imports.lua'
+ui_page 'nui/index.html'
+
+files {
+    'nui/index.html',
+    'nui/js/*.js',
+    'nui/css/*.css'
+}
@@ -0,0 +1,14 @@
+:root {
+    --color: white;
+    --bgColor: #212121;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    color: var(--color);
+    font-family: sans-serif;
+}
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+        <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">
+            <div class="innerText">
+                <i class="fas fa-info-circle icon info"></i>
+                <p class="text" id="infoMessage"></p>
+            </div>
+        </div>
+        <div id="notifySuccess" class="notify success">
+            <div class="innerText">
+                <i class="fas fa-check-circle icon info"></i>
+                <p class="text" id="successMessage"></p>
+            </div>
+        </div>
+        <div id="notifyError" class="notify error">
+            <div class="innerText">
+                <i class="fas fa-exclamation-circle icon info"></i>
+                <p class="text" id="errorMessage"></p>
+            </div>
+        </div>
+    </body>
+</html>
+
+<style>
+    .notify {
+        flex: auto;
+        display: none;
+        border-left: 5px solid rgb(34, 132, 189);
+        position:absolute;
+        margin: 0 auto;
+        right: 2%;
+        bottom: 50%;
+        min-width:15%;
+        width:fit-content; 
+        height:50px;
+        background: rgba(5,5, 5, 0.9);
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+        padding-right: 10px;
+    }
+    .success {
+        border-left: 5px solid rgb(33, 223, 15) !important; 
+    }
+    .error {
+        border-left: 5px solid rgb(231, 35, 28) !important; 
+    }
+
+    .icon {
+        border: 0;
+    }
+
+    .innerText {
+        flex: auto;
+        margin-top: 15px;
+        width:100%;
+    }
+
+    .innerText{
+        margin-left: 10px;
+    }
+
+    p {
+        flex: auto;
+        word-wrap: break-word;
+        margin-left: 40px; 
+        margin-top: 17px;
+    }
+
+    .innerText .icon {
+        float: left;
+        margin-left: 5px;
+        font-size: 20px;
+    }
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0);
+        }
+        80% {
+            transform: scaleY(1.1)
+        }
+        100% {
+            transform: scaleY(1)
+        }
+    }
+</style>
@@ -0,0 +1,21 @@
+const w = window
+const doc = document
+
+$(function () {
+    w.addEventListener('message', function(e) {
+        $(".text").text(e.data.message)
+        if (e.data.action === "show") {
+            if (e.data.type === "info") {
+                doc.getElementById("notifyInfo").style.display = "block";
+            } else if (e.data.type === "error") {
+                doc.getElementById("notifyError").style.display = "block";
+            } else if (e.data.type === "success") {
+                doc.getElementById("notifySuccess").style.display = "block";
+            }
+        } else if (e.data.action === "hide") {
+            doc.getElementById("notifyInfo").style.display = "none";
+            doc.getElementById("notifyError").style.display = "none";
+            doc.getElementById("notifySuccess").style.display = "none";
+        }
+    })
+})