ember-app-notice

    0.0.8 • Public • Published

    ember-app-notice

    Simple app-notice component I use across multiple apps. If you find it useful and want something changed, feel free to make an issue or PR!

    Uses ES6 classes and decorators

    Usage

    ember install ember-app-notice
    

    import the scss file

    @import 'ember-app-notice'
    
    // contains overridable variables by setting these before you import `ember-app-notice`
    
    $ember-app-notice--text: white;
    $ember-app-notice--orange: #FEB14F;
    $ember-app-notice--yellow: #EC8213;
    $ember-app-notice--green: #8abf54;
    $ember-app-notice--menuHeight: 85px;
    

    Include these styles for animations

    .animated {
      animation-duration: 1.0s;
      animation-fill-mode: both;
    }
    
    .animated-fast {
      animation-duration: 0.4s;
      @extend .animated;
    }
    
    @keyframes slideInDown {
      from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
      }
      to {
        transform: translate3d(0, 0, 0);
      }
    }
    .slideInDown {
      animation-name: slideInDown;
    }
    
    @keyframes slideOutUp {
      from {
        transform: translate3d(0, 0, 0);
      }
      to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
      }
    }
    
    .slideOutUp {
      animation-name: slideOutUp;
    }
    

    anywhere in your app, call the service and pass it a message and level

    /**
      Action that calls the `session.authenticate` method to authenticate the
      user.
    
      @method signin
    */
    signin = task(function * ({ username, password }) {
      try {
        yield get(this, 'session').authenticate('authenticator:jwt', { identification: username, password });
      } catch(e) {
        const appNotice = get(this, 'emberAppNotice');
        appNotice.handleNotification({message: 'login_fail', level: 'error'});
      }
    })
    

    Component

    in application.hbs to handle other errors you want at the application level

    {{#if message}}
      {{ember-app-notice
        message=message
        noticeLevel=level
        on-dismiss=(action 'dismiss_errors')
      }}
    {{/if}}
    

    Mixin (for offline events)

    import EmberAppNoticeMixin from 'ember-app-notice/mixins/ember-app-notice';

    export default ApplicationController.extends(EmberAppNoticeMixin, {
    
    })
    

    Controller (for offline events)

    export default class ApplicationController extends EmberAppNoticeController {  
    

    Installation

    • git clone <repository-url> this repository
    • cd ember-app-notice
    • npm install

    Running

    Running Tests

    • npm test (Runs ember try:each to test your addon against multiple Ember versions)
    • ember test
    • ember test --server

    Building

    • ember build

    For more information on using ember-cli, visit https://ember-cli.com/.

    Install

    npm i ember-app-notice

    DownloadsWeekly Downloads

    8

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • snewcomer