Notifications: add back column settings

app/soapbox/features/notifications/components/column_settings.js

@@ -1,18 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import ClearColumnButton from './clear_column_button';
 import SettingToggle from './setting_toggle';
 import MultiSettingToggle from './multi_setting_toggle';
+import IconButton from 'soapbox/components/icon_button';
 
-export default class ColumnSettings extends React.PureComponent {
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+export default @injectIntl
+class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
     pushSettings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
     onClear: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
     supportsEmojiReacts: PropTypes.bool,
   };
 
@@ -29,7 +37,7 @@ export default class ColumnSettings extends React.PureComponent {
   }
 
   render() {
-    const { settings, pushSettings, onChange, onClear, supportsEmojiReacts } = this.props;
+    const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts } = this.props;
 
     const filterShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show' defaultMessage='Show' />;
     const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
@@ -42,7 +50,17 @@ export default class ColumnSettings extends React.PureComponent {
     const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
 
     return (
-      <div>
+      <div className='column-settings'>
+        <div className='column-settings__header'>
+          <h1 className='column-settings__title'>
+            <FormattedMessage id='notifications.column_settings.title' defaultMessage='Notification settings' />
+          </h1>
+          <div className='column-settings__close'>
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+          </div>
+        </div>
+
+        <div className='column-settings__content'>
           <div className='column-settings__row'>
             <ClearColumnButton onClick={onClear} />
           </div>
@@ -152,6 +170,7 @@ export default class ColumnSettings extends React.PureComponent {
             </div>
           </div>
         </div>
+      </div>
     );
   }
 

app/soapbox/features/notifications/index.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../../components/column';
-import ColumnHeader from '../../components/column_header';
 import {
   expandNotifications,
   scrollTopNotifications,
@@ -21,6 +20,7 @@ import LoadGap from '../../components/load_gap';
 import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
 import { getSettings } from 'soapbox/actions/settings';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
+import SubNavigation from 'soapbox/components/sub_navigation';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -129,7 +129,7 @@ class Notifications extends React.PureComponent {
   };
 
   render() {
-    const { intl, notifications, isLoading, isUnread, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
+    const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
     const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
 
     let scrollableContent = null;
@@ -183,9 +183,7 @@ class Notifications extends React.PureComponent {
 
     return (
       <Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)} className='column--notifications'>
-        <ColumnHeader icon='bell' active={isUnread} title={intl.formatMessage(messages.title)}>
-          <ColumnSettingsContainer />
-        </ColumnHeader>
+        <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettingsContainer} />
         {filterBarContainer}
         <TimelineQueueButtonHeader
           onClick={this.handleDequeueNotifications}

app/styles/components/columns.scss

@@ -600,10 +600,13 @@
   @include standard-panel;
   width: 400px;
   max-width: calc(100% - 20px);
+  max-height: calc(100vh - 20px);
 }
 
 .column-settings {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   &__header {
     border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
@@ -619,6 +622,7 @@
 
   &__content {
     padding: 10px 20px;
+    overflow-y: auto;
   }
 
   &__close {