DockableFrame styled corners

husker-dev commented 5 years ago

When I changed <WebShape round="0" /> to number above zero, I've seen this. Should it work like that, or do I misunderstand something?

<style type="dockableframe">
    <component>
        <opaque>false</opaque>
    </component>
    <painter>
        <decorations>
            <decoration>
                <WebShape round="8" />
                <WebShadow type="outer" width="2" />
                <LineBorder color="40,40,40" />
                <ColorBackground color="65,65,65" />
            </decoration>
        </decorations>
    </painter>
</style>

mgarin commented 5 years ago

This is happening for a few reasons:

Dockable frame title decoration is tied to the title panel, while the border and overall background is in the main dockableframe style decoration
Title panel has non-rounded decoration + it is opaque by default, so it covers anything behind it
You probably have an opaque content which forces bottom corners to also be "eaten" by it, most probably you have an underlying opaque panel there (my wild guess)

To solve this - you simply need to adjust styles of the header panel and your content to be non-opaque:

        <!-- Dockable frame title panel -->
        <style type="panel" id="title" padding="0,0,0,2">
            <component>
                <opaque>false</opaque>
            </component>
            ...
        </style>

And your title to have some rounding as well, so it doesn't have a rectangular background that covers the nicely rounded corners below it:

        <!-- Dockable frame title panel -->
        <style type="panel" id="title" padding="0,0,0,2">
            <component>
                <opaque>false</opaque>
            </component>
            <painter>
                <decorations>
                    <decoration>
                        <WebShape round="8" sides="1,1,0,1" />
                        <GradientBackground>
                            <color>87,91,93</color>
                            <color>77,81,83</color>
                        </GradientBackground>
                    </decoration>
                    <decoration states="in-focused-parent">
                        <GradientBackground>
                            <color>111,115,117</color>
                            <color>77,81,83</color>
                        </GradientBackground>
                    </decoration>
                </decorations>
            </painter>
            ...
        </style>

Just in case - you can find that style within base dockableframe style, it is basically a sub-style - those are usually used for child components within complex components to better represent their actual structure.

Although you might notice that I removed the line border from the title - the problem with it is that default style uses side hiding:

<WebShape round="8" sides="1,1,0,1" />

Which doesn't work well with rounding - any sides that are hidden do force nearby corners to stay rectangular, so that is a bit of a problem.

If you want to keep the separator at the bottom of the panel - there are a few possible solutions, for instance adding a fake content implementation of a separator line in that title panel decoration like this:

        <!-- Dockable frame title panel -->
        <style type="panel" id="title" padding="0,0,1,2">
            <component>
                <opaque>false</opaque>
            </component>
            <painter>
                <decorations>
                    <decoration>
                        <WebShape round="8" sides="1,1,0,1" />
                        <GradientBackground>
                            <color>87,91,93</color>
                            <color>77,81,83</color>
                        </GradientBackground>
                        <Stripes orientation="horizontal" size="10,1" align="bottom" bounds="border">
                            <Stripe>
                                <color>20,20,20</color>
                            </Stripe>
                        </Stripes>
                    </decoration>
                    <decoration states="in-focused-parent">
                        <GradientBackground>
                            <color>111,115,117</color>
                            <color>77,81,83</color>
                        </GradientBackground>
                        <Stripes>
                            <Stripe>
                                <color>black</color>
                            </Stripe>
                        </Stripes>
                    </decoration>
                </decorations>
            </painter>
            ...
        </style>

Stripes is a custom IContent that is used for JSeparator decorations in separator style, but we're using a simplified one-color version here, make it horizontal and align it at the bottom of our panel. And I also added 1px extra padding at bottom as that line will not take any extra space and will simply be painted in the available panel background.

This is one way, another would be implementing a simple background Painter implementation for the panel or some custom IContent instead of the Stripes. There are a few other complex approaches that can be taken as well.

I will be working on better WebShape border/background support in the future, but for now it is somewhat limited and some solutions I've used for default styles might not be easy to reconfigure (doable, but not as simple as others).

Here is the complete dockableframe style beginning that I modified:

    <!-- Dockable frame -->
    <style type="dockableframe">
        <component>
            <opaque>false</opaque>
        </component>
        <painter>
            <decorations>
                <decoration>
                    <WebShape round="8" />
                    <WebShadow type="outer" width="2" />
                    <LineBorder color="20,20,20" />
                    <ColorBackground color="68,68,68" />
                </decoration>
                <decoration states="floating">
                    <WebShadow type="outer" width="0" />
                </decoration>
                <decoration states="focused">
                    <LineBorder color="black" />
                </decoration>
            </decorations>
        </painter>

        <!-- Dockable frame title panel -->
        <style type="panel" id="title" padding="0,0,1,2">
            <component>
                <opaque>false</opaque>
            </component>
            <painter>
                <decorations>
                    <decoration>
                        <WebShape round="8" sides="1,1,0,1" />
                        <GradientBackground>
                            <color>87,91,93</color>
                            <color>77,81,83</color>
                        </GradientBackground>
                        <Stripes orientation="horizontal" size="10,1" align="bottom" bounds="border">
                            <Stripe>
                                <color>20,20,20</color>
                            </Stripe>
                        </Stripes>
                    </decoration>
                    <decoration states="in-focused-parent">
                        <GradientBackground>
                            <color>111,115,117</color>
                            <color>77,81,83</color>
                        </GradientBackground>
                        <Stripes>
                            <Stripe>
                                <color>black</color>
                            </Stripe>
                        </Stripes>
                    </decoration>
                </decorations>
            </painter>

            ...

And result:

husker-dev commented 5 years ago

Thanks for the big answer! For my need solution is:

<!-- Dockable frame title panel -->
<style type="panel" id="title" padding="0,0,0,2">
   <component>
      <opaque>false</opaque>
   </component>
    ...
</style>

mgarin / weblaf

DockableFrame styled corners #550