Add donation links

client/gulpfile.babel.js

@@ -36,6 +36,7 @@ const heimOptions = {
   HEIM_PREFIX: process.env.HEIM_PREFIX || '',
   EMBED_ORIGIN: process.env.EMBED_ORIGIN,
   NODE_ENV: process.env.NODE_ENV,
+  HEIM_DONATION_URL: process.env.HEIM_DONATION_URL,
 }
 
 // via https://github.com/tblobaum/git-rev

client/lib/main.less

@@ -660,6 +660,36 @@ iframe.js {
       background: @brand-color;
     }
 
+    &.donations {
+      background: @brand-color;
+      animation: rotate-color 180s linear infinite;
+
+      .content .actions button {
+        color: black;
+      }
+
+      @keyframes rotate-color {
+        from {
+          background: #d95d3f;
+        }
+        20% {
+          background: #f29526;
+        }
+        40% {
+          background: #5abe6b;
+        }
+        60% {
+          background: #4d97cb;
+        }
+        80% {
+          background: #7f62b6;
+        }
+        to {
+          background: #d95d3f;
+        }
+      }
+    }
+
     .content {
       flex: 1;
       display: flex;

client/lib/stores/donations.js

@@ -0,0 +1,41 @@
+import _ from 'lodash'
+import Reflux from 'reflux'
+
+import storage from './storage'
+import actions from '../actions'
+
+
+const store = module.exports.store = Reflux.createStore({
+  init() {
+    this.state = {
+      eligible: null,
+      url: process.env.HEIM_DONATION_URL || null,
+    }
+    this.listenTo(storage.load, this.onStorageLoad)
+    this.listenTo(actions.sendMessage, this.onMessageSend)
+    if (storage.store.state !== null) this.onStorageLoad()
+  },
+
+  getInitialState() {
+    return this.state
+  },
+
+  onStorageLoad() {
+    this.state.eligible = _.get(storage.store.state, 'sentMessage', false)
+    this.trigger(this.state)
+  },
+
+  onMessageSend() {
+    storage.set('sentMessage', true)
+    // Will show banner on next load
+  },
+
+  _setURL(value) {
+    this.state.url = value
+    this.trigger(this.state)
+  },
+})
+
+module.exports.openWindow = function openWindow() {
+  if (store.state.url) window.open(store.state.url)
+}

client/lib/stores/ui.js

@@ -317,6 +317,7 @@ const store = module.exports.store = Reflux.createStore({
       draggingToolboxSelectionToggle: null,
       notices: Immutable.OrderedSet(),
       notificationsNoticeDismissed: false,
+      donationsNoticeDismissed: false,
       modalDialog: null,
     }
 
@@ -336,6 +337,7 @@ const store = module.exports.store = Reflux.createStore({
     this.state.infoPaneExpanded = _.get(data, ['room', this.chatState.roomName, 'infoPaneExpanded'], false)
     this.state.sidebarPaneExpanded = _.get(data, ['room', this.chatState.roomName, 'sidebarPaneExpanded'], true)
     this.state.notificationsNoticeDismissed = _.get(data, ['room', this.chatState.roomName, 'notificationsNoticeDismissed'], false)
+    this.state.donationsNoticeDismissed = _.get(data, 'donationsNoticeDismissed', false)
     this._updateNotices()
     this.trigger(this.state)
   },
@@ -361,6 +363,11 @@ const store = module.exports.store = Reflux.createStore({
     } else {
       this.state.notices = this.state.notices.delete('notifications')
     }
+    if (! this.state.donationsNoticeDismissed) {
+      this.state.notices = this.state.notices.add('donations')
+    } else {
+      this.state.notices = this.state.notices.delete('donations')
+    }
   },
 
   setUISize(width, height) {
@@ -690,6 +697,8 @@ const store = module.exports.store = Reflux.createStore({
   dismissNotice(name) {
     if (name === 'notifications') {
       storage.setRoom(this.chatState.roomName, 'notificationsNoticeDismissed', true)
+    } else if (name === 'donations') {
+      storage.set('donationsNoticeDismissed', true)
     }
   },
 

client/lib/ui/Main.js

@@ -11,6 +11,7 @@ import update from '../stores/update'
 import hueHash from '../hueHash'
 import notification from '../stores/notification'
 import activity from '../stores/activity'
+import donations from '../stores/donations'
 import HooksMixin from './HooksMixin'
 import ChatPane from './ChatPane'
 import ChatTopBar from './ChatTopBar'
@@ -39,6 +40,7 @@ export default React.createClass({
     Reflux.connect(require('../stores/notification').store, 'notification'),
     Reflux.connect(update.store, 'update'),
     Reflux.connect(require('../stores/storage').store, 'storage'),
+    Reflux.connect(donations.store, 'donations'),
     Reflux.listenTo(ui.selectThreadInList, 'selectThreadInList'),
     Reflux.listenTo(ui.panViewTo, 'panViewTo'),
     Reflux.listenTo(ui.tabKeyCombo, 'onTabKeyCombo'),
@@ -304,6 +306,15 @@ export default React.createClass({
               </div>}
               {pmNotices.map(pm => <PMNotice key={pm.get('kind') + pm.get('id')} pmId={pm.get('id')} nick={pm.get('nick')} kind={pm.get('kind')} />) }
               {this.state.update.get('ready') && <FastButton className="update-button" onClick={update.perform}><p>update ready<em>{Heim.isTouch ? 'tap' : 'click'} to reload</em></p></FastButton>}
+              {this.state.donations.eligible && this.state.donations.url && this.state.ui.notices.has('donations') && <div className="notice dark donations">
+                <div className="content">
+                  <span className="title">euphoria maintenance and development depends on you.</span>
+                  <span className="actions">
+                    <FastButton onClick={() => donations.openWindow()}>support us</FastButton>
+                  </span>
+                </div>
+                <FastButton className="close" onClick={() => ui.dismissNotice('donations')} />
+              </div>}
             </ReactCSSTransitionGroup>
             <div className="main-pane-stack">
               <ChatPane pane={this.state.ui.panes.get('main')} showTimeStamps={this.state.ui.showTimestamps} onScrollbarSize={this.onScrollbarSize} disabled={!!mainPaneThreadId} />

client/site/common/Footer.js

@@ -3,7 +3,9 @@ import React from 'react'
 import heimURL from '../../lib/heimURL'
 
 
-export default function Footer() {
+export default function Footer(props) {
+  const donationURL = (props.noDonation) ? null : process.env.HEIM_DONATION_URL
+
   return (
     <footer>
       <div className="container">
@@ -17,7 +19,13 @@ export default function Footer() {
         <a href="https://github.com/euphoria-io/heim"><span className="long">source </span>code</a>
         <a href="http://andeuphoria.tumblr.com/">blog</a>
         <a href="mailto:[email protected]">contact</a>
+        {donationURL && <span className="spacer" />}
+        {donationURL && <a href={donationURL}>support us!</a>}
       </div>
     </footer>
   )
 }
+
+Footer.propTypes = {
+  noDonation: React.PropTypes.bool,
+}

client/site/common/MainPage.js

@@ -12,7 +12,8 @@ export default function MainPage(props) {
       <div className="container main">
         {props.children}
       </div>
-      <Footer />
+      {props.bottom && props.bottom}
+      <Footer noDonation={props.noDonation}/>
     </Page>
   )
 }
@@ -23,4 +24,6 @@ MainPage.propTypes = {
   heimPage: React.PropTypes.string,
   nav: React.PropTypes.node,
   children: React.PropTypes.node,
+  bottom: React.PropTypes.node,
+  noDonation: React.PropTypes.bool,
 }

client/site/home.js

@@ -5,7 +5,7 @@ import heimURL from '../lib/heimURL'
 
 
 module.exports = (
-  <MainPage title="euphoria!" className="welcome">
+  <MainPage title="euphoria!" className="welcome" noDonation bottom={process.env.HEIM_DONATION_URL && <div className="donation-banner"><a href={process.env.HEIM_DONATION_URL}>Support us!</a></div>}>
     <div className="splash">
       <FancyLogo />
       <div className="info-box">

client/site/site.less

@@ -219,7 +219,7 @@ body.page {
     }
 
     .spacer {
-      margin: 0 35px;
+      margin: 0 25px;
     }
 
     @media (max-width: 910px) {
@@ -663,6 +663,34 @@ body.welcome {
       }
     }
   }
+
+  .donation-banner {
+    display: flex;
+    margin-top: -50px;
+    height: 50px;
+
+    a {
+      margin: auto;
+      padding: 4px;
+      border-radius: 4px;
+      font-size: 1.25em;
+      font-weight: bold;
+      background: white;
+      color: #333333;
+      text-decoration: none;
+      box-shadow: 0 0 4px fade(black, 25%);
+
+      &:before {
+        content: '';
+        display: inline-block;
+        width: 2em;
+        height: 2em;
+        padding-right: 0.25em;
+        vertical-align: middle;
+        background: data-uri('./res/bronze-alt.svg') no-repeat center center;
+      }
+    }
+  }
 }
 
 body.about {