Skip to content

Semantic Screen UI Components

Jump to bottom
Alex Garcia edited this page Nov 14, 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 EditableRegions in an EditableRim, as well as between an EditableRegion and a FocusRegion (with limitation).

Tapping once on a Point in an EditableRegion turns the Point into an EditablePoint where content can be edited.

EditablePoint (EP) 

+---------+
| content |
| content |
| content |
+++++++++++
|     ✓XT | 
+---------+

A EditablePoint is a component that displays the entirely of the content in an editable multiline field. The component has a small toolbar at the bottom with the following buttons:

accept: a green checkmark, which indicates that the user is submitting the content to the interface. When submitted, a Point with the content is displayed in place of the EditablePoint component and related content is added to the application state. (At a later date, this button will act as a "next" button, presenting the user with additional options.)

cancel: a red "X", which indicates that the user is cancelling submission. When cancelled, the EditablePoint is removed from the region and no data is updated.

delete: a trashcan icon (shown as "T" here), which indicates that the user is deleting the point. This icon should only appear in the case where previous content has been submitted. When deleted, the EditablePoint is removed, and the related content is removed from the application state.

Tapping once in any part of the UI should cause the component to behave as if the "accept" button was tapped.

Region (R) 

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

A Region is a component that contains any number of Points.

EditableRegion (ER) 

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

An EditableRegion is similar to a Region component except that EditableRegions act as dropzones for Points.

Tapping once in an EditableRegion creates an EditablePoint in that region, ready to accept new content.

FocusRegion (FR) 

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

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

Rim (M) 

       +----+
       |name|
+------+----+
| R | R | R |
|---+---+---|
| R | M | R |
|---+---+---|
| R | R | R |
+-----------+

        +----+
        |name|
+-------+----+
| R | R  | R |
|---+----+---|
| R | EM | R |
|---+----+---|
| R | R  | R |
+------------+

        +----+
        |name|
+-------+----+
| R | R  | R |
|---+----+---|
| R | FR | R |
|---+----+---|
| R | R  | R |
+------------+

A Rim is a component that contains a banner, indicating the Rim owner's name, and eight surrounding Regions. The center of a Rim may be another Rim, an EditableRim, or a FocusRegion, so Rim components can be nested, a la:

+---------
|     <------- Rim
| +-----  |
| |   <------- EditableRim
| | +-+ | |
| | | <------- FocusRegion
| | +-+ | |
| |     | |
| +-----+ |
|         |
+---------+

EditableRim (EM) 

          +----+
          |name|
+---------+----+
| ER | ER | ER |
|----+----+----|
| ER | M  | ER |
|----+----+----|
| ER | ER | ER |
+--------------+

          +----+
          |name|
+---------+----+
| ER | ER | ER |
|----+----+----|
| ER | FR | ER |
|----+----+----|
| ER | ER | ER |
+--------------+

An EditableRim is similar to a Rim component except that it consists of EditableRegions instead of Regions, and there can only be one EditableRim per Semantic Screen.

Clone this wiki locally