Search Unity

Feature Request UIBuilder Inspector - ability to hide inline styles

Discussion in 'UI Toolkit' started by rtm223, Mar 26, 2021.

  1. rtm223

    rtm223

    Joined:
    Apr 12, 2017
    Posts:
    28
    I'm constantly finding myself editing inline styles by accident in UIBuilder which, if I'm keeping to CSS best practices and separation of concerns, is almost never something that I actually want to be doing.

    ATM "Inline Styles" when selecting a VisualElement shares an "expanded" flag with "Styles" when you have a stylesheet selected. Ideally these would be 2 different flags (or a flag per instance, as with the component inspector, though I'm not too fussed about that), so I can keep the inline styles collapsed.

    Repro for the behaviour:
    1. In UIBuilder, select a VisualElement in the Hierarchy
    2. Click the foldout for "Inline Styles" to collapse it
    3. Click a style selector in the stylesheet
    4. Click the foldout for "Styles" to expanding
    5. Select a Visual Element
    "inline styles" is expanded again.
     
    rtm223, Mar 26, 2021
    #1

  2. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    479
    We want to revisit this area at some point and make it easier for users to understand what they are changing. Currently, the inspector is very similar between the inline styles and the styles and it is confusing.

    That being said, I am noting your suggestion and I'll see what we can do about it.
     
    martinpa_unity, Mar 30, 2021
    #2
    rtm223 likes this.

  3. tenukii

    tenukii

    Joined:
    Mar 31, 2014
    Posts:
    12
    Just having the ability to reset/clear inline changes or move them to the stylesheet would be awesome.

    I know you can do it once by adding a class, but after that there should be an option to move your inline changes into an existing class, or freeze inline changes out so you can't make the mistake.

    I find myself editing the xml a lot to remove accidental inline changes, or deleting components and re-adding them as an easier way to clear them. Really, it's the only major downside to using uibuilder, but it is a big one. A 'clear inline changes' and/or 'move inline changes to target class' would totally fix it for me.
     
    tenukii, Aug 3, 2021
    #3

  4. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    479
    Hey @tenukii, you can clear changes by right-clicking and using "Unset". If you do it on a property, it will clear that property; if you do it on a section, it will clear the changes in that section and if you select "Unset all", it will clear all the changes.

    There is also a way to extract the current changes to a new class selector. You can do so in the StyleSheet section of the inspector by writing a class name in the input and clicking the "Extract Inlined Styles to New Class".

    What we're missing is a way to transfer partial changes from inline to one or more selectors. The current way of displaying the styles makes it difficult to do it in an easy way. We're hoping to create a view that will make it clearer what is affecting a given element as well as moving things around.
     
    martinpa_unity, Aug 4, 2021
    #4
    tenukii likes this.

  5. tenukii

    tenukii

    Joined:
    Mar 31, 2014
    Posts:
    12
    Thanks! I'll try out the unset next time I am in the builder - did not know about it!
     
    tenukii, Aug 17, 2021
    #5