https://github.com/snewcomer/ember-app-notice

A simple app-notice that renders at top of your page
https://github.com/snewcomer/ember-app-notice

Last synced: 21 days ago
JSON representation

A simple app-notice that renders at top of your page

• Host: GitHub
• URL: https://github.com/snewcomer/ember-app-notice
• Owner: snewcomer
• License: mit
• Created: 2018-01-12T18:10:43.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-06T05:18:25.000Z (over 6 years ago)
• Last Synced: 2024-10-18T08:22:56.215Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 276 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# 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 ` this repository

* `cd ember-app-notice`

* `npm install`

## Running

* `ember serve`

* Visit your app at [http://localhost:4200](http://localhost:4200).

## 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/](https://ember-cli.com/).