adopted-ember-addons / adopted-ember-addons/ember-cli-flash
extendedTimeout, doesn't apply exiting class to component.
- 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
Đánh giá
Issue này chưa được đánh giá.