New MainMenu which has smart button layout, scaling and all that fancy thing #819

kvakvs · 2020-04-07T01:23:20Z

Fixes: #410
Fixes: #437

Replace old style U UI for MainMenu with new smarter UI style.

https://user-images.githubusercontent.com/288724/78613640-a8157100-786c-11ea-9e02-a85f3765c976.png

One minor annoying thing, recreating Main Menu on options changes also closes it. Otherwise worked clean for me during multiple hours of tests and multiple reloads.

TODO

WIP: Menu buttons wrapping logic Main menu grand rework; Reload fixed; Extra info labels hanging outside Experimental: Mouse in UI test

… enum now. Removed ButtonFunction type.

kvakvs · 2020-04-07T16:08:36Z

One thing to discuss:
Where to place the button to open and to close the keybinds panel.

It can be a button to open and close, then it will take space in the main menu panel.
Or it can be a close button in the keybinds panel, then its easy to close, but not sure how to open again (of course via the options panel but that's well hidden away, many will not go there and not re-enable it).

kvakvs · 2020-04-10T04:34:07Z

Based on UI state of the Lane Arrow tool the following OSD shortcuts are shown:
Select mode: Shows Ctrl+Click (localized) and Alt+Click (localized)
Edit mode: Shows "Delete|Bkspace Reset to default"

P.S. Spent sizeable amount of time fighting destroyed controls which have not yet left the hierarchy.

kianzarrin · 2020-04-10T09:35:07Z

Cool stuff!

I set my lane arrow tool keybind to CTRL+ALT+SHIFT for testing.

This is what I got:

The tool-tip should only show the shortcut key (if any).

EDIT: It would be nice if the "+" between the hotkeys was white but still maintain the black highlight like this:

EDIT: is it possible to change the color of the tool hotkey text in tooltip text so that they are consistent brown color.

kianzarrin · 2020-04-10T09:42:01Z

The width of the Main menu window/panel does not get updated as I resize scale.

kianzarrin

see comments above. FYI I edited one of them

kianzarrin · 2020-04-10T09:19:21Z

TLM/TLM/Resources/Translations/Options.csv

+"General.Dropdown.Option:Medium","Mittel","Medium","Medio","Moyenne","Közepes","Medio","中くらい","중간","Middelhoog","Średnia","Média","Среднее","高","中","Medium","Orta","Середня"
+"General.Dropdown.Option:High","Hoch","High","Alto","Haute","Magas","Alto","高い","높음","Hoog","Wysoka","Alta","Высокое","高","高","High","Yüksek","Висока"
+"General.Dropdown.Option:Very high","Sehr hoch","Very high","Muy alto","Très haute","Nagyon magas","Molto alto","とても高い","매우 높음","Zeer hoog","Bardzo wysoka","Muito Alta","Очень высоко","非常高","非常高","Very high","En yüksek","Дуже висока"
+"Shortcut.Modifier:Shift","","Shift","","","","","","","","","","","","","Shift","",""


Out of curiosity why is it necessary to translate modifier keys?

They are only translated for game-supported languages using the game code, and only while they are a part of a InputKey or SavedInputKey. We have more languages than the game. So at least modifier keys should be translated.

kianzarrin · 2020-04-10T09:53:22Z

I don't know if it is related to this PR but Changing window transparency does not work at all:

kianzarrin · 2020-04-10T10:02:10Z

There is opportunity to make panel smaller horizontally when removing some features:

kianzarrin · 2020-04-10T10:15:51Z

I hope this is not too picky but this is weird and unexpected:
If I only change one TMPE tool. TMPE button will be in a strange state where it is pressed but the panel is not visible. to see the panel I have to click once to disable TMPE and another time to enable TMPE.
If I change two or more TMPE tools then TMPE will be completely disabled.

In the picture bellow:

Go to options while TMPE panle is open (this is actually hard to reach because must users use ESC to go to options which closes TMPE. I pressed the option buttong to do so).
Activate/Deactivate only one tool. -> TMPE button is blue and in active state but the panel has disappeared. is TMPE active at this point?
3- close options. click on TMPE button -> the button will go into grey inactive state.
4- click on TMPE button twice -> TMPE panel will open.

…d-mainmenu

…pected

…e 2 rows

krzychu124 · 2020-04-11T19:07:05Z

Regards to keybinds panel show/hide toggle, maybe you could position it there:

That way we wouldn't need to widen whole main menu panel just for that one small button?

originalfoo · 2020-04-11T20:24:59Z

Regards to keybinds panel show/hide toggle, maybe you could position it there:

What happens when the toolbar panel shrinks if features are disabled? The TMPE text label would cover it.

Regarding toggle button, maybe a small ? would do? User hovers it and sees tooltip explaining what it does, clicking it toggles the shortcut hints panel.

I found this tooltip confusing:

Could we change to something like:

Toggle vehicle despawning
Currently state

And the state would be either:

enabled (easy mode)
disabled (hard mode)

This way it is also giving user some hint that disabling despawning will make gameplay harder. The current state line could maybe also be different color (green or red?) to clarify that it's changeable part of tooltip?

I'll do more detailed review later, as I have to check Kian's mass edit stuff first.

kvakvs · 2020-04-11T22:12:04Z

The despawning text change belongs to Crowdin.

kvakvs · 2020-04-12T04:07:36Z

@aubergine10 the "Normal" textures are indeed 50% desaturated compared to "Active" textures.

originalfoo · 2020-04-12T04:23:40Z

So is the issue that the others are too bright in normal state?

kianzarrin · 2020-04-12T06:30:55Z

Mode-specific options below?

maybe only show an icon per options group and if someone presses it then mod specific options appear. I don't know if that would be within the scope of this review.

kianzarrin · 2020-04-12T06:42:59Z

Window transparency is working :) but the higher the transparency value, the less transparent it is. what we are really changing here is opacity.

