Main menu and tool code refactoring #656

kvakvs · 2020-02-06T02:39:51Z

What does

Affects Main TMPE button, and main TMPE panel

Main panel and main button now scale to % of screen size
button states all reworked, normal sprited desaturated, active sprites full colour
textures split into sprites creating atlas on load
smart skinning per button, and buttons also control their state

More details

BaseUI and UIBase renamed to ModUI (class) and ModUi (field) representing root object of user interface for the TMPE mod;
Some generic UI code is now slowly moving out to TrafficManager.U namespace (BaseUButton from old LinearSpriteButton)
WIP on BaseUButton and ButtonTexture going to generalize textures handling from UIMainMenuButton
Get-only properties on BaseUButton renamed to Get* functions instead of just nouns.
New texture loading code for atlases is used for UI buttons, removing some loading code from the old static texture classes.
Renaming and documenting stuff.
Logic is mostly unchanged, but file structure can be changing, files are moved or split.

This is code cleanup and preparation for new main menu panel design.

kianzarrin · 2020-02-06T08:46:08Z

TLM/TLM/U/BaseUButton.cs

+            playAudioEvents = true;
+        }
+
+        public abstract bool Active { get; }


Note: My road selection also provides an optional disabled state:
https://github.com/kianzarrin/Cities-Skylines-Traffic-Manager-President-Edition/blob/cb19aa340e2f6e22e24f1bca015a0191ea84ba80/TLM/TLM/UI/LinearSpriteButton.cs#L27

Yeah this entire thing is convoluted, i want a more generic button with all these states, now also including the disabled state. Will have remember to take your change in too, whether your or mine gets merged first.

originalfoo · 2020-02-06T19:10:22Z

Another state for buttons that might be useful is some sort of "highlight" effect?

Currently there's no visual feedback to users as to what bulk applicator tools are applying; usually it is the currently selected tool + one or more other tools.

For example, with priority signs tool selected, I can Ctrl+Shift+Click to apply priority signs, junction restrictions and lane arrows down a route. Would be nice if the toolbar buttons of those tools could light a different colour (eg. light blue bg to match the selection shape on map) letting me know I'm about to apply multiple tools.

At some point in future, it would also be nice to toggle persistent overlays by right-clicking buttons so maybe also an "overlay" state?

kvakvs · 2020-02-07T01:22:55Z

I like the ideas but not going to do any of that until a clear state diagram is created.
If a possibility of state toggles like those right click overlays is considered, we can add that later to the design and amend the button features. But let's begin with just refactoring + changing textures for the main menu.

TLM/TLM/U/Button/ButtonSkin.cs

kvakvs · 2020-02-18T13:22:37Z

TLM/TLM/UI/MainMenu/MainMenuPanel.cs

+            const int numRows = 2;
+            const int numCols = 6;


Rework, move constants

TLM/TLM/UI/ModUI.cs

…nto U/

kianzarrin · 2020-02-20T07:16:12Z

The number 11 initially made me think there are 11 new things to look at. like this:

maybe put V11 if it fits?

originalfoo · 2020-02-20T10:21:29Z

The 11 is already in title bar of the TMPE menu bar. So I think it can be removed from the menu button.

kvakvs · 2020-02-20T10:47:46Z

11 is small and easy to remove. Reason it is here, because i wanted the button to look slightly different from pre-11, to spark interest in those who still run v10 and didn't pay attention that TMPE has been upgraded to 11. One idea would be to take whatever we have for logo? The chirper and traffic light? And take away the crown. And another idea was to add version to it.

TLM/TLM/UI/MainMenu/MainMenuPanel.cs

TLM/TLM/UI/MainMenu/VehicleRestrictionsButton.cs

kvakvs · 2020-02-20T15:25:52Z

TLM/TLM/UI/RemoveCitizenInstanceButtonExtender.cs

@@ -49,11 +52,11 @@ public class RemoveCitizenInstanceButtonExtender : MonoBehaviour {
            return button;
        }

