Add icons for each of the local-setting pages

pull/776/head
Thibaut Girka 2018-10-01 22:09:57 +02:00 committed by ThibG
parent 641d056e0f
commit edb9ec8543
3 changed files with 12 additions and 4 deletions

View File

@ -38,30 +38,35 @@ export default class LocalSettingsNavigation extends React.PureComponent {
active={index === 0}
index={0}
onNavigate={onNavigate}
icon='cogs'
title={intl.formatMessage(messages.general)}
/>
<LocalSettingsNavigationItem
active={index === 1}
index={1}
onNavigate={onNavigate}
icon='pencil'
title={intl.formatMessage(messages.compose)}
/>
<LocalSettingsNavigationItem
active={index === 2}
index={2}
onNavigate={onNavigate}
textIcon='CW'
title={intl.formatMessage(messages.content_warnings)}
/>
<LocalSettingsNavigationItem
active={index === 3}
index={3}
onNavigate={onNavigate}
icon='angle-double-up'
title={intl.formatMessage(messages.collapsed)}
/>
<LocalSettingsNavigationItem
active={index === 4}
index={4}
onNavigate={onNavigate}
icon='image'
title={intl.formatMessage(messages.media)}
/>
<LocalSettingsNavigationItem
@ -76,6 +81,7 @@ export default class LocalSettingsNavigation extends React.PureComponent {
className='close'
index={6}
onNavigate={onClose}
icon='times'
title={intl.formatMessage(messages.close)}
/>
</nav>

View File

@ -12,6 +12,7 @@ export default class LocalSettingsPage extends React.PureComponent {
className: PropTypes.string,
href: PropTypes.string,
icon: PropTypes.string,
textIcon: PropTypes.string,
index: PropTypes.number.isRequired,
onNavigate: PropTypes.func,
title: PropTypes.string,
@ -32,6 +33,7 @@ export default class LocalSettingsPage extends React.PureComponent {
className,
href,
icon,
textIcon,
onNavigate,
title,
} = this.props;
@ -40,14 +42,14 @@ export default class LocalSettingsPage extends React.PureComponent {
active,
}, className);
const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null;
const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
if (href) return (
<a
href={href}
className={finalClassName}
>
{iconElem} {title}
{iconElem} <span>{title}</span>
</a>
);
else if (onNavigate) return (
@ -57,7 +59,7 @@ export default class LocalSettingsPage extends React.PureComponent {
tabIndex='0'
className={finalClassName}
>
{iconElem} {title}
{iconElem} <span>{title}</span>
</a>
);
else return null;

View File

@ -72,7 +72,7 @@
.glitch.local-settings__navigation {
background: lighten($ui-secondary-color, 8%);
width: 200px;
width: 212px;
font-size: 15px;
line-height: 20px;
overflow-y: auto;