kianzarrin

This is looking awesome!
~~are~~ all previous issues have been fixed.
new issue: see comments about transparency.

One question you forgot to answer: are you able to change tooltip text to highlight keybinds?

TLM/TLM/U/Panel/BaseUWindowPanel.cs

kianzarrin · 2020-04-12T07:18:20Z

Regards to keybinds panel show/hide toggle, maybe you could position it there:

That way we wouldn't need to widen whole main menu panel just for that one small button?

Its better to be on the top left. so that with different languages there is no chance of the text covering the button.

kvakvs · 2020-04-12T12:07:32Z

The new button change and the new options to show/hide the keybinds hint panel is already almost done, i am debugging possible problems.
The button is hooked on the right of the version label, and as the version label is usually shorter than the parent form, it doesn't look perfect. I might later add a new layout feature like align to the parent's right edge, and then it'll look good, but i don't want to infinitely grow the scope of this ticket.

originalfoo · 2020-04-12T14:35:54Z

Good catch on transparency vs. opacity. I felt the slider was working backwards but hand't given it too much thought.

kvakvs · 2020-04-12T15:52:40Z

Made GlobalConfig.Menu.GuiTransparency obsolete and added new GuiOpacity. Its rather that, than converting the inverse value or trying to migrate with unclear results and keeping the mess.
Strings might need to be updated, and string keys. But for example in Russian opacity uses same word as transparency with inverting prefix, so kind of interchangeable.

krzychu124

Looks good, no issues found yet

kianzarrin · 2020-04-17T14:02:03Z

A few peaky issues that I don't consider to be a blocker:
1- Its possible to do this :

I made the panel small -> moved it to button of screen -> made it big.

2- dragging can only happen if you drag the label:

TLM/TLM/State/GlobalConfig.cs

kianzarrin · 2020-04-18T07:17:02Z

TLM/TLM/UI/MainMenu/MainMenuWindow.cs

+            ModUI.GetTrafficManagerTool().RequestOnscreenDisplayUpdate();
+
+            // The task is delayed till next GUI update frame.
+            // ModUI.GetTrafficManagerTool().InvalidateOnscreenDisplayFlag = true;


Commented out code without TODO

kianzarrin · 2020-04-18T07:17:32Z

TLM/TLM/UI/MainMenu/MainMenuWindow.cs

+                lastUpdatePositionFrame_ = nowFrame;
+            }
+
+            // if (isStarted_) {


Commented out code without TODO

TLM/TLM/UI/MainMenu/StatsLabel.cs

TLM/TLM/UI/SubTools/LaneArrows/LaneArrowTool.cs

TLM/TLM/UI/SubTools/LaneArrows/LaneArrowToolWindow.cs

Rename MainMenu panel to Window and refactor creation of the main menu

caf155a

WIP: Menu buttons wrapping logic Main menu grand rework; Reload fixed; Extra info labels hanging outside Experimental: Mouse in UI test

kvakvs force-pushed the u-based-mainmenu branch from a46de4a to caf155a Compare April 7, 2020 01:26

kvakvs requested review from krzychu124, originalfoo and kianzarrin April 7, 2020 01:28

New empty keybinds panel for Main Menu. Stack API for UIBuilder using…

68e8c1a

… enum now. Removed ButtonFunction type.

kvakvs added 2 commits April 10, 2020 06:34

Onscreen shortcuts and mouse clicks; Strings updated

df0075e

Merge branch 'master' into u-based-mainmenu

e61cd11

kianzarrin requested changes Apr 10, 2020

View reviewed changes

kianzarrin assigned kvakvs Apr 10, 2020

kianzarrin added the UI User interface updates label Apr 10, 2020

kvakvs added 5 commits April 10, 2020 19:20

Remove keybinds from LaneArrows button tooltip; Remove obsolete fields

17ca283

Merge branch 'u-based-mainmenu' of github.com:kvakvs/TMPE into u-base…

6c6f135

…d-mainmenu

Fixed comments: White + in 'N+click' keybind; Window transparency res…

91ac627

…pected

MainMenu row wrapping rule modified. <=4 buttons take 1 row, otherwis…

f27ed18

…e 2 rows

Drag scale does not interfere with UI resizing of the MainMenu now

39237f1

originalfoo added the Usability Make mod easier to use label Apr 11, 2020

originalfoo added this to the 11.4.0 milestone Apr 11, 2020

Merge remote-tracking branch 'tmpe/master' into u-based-mainmenu

f92a6fc

kvakvs force-pushed the u-based-mainmenu branch from 245c5c2 to f92a6fc Compare April 11, 2020 17:11

kianzarrin requested changes Apr 12, 2020

View reviewed changes

TLM/TLM/U/Panel/BaseUWindowPanel.cs Outdated Show resolved Hide resolved

Converting UButton to a programmable button without subclassing

892c8bc

New gui opacity option. New ? button to toggle keybinds help

d96873a

This was referenced Apr 12, 2020

OSD Panel and Keybinds as a separate library #500

Closed

On Screen Display with Help and Keyboard Hints #421

Closed

krzychu124 approved these changes Apr 16, 2020

View reviewed changes

kianzarrin approved these changes Apr 17, 2020

View reviewed changes

kvakvs merged commit 07332b0 into CitiesSkylinesMods:master Apr 17, 2020

originalfoo mentioned this pull request Apr 17, 2020

Further enhancements to menu bar #848

Closed

originalfoo added the Keybinds Keyboard (and mouse) shortcuts label Apr 17, 2020

kvakvs mentioned this pull request Apr 17, 2020

Dragging/sizing main menu pushes it back into screen rect #849

Merged

1 task

originalfoo mentioned this pull request Apr 17, 2020

Menu bar buttons escape the menu bar #850

Closed

originalfoo linked an issue Apr 17, 2020 that may be closed by this pull request

Menu bar buttons escape the menu bar #850

Closed

kianzarrin reviewed Apr 17, 2020

View reviewed changes

TLM/TLM/State/GlobalConfig.cs Show resolved Hide resolved

kianzarrin reviewed Apr 18, 2020

View reviewed changes

TLM/TLM/UI/MainMenu/StatsLabel.cs Show resolved Hide resolved

kianzarrin reviewed Apr 18, 2020

