flash messages in ember

misago/emberapp/app/controllers/flash-message.js

@@ -0,0 +1,56 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  VISIBLE_FOR: 4500,
+  HIDE_ANIMATION_LENGTH: 200,
+
+  id: null,
+  type: null,
+  message: null,
+  isVisible: false,
+
+  isInfo: function() {
+    return this.get('type') === 'info';
+  }.property('type'),
+
+  isSuccess: function() {
+    return this.get('type') === 'success';
+  }.property('type'),
+
+  isWarning: function() {
+    return this.get('type') === 'warning';
+  }.property('type'),
+
+  isError: function() {
+    return this.get('type') === 'error';
+  }.property('type'),
+
+  actions: {
+    setFlash: function(type, message) {
+      var self = this;
+
+      if (this.get('isVisible')) {
+        this.set('isVisible', false);
+        Ember.run.later(function () {
+          self.send('showFlash', type, message);
+        }, this.get('HIDE_ANIMATION_LENGTH'));
+      } else {
+        this.send('showFlash', type, message);
+      }
+    },
+
+    showFlash: function(type, message) {
+      var flashId = this.incrementProperty('id');
+      this.set('type', type);
+      this.set('message', message);
+      this.set('isVisible', true);
+
+      var self = this;
+      Ember.run.later(function () {
+        if (self.get('id') === flashId) {
+          self.set('isVisible', false);
+        }
+      }, this.get('VISIBLE_FOR'));
+    }
+  }
+});

misago/emberapp/app/controllers/index.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    testInfo: function() {
+      this.send('flashInfo', this.get('newFlash'));
+    },
+
+    testSuccess: function() {
+      this.send('flashSuccess', this.get('newFlash'));
+    },
+
+    testWarning: function() {
+      this.send('flashWarning', this.get('newFlash'));
+    },
+
+    testError: function() {
+      this.send('flashError', this.get('newFlash'));
+    }
+  }
+});

misago/emberapp/app/routes/application.js

@@ -47,6 +47,28 @@ export default Ember.Route.extend({
 
       document.title = complete_title;
       return false;
+    },
+
+    // Flashes
+
+    flashInfo: function(message) {
+      this.controllerFor("flashMessage").send('setFlash', 'info', message);
+      return false;
+    },
+
+    flashSuccess: function(message) {
+      this.controllerFor("flashMessage").send('setFlash', 'success', message);
+      return false;
+    },
+
+    flashWarning: function(message) {
+      this.controllerFor("flashMessage").send('setFlash', 'warning', message);
+      return false;
+    },
+
+    flashError: function(message) {
+      this.controllerFor("flashMessage").send('setFlash', 'error', message);
+      return false;
     }
   }
 });

misago/emberapp/app/styles/misago/flash-message.less

@@ -0,0 +1,63 @@
+//
+// Flash Message
+// --------------------------------------------------
+
+
+.flash-message-style(@color-bg, @color-text) {
+  background: @color-bg;
+
+  color: @color-text;
+  text-shadow: 0px 0px 2px darken(@color-bg, 14%);
+}
+
+
+.flash-message {
+  position: fixed;
+  top: -100%;
+  width: 100%;
+  z-index: @zindex-modal + 10;
+
+  text-align: center;
+  font-size: @font-size-large;
+
+  transition: top 300ms ease;
+
+  &.visible {
+    top: 0px;
+    transition: top 200ms ease;
+  }
+
+  p {
+    padding: @alert-padding;
+
+    &.message-success {
+      .flash-message-style(@alert-success-bg, @alert-success-text);
+    }
+
+    &.message-info {
+      .flash-message-style(@alert-info-bg, @alert-info-text);
+    }
+
+    &.message-warning {
+      .flash-message-style(@alert-warning-bg, @alert-warning-text);
+    }
+
+    &.message-danger {
+      .flash-message-style(@alert-danger-bg, @alert-danger-text);
+    }
+  }
+
+  /* Small devices (tablets, 768px and up) */
+  @media (min-width: @screen-sm-min) {
+    padding: 0px @padding-large-horizontal;
+    pointer-events: none;
+
+    p {
+      border-radius: 0px 0px @alert-border-radius @alert-border-radius;
+      display: inline-block;
+      padding: @padding-large-vertical @padding-large-horizontal;
+
+      font-size: @font-size-base;
+    }
+  }
+}

misago/emberapp/app/styles/misago/footer.less

@@ -8,7 +8,6 @@
   padding-bottom: @line-height-computed * 1.5;
 
   color: @footer-color;
