Skip to content

Semantic Screen UI Components

Alex Garcia edited this page Nov 12, 2019 · 9 revisions

Semantic Screen UI Components

Point (P)

+------------+
| content... |
+------------+

A Point is a component that displays a 3-word excerpt of multiline text/plain content.

Points are draggable and can be moved between Regions.

EditablePoint (E)

+------------+
| content    |
| content  ✓ |
| content  X |
+------------+

A EditablePoint is a component that displays the entirely of the content in an editable multiline field. The field should contain two clickable buttons:

accept: a green checkmark on the mid right of the component, which accepts the content, displays a Point with the content, and removes the current EditablePoint from the Region.

cancel: a red "X" on the lower right of the component, which removes the current EditablePoint from the Region.

Points are draggable and can be moved between Regions.

Region (R)

+-----+
|     |
| P P |
|  P  |
|     |
+-----+

A Region is a component that contains any number of Points. Regions act as dropzones for Points.

FocusRegion (F)

+---+
|   |
| P |
|   |
+---+

A FocusRegion is a similar to a Region component except that it contains no more than one Point.

Rim (M)

+-----------+
| R | R | R |
|---+---+---|
| R | M | R |
|---+---+---|
| R | R | R |
+-----------+
+-----------+
| R | R | R |
|---+---+---|
| R | F | R |
|---+---+---|
| R | R | R |
+-----------+

A Rim is a component that contains eight surrounding regions. The center of a Rim may be another Rim or a FocusRegion, so Rim components can be nested ala:

+---------
|     <------- Rim
| +-----  |
| |   <------- Rim
| | +-+ | |
| | | <------- FocusRegion or Rim
| | +-+ | |
| |     | |
| +-----+ |
|         |
+---------+

Rims may be displayed in two states:

:editable: Points may be changed to :editable: state and may be dragged between Regions of the same Rim :readonly: Points may not be dragged between Regions or be made :editable: (but can still be :minimized:)

Clone this wiki locally