app: add internal notifications

Used for things like updating settings.

app.js

@@ -64,6 +64,7 @@ function App(el, currentWindow) {
   this._addRoutes()
   this._addStyles()
 
+  this._showingNote = false
   this.once('loaded', () => {
     // remove the loading view
     const v = document.querySelector('irc-loading-view')
@@ -312,14 +313,35 @@ App.prototype.render = function render() {
     : 'irc-workspace.col-3.pure-g'
 
   return h(main, [
-    views.serverbar.render()
+    h('irc-notification.hide', [
+      h('p', '')
+    ])
+  , views.serverbar.render()
   , h('irc-sidebar.pure-u', [
       views.sidebar.render()
     ])
   , h('.container.pure-u-1', container)
   ])
 }
 
+App.prototype.showNote = function showNote(type, msg) {
+  if (this._showingNote) {
+    return setTimeout(() => {
+      this.showNote(type, msg)
+    }, 2500)
+  }
+  this._showingNote = true
+  const note = document.querySelector('irc-notification')
+  note.className = `${type} shown`
+  note.children[0].innerText = msg
+
+  setTimeout(() => {
+    note.className = 'hide'
+    note.children[0].innerText = ''
+    this._showingNote = false
+  }, 2500)
+}
+
 App.prototype._addHandlers = function _addHandlers() {
   delegate.on(this.el, 'a.external-url', 'click', (e) => {
     e.preventDefault()

client/less/animations.less

@@ -0,0 +1,62 @@
+// These have been taken from https://github.com/daneden/animate.css/blob/master/animate.css
+// It is licensed under the MIT license
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}

client/less/index.less

@@ -36,6 +36,7 @@
 // Utility classes
 @import "../../node_modules/bootstrap/less/utilities.less";
 
+@import "animations.less";
 @import "layout.less";
 @import "containers.less";
 @import "sidebars.less";
@@ -52,4 +53,5 @@
 @import "list_view.less";
 @import "settings.less";
 @import "buttons.less";
+@import "notification.less";
 @import "theme.less";

client/less/notification.less

@@ -0,0 +1,18 @@
+irc-notification {
+  width: 80%;
+  height: auto;
+  top: 0;
+  position: absolute;
+  left: 10%;
+  right: 10%;
+  text-align: center;
+  z-index: 1000000;
+
+  &.shown {
+    opacity: 1;
+  }
+
+  &.hide {
+    opacity: 0;
+  }
+}

client/less/theme.less

@@ -74,3 +74,44 @@ irc-userbar {
 irc-settings {
   background-color: @dusk;
 }
+
+irc-notification {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  animation-duration: .75s;
+  animation-fill-mode: both;
+
+  &.shown {
+    animation-name: bounceInDown;
+  }
+
+  &.hide {
+    animation-name: slideOutUp;
+  }
+
+  &.error {
+    background-color: lighten(@red, 20%);
+
+    .red5();
+  }
+
+  &.success {
+    background-color: lighten(@green, 20%);
+
+    .green4();
+  }
+
+  &.info {
+    background-color: lighten(@blue, 20%);
+
+    .blue4();
+  }
+
+  p {
+    font-weight: bold;
+    margin: 20px;
+    font-size: 18px;
+    text-align: center;
+  }
+}

lib/views/settings.js

@@ -24,20 +24,24 @@ Settings.prototype.close = function close(e) {
 }
 
 Settings.prototype.onPlaySoundsChange = function onPlaySoundsChange(e) {
+  debug('playSounds changed')
   const checked = e.target.checked
-  this.settings.set('playSounds', checked, (err) => {
+  this.target.settings.set('playSounds', checked, (err) => {
     if (err) {
       console.error('error setting playSounds', err)
+      this.target.showNote('error', 'Unable to update settings at this time.')
       return
     }
 
     this.target.needsLayout()
+    this.target.showNote('success', 'Successfully updated sound settings')
   })
 }
 
 Settings.prototype.onChangeTheme = function onChangeTheme(e) {
   debug('changed to %s', e.target.value)
   this.target.themes.activate(e.target.value)
+  this.target.showNote('success', 'Successfully activated theme')
 }
 
 Settings.prototype.render = function render() {
@@ -92,7 +96,7 @@ Settings.prototype.render = function render() {
                   type: 'checkbox'
                 , id: 'playSounds'
                 , checked: settings.get('playSounds')
-                , onChange: (e) => {
+                , onchange: (e) => {
                     this.onPlaySoundsChange(e)
                   }
                 })