about summary refs log tree commit diff
path: root/app/assets/javascripts/components/features
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/components/features')
-rw-r--r--app/assets/javascripts/components/features/account/components/header.jsx4
-rw-r--r--app/assets/javascripts/components/features/compose/components/compose_form.jsx7
-rw-r--r--app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx1
-rw-r--r--app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx61
-rw-r--r--app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx26
-rw-r--r--app/assets/javascripts/components/features/follow_requests/index.jsx66
-rw-r--r--app/assets/javascripts/components/features/getting_started/index.jsx20
-rw-r--r--app/assets/javascripts/components/features/hashtag_timeline/index.jsx2
-rw-r--r--app/assets/javascripts/components/features/notifications/components/column_settings.jsx150
-rw-r--r--app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx17
-rw-r--r--app/assets/javascripts/components/features/notifications/index.jsx14
-rw-r--r--app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx46
-rw-r--r--app/assets/javascripts/components/features/public_timeline/index.jsx5
-rw-r--r--app/assets/javascripts/components/features/ui/components/column.jsx3
14 files changed, 412 insertions, 10 deletions
diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx
index adf9ab5ae..6ae5ac002 100644
--- a/app/assets/javascripts/components/features/account/components/header.jsx
+++ b/app/assets/javascripts/components/features/account/components/header.jsx
@@ -61,10 +61,10 @@ const Header = React.createClass({
     const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
 
     return (
-      <div style={{ flex: '0 0 auto', background: '#2f3441', textAlign: 'center', backgroundImage: `url(${account.get('header')})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
+      <div className='account__header' style={{ flex: '0 0 auto', background: '#2f3441', textAlign: 'center', backgroundImage: `url(${account.get('header')})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
         <div style={{ background: 'rgba(47, 52, 65, 0.9)', padding: '20px 10px' }}>
           <a href={account.get('url')} target='_blank' rel='noopener' style={{ display: 'block', color: 'inherit', textDecoration: 'none' }}>
-            <div style={{ width: '90px', margin: '0 auto', marginBottom: '10px' }}>
+            <div className='account__header__avatar' style={{ width: '90px', margin: '0 auto', marginBottom: '10px' }}>
               <img src={account.get('avatar')} alt='' style={{ display: 'block', width: '90px', height: '90px', borderRadius: '90px' }} />
             </div>
 
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
index 760b0efd1..55f361b0b 100644
--- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx
@@ -20,12 +20,14 @@ const messages = defineMessages({
 const ComposeForm = React.createClass({
 
   propTypes: {
+    intl: React.PropTypes.object.isRequired,
     text: React.PropTypes.string.isRequired,
     suggestion_token: React.PropTypes.string,
     suggestions: ImmutablePropTypes.list,
     sensitive: React.PropTypes.bool,
     unlisted: React.PropTypes.bool,
     private: React.PropTypes.bool,
+    fileDropDate: React.PropTypes.instanceOf(Date),
     is_submitting: React.PropTypes.bool,
     is_uploading: React.PropTypes.bool,
     in_reply_to: ImmutablePropTypes.map,
@@ -109,6 +111,7 @@ const ComposeForm = React.createClass({
           ref={this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
           disabled={disabled}
+          fileDropDate={this.props.fileDropDate}
           value={this.props.text}
           onChange={this.handleChange}
           suggestions={this.props.suggestions}
@@ -129,7 +132,7 @@ const ComposeForm = React.createClass({
           <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
         </label>
 
-        <Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.private ? 0 : 100), height: spring(this.props.private ? 0 : 39.5) }}>
+        <Motion defaultStyle={{ opacity: this.props.private ? 0 : 100, height: this.props.private ? 39.5 : 0 }} style={{ opacity: spring(this.props.private ? 0 : 100), height: spring(this.props.private ? 0 : 39.5) }}>
           {({ opacity, height }) =>
             <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
               <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} />
@@ -138,7 +141,7 @@ const ComposeForm = React.createClass({
           }
         </Motion>
 
-        <Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}>
+        <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}>
           {({ opacity, height }) =>
             <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
               <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
diff --git a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
index 1d8f20ca7..2b6ee1ae7 100644
--- a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
+++ b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
@@ -24,6 +24,7 @@ const makeMapStateToProps = () => {
       sensitive: state.getIn(['compose', 'sensitive']),
       unlisted: state.getIn(['compose', 'unlisted']),
       private: state.getIn(['compose', 'private']),
+      fileDropDate: state.getIn(['compose', 'fileDropDate']),
       is_submitting: state.getIn(['compose', 'is_submitting']),
       is_uploading: state.getIn(['compose', 'is_uploading']),
       in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
diff --git a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
new file mode 100644
index 000000000..0d41d192f
--- /dev/null
+++ b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
@@ -0,0 +1,61 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Permalink from '../../../components/permalink';
+import Avatar from '../../../components/avatar';
+import DisplayName from '../../../components/display_name';
+import emojify from '../../../emoji';
+import IconButton from '../../../components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
+  reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }
+});
+
+const outerStyle = {
+  padding: '14px 10px'
+};
+
+const panelStyle = {
+  background: '#2f3441',
+  display: 'flex',
+  flexDirection: 'row',
+  borderTop: '1px solid #363c4b',
+  borderBottom: '1px solid #363c4b',
+  padding: '10px 0'
+};
+
+const btnStyle = {
+  flex: '1 1 auto',
+  textAlign: 'center'
+};
+
+const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => {
+  const content = { __html: emojify(account.get('note')) };
+
+  return (
+    <div>
+      <div style={outerStyle}>
+        <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}>
+          <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={48} /></div>
+          <DisplayName account={account} />
+        </Permalink>
+
+        <div style={{ color: '#616b86', fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
+      </div>
+
+      <div style={panelStyle}>
+        <div style={btnStyle}><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
+        <div style={btnStyle}><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
+      </div>
+    </div>
+  )
+};
+
+AccountAuthorize.propTypes = {
+  account: ImmutablePropTypes.map.isRequired,
+  onAuthorize: React.PropTypes.func.isRequired,
+  onReject: React.PropTypes.func.isRequired,
+  intl: React.PropTypes.object.isRequired
+};
+
+export default injectIntl(AccountAuthorize);
diff --git a/app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx b/app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx
new file mode 100644
index 000000000..da1e5eaa1
--- /dev/null
+++ b/app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { makeGetAccount } from '../../../selectors';
+import AccountAuthorize from '../components/account_authorize';
+import { authorizeFollowRequest, rejectFollowRequest } from '../../../actions/accounts';
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, props) => ({
+    account: getAccount(state, props.id)
+  });
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch, { id }) => ({
+  onAuthorize (account) {
+    dispatch(authorizeFollowRequest(id));
+  },
+
+  onReject (account) {
+    dispatch(rejectFollowRequest(id));
+  }
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(AccountAuthorize);
diff --git a/app/assets/javascripts/components/features/follow_requests/index.jsx b/app/assets/javascripts/components/features/follow_requests/index.jsx
new file mode 100644
index 000000000..461370999
--- /dev/null
+++ b/app/assets/javascripts/components/features/follow_requests/index.jsx
@@ -0,0 +1,66 @@
+import { connect } from 'react-redux';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import LoadingIndicator from '../../components/loading_indicator';
+import { ScrollContainer } from 'react-router-scroll';
+import Column from '../ui/components/column';
+import AccountAuthorizeContainer from './containers/account_authorize_container';
+import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }
+});
+
+const mapStateToProps = state => ({
+  accountIds: state.getIn(['user_lists', 'follow_requests', 'items'])
+});
+
+const FollowRequests = React.createClass({
+  propTypes: {
+    params: React.PropTypes.object.isRequired,
+    dispatch: React.PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list,
+    intl: React.PropTypes.object.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  componentWillMount () {
+    this.props.dispatch(fetchFollowRequests());
+  },
+
+  handleScroll (e) {
+    const { scrollTop, scrollHeight, clientHeight } = e.target;
+
+    if (scrollTop === scrollHeight - clientHeight) {
+      this.props.dispatch(expandFollowRequests());
+    }
+  },
+
+  render () {
+    const { intl, accountIds } = this.props;
+
+    if (!accountIds) {
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
+    }
+
+    return (
+      <Column icon='users' heading={intl.formatMessage(messages.heading)}>
+        <ScrollContainer scrollKey='follow_requests'>
+          <div className='scrollable' onScroll={this.handleScroll}>
+            {accountIds.map(id =>
+              <AccountAuthorizeContainer key={id} id={id} />
+            )}
+          </div>
+        </ScrollContainer>
+      </Column>
+    );
+  }
+});
+
+export default connect(mapStateToProps)(injectIntl(FollowRequests));
diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index bff75f86f..157bdf8f2 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -3,15 +3,17 @@ import ColumnLink from '../ui/components/column_link';
 import { Link } from 'react-router';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const messages = defineMessages({
   heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
   public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Public timeline' },
-  settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' }
+  settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' },
+  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }
 });
 
 const mapStateToProps = state => ({
-  me: state.getIn(['meta', 'me'])
+  me: state.getIn(['accounts', state.getIn(['meta', 'me'])])
 });
 
 const hamburgerStyle = {
@@ -26,12 +28,19 @@ const hamburgerStyle = {
 };
 
 const GettingStarted = ({ intl, me }) => {
+  let followRequests = '';
+
+  if (me.get('locked')) {
+    followRequests = <ColumnLink icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />;
+  }
+
   return (
     <Column icon='asterisk' heading={intl.formatMessage(messages.heading)}>
       <div style={{ position: 'relative' }}>
         <div style={hamburgerStyle}><i className='fa fa-bars' /></div>
         <ColumnLink icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />
         <ColumnLink icon='cog' text={intl.formatMessage(messages.settings)} href='/settings/profile' />
+        {followRequests}
       </div>
 
       <div className='static-content'>
@@ -39,8 +48,15 @@ const GettingStarted = ({ intl, me }) => {
         <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p>
         <p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p>
       </div>
+
+      <div className='getting-started__illustration' />
     </Column>
   );
 };
 
+GettingStarted.propTypes = {
+  intl: React.PropTypes.object.isRequired,
+  me: ImmutablePropTypes.map.isRequired
+};
+
 export default connect(mapStateToProps)(injectIntl(GettingStarted));
diff --git a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
index cf53a7729..f28e01a00 100644
--- a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
@@ -7,6 +7,7 @@ import {
   updateTimeline,
   deleteFromTimelines
 } from '../../actions/timelines';
+import ColumnBackButton from '../public_timeline/components/column_back_button';
 
 const HashtagTimeline = React.createClass({
 
@@ -68,6 +69,7 @@ const HashtagTimeline = React.createClass({
 
     return (
       <Column icon='hashtag' heading={id}>
+        <ColumnBackButton />
         <StatusListContainer type='tag' id={id} />
       </Column>
     );
diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
new file mode 100644
index 000000000..b4035c20d
--- /dev/null
+++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx
@@ -0,0 +1,150 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Toggle from 'react-toggle';
+import { Motion, spring } from 'react-motion';
+import { FormattedMessage } from 'react-intl';
+
+const outerStyle = {
+  background: '#373b4a',
+  padding: '15px'
+};
+
+const iconStyle = {
+  fontSize: '16px',
+  padding: '15px',
+  position: 'absolute',
+  right: '0',
+  top: '-48px',
+  cursor: 'pointer'
+};
+
+const labelStyle = {
+  display: 'block',
+  lineHeight: '24px',
+  verticalAlign: 'middle'
+};
+
+const labelSpanStyle = {
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  marginBottom: '14px',
+  marginLeft: '8px',
+  color: '#9baec8'
+};
+
+const sectionStyle = {
+  cursor: 'default',
+  display: 'block',
+  fontWeight: '500',
+  color: '#9baec8',
+  marginBottom: '10px'
+};
+
+const rowStyle = {
+
+};
+
+const ColumnSettings = React.createClass({
+
+  propTypes: {
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: React.PropTypes.func.isRequired
+  },
+
+  getInitialState () {
+    return {
+      collapsed: true
+    };
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleToggleCollapsed () {
+    this.setState({ collapsed: !this.state.collapsed });
+  },
+
+  handleChange (key, e) {
+    this.props.onChange(key, e.target.checked);
+  },
+
+  render () {
+    const { settings }  = this.props;
+    const { collapsed } = this.state;
+
+    const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
+    const showStr  = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
+
+    return (
+      <div style={{ position: 'relative' }}>
+        <div style={{...iconStyle, color: collapsed ? '#9baec8' : '#fff', background: collapsed ? '#2f3441' : '#373b4a' }} onClick={this.handleToggleCollapsed}><i className='fa fa-sliders' /></div>
+
+        <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : 458) }}>
+          {({ opacity, height }) =>
+            <div style={{ overflow: 'hidden', height: `${height}px`, opacity: opacity / 100 }}>
+              <div style={outerStyle}>
+                <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
+
+                <div style={rowStyle}>
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['alerts', 'follow'])} onChange={this.handleChange.bind(this, ['alerts', 'follow'])} />
+                    <span style={labelSpanStyle}>{alertStr}</span>
+                  </label>
+
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['shows', 'follow'])} onChange={this.handleChange.bind(this, ['shows', 'follow'])} />
+                    <span style={labelSpanStyle}>{showStr}</span>
+                  </label>
+                </div>
+
+                <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
+
+                <div style={rowStyle}>
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['alerts', 'favourite'])} onChange={this.handleChange.bind(this, ['alerts', 'favourite'])} />
+                    <span style={labelSpanStyle}>{alertStr}</span>
+                  </label>
+
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['shows', 'favourite'])} onChange={this.handleChange.bind(this, ['shows', 'favourite'])} />
+                    <span style={labelSpanStyle}>{showStr}</span>
+                  </label>
+                </div>
+
+                <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
+
+                <div style={rowStyle}>
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['alerts', 'mention'])} onChange={this.handleChange.bind(this, ['alerts', 'mention'])} />
+                    <span style={labelSpanStyle}>{alertStr}</span>
+                  </label>
+
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['shows', 'mention'])} onChange={this.handleChange.bind(this, ['shows', 'mention'])} />
+                    <span style={labelSpanStyle}>{showStr}</span>
+                  </label>
+                </div>
+
+                <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
+
+                <div style={rowStyle}>
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['alerts', 'reblog'])} onChange={this.handleChange.bind(this, ['alerts', 'reblog'])} />
+                    <span style={labelSpanStyle}>{alertStr}</span>
+                  </label>
+
+                  <label style={labelStyle}>
+                    <Toggle checked={settings.getIn(['shows', 'reblog'])} onChange={this.handleChange.bind(this, ['shows', 'reblog'])} />
+                    <span style={labelSpanStyle}>{showStr}</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          }
+        </Motion>
+      </div>
+    );
+  }
+
+});
+
+export default ColumnSettings;
diff --git a/app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx b/app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx
new file mode 100644
index 000000000..6907fd351
--- /dev/null
+++ b/app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../components/column_settings';
+import { changeNotificationsSetting } from '../../../actions/notifications';
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['notifications', 'settings'])
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (key, checked) {
+    dispatch(changeNotificationsSetting(key, checked));
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
diff --git a/app/assets/javascripts/components/features/notifications/index.jsx b/app/assets/javascripts/components/features/notifications/index.jsx
index 218196cfd..7e706ad6a 100644
--- a/app/assets/javascripts/components/features/notifications/index.jsx
+++ b/app/assets/javascripts/components/features/notifications/index.jsx
@@ -9,13 +9,21 @@ import {
 import NotificationContainer from './containers/notification_container';
 import { ScrollContainer } from 'react-router-scroll';
 import { defineMessages, injectIntl } from 'react-intl';
+import ColumnSettingsContainer from './containers/column_settings_container';
+import { createSelector } from 'reselect';
+import Immutable from 'immutable';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' }
 });
 
