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

extendedTimeout, doesn't apply exiting class to component.

Abierto
#117 5 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
355
Forks
118
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.