adopted-ember-addons / adopted-ember-addons/ember-cli-flash

extendedTimeout, doesn't apply exiting class to component.

Đang mở
#117 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
355
Fork
118
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

I'm in the process of migrating to ember-cli, using ember-cli-rails.

I wrote two components, one `flash-queue` which renders a `flash-message` component for each flash message object.

Those components work as expected and flash messages are shown. The source code of my two components and there templates can be seen below.

**flash-queue component:**

``` javascript
import Ember from 'ember';

export default Ember.Component.extend({
classNames: ['FlashQueue']
});
```

``` html


{{#each flashMessages.queue as |flash|}}
{{flash-message flash=flash}}
{{/each}}

```

**flash-message component:**

``` javascript
import Ember from 'ember';

export default Ember.Component.extend({
classNames: ['flash-message'],
classNameBindings: 'flashType',
flashType: Ember.computed('flash', function() {
return `is-${this.get('flash.type')}`;
}),

elementInserted: (function() {
var $self = this.$("#message");
$self.hide();
$self.fadeIn(500);
}).on('didInsertElement')
});
```

``` html


{{flash.message}}

```

**Scss Styling:**

We use Scss, and have some conditional styling of the `background-color` based on the presence of `is-` class. as in `is-error` would apply a red background. below is a snippet of the styles applied to the flash-message component:

``` scss
#message {
background-color: $color-notice;
color: #fff;
opacity: 1.0;
font-size: 1em;
line-height: 1.2em;
padding: 1em;
text-align: center;

&.exiting {
opacity: 0.0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
}
```

**config/environment.js**

``` js
flashMessageDefaults: {
timeout: 3000,
extendedTimeout: 1000,
priority: 200,
showProgress: true,
type: 'info',
types: ['info', 'error', 'success'],
injectionFactories: ['route', 'component', 'controller']
}
```

the fade in works (obviously) however when inspecting in the console the exiting class is never applied to the `flash-message` component.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.