View reviewed changes

TLM/TLM/UI/SubTools/LaneArrows/LaneArrowTool.cs Show resolved Hide resolved

kianzarrin reviewed Apr 18, 2020

View reviewed changes

TLM/TLM/UI/SubTools/LaneArrows/LaneArrowTool.cs Show resolved Hide resolved

kianzarrin reviewed Apr 18, 2020

View reviewed changes

TLM/TLM/UI/SubTools/LaneArrows/LaneArrowToolWindow.cs Show resolved Hide resolved

originalfoo added the Localisation Localised text and features label May 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New MainMenu which has smart button layout, scaling and all that fancy thing #819

New MainMenu which has smart button layout, scaling and all that fancy thing #819

kvakvs commented Apr 7, 2020 •

edited

kvakvs commented Apr 7, 2020 •

edited

kvakvs commented Apr 10, 2020 •

edited

kianzarrin commented Apr 10, 2020 •

edited

kianzarrin commented Apr 10, 2020

kianzarrin left a comment

kianzarrin Apr 10, 2020

kvakvs Apr 10, 2020

kianzarrin commented Apr 10, 2020 •

edited

kianzarrin commented Apr 10, 2020

kianzarrin commented Apr 10, 2020

krzychu124 commented Apr 11, 2020

originalfoo commented Apr 11, 2020 •

edited

kvakvs commented Apr 11, 2020

kvakvs commented Apr 12, 2020

originalfoo commented Apr 12, 2020

kianzarrin commented Apr 12, 2020

kianzarrin commented Apr 12, 2020

kianzarrin left a comment •

edited

kianzarrin commented Apr 12, 2020

kvakvs commented Apr 12, 2020 •

edited

originalfoo commented Apr 12, 2020

kvakvs commented Apr 12, 2020 •

edited

krzychu124 left a comment

kianzarrin commented Apr 17, 2020

kianzarrin Apr 18, 2020

kianzarrin Apr 18, 2020

New MainMenu which has smart button layout, scaling and all that fancy thing #819

New MainMenu which has smart button layout, scaling and all that fancy thing #819

Conversation

kvakvs commented Apr 7, 2020 • edited

TODO

kvakvs commented Apr 7, 2020 • edited

kvakvs commented Apr 10, 2020 • edited

kianzarrin commented Apr 10, 2020 • edited

kianzarrin commented Apr 10, 2020

kianzarrin left a comment

Choose a reason for hiding this comment

kianzarrin Apr 10, 2020

Choose a reason for hiding this comment

kvakvs Apr 10, 2020

Choose a reason for hiding this comment

kianzarrin commented Apr 10, 2020 • edited

kianzarrin commented Apr 10, 2020

kianzarrin commented Apr 10, 2020

krzychu124 commented Apr 11, 2020

originalfoo commented Apr 11, 2020 • edited

kvakvs commented Apr 11, 2020

kvakvs commented Apr 12, 2020

originalfoo commented Apr 12, 2020

kianzarrin commented Apr 12, 2020

kianzarrin commented Apr 12, 2020

kianzarrin left a comment • edited

Choose a reason for hiding this comment

kianzarrin commented Apr 12, 2020

kvakvs commented Apr 12, 2020 • edited

originalfoo commented Apr 12, 2020

kvakvs commented Apr 12, 2020 • edited

krzychu124 left a comment

Choose a reason for hiding this comment

kianzarrin commented Apr 17, 2020

kianzarrin Apr 18, 2020

Choose a reason for hiding this comment

kianzarrin Apr 18, 2020

Choose a reason for hiding this comment

kvakvs commented Apr 7, 2020 •

edited

kvakvs commented Apr 7, 2020 •

edited

kvakvs commented Apr 10, 2020 •

edited

kianzarrin commented Apr 10, 2020 •

edited

kianzarrin commented Apr 10, 2020 •

edited

originalfoo commented Apr 11, 2020 •

edited

kianzarrin left a comment •

edited

kvakvs commented Apr 12, 2020 •

edited

kvakvs commented Apr 12, 2020 •

edited