commit: 157f0a2aa74737fbe1654984cbe6879b584f2721 parent: 49043f644d668e6c525d299e4193033236d22c35 Author: Markus Amalthea Magnuson <markus.magnuson@gmail.com> Date: Sat, 8 Apr 2017 13:07:55 +0200 Add titles to more icons, and change clear notifications icon. (#1101)Diffstat:
4 files changed, 37 insertions(+), 17 deletions(-)
diff --git a/app/assets/javascripts/components/components/column_collapsable.jsx b/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 }) => diff --git a/app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx b/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> diff --git a/app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx b/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 }) => ( - <div className='column-icon' tabindex='0' style={iconStyle} onClick={onClick}> - <i className='fa fa-trash' /> - </div> -); +const ClearColumnButton = React.createClass({ -ClearColumnButton.propTypes = { - onClick: React.PropTypes.func.isRequired -}; + propTypes: { + 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); diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/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);