From 9ddeb30f90f9402eb567c88354d4956fcfdf0361 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 23 May 2019 01:35:22 +0200
Subject: Add `forceSingleColumn` prop to `<UI />` (#10807)

* Move TabsBar rendering logic from CSS to the ColumnsArea component

* Add forceSingleColumn mode

* Add unread notifications counter to tabs bar

* Add toggle to control `forceSingleColumn`

* Increase paddings in mobile layout responsively at large sizes
---
 .../ui/components/notifications_counter_icon.js    | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 app/javascript/mastodon/features/ui/components/notifications_counter_icon.js

(limited to 'app/javascript/mastodon/features/ui/components/notifications_counter_icon.js')

diff --git a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
new file mode 100644
index 000000000..deb907866
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Icon from 'mastodon/components/icon';
+
+const mapStateToProps = state => ({
+  count: state.getIn(['notifications', 'unread']),
+});
+
+const formatNumber = num => num > 99 ? '99+' : num;
+
+const NotificationsCounterIcon = ({ count }) => (
+  <i className='icon-with-badge'>
+    <Icon id='bell' fixedWidth />
+    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+  </i>
+);
+
+NotificationsCounterIcon.propTypes = {
+  count: PropTypes.number.isRequired,
+};
+
+export default connect(mapStateToProps)(NotificationsCounterIcon);
-- 
cgit