search

kotcrab / vis-ui-contrib

Community driven extension and utilities for VisUI
https://github.com/kotcrab/vis-editor/wiki/VisUI
18 stars 2 forks source link

Window border missing? #4

Closed jpsgamboa closed 8 years ago

jpsgamboa commented 8 years ago

@czyzby I've been trying the Tinted skin and I don't know if I'm missing it entirely but I can't find a way to change the window border in the JSON. Did you remove it directly in the png?

The result is a bit awkward around the close button. capture

czyzby commented 8 years ago

Window drawable is probably smaller than the original. Changing window padTop should help. (tablePadTop attribute if you're using LML). I might look into the skin once VisUI 1.0.2 is out.

You cannot modify it in JSON, but making the image slightly bigger should do the trick.

jpsgamboa commented 8 years ago

Is it just a matter of size? Or is there no border to tint? In VisUI's default skin the border (blue) is visible in the window 9patch, but I'm failing to interpret the t-window.9.png.

kotcrab commented 8 years ago

Notice that the border is just part of the image. Both window.9.png and window-noborder.9.png have the same exactly same size and 9 patch paddings. Border doesn't matter here.

Looks like t-window.9.png has it's title bar area too small by 3 pixels. See attached image. t-window.9 compare

czyzby commented 8 years ago

Yes, that's the issue that I've mentioned. Note that the top nine-patch padding is set as window's padTop at runtime, so changing this value manually (in code) "fixes" this skin. I think 1.0.2 brings changes in VisUI skin (new spinner widget), so let's just wait with the fix for the release.

czyzby commented 8 years ago

t-base (equivalent of button drawable) is slightly bigger than the original drawable to support different widgets - that's why it was too big for the previous window top padding. I resized window drawables in Tinted skin to fix this. @jpsgamboa, could you update your skin and verify?

jpsgamboa commented 8 years ago

Thanks! The alignment looks fine now. But I still don't get any noticeable border in windows like I do on popup menus. Is this by design?

Also, and I realize I should have mentioned this earlier, but the scroll-bar background has a huge width.

See this image that exemplifies both points: capture

Example of a popup menu in the same project with a border: untitled

czyzby commented 8 years ago

Tinted was specifically designed to have only white drawables, so you can easily recolor the skin. There is no border by default, as it would require the window drawable to have at least 2 colors.

You can add a border to the image manually (for example - a gray one, so it will be still tintable and slightly darker than the background) and repack the atlas or use noborder window style, which adds a border thanks to transparency. See README for more info.

Well, same goes for the scroll bar. It most likely shares its drawable with another widget (that looked awkward when smaller) or its size simply matches t-base image height (or whatever) for consistency. You're free to modify the skin however you like.

Popup actually has no border. It's color is simply different than background color of its items, which (additionally to a small padding) fakes the border effect. You're free to tweak around with Color and TintedDrawable definitions to try to achieve similar effects for other widgets.

jpsgamboa commented 8 years ago

Very well. I'll play with the skin and see what I get. Thanks! (and thanks for Tintedalso!)

czyzby commented 8 years ago

Not a problem. I use it as my prototyping skin (well, I had to refactor it a bit, but still), don't mind sharing such resources.