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
ZER0 edited this page Jan 31, 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)
  • Show an anchored panel specifying the coordinates of the arrow's point
  • Be consistent with the current UI behavior in Firefox (= don't break the UX guidelines)

Proposed API

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

Positioning and alignment

The first four properties, top, left, bottom and right, are used to set the position of the panel:

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

// Show the panel to the bottom right corner of the content area 
require("panel").Panel({
  width: 300,
  height: 200,
  bottom: 0,
  right: 0
}).show();

In order to be able to align the panel, those new properties should be accept value in percent as well:

// Align the panel to the right, and center it vertically
require("panel").Panel({
  width: 300,
  height: 200,
  top: "50%",
  right: 0
}).show();

They are also easy to understand, because they resemble the syntax of CSS positioning.

Note that all the values are related to the browser's content area.

Arrowed Panel

The last new property, arrow, is used to indicate where a panel is an arrowed/anchored panel:

// Show an arrowed/anchored Panel
require("panel").Panel({
  width: 300,
  height: 200,
  top: 100,
  left: 200,
  arrow: true
}).show();

Due the UX guidelines, the position of the arrow related to the panel, follows specific rules, so it will be handled automatically (the panel should always to "tend" to the center of the content area).

Using a boolean value, the panel will always display an arrow on the top edge or bottom edge, and that position will be calculated internally. However, we could provide the capability to display the arrow on the left/right edge too. Therefore the API could looks like:

// Show an arrowed/anchored Panel, with the arrow displayed vertically:
// top or bottom edge, depends by the space available
require("panel").Panel({
  width: 300,
  height: 200,
  top: 100,
  left: 200,
  arrow: "vertical"
}).show();

// Show an arrowed/anchored Panel, with the arrow displayed horizontally:
// left or right edge, depends by the space available
require("panel").Panel({
  width: 300,
  height: 200,
  top: 100,
  left: 200,
  arrow: "horizontal"
}).show();

However that could be harder to understand, and having just the boolean value could be enough.

Temporary position

These new properties could be passed to the show method in order to display the panel in a different position than the ones specified in the Panel's options:

// Show an arrowed/anchored Panel
let panel = require("panel").Panel({
  width: 300,
  height: 200,
  top: 100,
  left: 200
});

// show the panel to the top right corner:
panel.show({top: 0, right: 0});

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

We could include width and height too, so that the panel could adjust their size depends by certain condition; instead of modifying the default value (panel.width and panel.height).

Relevant bugs

Discussions

Clone this wiki locally