bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lists links styling

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-04-20 19:37:40 +02:00
parent 5cecb2ef9e
commit a398f14b2f
2 changed files with 8 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/soapbox/features/lists/index.tsx
View file

@ -2,16 +2,17 @@ import React from 'react';
import { useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { createSelector } from 'reselect';
import { fetchLists } from 'soapbox/actions/lists';
import Icon from 'soapbox/components/icon';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui';
import { CardHeader, CardTitle } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link';
import NewListForm from './components/new_list_form';
@ -66,9 +67,12 @@ const Lists: React.FC = () => {
scrollKey='lists'
emptyMessage={emptyMessage}
>
{lists.map((list: any) =>
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
)}
{lists.map((list: any) => (
<Link key={list.get('id')} to={`/list/${list.get('id')}`} className='flex items-center gap-1.5 p-2 my-2 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg'>
<Icon src={require('@tabler/icons/icons/list.svg')} fixedWidth />
{list.get('title')}
</Link>
))}
</ScrollableList>
</Column>
);

39
app/soapbox/features/ui/components/column_link.js
View file

@ -1,39 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { Link } from 'react-router-dom';
import Icon from 'soapbox/components/icon';
const ColumnLink = ({ icon, src, text, to, href, method, badge }) => {
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
if (href) {
return (
<a href={href} className='column-link' data-method={method}>
<Icon id={icon} src={src} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</a>
);
} else {
return (
<Link to={to} className='column-link'>
<Icon id={icon} src={src} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</Link>
);
}
};
ColumnLink.propTypes = {
icon: PropTypes.string,
src: PropTypes.string,
text: PropTypes.string.isRequired,
to: PropTypes.string,
href: PropTypes.string,
method: PropTypes.string,
badge: PropTypes.node,
};
export default ColumnLink;