Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TGUI Parity with Upstream and Remaining React Porting & Polish #6244

Merged
merged 62 commits into from
May 19, 2024

Conversation

Drulikar
Copy link
Contributor

@Drulikar Drulikar commented May 6, 2024

About the pull request

This PR is a follow up to #5493 and ultimately is aimed at bringing us back into parity with TG's version of the TGUI components again. For the most part this PR is done via diffing TG's TGUI folder with ours. The PRs listed below are what I found in blames and I double checked to see what files if any they affected outside the TGUI folder.

It is recommended to close VSC and run bin/clean.cmd and then bin/build.cmd if you try out this branch. You will be using the wrong node & prettier version otherwise.

This at least partially ports these PRs (and likely many others - but these I explicitly checked for how they affected other files):

Additionally it ports the new base components from:

But these are missing documentation in the components readme, and we do not have any interface that utilizes them yet. I wanted to explicitly mention them separately so people can see what they can do.

Changes I still intend to do in this PR or investigate:

Other notable changes not directly related to the above ports, but done as I was fixing other problems:

  • Strip panel is now larger with sprites at 64x64 instead of 48 because as an Image component now they didn't alias the same.
  • VOX panel's second tab now doesn't overlap the other buttons
  • Wiring panel from Smartfridge tgui #1623 is now restored to use circular indicators again instead of the regression to ColorBox in /vending tgui remake  #2641
  • Smart fridge interface is more in line with sorted inventories as far as layout & tooltips
  • Tacmap drawing interface is tweaked a little to deal with the changes to dropdowns + clicking the tab is now disabled again until the tacmap is ready (It needs minimap subsystem to fire to have icons when flattening the map to be up to date)
  • Fixes runtimes when quickly switching between tgsay categories
  • Basically reverts Fix bug with RestrictedInput TGUI component #5651 in favor of how TG ended up solving it via Makes the restricted number input user friendlier tgstation/tgstation#81495
  • Rolls back SWC to the version TG is currently using because of TGUI: Replaces babel & terser #6196 (comment)
  • Adds these commands from two new tgui commands (for coders) tgstation/tgstation#81381 though I also have it check jsx files that somereason TG doesn't do (needs to have been built once to function - just run build.bat):
    image
  • Chat: Adds a clear chat button clearing the current tab, mute button to disable unread notifications for a tab, and updates the word highlight regex for case sensitivity. I left out one of the Cyrillic fixes since we shouldn't normally be handling Cyrillic anyways.
  • Ship manipulator window can now replace any existing shuttle and generally is polished up more than it was.
  • Ports TGSay 1.1 though I discarded basically all the layout changes they did.
  • TGUI modals can now accept a ui_state in case you want an alert for say a mob that might qdel while it is open.
  • Finishes porting the reservation changes to shuttles.dm from Space/Changeturf fixes and optimizations tgstation/tgstation#73261 that some reason were absent from Ports Mapping Backend updates #5165
  • Fixes F5 refreshing a window if default is prevented (e.g. when the hotkey interface is waiting for a key press).
  • All depreciated useLocalState is now removed. In almost all situations I could useState, but a few things for MFD on CAS I needed to use sharedState.

Explain why it's good for the game

Prepares us for 516 (though still more changes will be necessary) and finalizes the react port.

Testing Photographs and Procedure

Screenshots & Videos

New list modal w/ duplicate key handling:
image

Fixed VOX panel (sound files used to overlap type select):
image

Updated shuttle manipulator window:
image
image
image

With replace any shuttle support:
image

Erase current tab chat history:
image

Working case sensitivity highlights:
image

Unread counter toggle per tab:
image

Larger strip panel:
image

Tacmap panel polish (button positioning + dropdown text color when highlighted):
image

Minor tweak to camera panel:
image

Dropdowns will now display above if too little space below:
image

Kitchen sink works again (F12 w/ tgui-dev):
image

Layout mode works again (F11 w/ tgui-dev):
image

New checkbox modal (with theme support):
image
checkbox

New handling for button sizes in alert modals (stacked list since options wanted to use more horizontal space than limit):
image

Polished smart fridge + restore wiring panel:
smart fridge

Fixed byondui in supply pod menu:
image

TG Say:
image

Some unchanged panels (to just show working):
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
dropship

Changelog

🆑 Drathek, mullenpaul
ui: Finalizes the TGUI React port and brings us back into parity again with TG's interface components
ui: Strip panel is now larger with sprites at 64x64 instead of 48 because as an Image component now they didn't alias the same.
ui: VOX panel's second tab now doesn't overlap the other buttons
ui: Wiring panel for some machines is now restored to use circular indicators again
ui: Smart fridge interface is more in line with sorted inventories as far as layout & tooltips
ui: Tacmap drawing interface is tweaked a little to deal with the changes to dropdowns + clicking the tab is now disabled again until the tacmap is ready (It needs minimap subsystem to fire to have icons when flattening the map to be up to date)
ui: Reworks RestrictedInput number handling
ui: Adds the DMIcon, VirtualList (deferred lazy list), Dialogue, MenuBar, StyleableSection, and Checkbox TGUI components (but nothing uses them yet)
ui: Chat: Adds a clear chat button clearing the current tab, mute button to disable unread notifications for a tab, and updates the word highlight regex for case sensitivity
ui: Updates the ship manipulator window to allow replacing any Shuttle
ui: Fixes the supply pod panel not displaying its byondui map correctly
ui: Fixes the research terminal duplicating papers in display old mode.
ui: Updates the tgui_input_list to for new features like hotkey selection, duplicate key handling, etc
fix: Fixes thinking runtimes when quickly switching between tgsay categories
code: Shuttle subsystem now is less aggressive with reservations (skipping deletion if below a threshold, delaying reservation if above a threshold)
fix: Fixes F5 key still refreshing a TGUI window even if default was set to be prevented (e.g. Hotkey interface)
/:cl:

