Developers: display dashcounters
This commit is contained in:
parent
7c2aacb71e
commit
1ee87fa7a4
2 changed files with 39 additions and 3 deletions
|
@ -1,7 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { injectIntl, defineMessages } from 'react-intl';
|
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
import Column from '../ui/components/column';
|
import Column from '../ui/components/column';
|
||||||
|
import Icon from 'soapbox/components/icon';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
heading: { id: 'column.developers', defaultMessage: 'Developers' },
|
heading: { id: 'column.developers', defaultMessage: 'Developers' },
|
||||||
|
@ -19,8 +21,27 @@ class Developers extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column heading={intl.formatMessage(messages.heading)}>
|
<Column heading={intl.formatMessage(messages.heading)}>
|
||||||
<div style={{ padding: '20px 10px', textAlign: 'center' }}>
|
<div className='dashcounters'>
|
||||||
WIP: Developers page
|
<div className='dashcounter'>
|
||||||
|
<Link to='/error'>
|
||||||
|
<div className='dashcounter__icon'>
|
||||||
|
<Icon src={require('@tabler/icons/icons/mood-sad.svg')} />
|
||||||
|
</div>
|
||||||
|
<div className='dashcounter__label'>
|
||||||
|
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className='dashcounter'>
|
||||||
|
<Link to='/error'>
|
||||||
|
<div className='dashcounter__icon'>
|
||||||
|
<Icon src={require('@tabler/icons/icons/mood-sad.svg')} />
|
||||||
|
</div>
|
||||||
|
<div className='dashcounter__label'>
|
||||||
|
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__num,
|
&__num,
|
||||||
|
&__icon,
|
||||||
&__text {
|
&__text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -39,6 +40,20 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: hsla(var(--primary-text-color_hsl), 0.6);
|
color: hsla(var(--primary-text-color_hsl), 0.6);
|
||||||
|
|
Loading…
Reference in a new issue