-  font-size: @font-size-base + 2px;
   text-align: center;
 
   .footer-nav {

misago/emberapp/app/styles/misago/misago.less

@@ -1,9 +1,10 @@
 // Components
+@import "flash-message.less";
 @import "footer.less";
-@import "loader.less";
 @import "navbar.less";
 @import "page-header.less";
 @import "typo.less";
 
 // Pages
 @import "errorpages.less";
+@import "loader.less";

misago/emberapp/app/styles/misago/variables.less

@@ -15,9 +15,9 @@
 @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
 
 @brand-primary:          #3498db;
-@brand-success:          #5cb85c;
+@brand-success:          #2ecc71;
 @brand-info:             #5bc0de;
-@brand-warning:          #d35400;
+@brand-warning:          #e67e22;
 @brand-danger:           #e74c3c;
 
 
@@ -37,16 +37,35 @@
 //** Link hover decoration.
 @link-hover-decoration: underline;
 
-//** Headings
-@headings-color:        lighten(@text-color, 8%);
-@headings-font-weight:  300;
-
 //** In-site link state default
 @state-default:         #7f8c8d;
 @state-hover:           @text-color;
 @state-clicked:         @state-hover;
 
 
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+@font-size-base:          16px;
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+//** By default, this inherits from the `<body>`.
+@headings-font-weight:    300;
+@headings-color:          lighten(@text-color, 8%);;
+
+
 //== Navbar
 //
 //##
@@ -99,3 +118,22 @@
 //##
 
 @loader-color:                   darken(@gray-lighter, 12%);
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+@alert-border-radius:         @border-radius-large;
+
+@alert-success-bg:            @brand-success;
+@alert-success-text:          #fff;
+
+@alert-info-bg:               @brand-info;
+@alert-info-text:             #fff;
+
+@alert-warning-bg:            @brand-warning;
+@alert-warning-text:          #fff;
+
+@alert-danger-bg:             @brand-danger;
+@alert-danger-text:           #fff;

misago/emberapp/app/templates/application.hbs

@@ -1,4 +1,5 @@
 {{render "navbar"}}
+{{render "flash-message"}}
 
 <div class="main-outlet">
   {{outlet}}

misago/emberapp/app/templates/flash-message.hbs

@@ -0,0 +1,5 @@
+<div {{bind-attr class=":flash-message isVisible:visible"}}>
+  <p {{bind-attr class="isInfo:message-info isSuccess:message-success isWarning:message-warning isError:message-danger"}}>
+    {{message}}
+  </p>
+</div>

misago/emberapp/app/templates/index.hbs

@@ -4,4 +4,17 @@
   <p class="lead">
     Special pages: {{#link-to 'loading'}}Loading{{/link-to}}, {{#link-to 'error-0'}}Connection lost{{/link-to}}, {{#link-to 'error-404'}}Error 404{{/link-to}}.
   </p>
+
+  <hr>
+
+  <h2>Test Flash Message</h2>
+
+  <p>
+    {{input type="text" value=newFlash}}
+    <button class="btn btn-primary" {{action "testInfo"}}>Info</button>
+    <button class="btn btn-success" {{action "testSuccess"}}>Success</button>
+    <button class="btn btn-warning" {{action "testWarning"}}>Warning</button>
+    <button class="btn btn-danger" {{action "testError"}}>Error</button>
+  </p>
+
 </div>

misago/emberapp/tests/unit/controllers/flash-message-test.js

@@ -0,0 +1,79 @@
+import {
+  moduleFor,
+  test
+} from 'ember-qunit';
+
+moduleFor('controller:flash-message', 'FlashMessageController');
+
+test('it exists', function() {
+  var controller = this.subject();
+  ok(controller);
+});
+
+test('isInfo', function() {
+  var controller = this.subject();
+
+  controller.set('type', 'info');
+
+  ok(controller.get('isInfo'));
+  ok(!controller.get('isSuccess'));
+  ok(!controller.get('isWarning'));
+  ok(!controller.get('isError'));
+});
+
+test('isSuccess', function() {
+  var controller = this.subject();
+
+  controller.set('type', 'success');
+
+  ok(!controller.get('isInfo'));
+  ok(controller.get('isSuccess'));
+  ok(!controller.get('isWarning'));
+  ok(!controller.get('isError'));
+});
+
+test('isWarning', function() {
+  var controller = this.subject();
+
+  controller.set('type', 'warning');
+
+  ok(!controller.get('isInfo'));
+  ok(!controller.get('isSuccess'));
+  ok(controller.get('isWarning'));
+  ok(!controller.get('isError'));
+});
+
+test('isError', function() {
+  var controller = this.subject();
+
+  controller.set('type', 'error');
+
+  ok(!controller.get('isInfo'));
+  ok(!controller.get('isSuccess'));
+  ok(!controller.get('isWarning'));
+  ok(controller.get('isError'));
+});
+
+test('setFlash', function() {
+  var controller = this.subject();
+
+  var testMessage = "I'm test flash!";
+
+  controller.send('setFlash', 'success', testMessage);
+
+  ok(controller.get('isVisible'));
+  ok(controller.get('isSuccess'));
+  equal(controller.get('message'), testMessage);
+});
+
+test('showFlash', function() {
+  var controller = this.subject();
+
+  var testMessage = "I'm test flash!";
+
+  controller.send('showFlash', 'success', testMessage);
+
+  ok(controller.get('isVisible'));
+  ok(controller.get('isSuccess'));
+  equal(controller.get('message'), testMessage);
+});