Replacement actually is useful now!
# Conflicts:
#	tgui/package.json
#	tgui/packages/tgui/components/Button.jsx
#	tgui/packages/tgui/components/Chart.jsx
#	tgui/packages/tgui/components/ColorBox.jsx
#	tgui/packages/tgui/components/Grid.jsx
#	tgui/packages/tgui/components/Icon.jsx
#	tgui/packages/tgui/components/NoticeBox.jsx
#	tgui/packages/tgui/components/Table.jsx
#	tgui/public/tgui-panel.bundle.css
#	tgui/webpack.config.js
#	tgui/yarn.lock
@Drulikar Drulikar added the Work in Progress Will never be finished label May 6, 2024
@github-actions github-actions bot added UI deletes nanoui/html Fix Fix one bug, make ten more labels May 6, 2024
@Drulikar Drulikar changed the title TGUI Parity with upstream and remaining React porting & polish TGUI Parity with Upstream and Remaining React Porting & Polish May 6, 2024
@cm13-github cm13-github removed the Merge Conflict PR can't be merged because it touched too much code label May 16, 2024
@cm13-github
Copy link
Contributor

Conflicts have been resolved. A maintainer will review the pull request shortly.

cm13-github added a commit that referenced this pull request May 17, 2024
cm13-github added a commit that referenced this pull request May 17, 2024
@Drulikar Drulikar removed the Needs Testing Need to test it on the guinea pigs (production server) label May 18, 2024
cm13-github added a commit that referenced this pull request May 18, 2024
@harryob harryob enabled auto-merge May 19, 2024 21:16
@harryob harryob added this pull request to the merge queue May 19, 2024
Merged via the queue into cmss13-devs:master with commit 1fa2922 May 19, 2024
28 checks passed
cm13-github added a commit that referenced this pull request May 19, 2024
@Drulikar Drulikar deleted the React_Porting_Polish branch May 19, 2024 22:31
@Drulikar Drulikar restored the React_Porting_Polish branch May 19, 2024 22:32
github-merge-queue bot pushed a commit that referenced this pull request May 22, 2024
# About the pull request

This PR is a follow up to #6244 effectively reverting the changes ported
from tgstation/tgstation#75463

Instead of using the down() proc on the server, we are once again doing
the tgsay open via winset on hotkey so it is more responsive. However,
to fix the issue with tgsay opening when say another window is focused,
it now has an embedded winget for map.focus and thats sent in the
payload.

# Explain why it's good for the game

Should make tgsay open more responsively again.

This was the reason why I needed to make the change in the first place: 

![bug](https://github.com/cmss13-devs/cmss13/assets/76988376/0288d3d1-e3c9-4cf7-95c2-9f7ef88095da)

# Testing Photographs and Procedure
But now that bug is fixed, and we're opening the old way again!


![tgsay](https://github.com/cmss13-devs/cmss13/assets/76988376/0997f797-7b99-4e6e-acda-722a783b010f)

# Changelog
:cl: Drathek
ui: TGSay is now opened the same way it used to for more responsiveness
/:cl:
@Drulikar Drulikar deleted the React_Porting_Polish branch July 27, 2024 12:30
github-merge-queue bot pushed a commit that referenced this pull request Nov 3, 2024
…nt (#7474)

# About the pull request

This PR is a follow-up to #5777 and #6244 because Button.Confirm was
changed how its confirm content was displayed. It used to display the
children always, but TG since changed it to display either the confirm
content or the children. Now the children will be displayed if there is
no confirm content set.

# Explain why it's good for the game

Fixes confusing buttons in the ping relay browser.

# Testing Photographs and Procedure
<details>
<summary>Screenshots & Videos</summary>

Before:

![image](https://github.com/user-attachments/assets/a48b01e9-ca8d-4521-9ac5-8f4cfb07f6eb)

After:

![image](https://github.com/user-attachments/assets/46151d2f-139c-4f30-b4fb-0892572bf64f)

</details>

# Changelog
:cl: Drathek
ui: Fixed the ping relay buttons not displaying anything when clicked on
the first time. Now Button.Confirm.confirmContent will only replace
children if it is truthy.
/:cl:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Code Improvement Make the code longer Fix Fix one bug, make ten more Testmerge Candidate we'll test this while you're asleep and the server has 10 players UI deletes nanoui/html
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants