diff --git a/client/gulpfile.babel.js b/client/gulpfile.babel.js index 53b88fe6..3692aaa9 100644 --- a/client/gulpfile.babel.js +++ b/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 diff --git a/client/lib/main.less b/client/lib/main.less index 5b28a5c8..f017dca6 100644 --- a/client/lib/main.less +++ b/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; diff --git a/client/lib/stores/donations.js b/client/lib/stores/donations.js new file mode 100644 index 00000000..9d8babea --- /dev/null +++ b/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) +} diff --git a/client/lib/stores/ui.js b/client/lib/stores/ui.js index 7cd2d263..5c0b85b1 100644 --- a/client/lib/stores/ui.js +++ b/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) } }, diff --git a/client/lib/ui/Main.js b/client/lib/ui/Main.js index 2ba937b4..4b5ab692 100644 --- a/client/lib/ui/Main.js +++ b/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({ } {pmNotices.map(pm => ) } {this.state.update.get('ready') &&

update ready{Heim.isTouch ? 'tap' : 'click'} to reload

} + {this.state.donations.eligible && this.state.donations.url && this.state.ui.notices.has('donations') &&
+
+ euphoria maintenance and development depends on you. + + donations.openWindow()}>support us + +
+ ui.dismissNotice('donations')} /> +
}
diff --git a/client/site/common/Footer.js b/client/site/common/Footer.js index 77df33a1..79c2bf5e 100644 --- a/client/site/common/Footer.js +++ b/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.propTypes = { + noDonation: React.PropTypes.bool, +} diff --git a/client/site/common/MainPage.js b/client/site/common/MainPage.js index 53b6278b..54d9af13 100644 --- a/client/site/common/MainPage.js +++ b/client/site/common/MainPage.js @@ -12,7 +12,8 @@ export default function MainPage(props) {
{props.children}
-
+ {props.bottom && props.bottom} +
) } @@ -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, } diff --git a/client/site/home.js b/client/site/home.js index ebc13c7d..a3ff7b0b 100644 --- a/client/site/home.js +++ b/client/site/home.js @@ -5,7 +5,7 @@ import heimURL from '../lib/heimURL' module.exports = ( - + Support us!
}>
diff --git a/client/site/res/bronze-alt.svg b/client/site/res/bronze-alt.svg new file mode 100644 index 00000000..4eff10bd --- /dev/null +++ b/client/site/res/bronze-alt.svg @@ -0,0 +1,61 @@ + +image/svg+xml \ No newline at end of file diff --git a/client/site/site.less b/client/site/site.less index 79df6975..bea70f3f 100644 --- a/client/site/site.less +++ b/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 {