Skip to content

Semantic Screen UI Components

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

Semantic Screen UI Components

Point (P)

@startditaa +------------+ | content... | +------------+ @endditaa

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)

@startditaa +------------+ | content | | content ✓ | | content X | +------------+ @endditaa

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)

@startditaa +-----+ | | | P P | | P | | | +-----+ @endditaa

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

FocusRegion (F)

@startditaa +---+ | | | P | | | +---+ @endditaa

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

Rim (M)

@startditaa +-----------+ | R | R | R | |---+---+---| | R | M | R | |---+---+---| | R | R | R | +-----------+ @endditaa

@startditaa +-----------+ | R | R | R | |---+---+---| | R | F | R | |---+---+---| | R | R | R | +-----------+ @endditaa

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:

@startditaa +--------- | <------- Rim | +----- | | | <------- Rim | | +-+ | | | | | <------- FocusRegion or Rim | | +-+ | | | | | | | +-----+ | | | +---------+ @endditaa

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