Add titles to more icons, and change clear notifications icon. (#1101)

app/assets/javascripts/components/components/column_collapsable.jsx

@@ -15,6 +15,7 @@ const ColumnCollapsable = React.createClass({
 
   propTypes: {
     icon: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string,
     fullHeight: React.PropTypes.number.isRequired,
     children: React.PropTypes.node,
     onCollapse: React.PropTypes.func
@@ -39,13 +40,13 @@ const ColumnCollapsable = React.createClass({
   },
 
   render () {
-    const { icon, fullHeight, children } = this.props;
+    const { icon, title, fullHeight, children } = this.props;
     const { collapsed } = this.state;
     const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
 
     return (
       <div style={{ position: 'relative' }}>
-        <div style={{...iconStyle }} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
+        <div title={`${title}`} style={{...iconStyle }} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
 
         <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : fullHeight, collapsed ? undefined : { stiffness: 150, damping: 9 }) }}>
           {({ opacity, height }) =>

app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx

@@ -6,7 +6,8 @@ import SettingToggle from '../../notifications/components/setting_toggle';
 import SettingText from './setting_text';
 
 const messages = defineMessages({
-  filter_regex: { id: 'home.column_settings.filter_regex', defaultMessage: 'Filter out by regular expressions' }
+  filter_regex: { id: 'home.column_settings.filter_regex', defaultMessage: 'Filter out by regular expressions' },
+  settings: { id: 'home.settings', defaultMessage: 'Column settings' }
 });
 
 const outerStyle = {
@@ -39,7 +40,7 @@ const ColumnSettings = React.createClass({
     const { settings, onChange, onSave, intl } = this.props;
 
     return (
-      <ColumnCollapsable icon='sliders' fullHeight={209} onCollapse={onSave}>
+      <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={209} onCollapse={onSave}>
         <div className='column-settings--outer' style={outerStyle}>
           <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
 

app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx

@@ -1,3 +1,9 @@
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  clear: { id: 'notifications.clear', defaultMessage: 'Clear notifications' }
+});
+
 const iconStyle = {
   fontSize: '16px',
   padding: '15px',
@@ -8,14 +14,22 @@ const iconStyle = {
   zIndex: '2'
 };
 
-const ClearColumnButton = ({ onClick }) => (
+const ClearColumnButton = React.createClass({
-  <div className='column-icon' tabindex='0' style={iconStyle} onClick={onClick}>
-    <i className='fa fa-trash' />
-  </div>
-);
 
-ClearColumnButton.propTypes = {
+  propTypes: {
-  onClick: React.PropTypes.func.isRequired
+    onClick: React.PropTypes.func.isRequired,
-};
+    intl: React.PropTypes.object.isRequired
+  },
+
+  render () {
+    const { intl } = this.props;
+
+    return (
+      <div title={intl.formatMessage(messages.clear)} className='column-icon' tabIndex='0' style={iconStyle} onClick={this.onClick}>
+        <i className='fa fa-eraser' />
+      </div>
+    );
+  }
+})
 
-export default ClearColumnButton;
+export default injectIntl(ClearColumnButton);

app/assets/javascripts/components/features/notifications/components/column_settings.jsx

@@ -1,9 +1,13 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnCollapsable from '../../../components/column_collapsable';
 import SettingToggle from './setting_toggle';
 
+const messages = defineMessages({
+  settings: { id: 'notifications.settings', defaultMessage: 'Column settings' }
+});
+
 const outerStyle = {
   padding: '15px'
 };
@@ -30,14 +34,14 @@ const ColumnSettings = React.createClass({
   mixins: [PureRenderMixin],
 
   render () {
-    const { settings, onChange, onSave } = this.props;
+    const { settings, intl, onChange, onSave } = this.props;
 
     const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
     const showStr  = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
     const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
 
     return (
-      <ColumnCollapsable icon='sliders' fullHeight={616} onCollapse={onSave}>
+      <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={616} onCollapse={onSave}>
         <div className='column-settings--outer' style={outerStyle}>
           <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
 
@@ -77,4 +81,4 @@ const ColumnSettings = React.createClass({
 
 });
 
-export default ColumnSettings;
+export default injectIntl(ColumnSettings);