Inspector Like Foldout

Hello,

I wish to recreate the style of components that you find in the inspector.



The features of which are:

• Toggle button on the left (black when focused)
• Bold title, but not content
• Padding rather than margin
  
• Buttons (specifically the cog) on the right

I am aware that there is a Foldout VisualElement, however this behaves differently to the inspector, and I am seeking here, to see if there are simpler answers before I write my own.

Minor Differences
One minor difference is the toggle of the Foldout visual element is blue when in focus, rather than black - This can be solved however by overwriting the pseudo state in the .uss - but worth mentioning

Another feature of the inspector is that the title is bold, but its content is not. Currently (using Foldout VE) I set the title's style to bold, and set a class on all direct children which changes the text's style back to non-bold. Just curious if there is a better way to do this?

Not So Minor Differences

Currently, the foldout adds a margin of 15, rather than padding. Why is this an issue?

Because I want mimic the PrefabFieldChange indicator (the blue thing). I have so far successfully mimicking it by having a right margin of 2px, colored blue, when there is a change. It looks great!
Unfortunatly, because there is a 15 the line floats in dead space:


Where this is what I would like:
This could be potentially fixed in uss? But seems like a big issue to fix in USS


The buttons on the right, I just don't think this is possible with the current VE Foldout?


There there it is, I hope I have explained clearly. Does anybody know if Unity provide a Inspector-like foldout, or has written one? If not is the next logical step to write my own foldout using Unity's foldout code as reference?

Thanks in advance

 

Thank you for your reply,

I have successfully created the uss to style the foldout like the inspector (phew, that was a pain )

Code (CSharp):

1.  
2.  
3. .unity-foldout
4. {
5.     padding-left:0px;
6.     padding-right:0px;
7.     border-width: 1px 0px 1px 0px;
8.     border-color: rgb(127,127,127);
9. }
10.  
11. .unity-foldout__toggle:hover
12. {
13.     background-color:rgb(214,214,214)
14. }
15. .unity-foldout__toggle
16. {
17.     padding-left:10px;
18.     padding-bottom:3px;
19.     border-left-width:2px;
20.     margin-left: 0px;
21.     margin-right: 0px;
22.     margin-bottom: 0px;
23. }
24. .unity-foldout__toggle:focus>.unity-toggle__input>Label
25. {
26.     color:rgb(0,60,136);
27.     -unity-font-style: bold;
28. }
29. .unity-foldout__toggle>.unity-toggle__input>Label
30. {
31.     -unity-font-style: bold;
32. }
33.  
34. .unity-foldout__toggle>.unity-toggle__input>#unity-checkmark
35. {
36.     background-image: resource("IN foldout.png");
37.     -unity-background-image-tint-color: rgba(0,0,0,255);
38. }
39. .unity-foldout__toggle>.unity-toggle__input:checked>#unity-checkmark
40. {
41.     background-image: resource("IN foldout on.png");
42.     -unity-background-image-tint-color: rgba(0,0,0,255);
43. }
44.  
45. .unity-foldout__toggle:focus>.unity-toggle__input>#unity-checkmark
46. {
47.     background-image: resource("IN foldout.png");
48.     -unity-background-image-tint-color: rgba(0,0,0,255);
49. }
50. .unity-foldout__toggle:focus>.unity-toggle__input:checked>#unity-checkmark
51. {
52.     background-image: resource("IN foldout on.png");
53.     -unity-background-image-tint-color: rgba(0,0,0,255);
54. }
55.  
56. .unity-foldout__toggle:active>.unity-toggle__input>#unity-checkmark
57. {
58.     background-image: resource("IN foldout act.png");
59.     -unity-background-image-tint-color: rgba(0,0,0,255);
60. }
61. .unity-foldout__toggle:active>.unity-toggle__input:checked>#unity-checkmark
62. {
63.     background-image: resource("IN foldout act on.png");
64.     -unity-background-image-tint-color: rgba(0,0,0,255);
65. }
66.  
67. .unity-foldout__content
68. {
69.     -unity-font-style: normal;
70.     background-color: rgb(194,194,194);
71.     margin-left: 0px;
72.         padding-right:7px;
73. }
74.  
75. #TextArea, #MyOtherFields
76. {
77.     padding-left: 22px;
78.     border-width: 0px 0px 0px 2px;
79. }

The background tint for the checkmark caught me out for a bit, as when i loaded the foldout images, they would be transparent. When I inspected the normal image, it didnt seem to have a background color tint, so i'm unsure why it (the default checkmark) shows as fully opaque?

 

I managed to add the burger to the foldout with, unfortunately I had to do this though c#.

Luckly my Foldout is it's own VE, so was only a few hours of tweaking (most of that was looking for the correct resource!)

Code (CSharp):

1.  
2. .options
3. {
4.     background-image:  resource("pane options.png");
5.     border-width: 0px 0px 0px 0px;
6.     background-color: rgba(0,0,0,0);
7.     -unity-background-image-tint-color: rgba(0,0,0,127);
8.     width:16px;
9.     height:16px;
10.     border-radius: 0px 0px 0px 0px;
11. }
12. .options:hover
13. {
14.     background-color:rgb(239,239,239);
15. }
16.  
17. .titleBar:hover
18. {
19. background-color:rgb(214,214,214)
20. }
21.  
22. #unity-checkmark
23. {
24. align-self:center;
25. }

Code (CSharp):

1.  
2.             var tog = this.Q<Toggle>();
3.             var ve = new VisualElement();
4.             ve.AddToClassList("titleBar");
5.             var root = tog;
6.             root.Add(ve);
7.             var butt = new Button();
8.             butt.AddToClassList("options");
9.             ve.Add(butt);
10.             ve.BringToFront();
11.  

The whole code (minus my own Visual element code) is in the post below

 

