From bd8e08bac3374bbfa876b2c0f4faf64b97ee8afc Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Wed, 9 Feb 2022 15:36:26 +0100 Subject: [PATCH] [MIRROR] Changes how tgui handles static data [MDB IGNORE] (#11401) * Changes how tgui handles static data (#64757) * Changes how tgui handles static data Co-authored-by: Jeremiah <42397676+jlsnow301@users.noreply.github.com> --- code/modules/tgui/tgui.dm | 12 ++++- code/modules/tgui/tgui_alert.dm | 10 ++-- code/modules/tgui/tgui_input_list.dm | 11 ++-- code/modules/tgui/tgui_input_number.dm | 10 ++-- code/modules/tgui/tgui_input_text.dm | 10 ++-- tgui/packages/tgui/backend.ts | 1 + tgui/packages/tgui/interfaces/AlertModal.tsx | 54 +++++++++---------- .../tgui/interfaces/ListInputModal.tsx | 33 +++++++----- .../tgui/interfaces/NumberInputModal.tsx | 14 ++--- .../tgui/interfaces/TextInputModal.tsx | 14 ++--- .../tgui/interfaces/common/InputButtons.tsx | 10 ++-- tgui/packages/tgui/routes.js | 21 ++++++++ 12 files changed, 118 insertions(+), 82 deletions(-) diff --git a/code/modules/tgui/tgui.dm b/code/modules/tgui/tgui.dm index 58f5b5918c5..f0049ef3417 100644 --- a/code/modules/tgui/tgui.dm +++ b/code/modules/tgui/tgui.dm @@ -31,6 +31,8 @@ var/closing = FALSE /// The status/visibility of the UI. var/status = UI_INTERACTIVE + /// Timed refreshing state + var/refreshing = FALSE /// Topic state used to determine status/interactability. var/datum/ui_state/state = null /// Rate limit client refreshes to prevent DoS. @@ -180,11 +182,17 @@ /datum/tgui/proc/send_full_update(custom_data, force) if(!user.client || !initialized || closing) return + if(!COOLDOWN_FINISHED(src, refresh_cooldown)) + refreshing = TRUE + addtimer(CALLBACK(src, .proc/send_full_update), TGUI_REFRESH_FULL_UPDATE_COOLDOWN, TIMER_UNIQUE) + return + refreshing = FALSE var/should_update_data = force || status >= UI_UPDATE window.send_message("update", get_payload( custom_data, with_data = should_update_data, with_static_data = TRUE)) + COOLDOWN_START(src, refresh_cooldown, TGUI_REFRESH_FULL_UPDATE_COOLDOWN) /** * public @@ -215,6 +223,7 @@ "title" = title, "status" = status, "interface" = interface, + "refreshing" = refreshing, "window" = list( "key" = window_key, "size" = window_size, @@ -303,9 +312,8 @@ switch(type) if("ready") // Send a full update when the user manually refreshes the UI - if (initialized && COOLDOWN_FINISHED(src, refresh_cooldown)) + if(initialized) send_full_update() - COOLDOWN_START(src, refresh_cooldown, TGUI_REFRESH_FULL_UPDATE_COOLDOWN) initialized = TRUE if("pingReply") initialized = TRUE diff --git a/code/modules/tgui/tgui_alert.dm b/code/modules/tgui/tgui_alert.dm index 542e7e5cfc3..71a59550092 100644 --- a/code/modules/tgui/tgui_alert.dm +++ b/code/modules/tgui/tgui_alert.dm @@ -123,15 +123,17 @@ /datum/tgui_modal/ui_state(mob/user) return GLOB.always_state -/datum/tgui_modal/ui_data(mob/user) +/datum/tgui_modal/ui_static_data(mob/user) . = list() .["autofocus"] = autofocus .["buttons"] = buttons .["message"] = message - .["preferences"] = list() - .["preferences"]["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) - .["preferences"]["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) + .["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) + .["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) .["title"] = title + +/datum/tgui_modal/ui_data(mob/user) + . = list() if(timeout) .["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS)) diff --git a/code/modules/tgui/tgui_input_list.dm b/code/modules/tgui/tgui_input_list.dm index cc2e7fabf09..a8801ddf05a 100644 --- a/code/modules/tgui/tgui_input_list.dm +++ b/code/modules/tgui/tgui_input_list.dm @@ -143,16 +143,15 @@ /datum/tgui_list_input/ui_static_data(mob/user) . = list() + .["init_value"] = default || items[1] .["items"] = items + .["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) + .["message"] = message + .["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) + .["title"] = title /datum/tgui_list_input/ui_data(mob/user) . = list() - .["init_value"] = default || items[1] - .["message"] = message - .["preferences"] = list() - .["preferences"]["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) - .["preferences"]["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) - .["title"] = title if(timeout) .["timeout"] = clamp((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS), 0, 1) diff --git a/code/modules/tgui/tgui_input_number.dm b/code/modules/tgui/tgui_input_number.dm index 9052e4a741d..7fccf26cfaf 100644 --- a/code/modules/tgui/tgui_input_number.dm +++ b/code/modules/tgui/tgui_input_number.dm @@ -136,16 +136,18 @@ /datum/tgui_input_number/ui_state(mob/user) return GLOB.always_state -/datum/tgui_input_number/ui_data(mob/user) +/datum/tgui_input_number/ui_static_data(mob/user) . = list() .["init_value"] = default // Default is a reserved keyword + .["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) .["max_value"] = max_value .["message"] = message .["min_value"] = min_value - .["preferences"] = list() - .["preferences"]["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) - .["preferences"]["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) + .["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) .["title"] = title + +/datum/tgui_input_number/ui_data(mob/user) + . = list() if(timeout) .["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS)) diff --git a/code/modules/tgui/tgui_input_text.dm b/code/modules/tgui/tgui_input_text.dm index 50f4c9bfeb8..62a5efeff8c 100644 --- a/code/modules/tgui/tgui_input_text.dm +++ b/code/modules/tgui/tgui_input_text.dm @@ -147,16 +147,18 @@ /datum/tgui_input_text/ui_state(mob/user) return GLOB.always_state -/datum/tgui_input_text/ui_data(mob/user) +/datum/tgui_input_text/ui_static_data(mob/user) . = list() + .["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) .["max_length"] = max_length .["message"] = message .["multiline"] = multiline .["placeholder"] = default // Default is a reserved keyword - .["preferences"] = list() - .["preferences"]["large_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_large) - .["preferences"]["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) + .["swapped_buttons"] = user.client.prefs.read_preference(/datum/preference/toggle/tgui_input_swapped) .["title"] = title + +/datum/tgui_input_text/ui_data(mob/user) + . = list() if(timeout) .["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS)) diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts index 41b24043330..b5ce52f5e09 100644 --- a/tgui/packages/tgui/backend.ts +++ b/tgui/packages/tgui/backend.ts @@ -253,6 +253,7 @@ type BackendState = { title: string, status: number, interface: string, + refreshing: boolean, window: { key: string, size: [number, number], diff --git a/tgui/packages/tgui/interfaces/AlertModal.tsx b/tgui/packages/tgui/interfaces/AlertModal.tsx index bea7b6739aa..965faf68380 100644 --- a/tgui/packages/tgui/interfaces/AlertModal.tsx +++ b/tgui/packages/tgui/interfaces/AlertModal.tsx @@ -1,5 +1,4 @@ import { Loader } from './common/Loader'; -import { Preferences } from './common/InputButtons'; import { useBackend, useLocalState } from '../backend'; import { KEY_ENTER, KEY_ESCAPE, KEY_LEFT, KEY_RIGHT, KEY_SPACE, KEY_TAB } from '../../common/keycodes'; import { Autofocus, Box, Button, Flex, Section, Stack } from '../components'; @@ -8,8 +7,9 @@ import { Window } from '../layouts'; type AlertModalData = { autofocus: boolean; buttons: string[]; + large_buttons: boolean; message: string; - preferences: Preferences; + swapped_buttons: boolean; timeout: number; title: string; }; @@ -22,19 +22,18 @@ export const AlertModal = (_, context) => { const { autofocus, buttons = [], - message, - preferences, + large_buttons, + message = '', timeout, title, } = data; - const { large_buttons } = preferences; const [selected, setSelected] = useLocalState(context, 'selected', 0); - // Dynamically sets window height + // Dynamically sets window dimensions const windowHeight - = 115 - + (message.length > 30 ? Math.ceil(message.length / 3) : 0) - + (message.length && large_buttons ? 5 : 0) - + (buttons.length > 2 ? buttons.length * 25 : 0); + = 115 + + (message.length > 30 ? Math.ceil(message.length / 4) : 0) + + (message.length && large_buttons ? 5 : 0); + const windowWidth = 325 + (buttons.length > 2 ? 55 : 0); const onKey = (direction: number) => { if (selected === 0 && direction === KEY_DECREMENT) { setSelected(buttons.length - 1); @@ -46,8 +45,8 @@ export const AlertModal = (_, context) => { }; return ( - - {timeout && } + + {!!timeout && } { const keyCode = window.event ? e.which : e.keyCode; @@ -59,19 +58,20 @@ export const AlertModal = (_, context) => { act('choose', { choice: buttons[selected] }); } else if (keyCode === KEY_ESCAPE) { act('cancel'); - } else if ( - keyCode === KEY_LEFT - || (e.shiftKey && keyCode === KEY_TAB) - ) { + } else if (keyCode === KEY_LEFT) { + e.preventDefault(); onKey(KEY_DECREMENT); - } else if (keyCode === KEY_RIGHT || keyCode === KEY_TAB) { + } else if (keyCode === KEY_TAB || keyCode === KEY_RIGHT) { + e.preventDefault(); onKey(KEY_INCREMENT); } }}>
- {message} + + {message} + {!!autofocus && } @@ -91,19 +91,16 @@ export const AlertModal = (_, context) => { */ const ButtonDisplay = (props, context) => { const { data } = useBackend(context); - const { buttons = [], preferences } = data; + const { buttons = [], large_buttons, swapped_buttons } = data; const { selected } = props; - const { large_buttons, swapped_buttons } = preferences; - const buttonDirection - = (buttons.length > 2 ? 'column' : 'row') - + (!swapped_buttons ? '-reverse' : ''); return ( + justify="space-around" + wrap> {buttons?.map((button, index) => !!large_buttons && buttons.length < 3 ? ( @@ -132,9 +129,9 @@ const ButtonDisplay = (props, context) => { */ const AlertButton = (props, context) => { const { act, data } = useBackend(context); - const { preferences } = data; - const { large_buttons } = preferences; + const { large_buttons } = data; const { button, selected } = props; + const buttonWidth = button.length > 7 ? button.length : 7; return ( ); diff --git a/tgui/packages/tgui/interfaces/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputModal.tsx index 39929ad937c..ddfa50062a2 100644 --- a/tgui/packages/tgui/interfaces/ListInputModal.tsx +++ b/tgui/packages/tgui/interfaces/ListInputModal.tsx @@ -1,23 +1,29 @@ import { Loader } from './common/Loader'; -import { InputButtons, Preferences } from './common/InputButtons'; +import { InputButtons } from './common/InputButtons'; import { Button, Input, Section, Stack } from '../components'; +import { useBackend, useLocalState } from '../backend'; import { KEY_A, KEY_DOWN, KEY_ESCAPE, KEY_ENTER, KEY_UP, KEY_Z } from '../../common/keycodes'; import { Window } from '../layouts'; -import { useBackend, useLocalState } from '../backend'; type ListInputData = { - items: string[]; - message: string; init_value: string; - preferences: Preferences; + items: string[]; + large_buttons: boolean; + message: string; timeout: number; title: string; }; export const ListInputModal = (_, context) => { const { act, data } = useBackend(context); - const { items = [], message, init_value, preferences, timeout, title } = data; - const { large_buttons } = preferences; + const { + items = [], + message = "", + init_value, + large_buttons, + timeout, + title, + } = data; const [selected, setSelected] = useLocalState( context, 'selected', @@ -98,7 +104,7 @@ export const ListInputModal = (_, context) => { ); // Dynamically changes the window height based on the message. const windowHeight - = 325 + Math.ceil(message?.length / 3) + (large_buttons ? 5 : 0); + = 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0); // Grabs the cursor when no search bar is visible. if (!searchBarVisible) { setTimeout(() => document!.getElementById(selected.toString())?.focus(), 1); @@ -131,15 +137,16 @@ export const ListInputModal = (_, context) => { buttons={