From a4aa5ecd6b20a5ea342c177561fb38f1ffe83e1a Mon Sep 17 00:00:00 2001 From: Selis Date: Mon, 19 Jun 2023 18:44:18 +0200 Subject: [PATCH] Prettify stuff --- .../tgui/interfaces/CharacterDirectory.js | 24 +- .../tgui/interfaces/ChemSynthesizer.js | 44 +- tgui/packages/tgui/interfaces/ColorMate.js | 44 +- .../tgui/interfaces/PetrificationInterface.js | 30 +- .../tgui/interfaces/PrecisionEditor.js | 66 +- tgui/packages/tgui/interfaces/StarcasterCh.js | 17 +- .../tgui/interfaces/VorePanelExport.tsx | 9 +- tgui/packages/tgui_ch/backend.ts | 33 +- .../tgui_ch/components/AnimatedNumber.js | 4 +- tgui/packages/tgui_ch/components/Blink.js | 10 +- tgui/packages/tgui_ch/components/Box.tsx | 18 +- tgui/packages/tgui_ch/components/Button.js | 30 +- tgui/packages/tgui_ch/components/ByondUi.js | 10 +- .../tgui_ch/components/Collapsible.js | 4 +- tgui/packages/tgui_ch/components/ColorBox.js | 7 +- .../tgui_ch/components/DraggableControl.js | 16 +- tgui/packages/tgui_ch/components/Dropdown.js | 15 +- tgui/packages/tgui_ch/components/Flex.tsx | 19 +- tgui/packages/tgui_ch/components/Icon.js | 19 +- .../tgui_ch/components/InfinitePlane.js | 5 +- tgui/packages/tgui_ch/components/Input.js | 21 +- tgui/packages/tgui_ch/components/Knob.js | 38 +- .../tgui_ch/components/LabeledControls.js | 15 +- .../tgui_ch/components/LabeledList.tsx | 4 +- tgui/packages/tgui_ch/components/Modal.js | 4 +- tgui/packages/tgui_ch/components/NanoMap.js | 6 +- .../tgui_ch/components/NumberInput.js | 32 +- tgui/packages/tgui_ch/components/Popper.tsx | 13 +- .../tgui_ch/components/ProgressBar.js | 18 +- .../tgui_ch/components/RestrictedInput.js | 7 +- .../packages/tgui_ch/components/RoundGauge.js | 51 +- tgui/packages/tgui_ch/components/Slider.js | 36 +- tgui/packages/tgui_ch/components/Stack.tsx | 15 +- tgui/packages/tgui_ch/components/Table.js | 14 +- tgui/packages/tgui_ch/components/Tabs.js | 11 +- tgui/packages/tgui_ch/components/TextArea.js | 17 +- .../tgui_ch/components/TimeDisplay.js | 4 +- tgui/packages/tgui_ch/components/Tooltip.tsx | 16 +- tgui/packages/tgui_ch/constants.js | 10 +- tgui/packages/tgui_ch/debug/KitchenSink.js | 6 +- tgui/packages/tgui_ch/drag.js | 50 +- tgui/packages/tgui_ch/events.js | 4 +- tgui/packages/tgui_ch/format.js | 30 +- tgui/packages/tgui_ch/hotkeys.ts | 13 +- tgui/packages/tgui_ch/http.ts | 6 +- tgui/packages/tgui_ch/index.js | 9 +- tgui/packages/tgui_ch/interfaces/AICard.js | 16 +- tgui/packages/tgui_ch/interfaces/APC.js | 44 +- .../tgui_ch/interfaces/AccountsTerminal.js | 54 +- .../interfaces/AdminShuttleController.tsx | 26 +- .../tgui_ch/interfaces/AdminTicketPanel.tsx | 25 +- .../packages/tgui_ch/interfaces/AgentCard.tsx | 5 +- tgui/packages/tgui_ch/interfaces/AiAirlock.js | 12 +- .../packages/tgui_ch/interfaces/AiRestorer.js | 11 +- .../tgui_ch/interfaces/AiSupermatter.js | 15 +- tgui/packages/tgui_ch/interfaces/AirAlarm.js | 82 +- .../tgui_ch/interfaces/AlertModal.tsx | 32 +- tgui/packages/tgui_ch/interfaces/AlgaeFarm.js | 44 +- .../tgui_ch/interfaces/AppearanceChanger.js | 164 +++- .../tgui_ch/interfaces/ArcadeBattle.js | 22 +- .../tgui_ch/interfaces/AreaScrubberControl.js | 45 +- .../tgui_ch/interfaces/AssemblyInfrared.tsx | 12 +- .../tgui_ch/interfaces/AssemblyProx.js | 11 +- .../tgui_ch/interfaces/AssemblyTimer.js | 5 +- .../tgui_ch/interfaces/AtmosAlertConsole.js | 8 +- .../tgui_ch/interfaces/AtmosControl.js | 14 +- .../tgui_ch/interfaces/AtmosFilter.js | 5 +- tgui/packages/tgui_ch/interfaces/Autolathe.js | 26 +- .../tgui_ch/interfaces/Batteryrack.js | 52 +- .../tgui_ch/interfaces/BeaconLocator.js | 7 +- .../tgui_ch/interfaces/Biogenerator.js | 50 +- .../tgui_ch/interfaces/BodyDesigner.js | 79 +- .../tgui_ch/interfaces/BodyScanner.js | 67 +- .../packages/tgui_ch/interfaces/BombTester.js | 59 +- .../tgui_ch/interfaces/BotanyEditor.js | 4 +- .../tgui_ch/interfaces/BotanyIsolator.js | 23 +- .../tgui_ch/interfaces/CameraConsole.js | 29 +- tgui/packages/tgui_ch/interfaces/Canister.js | 25 +- tgui/packages/tgui_ch/interfaces/Canvas.js | 17 +- .../interfaces/CasinoPrizeDispenserCh.js | 38 +- .../tgui_ch/interfaces/CharacterDirectory.js | 74 +- .../tgui_ch/interfaces/ChemDispenser.js | 18 +- .../packages/tgui_ch/interfaces/ChemMaster.js | 95 ++- .../tgui_ch/interfaces/ChemSynthesizer.js | 44 +- tgui/packages/tgui_ch/interfaces/Cleanbot.js | 26 +- .../tgui_ch/interfaces/CloningConsole.js | 46 +- tgui/packages/tgui_ch/interfaces/ColorMate.js | 44 +- .../interfaces/CommunicationsConsole.js | 50 +- .../tgui_ch/interfaces/Communicator.tsx | 362 +++++++-- .../tgui_ch/interfaces/ComputerFabricator.js | 11 +- .../tgui_ch/interfaces/CookingAppliance.js | 32 +- .../tgui_ch/interfaces/CrewManifest.tsx | 11 +- .../tgui_ch/interfaces/CrewMonitor.js | 23 +- tgui/packages/tgui_ch/interfaces/Cryo.js | 45 +- .../tgui_ch/interfaces/CryoStorage.js | 5 +- .../tgui_ch/interfaces/DNAForensics.js | 11 +- .../tgui_ch/interfaces/DNAModifier.js | 79 +- .../tgui_ch/interfaces/DiseaseSplicer.js | 29 +- .../tgui_ch/interfaces/DishIncubator.js | 57 +- .../tgui_ch/interfaces/DisposalBin.tsx | 7 +- .../tgui_ch/interfaces/DroneConsole.js | 26 +- .../tgui_ch/interfaces/EmbeddedController.js | 104 ++- .../tgui_ch/interfaces/ExonetNode.tsx | 4 +- .../tgui_ch/interfaces/ExosuitFabricator.js | 161 +++- tgui/packages/tgui_ch/interfaces/Farmbot.js | 4 +- tgui/packages/tgui_ch/interfaces/Fax.js | 34 +- tgui/packages/tgui_ch/interfaces/Floorbot.js | 36 +- tgui/packages/tgui_ch/interfaces/GasPump.js | 38 +- .../interfaces/GasTemperatureSystem.js | 11 +- .../tgui_ch/interfaces/GeneralAtmoControl.js | 74 +- .../tgui_ch/interfaces/GeneralRecords.js | 57 +- tgui/packages/tgui_ch/interfaces/Gps.js | 49 +- .../tgui_ch/interfaces/GravityGenerator.js | 14 +- tgui/packages/tgui_ch/interfaces/GuestPass.js | 47 +- .../tgui_ch/interfaces/GyrotronControl.tsx | 20 +- tgui/packages/tgui_ch/interfaces/Holodeck.js | 21 +- .../packages/tgui_ch/interfaces/ICAssembly.js | 44 +- tgui/packages/tgui_ch/interfaces/ICCircuit.js | 30 +- tgui/packages/tgui_ch/interfaces/ICPrinter.js | 68 +- tgui/packages/tgui_ch/interfaces/IDCard.js | 17 +- .../interfaces/IdentificationComputer.js | 75 +- .../tgui_ch/interfaces/InventoryPanel.tsx | 5 +- .../tgui_ch/interfaces/InventoryPanelHuman.js | 48 +- .../tgui_ch/interfaces/IsolationCentrifuge.js | 24 +- tgui/packages/tgui_ch/interfaces/Jukebox.js | 55 +- .../packages/tgui_ch/interfaces/LawManager.js | 91 ++- .../tgui_ch/interfaces/ListInputModal.tsx | 37 +- .../tgui_ch/interfaces/LookingGlass.js | 13 +- .../tgui_ch/interfaces/MechaControlConsole.js | 43 +- tgui/packages/tgui_ch/interfaces/Medbot.js | 17 +- .../tgui_ch/interfaces/MedicalRecords.js | 101 ++- .../tgui_ch/interfaces/MentorTicketPanel.tsx | 25 +- .../tgui_ch/interfaces/MessageMonitor.js | 112 ++- .../interfaces/MiningOreProcessingConsole.js | 22 +- .../interfaces/MiningStackingConsole.js | 6 +- .../tgui_ch/interfaces/MiningVendor.js | 38 +- .../tgui_ch/interfaces/MobSpawner.tsx | 51 +- tgui/packages/tgui_ch/interfaces/MuleBot.tsx | 52 +- tgui/packages/tgui_ch/interfaces/NIF.js | 51 +- .../packages/tgui_ch/interfaces/NTNetRelay.js | 34 +- .../packages/tgui_ch/interfaces/Newscaster.js | 166 +++- .../tgui_ch/interfaces/NoticeBoard.tsx | 31 +- .../interfaces/NtosAccessDecrypter.tsx | 9 +- .../packages/tgui_ch/interfaces/NtosArcade.js | 11 +- .../tgui_ch/interfaces/NtosConfiguration.js | 20 +- .../tgui_ch/interfaces/NtosDigitalWarrant.js | 25 +- .../interfaces/NtosEmailAdministration.js | 23 +- .../tgui_ch/interfaces/NtosEmailClient.js | 95 ++- .../tgui_ch/interfaces/NtosFileManager.js | 57 +- tgui/packages/tgui_ch/interfaces/NtosMain.js | 20 +- .../tgui_ch/interfaces/NtosNetChat.js | 22 +- .../packages/tgui_ch/interfaces/NtosNetDos.js | 7 +- .../tgui_ch/interfaces/NtosNetDownloader.js | 12 +- .../tgui_ch/interfaces/NtosNetMonitor.js | 25 +- .../tgui_ch/interfaces/NtosNetTransfer.js | 33 +- .../tgui_ch/interfaces/NtosNewsBrowser.js | 27 +- .../tgui_ch/interfaces/NtosRevelation.tsx | 9 +- tgui/packages/tgui_ch/interfaces/NtosUAV.js | 26 +- .../tgui_ch/interfaces/NtosWordProcessor.js | 42 +- .../tgui_ch/interfaces/NumberInputModal.tsx | 4 +- .../tgui_ch/interfaces/OmniFilter.tsx | 16 +- .../packages/tgui_ch/interfaces/OmniMixer.tsx | 20 +- .../tgui_ch/interfaces/OperatingComputer.js | 41 +- .../tgui_ch/interfaces/OvermapDisperser.js | 52 +- .../tgui_ch/interfaces/OvermapEngines.js | 82 +- .../tgui_ch/interfaces/OvermapHelm.js | 70 +- .../tgui_ch/interfaces/OvermapNavigation.tsx | 4 +- .../interfaces/OvermapShieldGenerator.js | 41 +- .../tgui_ch/interfaces/OvermapShipSensors.js | 36 +- .../interfaces/ParticleAccelerator.tsx | 24 +- .../packages/tgui_ch/interfaces/PartsLathe.js | 27 +- .../tgui_ch/interfaces/PathogenicIsolator.js | 46 +- tgui/packages/tgui_ch/interfaces/Pda.js | 59 +- .../tgui_ch/interfaces/PersonalCrafting.js | 28 +- .../interfaces/PetrificationInterface.js | 30 +- .../tgui_ch/interfaces/Photocopier.js | 20 +- .../tgui_ch/interfaces/PipeDispenser.js | 9 +- .../tgui_ch/interfaces/PlantAnalyzer.js | 20 +- .../tgui_ch/interfaces/PlayerNotes.tsx | 13 +- .../tgui_ch/interfaces/PlayerNotesInfo.tsx | 10 +- .../interfaces/PointDefenseControl.tsx | 28 +- .../tgui_ch/interfaces/PortableGenerator.js | 19 +- .../tgui_ch/interfaces/PortablePump.js | 8 +- .../tgui_ch/interfaces/PortableTurret.js | 4 +- .../tgui_ch/interfaces/PowerMonitor.js | 53 +- .../tgui_ch/interfaces/PrecisionEditor.js | 66 +- .../tgui_ch/interfaces/PressureRegulator.js | 24 +- .../tgui_ch/interfaces/PrisonerManagement.js | 29 +- tgui/packages/tgui_ch/interfaces/RCON.js | 19 +- tgui/packages/tgui_ch/interfaces/RIGSuit.js | 27 +- tgui/packages/tgui_ch/interfaces/Radio.js | 20 +- .../tgui_ch/interfaces/RapidPipeDispenser.js | 14 +- .../tgui_ch/interfaces/RequestConsole.js | 74 +- .../tgui_ch/interfaces/ResearchConsole.js | 229 +++++- .../interfaces/ResearchServerController.js | 53 +- .../tgui_ch/interfaces/ResleevingConsole.js | 101 ++- .../tgui_ch/interfaces/ResleevingPod.js | 30 +- .../interfaces/RoboticsControlConsole.js | 33 +- .../packages/tgui_ch/interfaces/RogueZones.js | 26 +- .../tgui_ch/interfaces/RustCoreMonitor.tsx | 10 +- .../tgui_ch/interfaces/RustFuelControl.tsx | 20 +- tgui/packages/tgui_ch/interfaces/Secbot.js | 18 +- .../packages/tgui_ch/interfaces/SecureSafe.js | 11 +- .../tgui_ch/interfaces/SecurityRecords.js | 68 +- .../tgui_ch/interfaces/SeedStorage.js | 10 +- .../tgui_ch/interfaces/ShieldCapacitor.js | 25 +- .../tgui_ch/interfaces/ShieldGenerator.js | 56 +- .../tgui_ch/interfaces/ShuttleControl.js | 140 +++- tgui/packages/tgui_ch/interfaces/Sleeper.js | 76 +- tgui/packages/tgui_ch/interfaces/SmartVend.js | 9 +- tgui/packages/tgui_ch/interfaces/Smes.js | 29 +- .../tgui_ch/interfaces/SolarControl.js | 20 +- .../tgui_ch/interfaces/SpaceHeater.tsx | 12 +- tgui/packages/tgui_ch/interfaces/Stack.js | 5 +- .../tgui_ch/interfaces/StarcasterCh.js | 17 +- .../tgui_ch/interfaces/StationAlertConsole.js | 14 +- .../tgui_ch/interfaces/StockExchange.js | 67 +- .../packages/tgui_ch/interfaces/SuitCycler.js | 71 +- .../tgui_ch/interfaces/SuitStorageUnit.js | 37 +- .../tgui_ch/interfaces/SupermatterMonitor.js | 63 +- .../tgui_ch/interfaces/SupplyConsole.js | 105 ++- .../tgui_ch/interfaces/TEGenerator.js | 46 +- tgui/packages/tgui_ch/interfaces/Tank.js | 4 +- .../tgui_ch/interfaces/TelecommsLogBrowser.js | 64 +- .../interfaces/TelecommsMachineBrowser.js | 52 +- .../interfaces/TelecommsMultitoolMenu.js | 49 +- .../tgui_ch/interfaces/Teleporter.tsx | 23 +- .../tgui_ch/interfaces/TelesciConsole.js | 41 +- .../tgui_ch/interfaces/TextInputModal.tsx | 25 +- tgui/packages/tgui_ch/interfaces/TimeClock.js | 66 +- .../tgui_ch/interfaces/TraitTutorial.tsx | 11 +- .../tgui_ch/interfaces/TransferValve.tsx | 14 +- .../tgui_ch/interfaces/TurbineControl.js | 39 +- tgui/packages/tgui_ch/interfaces/Turbolift.js | 24 +- tgui/packages/tgui_ch/interfaces/Uplink.js | 82 +- tgui/packages/tgui_ch/interfaces/Vending.js | 18 +- .../tgui_ch/interfaces/VolumePanel.tsx | 10 +- tgui/packages/tgui_ch/interfaces/VorePanel.js | 759 ++++++++++++++---- .../tgui_ch/interfaces/VorePanelExport.tsx | 48 +- .../interfaces/XenoarchArtifactAnalyzer.tsx | 5 +- .../interfaces/XenoarchArtifactHarvester.js | 38 +- .../interfaces/XenoarchDepthScanner.tsx | 25 +- .../XenoarchHandheldPowerUtilizer.tsx | 40 +- .../interfaces/XenoarchSpectrometer.js | 46 +- .../tgui_ch/interfaces/XenoarchSuspension.tsx | 22 +- .../interfaces/common/AtmosControls.js | 15 +- .../interfaces/common/BeakerContents.js | 4 +- .../tgui_ch/interfaces/common/ComplexModal.js | 25 +- .../interfaces/common/InputButtons.tsx | 18 +- .../tgui_ch/interfaces/common/Loader.tsx | 5 +- .../tgui_ch/interfaces/common/LoginScreen.js | 7 +- .../tgui_ch/interfaces/common/Overmap.js | 28 +- .../interfaces/common/PortableAtmos.js | 19 +- .../tgui_ch/interfaces/common/RankIcon.js | 4 +- .../interfaces/common/TemporaryNotice.js | 6 +- tgui/packages/tgui_ch/interfaces/pAIAtmos.js | 31 +- .../tgui_ch/interfaces/pAIDirectives.tsx | 29 +- .../tgui_ch/interfaces/pAIDoorjack.js | 32 +- .../tgui_ch/interfaces/pAIMedrecords.js | 43 +- .../tgui_ch/interfaces/pAISecrecords.js | 39 +- .../tgui_ch/interfaces/pda/pda_atmos_scan.js | 29 +- .../tgui_ch/interfaces/pda/pda_janitor.js | 9 +- .../tgui_ch/interfaces/pda/pda_main_menu.js | 21 +- .../tgui_ch/interfaces/pda/pda_medical.js | 52 +- .../tgui_ch/interfaces/pda/pda_messenger.js | 115 ++- .../tgui_ch/interfaces/pda/pda_news.js | 23 +- .../tgui_ch/interfaces/pda/pda_security.js | 36 +- .../tgui_ch/interfaces/pda/pda_supply.js | 4 +- tgui/packages/tgui_ch/layouts/Layout.js | 4 +- tgui/packages/tgui_ch/layouts/NtosWindow.js | 24 +- tgui/packages/tgui_ch/layouts/Pane.js | 8 +- tgui/packages/tgui_ch/layouts/Window.js | 70 +- tgui/packages/tgui_ch/links.js | 3 +- tgui/packages/tgui_ch/renderer.ts | 24 +- tgui/packages/tgui_ch/store.js | 7 +- .../tgui_ch/stories/Button.stories.js | 8 +- .../tgui_ch/stories/ByondUi.stories.js | 6 +- tgui/packages/tgui_ch/stories/Flex.stories.js | 22 +- .../packages/tgui_ch/stories/Input.stories.js | 7 +- .../tgui_ch/stories/Storage.stories.js | 8 +- tgui/packages/tgui_ch/stories/Tabs.stories.js | 21 +- .../tgui_ch/stories/Themes.stories.js | 6 +- .../tgui_ch/stories/Tooltip.stories.js | 9 +- tgui/packages/tgui_ch/stories/common.js | 3 +- tgui/packages/tgui_ch/styles/base.scss | 10 +- .../tgui_ch/styles/components/Knob.scss | 6 +- .../tgui_ch/styles/components/RoundGauge.scss | 5 +- .../tgui_ch/styles/components/Tabs.scss | 5 +- tgui/packages/tgui_ch/styles/functions.scss | 16 +- .../tgui_ch/styles/layouts/Layout.scss | 35 +- .../tgui_ch/styles/layouts/Window.scss | 6 +- .../tgui_ch/styles/themes/abductor.scss | 30 +- .../tgui_ch/styles/themes/cardtable.scss | 15 +- .../tgui_ch/styles/themes/hackerman.scss | 16 +- .../tgui_ch/styles/themes/malfunction.scss | 30 +- .../tgui_ch/styles/themes/neutral.scss | 5 +- tgui/packages/tgui_ch/styles/themes/ntos.scss | 10 +- .../packages/tgui_ch/styles/themes/paper.scss | 5 +- .../tgui_ch/styles/themes/pda-retro.scss | 15 +- .../packages/tgui_ch/styles/themes/retro.scss | 10 +- .../tgui_ch/styles/themes/syndicate.scss | 30 +- .../tgui_ch/styles/themes/wizard.scss | 30 +- vorestation.dme | 5 +- 303 files changed, 8522 insertions(+), 2019 deletions(-) diff --git a/tgui/packages/tgui/interfaces/CharacterDirectory.js b/tgui/packages/tgui/interfaces/CharacterDirectory.js index 7bc6a1dda1..d7a45241e3 100644 --- a/tgui/packages/tgui/interfaces/CharacterDirectory.js +++ b/tgui/packages/tgui/interfaces/CharacterDirectory.js @@ -25,8 +25,14 @@ const getTagColor = (tag) => { export const CharacterDirectory = (props, context) => { const { act, data } = useBackend(context); - const { personalVisibility, personalTag, personalGenderTag, personalSexualityTag, personalErpTag, personalEventTag } = - data; + const { + personalVisibility, + personalTag, + personalGenderTag, + personalSexualityTag, + personalErpTag, + personalEventTag, + } = data; const [overlay, setOverlay] = useLocalState(context, 'overlay', null); @@ -79,14 +85,20 @@ export const CharacterDirectory = (props, context) => { - {buttons &&
{buttons}
} + {buttons && ( +
{buttons}
+ )} {open && {children}} diff --git a/tgui/packages/tgui_ch/components/ColorBox.js b/tgui/packages/tgui_ch/components/ColorBox.js index 641e5fa751..256bb5c90e 100644 --- a/tgui/packages/tgui_ch/components/ColorBox.js +++ b/tgui/packages/tgui_ch/components/ColorBox.js @@ -8,11 +8,14 @@ import { classes, pureComponentHooks } from 'common/react'; import { computeBoxClassName, computeBoxProps } from './Box'; export const ColorBox = (props) => { - const { content, children, className, color, backgroundColor, ...rest } = props; + const { content, children, className, color, backgroundColor, ...rest } = + props; rest.color = content ? null : 'transparent'; rest.backgroundColor = color || backgroundColor; return ( -
+
{content || '.'}
); diff --git a/tgui/packages/tgui_ch/components/DraggableControl.js b/tgui/packages/tgui_ch/components/DraggableControl.js index fffd0cc254..a22fde5227 100644 --- a/tgui/packages/tgui_ch/components/DraggableControl.js +++ b/tgui/packages/tgui_ch/components/DraggableControl.js @@ -81,7 +81,8 @@ export class DraggableControl extends Component { }; this.handleDragMove = (e) => { - const { minValue, maxValue, step, stepPixelSize, dragMatrix } = this.props; + const { minValue, maxValue, step, stepPixelSize, dragMatrix } = + this.props; this.setState((prevState) => { const state = { ...prevState }; const offset = getScalarScreenOffset(e, dragMatrix) - state.origin; @@ -95,7 +96,11 @@ export class DraggableControl extends Component { maxValue + step ); // Clamp the final value - state.value = clamp(state.internalValue - (state.internalValue % step) + stepOffset, minValue, maxValue); + state.value = clamp( + state.internalValue - (state.internalValue % step) + stepOffset, + minValue, + maxValue + ); state.origin = getScalarScreenOffset(e, dragMatrix); } else if (Math.abs(offset) > 4) { state.dragging = true; @@ -139,7 +144,12 @@ export class DraggableControl extends Component { } render() { - const { dragging, editing, value: intermediateValue, suppressingFlicker } = this.state; + const { + dragging, + editing, + value: intermediateValue, + suppressingFlicker, + } = this.state; const { animated, value, diff --git a/tgui/packages/tgui_ch/components/Dropdown.js b/tgui/packages/tgui_ch/components/Dropdown.js index 1309df92b9..32c8dca237 100644 --- a/tgui/packages/tgui_ch/components/Dropdown.js +++ b/tgui/packages/tgui_ch/components/Dropdown.js @@ -105,7 +105,10 @@ export class Dropdown extends Component { style={{ 'width': width, }} - className={classes([(noscroll && 'Dropdown__menu-noscroll') || 'Dropdown__menu', over && 'Dropdown__over'])}> + className={classes([ + (noscroll && 'Dropdown__menu-noscroll') || 'Dropdown__menu', + over && 'Dropdown__over', + ])}> {this.buildMenu()}
) : null; @@ -128,9 +131,15 @@ export class Dropdown extends Component { } this.setOpen(!this.state.open); }}> - {icon && } + {icon && ( + + )} - {displayText ? displayText : this.state.selected || placeholder /* VOREStation Edit */} + { + displayText + ? displayText + : this.state.selected || placeholder /* VOREStation Edit */ + } {!!nochevron || ( diff --git a/tgui/packages/tgui_ch/components/Flex.tsx b/tgui/packages/tgui_ch/components/Flex.tsx index 915047bd9c..060bae5b73 100644 --- a/tgui/packages/tgui_ch/components/Flex.tsx +++ b/tgui/packages/tgui_ch/components/Flex.tsx @@ -52,7 +52,12 @@ export const computeFlexProps = (props: FlexProps) => { export const Flex = (props) => { const { className, ...rest } = props; - return
; + return ( +
+ ); }; Flex.defaultHooks = pureComponentHooks; @@ -66,7 +71,11 @@ export type FlexItemProps = BoxProps & { }; export const computeFlexItemClassName = (props: FlexItemProps) => { - return classes(['Flex__item', Byond.IS_LTE_IE10 && 'Flex__item--iefix', computeBoxClassName(props)]); + return classes([ + 'Flex__item', + Byond.IS_LTE_IE10 && 'Flex__item--iefix', + computeBoxClassName(props), + ]); }; export const computeFlexItemProps = (props: FlexItemProps) => { @@ -99,7 +108,11 @@ const FlexItem = (props) => { const { className, ...rest } = props; return (
); diff --git a/tgui/packages/tgui_ch/components/Icon.js b/tgui/packages/tgui_ch/components/Icon.js index ef02b1059d..f8d1292502 100644 --- a/tgui/packages/tgui_ch/components/Icon.js +++ b/tgui/packages/tgui_ch/components/Icon.js @@ -37,9 +37,20 @@ export const Icon = (props) => { // font awesome icon const faRegular = FA_OUTLINE_REGEX.test(name); const faName = name.replace(FA_OUTLINE_REGEX, ''); - iconClass = (faRegular ? 'far ' : 'fas ') + 'fa-' + faName + (spin ? ' fa-spin' : ''); + iconClass = + (faRegular ? 'far ' : 'fas ') + 'fa-' + faName + (spin ? ' fa-spin' : ''); } - return ; + return ( + + ); }; Icon.defaultHooks = pureComponentHooks; @@ -47,7 +58,9 @@ Icon.defaultHooks = pureComponentHooks; export const IconStack = (props) => { const { className, children, ...rest } = props; return ( - + {children} ); diff --git a/tgui/packages/tgui_ch/components/InfinitePlane.js b/tgui/packages/tgui_ch/components/InfinitePlane.js index a14c478156..a9fcfc01e8 100644 --- a/tgui/packages/tgui_ch/components/InfinitePlane.js +++ b/tgui/packages/tgui_ch/components/InfinitePlane.js @@ -134,7 +134,10 @@ export class InfinitePlane extends Component { /> - + {zoom}x diff --git a/tgui/packages/tgui_ch/components/Input.js b/tgui/packages/tgui_ch/components/Input.js index 92f654f241..0107865f1d 100644 --- a/tgui/packages/tgui_ch/components/Input.js +++ b/tgui/packages/tgui_ch/components/Input.js @@ -9,7 +9,8 @@ import { Component, createRef } from 'inferno'; import { Box } from './Box'; import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes'; -export const toInputValue = (value) => (typeof value !== 'number' && typeof value !== 'string' ? '' : String(value)); +export const toInputValue = (value) => + typeof value !== 'number' && typeof value !== 'string' ? '' : String(value); export class Input extends Component { constructor() { @@ -117,12 +118,26 @@ export class Input extends Component { render() { const { props } = this; // Input only props - const { selfClear, onInput, onChange, onEnter, value, maxLength, placeholder, ...boxProps } = props; + const { + selfClear, + onInput, + onChange, + onEnter, + value, + maxLength, + placeholder, + ...boxProps + } = props; // Box props const { className, fluid, monospace, ...rest } = boxProps; return (
.
{ value, }}> {(control) => { - const { dragging, editing, value, displayValue, displayElement, inputElement, handleDragStart } = control; - const scaledFillValue = scale(fillValue ?? displayValue, minValue, maxValue); + const { + dragging, + editing, + value, + displayValue, + displayElement, + inputElement, + handleDragStart, + } = control; + const scaledFillValue = scale( + fillValue ?? displayValue, + minValue, + maxValue + ); const scaledDisplayValue = scale(displayValue, minValue, maxValue); - const effectiveColor = color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default'; + const effectiveColor = + color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default'; const rotation = Math.min((scaledDisplayValue - 0.5) * 270, 225); return (
{
- {dragging &&
{displayElement}
} - + {dragging && ( +
{displayElement}
+ )} + - + { const { children, wrap, ...rest } = props; return ( - + {children} ); @@ -19,7 +24,13 @@ const LabeledControlsItem = (props) => { const { label, children, mx = 1, ...rest } = props; return ( - + {children} {label} diff --git a/tgui/packages/tgui_ch/components/LabeledList.tsx b/tgui/packages/tgui_ch/components/LabeledList.tsx index 0a06916ee0..668d42332e 100644 --- a/tgui/packages/tgui_ch/components/LabeledList.tsx +++ b/tgui/packages/tgui_ch/components/LabeledList.tsx @@ -67,7 +67,9 @@ const LabeledListItem = (props: LabeledListItemProps) => { {content} {children} - {buttons && {buttons}} + {buttons && ( + {buttons} + )} ); }; diff --git a/tgui/packages/tgui_ch/components/Modal.js b/tgui/packages/tgui_ch/components/Modal.js index 72e65cdb13..33d0146161 100644 --- a/tgui/packages/tgui_ch/components/Modal.js +++ b/tgui/packages/tgui_ch/components/Modal.js @@ -28,7 +28,9 @@ export const Modal = (props) => { // VOREStation Addition End return ( -
+
{children}
diff --git a/tgui/packages/tgui_ch/components/NanoMap.js b/tgui/packages/tgui_ch/components/NanoMap.js index 6bb4c49592..4ee5199119 100644 --- a/tgui/packages/tgui_ch/components/NanoMap.js +++ b/tgui/packages/tgui_ch/components/NanoMap.js @@ -143,7 +143,11 @@ export class NanoMap extends Component { return ( - + {children} diff --git a/tgui/packages/tgui_ch/components/NumberInput.js b/tgui/packages/tgui_ch/components/NumberInput.js index 74929778a4..e05f92074d 100644 --- a/tgui/packages/tgui_ch/components/NumberInput.js +++ b/tgui/packages/tgui_ch/components/NumberInput.js @@ -90,7 +90,11 @@ export class NumberInput extends Component { maxValue + step ); // Clamp the final value - state.value = clamp(state.internalValue - (state.internalValue % step) + stepOffset, minValue, maxValue); + state.value = clamp( + state.internalValue - (state.internalValue % step) + stepOffset, + minValue, + maxValue + ); state.origin = e.screenY; } else if (Math.abs(offset) > 4) { state.dragging = true; @@ -134,7 +138,12 @@ export class NumberInput extends Component { } render() { - const { dragging, editing, value: intermediateValue, suppressingFlicker } = this.state; + const { + dragging, + editing, + value: intermediateValue, + suppressingFlicker, + } = this.state; const { className, fluid, @@ -170,7 +179,11 @@ export class NumberInput extends Component { renderContentElement(format ? format(displayValue) : displayValue); return (
@@ -219,7 +237,11 @@ export class NumberInput extends Component { }} onKeyDown={(e) => { if (e.keyCode === 13) { - const value = clamp(parseFloat(e.target.value), minValue, maxValue); + const value = clamp( + parseFloat(e.target.value), + minValue, + maxValue + ); if (Number.isNaN(value)) { this.setState({ editing: false, diff --git a/tgui/packages/tgui_ch/components/Popper.tsx b/tgui/packages/tgui_ch/components/Popper.tsx index 1f025fe63b..c7d41293bc 100644 --- a/tgui/packages/tgui_ch/components/Popper.tsx +++ b/tgui/packages/tgui_ch/components/Popper.tsx @@ -47,7 +47,11 @@ export class Popper extends Component { return; } - this.popperInstance = createPopper(domNode, this.renderedContent, options); + this.popperInstance = createPopper( + domNode, + this.renderedContent, + options + ); }); } @@ -65,7 +69,12 @@ export class Popper extends Component { renderPopperContent(callback: () => void) { // `render` errors when given false, so we convert it to `null`, // which is supported. - render(this.props.popperContent || null, this.renderedContent, callback, this.context); + render( + this.props.popperContent || null, + this.renderedContent, + callback, + this.context + ); } render() { diff --git a/tgui/packages/tgui_ch/components/ProgressBar.js b/tgui/packages/tgui_ch/components/ProgressBar.js index 5b026f2506..194395164b 100644 --- a/tgui/packages/tgui_ch/components/ProgressBar.js +++ b/tgui/packages/tgui_ch/components/ProgressBar.js @@ -9,10 +9,20 @@ import { classes, pureComponentHooks } from 'common/react'; import { computeBoxClassName, computeBoxProps } from './Box'; export const ProgressBar = (props) => { - const { className, value, minValue = 0, maxValue = 1, color, ranges = {}, children, ...rest } = props; + const { + className, + value, + minValue = 0, + maxValue = 1, + color, + ranges = {}, + children, + ...rest + } = props; const scaledValue = scale(value, minValue, maxValue); const hasContent = children !== undefined; - const effectiveColor = color || keyOfMatchingRange(value, ranges) || 'default'; + const effectiveColor = + color || keyOfMatchingRange(value, ranges) || 'default'; return (
{ width: clamp01(scaledValue) * 100 + '%', }} /> -
{hasContent ? children : toFixed(scaledValue * 100) + '%'}
+
+ {hasContent ? children : toFixed(scaledValue * 100) + '%'} +
); }; diff --git a/tgui/packages/tgui_ch/components/RestrictedInput.js b/tgui/packages/tgui_ch/components/RestrictedInput.js index 32293f61a5..977c911d4e 100644 --- a/tgui/packages/tgui_ch/components/RestrictedInput.js +++ b/tgui/packages/tgui_ch/components/RestrictedInput.js @@ -131,7 +131,12 @@ export class RestrictedInput extends Component { const { className, fluid, monospace, ...rest } = boxProps; return (
.
{ return ; } - const { value, minValue = 1, maxValue = 1, ranges, alertAfter, format, size = 1, className, style, ...rest } = props; + const { + value, + minValue = 1, + maxValue = 1, + ranges, + alertAfter, + format, + size = 1, + className, + style, + ...rest + } = props; const scaledValue = scale(value, minValue, maxValue); const clampedValue = clamp01(scaledValue); @@ -23,7 +34,10 @@ export const RoundGauge = (props) => { if (ranges) { Object.keys(ranges).forEach((x) => { const range = ranges[x]; - scaledRanges[x] = [scale(range[0], minValue, maxValue), scale(range[1], minValue, maxValue)]; + scaledRanges[x] = [ + scale(range[0], minValue, maxValue), + scale(range[1], minValue, maxValue), + ]; }); } @@ -35,7 +49,11 @@ export const RoundGauge = (props) => { return (
{ })}> {alertAfter && ( - + )} @@ -60,7 +82,10 @@ export const RoundGauge = (props) => { className={`RoundGauge__ringFill RoundGauge--color--${x}`} key={i} style={{ - 'stroke-dashoffset': Math.max((2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50, 0), + 'stroke-dashoffset': Math.max( + (2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50, + 0 + ), }} transform={`rotate(${180 + 180 * col_ranges[0]} 50 50)`} cx="50" @@ -70,9 +95,19 @@ export const RoundGauge = (props) => { ); })} - - - + + +
diff --git a/tgui/packages/tgui_ch/components/Slider.js b/tgui/packages/tgui_ch/components/Slider.js index 31b47bb0f3..45e00fe3cd 100644 --- a/tgui/packages/tgui_ch/components/Slider.js +++ b/tgui/packages/tgui_ch/components/Slider.js @@ -54,12 +54,25 @@ export const Slider = (props) => { value, }}> {(control) => { - const { dragging, editing, value, displayValue, displayElement, inputElement, handleDragStart } = control; + const { + dragging, + editing, + value, + displayValue, + displayElement, + inputElement, + handleDragStart, + } = control; const hasFillValue = fillValue !== undefined && fillValue !== null; const scaledValue = scale(value, minValue, maxValue); - const scaledFillValue = scale(fillValue ?? displayValue, minValue, maxValue); + const scaledFillValue = scale( + fillValue ?? displayValue, + minValue, + maxValue + ); const scaledDisplayValue = scale(displayValue, minValue, maxValue); - const effectiveColor = color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default'; + const effectiveColor = + color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default'; return (
{ {...computeBoxProps(rest)} onMouseDown={handleDragStart}>
{
{ }}>
- {dragging &&
{displayElement}
} + {dragging && ( +
{displayElement}
+ )} +
+
+ {hasContent ? children : displayElement}
-
{hasContent ? children : displayElement}
{inputElement}
); diff --git a/tgui/packages/tgui_ch/components/Stack.tsx b/tgui/packages/tgui_ch/components/Stack.tsx index f399e97a45..28aaa8080c 100644 --- a/tgui/packages/tgui_ch/components/Stack.tsx +++ b/tgui/packages/tgui_ch/components/Stack.tsx @@ -35,7 +35,13 @@ type StackItemProps = FlexProps & { const StackItem = (props: StackItemProps) => { const { className, innerRef, ...rest } = props; - return ; + return ( + + ); }; Stack.Item = StackItem; @@ -48,7 +54,12 @@ const StackDivider = (props: StackDividerProps) => { const { className, hidden, ...rest } = props; return (