+const getNotifications = createSelector([
+  state => Immutable.List(state.getIn(['notifications', 'settings', 'shows']).filter(item => !item).keys()),
+  state => state.getIn(['notifications', 'items'])
+], (excludedTypes, notifications) => notifications.filterNot(item => excludedTypes.includes(item.get('type'))));
+
 const mapStateToProps = state => ({
-  notifications: state.getIn(['notifications', 'items'])
+  notifications: getNotifications(state)
 });
 
 const Notifications = React.createClass({
@@ -23,7 +31,8 @@ const Notifications = React.createClass({
   propTypes: {
     notifications: ImmutablePropTypes.list.isRequired,
     dispatch: React.PropTypes.func.isRequired,
-    trackScroll: React.PropTypes.bool
+    trackScroll: React.PropTypes.bool,
+    intl: React.PropTypes.object.isRequired
   },
 
   getDefaultProps () {
@@ -69,6 +78,7 @@ const Notifications = React.createClass({
     } else {
       return (
         <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+          <ColumnSettingsContainer />
           {scrollableArea}
         </Column>
       );
diff --git a/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx b/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx
new file mode 100644
index 000000000..4535f8f28
--- /dev/null
+++ b/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx
@@ -0,0 +1,46 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import { FormattedMessage } from 'react-intl';
+
+const outerStyle = {
+  position: 'absolute',
+  right: '0',
+  top: '-48px',
+  padding: '15px',
+  fontSize: '16px',
+  background: '#2f3441',
+  flex: '0 0 auto',
+  cursor: 'pointer',
+  color: '#2b90d9'
+};
+
+const iconStyle = {
+  display: 'inline-block',
+  marginRight: '5px'
+};
+
+const ColumnBackButton = React.createClass({
+
+  contextTypes: {
+    router: React.PropTypes.object
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleClick () {
+    this.context.router.push('/');
+  },
+
+  render () {
+    return (
+      <div style={{ position: 'relative' }}>
+        <div style={outerStyle} onClick={this.handleClick} className='column-back-button'>
+          <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
+          <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default ColumnBackButton;
diff --git a/app/assets/javascripts/components/features/public_timeline/index.jsx b/app/assets/javascripts/components/features/public_timeline/index.jsx
index c3da09a09..eac85f01b 100644
--- a/app/assets/javascripts/components/features/public_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/public_timeline/index.jsx
@@ -8,6 +8,7 @@ import {
   deleteFromTimelines
 } from '../../actions/timelines';
 import { defineMessages, injectIntl } from 'react-intl';
+import ColumnBackButton from './components/column_back_button';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Public' }
@@ -16,7 +17,8 @@ const messages = defineMessages({
 const PublicTimeline = React.createClass({
 
   propTypes: {
-    dispatch: React.PropTypes.func.isRequired
+    dispatch: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -53,6 +55,7 @@ const PublicTimeline = React.createClass({
 
     return (
       <Column icon='globe' heading={intl.formatMessage(messages.title)}>
+        <ColumnBackButton />
         <StatusListContainer type='public' />
       </Column>
     );
diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx
index c2060749a..c382e108d 100644
--- a/app/assets/javascripts/components/features/ui/components/column.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column.jsx
@@ -40,7 +40,8 @@ const Column = React.createClass({
 
   propTypes: {
     heading: React.PropTypes.string,
-    icon: React.PropTypes.string
+    icon: React.PropTypes.string,
+    children: React.PropTypes.node
   },
 
   mixins: [PureRenderMixin],