TGUI ID Computer

[Garash2k]

About the PR

Rising #11970 from it's grave from when I worked on it 6 months ago. Adressed the "loading from game data point," made it compatible with dept. ID computers, and added a few goodies such as a selection on the card look button, faster updating card name, and some put_in_hand_or_eject.
I know that compactness is a concern when going from raw html to tgui, but I think this result is ok, with every job being visible, and the area accesses peeking out of the fold with this new default window size.

older pics:

Why's this needed?

Color coding and groupings should make it easier to use. Also a useless Login feature has been removed, making it faster to use. Plus, TGUI looks more modern than raw html

Changelog

(u)Garash
(+)New snappier UI for the Identification Computers, go commit ID fraud today!

[UI][Feature]

[Lynncubus]

A little nitpick, but the background colors make the interface look extremely busy and the options hard to read.

[Glamurio]

Love this, great job, fantastic work, this makes me excited to work on my HoP rework again.

A little nitpick, but the background colors make the interface look extremely busy and the options hard to read.

Suggestion: Only have the headers colored, but the main content be black. Here's a mockup:

[Lynncubus]

Love this, great job, fantastic work, this makes me excited to work on my HoP rework again.

A little nitpick, but the background colors make the interface look extremely busy and the options hard to read.

Suggestion: Only have the headers colored, but the main content be black. Here's a mockup:

Yeah, something like that, I'd suggest making them collapsible, see the WeaponVendor as an example. And don't darken the colors by 20% as they ruin the contrast and makes the colors hideous in my opinion

[Garash2k]

Thinking about ui_static_data,
standard_jobs could easily be in it.
accesses_by_area would have to have it's allowed indicator moved somewhere else, we could calculate it in js by passing modify.access in ui_data
I'll do that when I get home along with the suggested box tweaks

[Garash2k]

Yeah, something like that, I'd suggest making them collapsible, see the WeaponVendor as an example. And don't darken the colors by 20% as they ruin the contrast and makes the colors hideous in my opinion

The reason the colors are darkened is for accessibility concerns. Because the text is white, it has poor readability unless the background color is darkened

As for collapsible, I'm not seeing the use for it, each section would only collapse 1 to 3 lines of buttons, and it's not like a seed vendor where you can be interested in a specific category that would otherwise be a few pages down.

[Glamurio]

The reason the colors are darkened is for accessibility concerns. Because the text is white, it has poor readability unless the background color is darkened.

Totally valid, however they have a point about the colors. Whenever it comes to accessibility, I like to do a luminance comparison of the colors and decide if using black font color might be better. I'm not sure however, how good it would look to have one or two departments with black headers.

Perhaps we could achieve a happy medium? How does 10% look, does that still pass or at least barely fail?

Additionally, since we are using HTML and presumably CSS, you could try the text-shadow property:
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
With this, white text could be outlined black. That way, the text will stand out no matter the background.

[Glamurio]

Small typo, you misspelled "maintenance"

[github-actions]

This PR has been inactive for two weeks, and has been automatically marked as stale. This means it is at risk of being auto closed in another week. Please address any outstanding review items and ensure your PR is finished. If you are auto-staled anyway, ask developers if your PR will be merged. Once you have done any of the previous actions then you should request a developer remove the stale label on your PR, to reset the stale timer. If you feel no developer will respond in that time, you may wish to close this PR youself, while you seek developer comment, as you will then be able to reopen the PR yourself.

[Garash2k]

!merge_upstream

[github-actions]

Merging upstream failed:
https://github.com/goonstation/goonstation/actions/runs/5629101228

[ZeWaka]

actually one small change i see that can help with the verticality
do this with the top - probably a 2/3 1/3 split because long names

[Garash2k]

Horizontal!

Also while testing it, I noticed that very long buttons would grow out of the window/their parent. With a whitespace property we can make them wrap, which is better than then ending up on top of the Pronouns/PIN section.

[Garash2k]

!merge_upstream

[github-actions]

Merging upstream failed:
https://github.com/goonstation/goonstation/actions/runs/5634718506