c#

Code (CSharp):

1.  public class CustomElement : VisualElement
2. {
3. public CustomElement (){
4.             var tog = this.Q<Toggle>();
5.             var ve = new VisualElement();
6.             ve.AddToClassList("titleBar");
7.             var root = tog;
8.             root.Add(ve);
9.             var butt = new Button();
10.             butt.AddToClassList("options");
11.             ve.Add(butt);
12.             ve.BringToFront();
13.  
14.  
15.             TextArea = this.Q(name: "TextArea");
16.             TextField = TextArea.Q<TextField>(name: "Text");
17.             TextField.RegisterCallback<ChangeEvent<string>>(TextChanged);
18.             EnableChangedIndicator(TextArea, false);
19. }
20.   void EnableChangedIndicator(VisualElement visualElement, bool enable)
21.         {
22.             visualElement.EnableInClassList("content-changed", enable);
23.         }
24.         private void TextChanged(ChangeEvent<string> evt)
25.         {
26.             EnableChangedIndicator(TextArea, true);
27. }
28. }
29.  

uxml

Code (CSharp):

1. <?xml version="1.0" encoding="utf-8"?>
2. <engine:UXML
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4.     xmlns:engine="UnityEngine.UIElements"
5.     xmlns:editor="UnityEditor.UIElements"
6.  
7. xsi:noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd"
8. xsi:schemaLocation="
9.                        UnityEngine.UIElements ../../../UIElementsSchema/UnityEngine.UIElements.xsd
10.                        UnityEditor.UIElements ../../../UIElementsSchema/UnityEditor.UIElements.xsd
11.                        UnityEditor.PackageManager.UI ../../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd
12. "
13. >
14.   <engine:Foldout name="Title">
15.       <engine:VisualElement name ="TextElement">
16.         <engine:VisualElement class ="content-changed" name="TextArea">
17.           <engine:Label text="Text"/>
18.           <engine:TextField multiline="true" class ="TextArea" name="Text"/>
19.         </engine:VisualElement>
20.  
21.    
22.     </engine:VisualElement>
23. </engine:Foldout>
24.  
25. </engine:UXML>

uss:

Code (CSharp):

1.  
2.  
3. .unity-foldout
4. {
5.     padding-left:0px;
6.     padding-right:0px;
7.     border-width: 1px 0px 1px 0px;
8.     border-color: rgb(127,127,127);
9. }
10.  
11. .unity-foldout__toggle:hover
12. {
13.  
14. }
15. .unity-foldout__toggle
16. {
17.     padding-left:10px;
18.     padding-bottom:3px;
19.     border-left-width:2px;
20.     margin-left: 0px;
21.     margin-right: 0px;
22.     margin-bottom: 0px;
23. }
24. .unity-foldout__toggle:focus>.unity-toggle__input>Label
25. {
26.     color:rgb(0,60,136);
27.     -unity-font-style: bold;
28. }
29. .unity-foldout__toggle>.unity-toggle__input>Label
30. {
31.     -unity-font-style: bold;
32. }
33.  
34. .unity-foldout__toggle>.unity-toggle__input>#unity-checkmark
35. {
36.     background-image: resource("IN foldout.png");
37.     -unity-background-image-tint-color: rgba(0,0,0,255);
38. }
39. .unity-foldout__toggle>.unity-toggle__input:checked>#unity-checkmark
40. {
41.     background-image: resource("IN foldout on.png");
42.     -unity-background-image-tint-color: rgba(0,0,0,255);
43. }
44.  
45. .unity-foldout__toggle:focus>.unity-toggle__input>#unity-checkmark
46. {
47.     background-image: resource("IN foldout.png");
48.     -unity-background-image-tint-color: rgba(0,0,0,255);
49. }
50. .unity-foldout__toggle:focus>.unity-toggle__input:checked>#unity-checkmark
51. {
52.     background-image: resource("IN foldout on.png");
53.     -unity-background-image-tint-color: rgba(0,0,0,255);
54. }
55.  
56. .unity-foldout__toggle:active>.unity-toggle__input>#unity-checkmark
57. {
58.     background-image: resource("IN foldout act.png");
59.     -unity-background-image-tint-color: rgba(0,0,0,255);
60. }
61. .unity-foldout__toggle:active>.unity-toggle__input:checked>#unity-checkmark
62. {
63.     background-image: resource("IN foldout act on.png");
64.     -unity-background-image-tint-color: rgba(0,0,0,255);
65. }
66.  
67. .unity-foldout__content
68. {
69.     -unity-font-style: normal;
70.     background-color: rgb(194,194,194);
71.     margin-left: 0px;
72.     padding-right:7px;
73. }
74.  
75. #TextArea
76. {
77.     padding-left: 22px;
78.     border-width: 0px 0px 0px 2px;
79. }
80.  
81. .options
82. {
83.     background-image:  resource("pane options.png");
84.     border-width: 0px 0px 0px 0px;
85.     background-color: rgba(0,0,0,0);
86.     -unity-background-image-tint-color: rgba(0,0,0,127);
87.     width:16px;
88.     height:16px;
89.     border-radius: 0px 0px 0px 0px;
90. }
91. .options:hover
92. {
93.     background-color:rgb(239,239,239);
94. }
95.  
96. .titleBar:hover
97. {
98. background-color:rgb(214,214,214)
99. }
100.  
101. #unity-checkmark
102. {
103. align-self:center;
104. }
105.  
106. .content-changed
107. {
108.  border-color:rgb(53,166,228);
109.  -unity-font-style: Bold;
110. }
111.  

 

https://github.com/PixeyeHQ/InspectorFoldoutGroup

 

Thank you for your reply, however the objective of this thread is to create a inspector like foldout using UIToolkit(the sub forum it is in), not imgui