Create QuickActionListComponent #37hg3wd

Create a component that shows a list of clickable buttons.

It will be used in Add Schedule and Reminder Quick actions to basi... (#249 - closed). For the bigger context see #240+ The screens below give an impression of how it is supposed to look when utilized in #249 (closed)/#240

This component is not meant to be a generic component that third party developers could use to display arbitrary button lists. It only has to be configurable to the extend we need it to be. We can add configuration capabilities later on, when we actually need them.

What is to be done?

I suggest the following interface for the component (optimize at will :D):

@Component({
  selector:'rcc-quick-action-list
})
export class RccQuickActionListComponent {

  @Input()
  actions: Action[]

  @Input()
  color: string

  //...
}

• Every provided action should fill one row.
• Every Action comes with .icon and .label. Use them :D
• Every Action comes with .description would be nice if used – maybe in the title-Attribute?
• Every `Action' should be executed when the respective button is clicked

See RccActionButtonBaseComponentand RccActionButtonBaseComponent from @rcc/themes/bengal for examples of actions on buttons.

ActionService.execute() executes arbitrary actions (important for DownloadActions because they need special treatment).

Colors

The color is only important for the hover states (as far as i can see – the edit icon becomes orange when the button is hovered/clicked)

The color should be configurable. Add a [color] input that accepts an arbitrary string. ColorService.getColorVariants(this.color) will get you the respective color's variants (see ColorService from @rcc/themes).

Default to 'primary' (should be orange and it's variants for the HCP)

Theme

Make it themable. (See /documentations/How To/themes.md)

Use RccQuickActionBaseListComponent to define and document the interface; and make RccQuickActionListComponent an extension of it. Once for bengal and once for default.

The RccQuickActionListComponent for the bengal theme should look like the layout below.

For the RccQuickActionListComponent of the default theme use ionics clickable list items with icons. ( see [ionic docs] (https://ionicframework.com/docs/api/item#clickable-items). Or even better check out the template of RccMainMenuBodyComponent from /@rcc/themes/default.

Requirements

• Creates a list of buttons that looks like the layout below
• Every provided action gets it's own row with label and icon
• Color is configurable
• Component is themeable
• The Component has some documentation explaining how to use it (base component)

Layouts

In theses layouts only the white box at the bottoms is subject of this issue. (The PDF shows hover state!)

PDF with Annotations

Screen layout normal and hovered/tapped: