Modal Panel component design for 4.x

[ilya_shaikovsky]

Points which I think "must have". Very popular among the community.


Next points should be considered while moving the component:

1) More lightweight component markup.

Lex already working on that.

2) non-modal state.

the component should be named like rich:popupPanel and modal state should depends on attribute.
https://jira.jboss.org/jira/browse/RF-994 - guys wait for that too much time :)

3) Changing positioning for performance optimization
https://jira.jboss.org/jira/browse/RF-1709 Already included to Lex markup issue.

4) Changes in autosizing

Min and Max width and heights for autosized mode requested.

https://jira.jboss.org/jira/browse/RF-5763
https://jira.jboss.org/jira/browse/RF-2534

5) Scrollable body support

Now users should implement this on their own and asking for that frequntly.

6) Lightweight panel moving with drag'n'drop

Hidding panel content on dragging. (Or not touch modal itself and drag just bordered div with panel repositioning on drop)

https://jira.jboss.org/jira/browse/RF-1249

7) Placeholders for effects required

FAQ at forum.
https://jira.jboss.org/jira/browse/RF-6421

8) Extend JS API
e.g. move(), refresh(), setSizes() etc..

9) Keyboard support

e.g. ESC support for panel closure.. (need to review some additional keys which could be usefull.)

Points which should be approved. (Not required by customers but our additional proposals)

1) Additional default controls

at least default closure control could be provided. We talked with Lex and agreed not to add it for now but WDYT?

2) Additional footer facet

should be usefull together with body scroll.

3) Relative sizes

auto resizing when browser resizing occurs.

4) D'n'D movement additions

== allow the modal to stick to browser viewport border when modal was moved to it.
== restrict moving/appearing out of the viewport.
== mode which allows the panel to be dragged with any element inside panel. (Maybe the same but with some keyboard addition CTRL+drag allowed to be used at any element inside.)

[admitriev]

You can see new ModalPanel layout (modal case) here: https://jira.jboss.org/jira/secure/attachment/12330347/modal_panel.zip

[nbelaevski]

"admitriev" wrote:
You can see new ModalPanel layout (modal case) here: https://jira.jboss.org/jira/secure/attachment/12330347/modal_panel.zip

Lex,

I've looked and have some notes:

General
- We'll need design variant when the panel is autosized according to content - can you please add it also?

Problems
- Absolutely-positioned elements (like calendar) inside panel content are cut off when they do not fit into panel - that needs to be fixed.
- Minor importance: handlers should fully cover panel borders, currently they are located inside borders (dotted of navy color is panel border, green - handler):

- Minor importance: resizing of browser window causes intensive trembling of panel - any ideas?

Suggestions
- I'd suggest to decrease number of position="fixed" elemens by nesting them inside poisition="fixed" element with dimensions 100% and 0 coordinates. What's your opinion about such change?
- Can we make shadow dimensions and offsets dependent on actual panel dimensions, not computable?
- How about usage of 100% height/width for handlers to get rid of necessity to compute their sizes?

P.S. I'd suggest that we use SVN to store design markups - we'll get single point of entrance and can track history then.

[ilya_shaikovsky]

small addition:

putting object with pdf at main page caused:



and addition of overflow-x: hidden to header div partially revealed the problem: