From 7ffa12af4f2fec5e92a09269fed481907f3db5fc Mon Sep 17 00:00:00 2001 From: Luke <39926192+LukeWasTakenn@users.noreply.github.com> Date: Thu, 23 Feb 2023 17:29:38 +0100 Subject: [PATCH] feat(web/radial): global menu pagination adds a More... button when menu items are over PAGE_ITEMS --- locales/al.json | 3 +- locales/cs.json | 3 +- locales/de.json | 3 +- locales/en.json | 3 +- locales/es.json | 3 +- locales/et.json | 3 +- locales/fr.json | 3 +- locales/he.json | 3 +- locales/hr.json | 3 +- locales/hu.json | 3 +- locales/id.json | 3 +- locales/it.json | 3 +- locales/lt.json | 3 +- locales/nl.json | 3 +- locales/pl.json | 3 +- locales/ru.json | 3 +- locales/sk.json | 3 +- locales/sl.json | 3 +- locales/sv.json | 3 +- locales/zh-cn.json | 3 +- locales/zh-tw.json | 3 +- web/src/features/menu/radial/index.tsx | 66 +++++++++++++++++++------- web/src/providers/LocaleProvider.tsx | 3 ++ web/src/typings/radial.ts | 1 + 24 files changed, 96 insertions(+), 37 deletions(-) diff --git a/locales/al.json b/locales/al.json index 6d112ea..ee207c8 100644 --- a/locales/al.json +++ b/locales/al.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Cancel", "close": "Mbylle", - "confirm": "Konfirmo" + "confirm": "Konfirmo", + "more": "More..." } } diff --git a/locales/cs.json b/locales/cs.json index cdf00ec..149d631 100644 --- a/locales/cs.json +++ b/locales/cs.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Zrušit", "close": "Zavřít", - "confirm": "Potvrdit" + "confirm": "Potvrdit", + "more": "More..." } } diff --git a/locales/de.json b/locales/de.json index cce07fe..009b23c 100644 --- a/locales/de.json +++ b/locales/de.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Abbrechen", "close": "Schließen", - "confirm": "Bestätigen" + "confirm": "Bestätigen", + "more": "More..." } } diff --git a/locales/en.json b/locales/en.json index 86d7a7c..855d0f9 100644 --- a/locales/en.json +++ b/locales/en.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Cancel", "close": "Close", - "confirm": "Confirm" + "confirm": "Confirm", + "more": "More..." } } diff --git a/locales/es.json b/locales/es.json index 760db22..93d5088 100644 --- a/locales/es.json +++ b/locales/es.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Cancelar", "close": "Cerrar", - "confirm": "Confirmar" + "confirm": "Confirmar", + "more": "More..." } } diff --git a/locales/et.json b/locales/et.json index 9164e41..72e4090 100644 --- a/locales/et.json +++ b/locales/et.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Tühista", "close": "Sulge", - "confirm": "Kinnita" + "confirm": "Kinnita", + "more": "More..." } } diff --git a/locales/fr.json b/locales/fr.json index 5ac82fd..f18214d 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Annuler", "close": "Fermer", - "confirm": "Confirmer" + "confirm": "Confirmer", + "more": "More..." } } diff --git a/locales/he.json b/locales/he.json index 07da029..94c7674 100644 --- a/locales/he.json +++ b/locales/he.json @@ -3,6 +3,7 @@ "ui": { "cancel": "ביטול", "close": "סגירה", - "confirm": "אישור" + "confirm": "אישור", + "more": "More..." } } diff --git a/locales/hr.json b/locales/hr.json index 838a9c1..35654a9 100644 --- a/locales/hr.json +++ b/locales/hr.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Odustani", "close": "Zatvori", - "confirm": "Potvrdi" + "confirm": "Potvrdi", + "more": "Više..." } } diff --git a/locales/hu.json b/locales/hu.json index c15df0c..7e75b54 100644 --- a/locales/hu.json +++ b/locales/hu.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Mégse", "close": "Bezárás", - "confirm": "Megerősít" + "confirm": "Megerősít", + "more": "More..." } } diff --git a/locales/id.json b/locales/id.json index 0b706df..7be40f5 100644 --- a/locales/id.json +++ b/locales/id.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Batal", "close": "Tutup", - "confirm": "Konfirmasi" + "confirm": "Konfirmasi", + "more": "More..." } } diff --git a/locales/it.json b/locales/it.json index ccc3629..e17e8d2 100644 --- a/locales/it.json +++ b/locales/it.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Cancel", "close": "Chiudere", - "confirm": "Confermare" + "confirm": "Confermare", + "more": "More..." } } diff --git a/locales/lt.json b/locales/lt.json index 8359924..6d45d6b 100644 --- a/locales/lt.json +++ b/locales/lt.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Atšaukti", "close": "Uždaryti", - "confirm": "Patvirtinti" + "confirm": "Patvirtinti", + "more": "More..." } } diff --git a/locales/nl.json b/locales/nl.json index 4e18200..57e5153 100644 --- a/locales/nl.json +++ b/locales/nl.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Annuleren", "close": "Sluiten", - "confirm": "Bevestig" + "confirm": "Bevestig", + "more": "More..." } } diff --git a/locales/pl.json b/locales/pl.json index b7d16be..1fa5849 100644 --- a/locales/pl.json +++ b/locales/pl.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Anuluj", "close": "Zamknij", - "confirm": "Potwierdź" + "confirm": "Potwierdź", + "more": "More..." } } diff --git a/locales/ru.json b/locales/ru.json index 952b314..af7f9c9 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Отменить", "close": "Закрывать", - "confirm": "Подтверждать" + "confirm": "Подтверждать", + "more": "More..." } } diff --git a/locales/sk.json b/locales/sk.json index 8d81930..f485880 100644 --- a/locales/sk.json +++ b/locales/sk.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Zrušiť", "close": "Zavrieť", - "confirm": "Potvrdiť" + "confirm": "Potvrdiť", + "more": "More..." } } diff --git a/locales/sl.json b/locales/sl.json index 984c87b..be0d225 100644 --- a/locales/sl.json +++ b/locales/sl.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Cancel", "close": "Zapri", - "confirm": "Potrdi" + "confirm": "Potrdi", + "more": "More..." } } diff --git a/locales/sv.json b/locales/sv.json index d416537..012c0a2 100644 --- a/locales/sv.json +++ b/locales/sv.json @@ -3,6 +3,7 @@ "ui": { "cancel": "Avbryt", "close": "Stäng", - "confirm": "Acceptera" + "confirm": "Acceptera", + "more": "More..." } } diff --git a/locales/zh-cn.json b/locales/zh-cn.json index bf7d378..6d372ac 100644 --- a/locales/zh-cn.json +++ b/locales/zh-cn.json @@ -3,6 +3,7 @@ "ui": { "cancel": "取消", "close": "关闭", - "confirm": "确认" + "confirm": "确认", + "more": "More..." } } diff --git a/locales/zh-tw.json b/locales/zh-tw.json index e48bf61..e5483a9 100644 --- a/locales/zh-tw.json +++ b/locales/zh-tw.json @@ -3,6 +3,7 @@ "ui": { "cancel": "取消", "close": "關閉", - "confirm": "確認" + "confirm": "確認", + "more": "More..." } } diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx index 44f4425..e6591bc 100644 --- a/web/src/features/menu/radial/index.tsx +++ b/web/src/features/menu/radial/index.tsx @@ -1,10 +1,11 @@ import { Box, createStyles } from '@mantine/core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNuiEvent } from '../../../hooks/useNuiEvent'; import { fetchNui } from '../../../utils/fetchNui'; import ScaleFade from '../../../transitions/ScaleFade'; import type { RadialMenuItem } from '../../../typings'; +import { useLocales } from '../../../providers/LocaleProvider'; const useStyles = createStyles((theme) => ({ wrapper: { @@ -51,23 +52,41 @@ const useStyles = createStyles((theme) => ({ }, })); +// PAGE_ITEMS + 1 = More... button +const PAGE_ITEMS = 7; + const degToRad = (deg: number) => deg * (Math.PI / 180); const RadialMenu: React.FC = () => { const { classes } = useStyles(); + const { locale } = useLocales(); const [visible, setVisible] = useState(false); - const [menu, setMenu] = useState<{ items: RadialMenuItem[]; sub?: boolean }>({ + const [menuItems, setMenuItems] = useState([]); + const [menu, setMenu] = useState<{ items: RadialMenuItem[]; sub?: boolean; page: number }>({ items: [], sub: false, + page: 1, }); + const changePage = async (increment?: boolean) => { + setVisible(false); + // May cause issues if user toggles off the menu while in transition? + await new Promise((resolve) => setTimeout(resolve, 100)); + setVisible(true); + setMenu({ ...menu, page: increment ? menu.page + 1 : menu.page - 1 }); + }; + + useEffect(() => { + if (menu.items.length < PAGE_ITEMS) return setMenuItems(menu.items); + const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1), PAGE_ITEMS * menu.page); + PAGE_ITEMS * menu.page < menu.items.length && + items.push({ icon: 'ellipsis-h', label: locale.ui.more, isMore: true }); + setMenuItems(items); + }, [menu.items, menu.page]); + useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean } | false) => { if (!data) return setVisible(false); - // if (visible) { - // setVisible(false); - // await new Promise((resolve) => setTimeout(resolve, 100)); - // } - setMenu(data); + setMenu({ ...data, page: 1 }); setVisible(true); }); @@ -77,16 +96,22 @@ const RadialMenu: React.FC = () => { return ( <> - menu.sub && fetchNui('radialBack')}> + { + if (menu.page > 1) await changePage(); + else if (menu.sub) fetchNui('radialBack'); + }} + > {/*Fixed issues with background circle extending the circle when there's less than 3 items*/} - {menu.items.map((item, index) => { + {menuItems.map((item, index) => { // Always draw full circle to avoid elipse circles with 2 or less items - const pieAngle = 360 / (menu.items.length < 3 ? 3 : menu.items.length); + const pieAngle = 360 / (menuItems.length < 3 ? 3 : menuItems.length); const angle = degToRad(pieAngle / 2 + 90); const gap = 0; const radius = 175 * 0.65 - gap; @@ -100,7 +125,13 @@ const RadialMenu: React.FC = () => { fetchNui('radialClick', index)} + onClick={async () => { + const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) + index; + if (!item.isMore) fetchNui('radialClick', clickIndex); + else { + await changePage(true); + } + }} > { })} { - if (menu.sub) fetchNui('radialBack'); + onClick={async () => { + if (menu.page > 1) await changePage(); else { - setVisible(false); - fetchNui('radialClose'); + if (menu.sub) fetchNui('radialBack'); + else { + setVisible(false); + fetchNui('radialClose'); + } } }} > @@ -139,7 +173,7 @@ const RadialMenu: React.FC = () => {
= ({ children }) = cancel: '', close: '', confirm: '', + more: '', }, }); diff --git a/web/src/typings/radial.ts b/web/src/typings/radial.ts index 72c0bda..4bb20c8 100644 --- a/web/src/typings/radial.ts +++ b/web/src/typings/radial.ts @@ -3,4 +3,5 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; export interface RadialMenuItem { icon: IconProp; label: string; + isMore?: boolean; }