starred/qb-core-qbcore-fivem
1
0
Fork 0
mirror of https://github.com/qbcore-fivem/qb-core.git synced 2026-08-28 23:01:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow defining icon

Browse Source 
- Adds warning class
This commit is contained in:
Kakarot
2024-02-17 06:13:47 -06:00
parent 40df11027b
commit 5c60c94197
7 changed files with 119 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/events.lua
+2 -2
View File
@@ -190,8 +190,8 @@ RegisterNetEvent('QBCore:Player:UpdatePlayerData', function()
TriggerServerEvent('QBCore:UpdatePlayer')
end)
RegisterNetEvent('QBCore:Notify', function(text, type, length)
QBCore.Functions.Notify(text, type, length)
RegisterNetEvent('QBCore:Notify', function(text, type, length, icon)
QBCore.Functions.Notify(text, type, length, icon)
end)
-- This event is exploitable and should not be used. It has been deprecated, and will be removed soon.
client/functions.lua
+32 -27
View File
@@ -58,9 +58,18 @@ end
---@return number - The time at which the entity was looked at
function QBCore.Functions.LookAtEntity(entity, timeout, speed)
local involved = GetInvokingResource()
if not DoesEntityExist(entity) then turnPromise:reject(involved..' :^1 Entity does not exist') return turnPromise.value end
if not type(entity) == 'number' then turnPromise:reject(involved..' :^1 Entity must be a number') return turnPromise.value end
if not type(speed) == 'number' then turnPromise:reject(involved..' :^1 Speed must be a number') return turnPromise.value end
if not DoesEntityExist(entity) then
turnPromise:reject(involved .. ' :^1 Entity does not exist')
return turnPromise.value
end
if not type(entity) == 'number' then
turnPromise:reject(involved .. ' :^1 Entity must be a number')
return turnPromise.value
end
if not type(speed) == 'number' then
turnPromise:reject(involved .. ' :^1 Speed must be a number')
return turnPromise.value
end
if speed > 5.0 then speed = 5.0 end
if timeout > 5000 then timeout = 5000 end
@@ -111,11 +120,11 @@ function QBCore.Functions.PlayAnim(animDict, animName, upperbodyOnly, duration)
local invoked = GetInvokingResource()
local animPromise = promise.new()
if type(animDict) ~= 'string' or type(animName) ~= 'string' then
animPromise:reject(invoked..' :^1 Wrong type for animDict or animName')
animPromise:reject(invoked .. ' :^1 Wrong type for animDict or animName')
return animPromise.value
end
if not DoesAnimDictExist(animDict) then
animPromise:reject(invoked..' :^1 Animation dictionary does not exist')
animPromise:reject(invoked .. ' :^1 Animation dictionary does not exist')
return animPromise.value
end
@@ -127,7 +136,7 @@ function QBCore.Functions.PlayAnim(animDict, animName, upperbodyOnly, duration)
while not HasAnimDictLoaded(animDict) do
RequestAnimDict(animDict)
if (GetGameTimer() - start) > 5000 then
animPromise:reject(invoked..' :^1 Animation dictionary failed to load')
animPromise:reject(invoked .. ' :^1 Animation dictionary failed to load')
return animPromise.value
end
Wait(1)
@@ -137,7 +146,7 @@ function QBCore.Functions.PlayAnim(animDict, animName, upperbodyOnly, duration)
Wait(10) -- Wait a bit for the animation to start, then check if it exists
local currentTime = GetAnimDuration(animDict, animName)
if currentTime == 0 then
animPromise:reject(invoked..' :^1 Animation does not exist')
animPromise:reject(invoked .. ' :^1 Animation does not exist')
return animPromise.value
end
@@ -171,29 +180,25 @@ RegisterNUICallback('getNotifyConfig', function(_, cb)
cb(QBCore.Config.Notify)
end)
function QBCore.Functions.Notify(text, texttype, length)
function QBCore.Functions.Notify(text, texttype, length, icon)
local message = {
action = 'notify',
type = texttype or 'primary',
length = length or 5000,
}
if type(text) == 'table' then
local ttext = text.text or 'Placeholder'
local caption = text.caption or 'Placeholder'
texttype = texttype or 'primary'
length = length or 5000
SendNUIMessage({
action = 'notify',
type = texttype,
length = length,
text = ttext,
caption = caption
})
message.text = text.text or 'Placeholder'
message.caption = text.caption or 'Placeholder'
else
texttype = texttype or 'primary'
length = length or 5000
SendNUIMessage({
action = 'notify',
type = texttype,
length = length,
text = text
})
message.text = text
end
if icon then
message.icon = icon
end
SendNUIMessage(message)
end
function QBCore.Debug(resource, obj, depth)
config.lua
+6 -2
View File
@@ -46,15 +46,19 @@ QBConfig.Notify.NotificationStyling = {
QBConfig.Notify.VariantDefinitions = {
success = {
classes = 'success',
icon = 'task_alt'
icon = 'check_circle'
},
primary = {
classes = 'primary',
icon = 'notifications'
},
warning = {
classes = 'warning',
icon = 'warning'
},
error = {
classes = 'error',
icon = 'warning'
icon = 'error'
},
police = {
classes = 'police',
html/css/style.css
+7 -2
View File
@@ -42,7 +42,6 @@ html::-webkit-scrollbar {
border-left: 5px solid #f44236;
font-size: 1.5vh;
}
}
.success {
@@ -57,6 +56,12 @@ html::-webkit-scrollbar {
border: 1px solid #6facec;
}
.warning {
background-color: #ff9800;
border-radius: 5px;
border: 1px solid #ffc107;
}
.error {
background-color: #c10114;
border-radius: 5px;
@@ -73,4 +78,4 @@ html::-webkit-scrollbar {
background-color: #f44236;
border-radius: 5px;
border: 1px solid #f88e86;
}
}
html/index.html
+19 -19
View File
@@ -1,20 +1,20 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.umd.prod.js" defer></script>
<script type="module" src="js/app.js"></script>
<script src="js/drawtext.js"></script>
<link rel="stylesheet" href="css/drawtext.css">
</head>
<body style="font-family: 'Poppins', sans-serif">
<div id="q-app" style="min-height: 100vh"></div>
<div id="drawtext-container">
<div id="text" class="text"></div>
</div>
</body>
</html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.umd.prod.js" defer></script>
<script type="module" src="js/app.js"></script>
<script src="js/drawtext.js"></script>
<link rel="stylesheet" href="css/drawtext.css" />
</head>
<body style="font-family: 'Poppins', sans-serif">
<div id="q-app" style="min-height: 100vh"></div>
<div id="drawtext-container">
<div id="text" class="text"></div>
</div>
</body>
</html>
html/js/app.js
+44 -47
View File
@@ -1,65 +1,62 @@
import { registerWindowMethods } from "./testing.js";
import { isEnvBrowser } from "./utils.js";
import {
determineStyleFromVariant,
DEV_MODE,
fetchNotifyConfig,
NOTIFY_CONFIG,
} from "./config.js";
import { determineStyleFromVariant, DEV_MODE, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js";
const { useQuasar } = Quasar;
const { onMounted, onUnmounted } = Vue;
const app = Vue.createApp({
setup() {
const $q = useQuasar();
setup() {
const $q = useQuasar();
const showNotif = async ({ data }) => {
// Otherwise we process any old MessageEvent with a data property
if (data?.action !== "notify") return;
const showNotif = async ({ data }) => {
// Otherwise we process any old MessageEvent with a data property
if (data?.action !== "notify") return;
const { text, length, type, caption } = data;
const { classes, icon } = determineStyleFromVariant(type);
const { text, length, type, caption, icon: dataIcon } = data;
let { classes, icon } = determineStyleFromVariant(type);
// Make sure we have sucessfully fetched out config properly
if (!NOTIFY_CONFIG) {
console.error(
"The notification config did not load properly, trying again for next time"
);
// Lets check again to see if it exists
await fetchNotifyConfig();
// If we have a config lets re-run notification with same data, this
// isn't recursive though.
if (NOTIFY_CONFIG) return showNotif({ data });
}
if (dataIcon) {
icon = dataIcon;
}
$q.notify({
message: text,
multiLine: text.length > 100,
// If our text is larger than a 100 characters,
// we should use multiline notifications
group: NOTIFY_CONFIG.NotificationStyling.group ?? false,
progress: NOTIFY_CONFIG.NotificationStyling.progress ?? true,
position: NOTIFY_CONFIG.NotificationStyling.position ?? "right",
timeout: length,
caption,
classes,
icon,
});
};
onMounted(() => {
window.addEventListener("message", showNotif);
});
onUnmounted(() => {
window.removeEventListener("message", showNotif);
});
return {};
},
// Make sure we have sucessfully fetched out config properly
if (!NOTIFY_CONFIG) {
console.error("The notification config did not load properly, trying again for next time");
// Lets check again to see if it exists
await fetchNotifyConfig();
// If we have a config lets re-run notification with same data, this
// isn't recursive though.
if (NOTIFY_CONFIG) return showNotif({ data });
}
$q.notify({
message: text,
multiLine: text.length > 100,
// If our text is larger than a 100 characters,
// we should use multiline notifications
group: NOTIFY_CONFIG.NotificationStyling.group ?? false,
progress: NOTIFY_CONFIG.NotificationStyling.progress ?? true,
position: NOTIFY_CONFIG.NotificationStyling.position ?? "right",
timeout: length,
caption,
classes,
icon,
});
};
onMounted(() => {
window.addEventListener("message", showNotif);
});
onUnmounted(() => {
window.removeEventListener("message", showNotif);
});
return {};
},
});
app.use(Quasar, { config: {} });
app.mount("#q-app");
if (DEV_MODE || isEnvBrowser()) {
registerWindowMethods();
registerWindowMethods();
}
html/js/config.js
+9 -10
View File
@@ -23,24 +23,23 @@ export let NOTIFY_CONFIG = null;
* @returns NotiVariantData
**/
export const determineStyleFromVariant = (variant) => {
const variantData = NOTIFY_CONFIG.VariantDefinitions[variant];
if (!variantData)
throw new Error(`Style of type: ${variant}, does not exist in the config`);
return variantData;
const variantData = NOTIFY_CONFIG.VariantDefinitions[variant];
if (!variantData) throw new Error(`Style of type: ${variant}, does not exist in the config`);
return variantData;
};
// Fetch and set NOTIFY_CONFIG from client script callback
export const fetchNotifyConfig = async () => {
NOTIFY_CONFIG = await fetchNui("getNotifyConfig", {}, BrowserMockConfigData);
if (isEnvBrowser() || DEV_MODE) {
console.log("Fetched Config:");
console.dir(NOTIFY_CONFIG);
}
NOTIFY_CONFIG = await fetchNui("getNotifyConfig", {}, BrowserMockConfigData);
if (isEnvBrowser() || DEV_MODE) {
console.log("Fetched Config:");
console.dir(NOTIFY_CONFIG);
}
};
// We specifically wait for all other files to load
// just in case of a race condition between client handlers
// and NUI fetch call
window.addEventListener("load", async () => {
await fetchNotifyConfig();
await fetchNotifyConfig();
});