Add notification badge to favicon
This commit is contained in:
		@@ -17,6 +17,7 @@ import { WrappedSwitch, WrappedRoute } from 'flavours/glitch/util/react_router_h
 | 
				
			|||||||
import UploadArea from './components/upload_area';
 | 
					import UploadArea from './components/upload_area';
 | 
				
			||||||
import ColumnsAreaContainer from './containers/columns_area_container';
 | 
					import ColumnsAreaContainer from './containers/columns_area_container';
 | 
				
			||||||
import classNames from 'classnames';
 | 
					import classNames from 'classnames';
 | 
				
			||||||
 | 
					import Favico from 'favico.js';
 | 
				
			||||||
import {
 | 
					import {
 | 
				
			||||||
  Drawer,
 | 
					  Drawer,
 | 
				
			||||||
  Status,
 | 
					  Status,
 | 
				
			||||||
@@ -64,6 +65,7 @@ const mapStateToProps = state => ({
 | 
				
			|||||||
  isWide: state.getIn(['local_settings', 'stretch']),
 | 
					  isWide: state.getIn(['local_settings', 'stretch']),
 | 
				
			||||||
  navbarUnder: state.getIn(['local_settings', 'navbar_under']),
 | 
					  navbarUnder: state.getIn(['local_settings', 'navbar_under']),
 | 
				
			||||||
  dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
 | 
					  dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
 | 
				
			||||||
 | 
					  unreadNotifications: state.getIn(['notifications', 'unread']),
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const keyMap = {
 | 
					const keyMap = {
 | 
				
			||||||
@@ -115,6 +117,7 @@ export default class UI extends React.Component {
 | 
				
			|||||||
    history: PropTypes.object.isRequired,
 | 
					    history: PropTypes.object.isRequired,
 | 
				
			||||||
    intl: PropTypes.object.isRequired,
 | 
					    intl: PropTypes.object.isRequired,
 | 
				
			||||||
    dropdownMenuIsOpen: PropTypes.bool,
 | 
					    dropdownMenuIsOpen: PropTypes.bool,
 | 
				
			||||||
 | 
					    unreadNotifications: PropTypes.number,
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  state = {
 | 
					  state = {
 | 
				
			||||||
@@ -239,6 +242,8 @@ export default class UI extends React.Component {
 | 
				
			|||||||
      navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
 | 
					      navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    this.favicon = new Favico({ animation:"none" });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    this.props.dispatch(expandHomeTimeline());
 | 
					    this.props.dispatch(expandHomeTimeline());
 | 
				
			||||||
    this.props.dispatch(expandNotifications());
 | 
					    this.props.dispatch(expandNotifications());
 | 
				
			||||||
    setTimeout(() => this.props.dispatch(fetchFilters()), 500);
 | 
					    setTimeout(() => this.props.dispatch(fetchFilters()), 500);
 | 
				
			||||||
@@ -267,6 +272,11 @@ export default class UI extends React.Component {
 | 
				
			|||||||
    if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
 | 
					    if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
 | 
				
			||||||
      this.columnsAreaNode.handleChildrenContentChange();
 | 
					      this.columnsAreaNode.handleChildrenContentChange();
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					    if (this.props.unreadNotifications != prevProps.unreadNotifications) {
 | 
				
			||||||
 | 
					      if (this.favicon) {
 | 
				
			||||||
 | 
					        this.favicon.badge(this.props.unreadNotifications);
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  componentWillUnmount () {
 | 
					  componentWillUnmount () {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -52,6 +52,7 @@
 | 
				
			|||||||
    "escape-html": "^1.0.3",
 | 
					    "escape-html": "^1.0.3",
 | 
				
			||||||
    "exif-js": "^2.3.0",
 | 
					    "exif-js": "^2.3.0",
 | 
				
			||||||
    "express": "^4.16.2",
 | 
					    "express": "^4.16.2",
 | 
				
			||||||
 | 
					    "favico.js": "^0.3.10",
 | 
				
			||||||
    "file-loader": "^1.1.11",
 | 
					    "file-loader": "^1.1.11",
 | 
				
			||||||
    "font-awesome": "^4.7.0",
 | 
					    "font-awesome": "^4.7.0",
 | 
				
			||||||
    "glob": "^7.1.1",
 | 
					    "glob": "^7.1.1",
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -3091,6 +3091,10 @@ fastparse@^1.1.1:
 | 
				
			|||||||
  version "1.1.1"
 | 
					  version "1.1.1"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 | 
					  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					favico.js@^0.3.10:
 | 
				
			||||||
 | 
					  version "0.3.10"
 | 
				
			||||||
 | 
					  resolved "https://registry.yarnpkg.com/favico.js/-/favico.js-0.3.10.tgz#80586e27a117f24a8d51c18a99bdc714d4339301"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
faye-websocket@^0.10.0:
 | 
					faye-websocket@^0.10.0:
 | 
				
			||||||
  version "0.10.0"
 | 
					  version "0.10.0"
 | 
				
			||||||
  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
 | 
					  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user