interstellar-ui-messages v0.0.3

interstellar-ui-messages

The interstellar-ui-messages module is part of the Interstellar Module System.

This module provides common UI components.

Quick start to developing in the Interstellar eco-system:

• Read Getting started doc.
• Install interstellar-workspace.
• Contribute to our open-source modules or develop your own.

Module contents

Classes

• Alert
• AlertGroup
• Toast

Services

• interstellar-ui-messages.Alerts
• interstellar-ui-messages.Toasts

Widgets

• <interstellar-ui-messages-alerts>
• <interstellar-ui-messages-toast>

Alert class

Alert object represents single alert notification which can be attached to an AlertGroup.

import {Alert} from 'interstellar-ui-messages';

let alert = new Alert({
  title: 'Password is incorrect',
  text: 'Make sure you are using a correct password to login.`,
  type: Alert.TYPES.ERROR,
  dismissible: false // default true
});

There are 4 possible Alert.TYPES:

• Alert.TYPES.SUCCESS
• Alert.TYPES.INFO
• Alert.TYPES.WARNING
• Alert.TYPES.ERROR

Alerts with dismissible parameter set to true will show a little × icon to allow user to dismiss an alert.

Check AlertGroup docs for information on how to display an Alert.

TODO

• Sample alert screenshots.
• Alert/AlertGroup/widget graphic.
• Solar styling tips.

AlertGroup class

AlertGroup represents a place in your UI where alerts are displayed. Your application/widget can have multiple AlertGroups.

Once you create a new alert group and register in Alerts service you can show your first Alert.

import {Alert, AlertGroup} from 'interstellar-ui-messages';

let alertGroup = new AlertGroup();
Alerts.registerGroup(alertGroup);

let alert = new Alert({
  title: 'Password is incorrect',
  text: 'Make sure you are using a correct password to login.`,
  type: Alert.TYPES.ERROR,
  dismissible: false // default true
});
alertGroup.show(alert);

You can clear all alerts in existing group using clear method:

alertGroup.clear();

To display your alert group in your UI use <interstellar-ui-messages-alerts> widget.

Toast class

Toast object represents single toast message that can be displayed using Toast service.

let toast = new Toast('Transaction sent!');

You can pass a second parameter with number of miliseconds your toast should be visible:

let toast = new Toast('Transaction sent!', 5000); // 5 seconds

Toast will be visible for 2 seconds by default.

interstellar-ui-messages.Alerts service

Alerts service allows you to register your AlertGroup.

import {AlertGroup} from 'interstellar-ui-messages';

let alertGroup = new AlertGroup();
Alerts.registerGroup(alertGroup);

You must register your alert group before you can use it within your application or widget.

You can also get previously registered group by it's ID:

let alertGroup = Alerts.getGroup(groupId);

interstellar-ui-messages.Toasts service

Use Toasts service to show your Toast:

import {Toast} from 'interstellar-ui-messages';
@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')
@Inject('interstellar-ui-messages.Toasts')
export default class SendWidgetController {
  constructor(Toasts) {
    this.Toasts = Toasts;
  }

  send() {
    // Send transaction
    let toast = new Toast('Transaction sent!');
    this.Toasts.show(toast);
  }
}

Remember you have to place <interstellar-ui-messages-toast> widget somewhere in you application. Otherwise your Toast won't appear.

<interstellar-ui-messages-alerts> widget

Use <interstellar-ui-messages-alerts> widget to display AlertGroup in your UI. This widget accepts one parameter: group which represents AlertGroup object you want to display.

import {AlertGroup} from 'interstellar-ui-messages';

@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')
@Inject('interstellar-ui-messages.Alerts')
export default class SendWidgetController {
  constructor(Alerts) {
    this.alertGroup = new AlertGroup();
    Alerts.registerGroup(this.alertGroup);
  }
}

<div ng-controller="interstellar-network-widgets.SendWidgetController as widget">
  <interstellar-ui-messages-alerts group="widget.alertGroup"></interstellar-ui-messages-alerts>
</div>

<interstellar-ui-messages-toast> widget

Use <interstellar-ui-messages-toast> widget to display toasts in your UI. There should be only one, global toast widget in your application.

<interstellar-ui-messages-toast></interstellar-ui-messages-toast>