-
Notifications
You must be signed in to change notification settings - Fork 2
Semantic Screen UI Components
+------------+
| 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.
+---------+
| 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. (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.
Points are draggable and can be moved between Regions.
+-----+
| |
| P P |
| P |
| |
+-----+
A Region is a component that contains any number of Points. Regions act as dropzones for Points.
+---+
| |
| P |
| |
+---+
A FocusRegion is a similar to a Region component except that it contains no more than one Point.
+-----------+
| 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:)