Skip to content
This repository has been archived by the owner on Feb 26, 2022. It is now read-only.

JEP Panel positioning

Jump to bottom
Gozala edited this page Mar 4, 2013 · 11 revisions

Currently there are no options to set the position of the panel within the browser window; but only the size (width and height). If is not anchored to a widget, the panel is always centered.

Goals

  • Show a panel specifying the coordinates in pixel
  • Show a panel specifying the alignment (e.g. the top right corner of the content area)
  • Be consistent with the current UI behavior in Firefox (= don't break the UX guidelines)

Proposed API

Adding four more properties to Panel's options should help us to achieve the goals above.

Positioning and alignment

The new properties are top, right, bottom and left. They're familiar to web developers and web designers; with width and height they resemble the CSS syntax:

// Show the panel to 200px top and 400px left of the content area
require("panel").Panel({
  width: 320,
  height: 200,
  top: 200,
  left: 400
}).show();
// Show the panel to the bottom right corner of the content area 
require("panel").Panel({
  width: 320,
  height: 200,
  bottom: 0,
  right: 0
}).show();

The default's behavior won't change, therefore:

require("panel").Panel().show();

Shows a centered 320x240 panel.

Because the default alignment is centered, to leave one axis centered, the relative option has just to be omitted:

// Show the panel to the centered horizontally and aligned to the bottom of the content area 
require("panel").Panel({
  bottom: 0
}).show();

// Show the panel to the centered vertically and aligned to the left of the content area 
require("panel").Panel({
  left: 0
}).show();

In the same way of their CSS counterpart, set both top and bottom, or left and right, will results in determined the height and width:

// Show the panel to the centered horizontally, that is distant 40px from the top and 100px from the bottom
require("panel").Panel({
  top: 40,
  bottom: 100
}).show();

Of course, implicitly set height will override that behavior, leaving set only top:

// Show the panel to the centered horizontally, that is distant 40px from the top with height 400px
// bottom is ignored
require("panel").Panel({
  top: 40,
  bottom: 100,
  height: 400
}).show();

The same for left and right, where right will be ignored if width is set.

Temporary position

These new properties, plus width and height can be passed to the show method in order to display temporary the panel in a different position than the ones specified in the Panel's options:

let panel = require("panel").Panel({
  top: 100,
  left: 200
});

// show the panel to 100px from the bottom, with width 100px and centered horizontally
panel.show({bottom: 100, width: 100});

// show the panel to the default position (top: 100, left 200)
panel.show();

As the example shows, the options given to the show method are replacing all the position's value: otherwise setting just bottom will be results in having top: 100, left: 200 and bottom: 100.

Relevant bugs

Discussions

Clone this wiki locally