sir-dunxalot / ember-flash-messages Goto Github PK

Hi, I'm new to some of this stuff, but I'm trying to just use the default stylesheet and not having much luck. It gets included, but none of the rules apply. It seems that html is rendered with hyphens in the CSS classes (-), but the included stylesheet uses underscores (_):

<div class="ember-view flash-message-queue" id="ember391">  <ul class="ul">
      <li>
        <dl style="" class="ember-view flash-message flash-message-error visible" role="alert" id="ember445"><dt class="flash-message-icon-wrapper">
  <span class="icon-error" data-test="flash-icon"></span>

  <span data-test="flash-type" class="hidden">
    error
  </span>
</dt>

<dd data-test="flash-content" class="flash-message-content">
  There was an error logging you in: HTTP error 400 from /oauth/token - Missing parameters. "username" and "password" are required

  <!---->
</dd>


  <div class="flash-message-button-wrapper">
    <button data-test="flash-button" class="button">
      <span class="icon-close"></span>
      <span class="hidden">Close</span>
    </button>
  </div>
</dl>
      </li>
  </ul>

<!----></div>

.flash_message,
[class*="flash_message"],
.flash_message .content,
[class*="flash_message"] .content {
  width: 100%;
}

.flash_message,
[class*="flash_message"] {
  padding: 15px;
  margin: 0 0 15px 0;

  display: none;

  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity: 0;
}

.flash_message.visible,
[class*="flash_message"].visible {
  display: table;
  border-collapse: collapse;
  max-width: 100%;

  opacity: 1;
}

.flash_message .icon_wrapper,
[class*="flash_message"] .icon_wrapper,
.flash_message .content,
[class*="flash_message"] .content,
.flash_message .button_wrapper,
[class*="flash_message"] .button_wrapper {
  display: table-cell;
  vertical-align: middle;
}

.flash_message .hidden,
[class*="flash_message"] .hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.flash_queue .ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

You can see my complete project at https://github.com/nfriedly/particle-webhook-manager - there really isn't much to it, though.

The developer should be able to specify whether to not use any library for animation or use to velocity.js instead of jQuery.

Hi,

Following the setup outlined in the readme, I am not able to get a notice to show up.

It seems to add and then instantly remove the content of the

Any ideas?

DEPRECATION: em-notify is using the deprecated ember-addon-main definition. It should be updated to {'ember-addon': {'main': 'index.js'}}

Reference #7 for an install conflict with ember-cli-list-view.

If I set className: 'alert'and type: 'success' to my flash-message, only alert-success will be set as class and not alert alert-success.

This behaviour is also displayed in your test app when you click on any button.

If you change the typeClass computed property to return a string which doesn't contain the className as in

type: 'success',
className: 'alert',
typeClass: function() {
  var type = this.get('type');
  var affix = type ? '-' + type : '';
  return "custom" + affix;
 }.property('type')

then the classes alert and custom-success are correctly displayed.

I'm wondering if this is not a bug coming from Ember #classNameBindings itself.

Am I missing something, or can you see it too?

The message object on the flash message component is not initiated properly with Ember 1.13.x. This caused message.timed to be undefined and any hide action does not run correctly.

I have encountered a strange issue, that took me a couple of hours to fix.

After integrating flash-messages, my existing acceptance test (where a flash message was generated) was stoping execution at some point. I could see in the ember inspector that a promise of the click test helper was pending infinitely, thus halting test execution.

I debugged my self through the ember internals, and found that in the Backburner class (Ember.run), the _timers array had some setTimeout timers that the test helper was waiting to be executed, but they would never execute because the timeout period was NaN. The function waiting for execution by these invalid timers was this one:
https://github.com/sir-dunxalot/ember-flash-messages/blob/master/addon/components/flash-message.js#L111-L115

So apparently in the Ember.run.later call the animationDuration was evaluated to NaN at some point, leading to those "corrupt" timer entries.

I have not tracked this down further. As I have already used a custom inherited flash-message component, I just overrode the animationDuration property to some static value, and from then on the test were completing successfully again.

Hope this helps to track this bug down!

When I try to run a test that involves a route that contains the service:flashMessageQueue, it is failing with that error message. It's a pretty vague error message, here is the full output:

not ok 47 PhantomJS 2.0 - route:wiki: it tests pushing changes
---
actual: >
false
expected: >
true
message: >
Error: Attempting to inject an unknown injection: service:flashMessageQueue
Log: >
...

When I build an ember app with latest (master) cli, I get some errors about missing imports for "Em":

xyz/components/em-notify.js: line 3, col 16, 'Em' is not defined.
xyz/components/em-notify.js: line 5, col 19, 'Em' is not defined.

2 errors

xyz/em-notify-message.js: line 1, col 16, 'Em' is not defined.

1 error

xyz/em-notify-queue.js: line 3, col 16, 'Em' is not defined.
xyz/em-notify-queue.js: line 4, col 12, 'Em' is not defined.
xyz/em-notify-queue.js: line 11, col 5, 'Em' is not defined.

3 errors

xyz/initializers/em-notify.js: line 13, col 5, 'Em' is not defined.

1 error

It would be nice to be able to specify a partial template to be used as the content as well as an HTML string, as an alternative to using the standalone component.

Error in console:

WARNING: Message not found in message queue: undefined

Appears everytime a message is removed from the queue.

Considered a non-blocker as this only affects the dev environment - Em.warn does not output in production environments.

I try to install into an ember cli project but then the project does not compile correctly:

Uncaught Error: Could not find module collections/shim
vendor.js:65 Uncaught Error: Could not find module ember-flash-messages/initializers/ember-flash-messages

Hello,

I've extended your component as per your docs and I'm trying to override your flash-message.hbs, but encountering an issue.

In your docs here https://github.com/sir-dunxalot/ember-flash-messages/wiki/Flash-Message-Component#template , it says You can easily change the flash message's template by overwriting my-app-name/templates/components/flash-message.hbs:, but it doesn't work and still pulls the original template from the addon. Also, I don't want to overwrite your original template directly.

Thanks!

Hello,
thank you for the work, especially for the documentation.
Here is one question - is it possible to show message so that it will be shown on the next page and cleared after transition?
For example

// profile/notifications
this.currentModel.save().then(() => {
  this.flashMessage({
    content: 'Saved successfully!', 
    duration: 0, 
    type: 'success',
  });
  this.transitionTo('profile');
}); 

will display flash on the only on the profile page

The core of the message queue should be rewritten as an Ember service.