CUI

Components / Actions

Swipe actions

A row that slides sideways to reveal actions such as archive or delete.

Functions: cui_swipe_item_begin, cui_swipe_item_end

Usage

static const cui_swipe_action done[] = { { CUI_ICON_CHECK, "Done", CUI_TONE_SUCCESS } };
static const cui_swipe_action more[] = { { CUI_ICON_ARCHIVE, "Archive", CUI_TONE_INFO }, { CUI_ICON_TRASH_2, "Delete", CUI_TONE_DANGER } };
cui_swipe_item_begin(ui, "mail-42", done, 1, more, 2);
cui_text(ui, "Quarterly report", .width = CUI_FILL);
int action = cui_swipe_item_end(ui);   /* 0 = left action 0, 100 + i = right action i, -1 = none */

Drag a row sideways, or swipe with two fingers on a trackpad. Past half the reveal width it snaps open; past 60% of the row it fires the first action on that side. Click the row or anywhere else to close it.

cui_swipe_item_end returns the action on the frame it is chosen: i for item i of the left array, 100 + i for item i of the right array, and -1 otherwise. The left actions wait behind the left edge and show when the row is dragged to the right. Pass NULL and 0 for a side with no actions. The open position is kept under id, so give every row its own, such as the id of its record.

Keyboard

None. Swiping is a pointer, touch and trackpad gesture, so give the same actions another route, such as a context menu or buttons.

cui_swipe_action

FieldTypeDescription
iconconst char *An icon: a CUI_ICON_* constant, or a string from another icon font.
labelconst char *A label shown above or beside the control.
tonecui_toneOne of CUI_TONE_NEUTRAL, CUI_TONE_INFO, CUI_TONE_SUCCESS, CUI_TONE_WARNING, CUI_TONE_DANGER, CUI_TONE_VIOLET, CUI_TONE_TEAL, CUI_TONE_ROSE or CUI_TONE_ACCENT.

cui_tone: CUI_TONE_NEUTRAL, CUI_TONE_INFO, CUI_TONE_SUCCESS, CUI_TONE_WARNING, CUI_TONE_DANGER, CUI_TONE_VIOLET, CUI_TONE_TEAL, CUI_TONE_ROSE, CUI_TONE_ACCENT

Related

  • User menu: An avatar, a name and a detail line that open an account menu with a header.
  • Theme switcher and toggle: Controls that switch the app between light, dark and the system theme.
  • Speed dial: A round floating button that fans out a few related actions.
  • Reactions: Reaction buttons with a count each, as under a message or a post.