centering with transparency ?

[Simon Michael]

Continuing my exploration of the wonderful features of brick. hledger-ui now has a minibuffer for data entry, and I'm currently adding a help dialog. 

I could do this with or without the Dialog widget. Dialog provides buttons if I want them, and adds a border automatically. However I have to specify its maximum size when I create it, which is currently little tricky as I only have that information inside a Widget renderer.

However it's implemented, I'd like the end result to be a centered bordered box filling most but not all of the screen, with the normal screen content still visible behind it (around the margins). I am prepending the size-limited dialog (or ordinary) widget to the screen's widget list, so it overlays the regular content. If I leave it uncentered, I can still see the latter. But I haven't found a way to center it without filling outside area with some padding character. Is there a way ?

Best

-Simon

[Jonathan Daugherty]

Hi,

> Continuing my exploration of the wonderful features of brick.
> hledger-ui now has a minibuffer for data entry, and I'm currently
> adding a help dialog.

Great!

> I could do this with or without the Dialog widget. Dialog provides
> buttons if I want them, and adds a border automatically. However I
> have to specify its maximum size when I create it, which is currently
> little tricky as I only have that information inside a Widget
> renderer.

Can you say more about what makes this tricky for you?

> However it's implemented, I'd like the end result to be a centered
> bordered box filling most but not all of the screen, with the normal
> screen content still visible behind it (around the margins). I am
> prepending the size-limited dialog (or ordinary) widget to the
> screen's widget list, so it overlays the regular content. If I leave
> it uncentered, I can still see the latter. But I haven't found a way
> to center it without filling outside area with some padding character.
> Is there a way ?

Right now centering works by putting padding around the thing being
centered, rather than using a Vty translation. If the centering code
used a translation instead, that would give the behavior you want.
I've actually had fixing this on my mental TODO list for some time for
exactly the reason you described. It should actually be relatively easy
to do, but there are some consequences that need to be explored: I'm not
sure how a translation will differ from padding when it comes to laying
out such widgets as part of interfaces rather than as individual layers.

So: if you want to take a crack at this, I'd be happy to consider
patches and put them on a branch while we figure out how it'll work.
I'm also happy to take a look at this myself since I've been wanting it,
too. I'll take a look at this later today.

Thanks!

--
Jonathan Daugherty

[Simon Michael]

> On Jun 10, 2016, at 10:14 AM, Jonathan Daugherty <cyg...@foobox.com> wrote:
>> I could do this with or without the Dialog widget. Dialog provides
>> buttons if I want them, and adds a border automatically. However I
>> have to specify its maximum size when I create it, which is currently
>> little tricky as I only have that information inside a Widget
>> renderer.
>
> Can you say more about what makes this tricky for you?

Disregard! I was confused and thought I couldn't run renderDialog inside widget rendering code. Now I have:

helpwidget =
Widget Fixed Fixed $ do
c <- getContext
render $
renderDialog (dialog "help" (Just "Help") (Just ) (c^.availWidthL - 2)) $
padTopBottom 1 $ padLeftRight 1 $
hBox [
(padLeftRight 1 $
vBox [
str "MISC"
,renderKey ("h", "toggle help")
...

>> I haven't found a way
>> to center it without filling outside area with some padding character.
>> Is there a way ?
>

> So: if you want to take a crack at this, I'd be happy to consider
> patches and put them on a branch while we figure out how it'll work.
> I'm also happy to take a look at this myself since I've been wanting it,
> too. I'll take a look at this later today.

Thanks! It's not urgent, but I think it would be a nice refinement allowing richer UIs.

[Jonathan Daugherty]

> Disregard! I was confused and thought I couldn't run renderDialog
> inside widget rendering code. Now I have:
>
> helpwidget =
> Widget Fixed Fixed $ do
> c <- getContext
> render $
> renderDialog (dialog "help" (Just "Help") (Just ) (c^.availWidthL - 2)) $

This pattern makes me think that either:

- some changes to Dialog are needed, since having to drop into a custom
Widget to make this work seems unpleasant to me, or
- Dialog is hurting more than helping here, because you could get what
you want more easily by just avoiding Dialog entirely. That's
assuming that you aren't relying much on its input handling, though;
Dialog doesn't do much in the way of UI so it would be easy to
reproduce by hand, but the buttons and event handling are what make
Dialog useful (to my mind, anyway).

--
Jonathan Daugherty

[Jonathan Daugherty]

> However it's implemented, I'd like the end result to be a centered
> bordered box filling most but not all of the screen, with the normal
> screen content still visible behind it (around the margins).

This is now supported via three new functions added to the
'feature/center-translation' branch.

The new API for centering in the way you requested is to use

Brick.Widgets.Center.centerLayer
Brick.Widgets.Center.vCenterLayer
Brick.Widgets.Center.hCenterLayer

and the Dialog widget now uses centerLayer implicitly, so it will do
what you want.

The relevant change is:

https://github.com/jtdaugherty/brick/commit/30afe9367b9940a75ac9086cb0cbc84b09357c3d

Give it a look! I'll probably merge this to master soon but I want to
kick the tires a bit more.

--
Jonathan Daugherty

[Jonathan Daugherty]

> This is now supported via three new functions added to the
> 'feature/center-translation' branch.

Also note that this change has a slight misbehavior in Vty 5.5.0, which
I have reported:

https://github.com/coreyoconnor/vty/issues/95

--
Jonathan Daugherty

[Jonathan Daugherty]

> This is now supported via three new functions added to the
> 'feature/center-translation' branch.
>
> The new API for centering in the way you requested is to use
>
> Brick.Widgets.Center.centerLayer
> Brick.Widgets.Center.vCenterLayer
> Brick.Widgets.Center.hCenterLayer

This is now available on the master branch.

--
Jonathan Daugherty