-        public class RemoveCitizenInstanceButton : LinearSpriteButton {
+        public class RemoveCitizenInstanceButton : BaseUButton {


Double check this still works and the icon is visible.

kvakvs · 2020-02-20T15:26:17Z

TLM/TLM/UI/RemoveVehicleButtonExtender.cs

@@ -57,11 +60,11 @@ var publicTransportVehicleInfoPanel
            return button;
        }

-        public class RemoveVehicleButton : LinearSpriteButton {
+        public class RemoveVehicleButton : BaseUButton {


Double check this works too, and the button is visible

krzychu124 · 2020-02-20T23:59:25Z

Scale slider works as intended, saves position. looks good 👍

kvakvs · 2020-02-21T02:30:02Z

Now with maintenance features disabled, the menu is refreshed live and buttons are removed. As soon as a row is empty, the panel also shrinks.

…tes satisfied

kvakvs · 2020-02-21T02:36:17Z

Updated now:

Code (toolbutton atlases now use HashSet<string> instead of List<string> to fight duplicate sprite names)
Buttons updated in realtime as Maintenance tab has its features toggled
Added v11 to the main button sprite, and toned down the crown in the background.

originalfoo · 2020-02-21T11:03:40Z

In DEBUG builds, ModUI.cs:

The name uiView does not exist in the current context

kvakvs · 2020-02-21T11:09:43Z

@aubergine10
Fixed, i've commented too much last time
Removing code feels good.

originalfoo · 2020-02-21T11:19:05Z

Tested out menu resizing when tools are disabled...

Is it possible to tweak so it works something like:

// pseudocode
if (numButtons > 4) {
   // arrange buttons on to two rows
   // but retain at least 4 buttons on top row
} else {
   // just one row with 4 or less buttons
}

kvakvs · 2020-02-21T11:22:39Z

Possible.

originalfoo · 2020-02-21T11:24:29Z

I think with the hot reload it doesn't matter too much as only devs see that.

Maybe min 5 icon width for top row would be better (assuming that fits STABLE version label)?

kvakvs · 2020-02-21T11:25:29Z

I'll go with your original idea, didn't notice you had more complex logic there than just 4 button count, it was 4 buttons on top row which should be enough to fit version label.

kvakvs · 2020-02-21T12:50:40Z

I've made a layout class which handles button placement and row breaks, it is not tested, i am at work and have no way to run the game. If you wish to play the happy debugging, you can take it now, otherwise i welcome you to try this branch later tonight.

originalfoo · 2020-02-21T13:37:07Z

Tested in-game - the button rows/cols is working great. However the panel backgorund is glitching.

Panel background didn't update when adding 5th button:

At 8 buttons added it looks like panel background is being extended wrong way (or think there's extra row?)

9 buttons and panel height is correct but width still only 4 buttons wide:

10 buttons, panel bg too high again:

etc...

krzychu124

I like it 👍 resizing works as described (missing translation keys are included in #723 ).

originalfoo

This is working really great now - LGTM 👍

originalfoo added code cleanup Refactor code, remove old code, improve maintainability technical Tasks that need to be performed in order to improve quality and maintainability UI User interface updates labels Feb 6, 2020

originalfoo assigned kvakvs Feb 6, 2020

originalfoo mentioned this pull request Feb 6, 2020

support for guide manager #653

Merged

kianzarrin reviewed Feb 6, 2020

View reviewed changes

originalfoo added this to the 11.2 milestone Feb 7, 2020

originalfoo mentioned this pull request Feb 11, 2020

Eraser button on main toolbar #692

Closed

kvakvs force-pushed the 523-facelift-mainmenu branch 2 times, most recently from 59ccc24 to aae9659 Compare February 17, 2020 23:53

kvakvs commented Feb 18, 2020

View reviewed changes

TLM/TLM/U/Button/ButtonSkin.cs Outdated Show resolved Hide resolved

kvakvs commented Feb 18, 2020

View reviewed changes

TLM/TLM/UI/ModUI.cs Outdated Show resolved Hide resolved

kvakvs added 11 commits February 18, 2020 22:24

WIP: Refactoring LinearToolButton into a more generic skinnable button

a102f82

Renamed BaseUI and menu button classes and moved some generic files i…

615bf7b

…nto U/

Get properties in UButton are now abstract functions

da42d76

Replaced graphics loading for UIMainButton with new Atlas code

2c18c05

Skinnable BaseUButton and generalized with MainMenuButton

8232b00

ButtonSkin allows overriding background

6a0424c

Main menu is scaled to screen size fraction

a972721

Toggle Traffic Light button is used for testing

692796d

Graphics for TimedTL, ManualTL, ToggleTL tools

7d93f2f

Added green buttons, Lane Arrows and Lane Connector

011ef14

Reverted textures; Smarter toggle button behaviour; Minor refactorings

1e7777d

kvakvs force-pushed the 523-facelift-mainmenu branch from 587ae89 to 1e7777d Compare February 18, 2020 21:25

kvakvs marked this pull request as ready for review February 18, 2020 21:27

kvakvs requested review from originalfoo and krzychu124 February 18, 2020 21:38

kvakvs commented Feb 20, 2020

View reviewed changes

TLM/TLM/UI/MainMenu/MainMenuPanel.cs Outdated Show resolved Hide resolved

kvakvs commented Feb 20, 2020

View reviewed changes

TLM/TLM/UI/MainMenu/VehicleRestrictionsButton.cs Outdated Show resolved Hide resolved

kvakvs commented Feb 20, 2020

View reviewed changes

Toned down button textures; added v11 to 11 in main button; Review no…

5cbd1e5

…tes satisfied

Get a View for debug menu

05fabdd

MenuLayout class responsible for menu row breaking and sizing

65cd4fe

MaxCols counting fixed; Rows counting fixed

36b1f71

krzychu124 approved these changes Feb 21, 2020

View reviewed changes

originalfoo approved these changes Feb 21, 2020

View reviewed changes

kvakvs merged commit 68cdcc5 into CitiesSkylinesMods:master Feb 21, 2020

originalfoo modified the milestones: 11.2, 11.1.1 Feb 21, 2020

This was referenced Mar 1, 2020

Despawn buttons missing from Vehicle and Cim info panels #759

Closed

Hot reload of dev builds seems broken #762

Closed

originalfoo added the Toolbar The main TMPE toolbar label Apr 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Main menu and tool code refactoring #656

Main menu and tool code refactoring #656

kvakvs commented Feb 6, 2020 •

edited

kianzarrin Feb 6, 2020

kvakvs Feb 6, 2020 •

edited

originalfoo commented Feb 6, 2020

kvakvs commented Feb 7, 2020 •

edited

kvakvs Feb 18, 2020

kianzarrin commented Feb 20, 2020

originalfoo commented Feb 20, 2020

kvakvs commented Feb 20, 2020 •

edited

kvakvs Feb 20, 2020

kvakvs Feb 20, 2020

krzychu124 commented Feb 20, 2020

kvakvs commented Feb 21, 2020

kvakvs commented Feb 21, 2020 •

edited

originalfoo commented Feb 21, 2020

kvakvs commented Feb 21, 2020 •

edited

originalfoo commented Feb 21, 2020

kvakvs commented Feb 21, 2020 •

edited

originalfoo commented Feb 21, 2020

kvakvs commented Feb 21, 2020

kvakvs commented Feb 21, 2020

originalfoo commented Feb 21, 2020

krzychu124 left a comment

originalfoo left a comment

Main menu and tool code refactoring #656

Main menu and tool code refactoring #656

Conversation

kvakvs commented Feb 6, 2020 • edited

What does

More details

kianzarrin Feb 6, 2020

Choose a reason for hiding this comment

kvakvs Feb 6, 2020 • edited

Choose a reason for hiding this comment

originalfoo commented Feb 6, 2020

kvakvs commented Feb 7, 2020 • edited

kvakvs Feb 18, 2020

Choose a reason for hiding this comment

kianzarrin commented Feb 20, 2020

originalfoo commented Feb 20, 2020

kvakvs commented Feb 20, 2020 • edited

kvakvs Feb 20, 2020

Choose a reason for hiding this comment

kvakvs Feb 20, 2020

Choose a reason for hiding this comment

krzychu124 commented Feb 20, 2020

kvakvs commented Feb 21, 2020

kvakvs commented Feb 21, 2020 • edited

originalfoo commented Feb 21, 2020

kvakvs commented Feb 21, 2020 • edited

originalfoo commented Feb 21, 2020

kvakvs commented Feb 21, 2020 • edited

originalfoo commented Feb 21, 2020

kvakvs commented Feb 21, 2020

kvakvs commented Feb 21, 2020

originalfoo commented Feb 21, 2020

krzychu124 left a comment

Choose a reason for hiding this comment

originalfoo left a comment

Choose a reason for hiding this comment

kvakvs commented Feb 6, 2020 •

edited

kvakvs Feb 6, 2020 •

edited

kvakvs commented Feb 7, 2020 •

edited

kvakvs commented Feb 20, 2020 •

edited

kvakvs commented Feb 21, 2020 •

edited

kvakvs commented Feb 21, 2020 •

edited

kvakvs commented Feb 21, 2020 •

edited