kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'icons' into 'develop'
I don't think it makes sense to have SvgIcon and ForkAwesomeIcon in a single component anymore See merge request soapbox-pub/soapbox!2139environments/review-develop-3zknud/deployments/2211
marcin mikołajczak
commit
5131655e94
|
|
@ -90,7 +90,7 @@ const IconButton: React.FC<IIconButton> = ({
|
|||
type='button'
|
||||
>
|
||||
<div>
|
||||
<Icon className={iconClassName} src={src} fixedWidth aria-hidden='true' />
|
||||
<Icon className={iconClassName} src={src} aria-hidden='true' />
|
||||
</div>
|
||||
{text && <span className='icon-button__text'>{text}</span>}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
/**
|
||||
* Icon: abstract icon class that can render icons from multiple sets.
|
||||
* Icon: abstact component to render SVG icons.
|
||||
* @module soapbox/components/icon
|
||||
* @see soapbox/components/fork_awesome_icon
|
||||
* @see soapbox/components/svg_icon
|
||||
*/
|
||||
|
||||
import classNames from 'clsx';
|
||||
import React from 'react';
|
||||
import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
|
||||
|
||||
import ForkAwesomeIcon, { IForkAwesomeIcon } from './fork-awesome-icon';
|
||||
import SvgIcon, { ISvgIcon } from './svg-icon';
|
||||
export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
|
||||
src: string,
|
||||
id?: string,
|
||||
alt?: string,
|
||||
className?: string,
|
||||
}
|
||||
|
||||
export type IIcon = IForkAwesomeIcon | ISvgIcon;
|
||||
|
||||
const Icon: React.FC<IIcon> = (props) => {
|
||||
if ((props as ISvgIcon).src) {
|
||||
const { src, ...rest } = (props as ISvgIcon);
|
||||
|
||||
return <SvgIcon src={src} {...rest} />;
|
||||
} else {
|
||||
const { id, fixedWidth, ...rest } = (props as IForkAwesomeIcon);
|
||||
|
||||
return <ForkAwesomeIcon id={id} fixedWidth={fixedWidth} {...rest} />;
|
||||
}
|
||||
const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('svg-icon', className)}
|
||||
{...rest}
|
||||
>
|
||||
<InlineSVG src={src} title={alt} loader={<></>} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ interface IReadMoreButton {
|
|||
const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
|
||||
<button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
|
||||
<FormattedMessage id='status.read_more' defaultMessage='Read more' />
|
||||
<Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
|
||||
<Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} />
|
||||
</button>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* SvgIcon: abstact component to render SVG icons.
|
||||
* @module soapbox/components/svg_icon
|
||||
* @see soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'clsx';
|
||||
import React from 'react';
|
||||
import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
|
||||
|
||||
export interface ISvgIcon extends React.HTMLAttributes<HTMLDivElement> {
|
||||
src: string,
|
||||
id?: string,
|
||||
alt?: string,
|
||||
className?: string,
|
||||
}
|
||||
|
||||
const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, className, ...rest }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('svg-icon', className)}
|
||||
{...rest}
|
||||
>
|
||||
<InlineSVG src={src} title={alt} loader={<></>} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SvgIcon;
|
||||
|
|
@ -37,7 +37,7 @@ const List: React.FC<IList> = ({ listId }) => {
|
|||
|
||||
return (
|
||||
<div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
|
||||
<Icon src={require('@tabler/icons/list.svg')} fixedWidth />
|
||||
<Icon src={require('@tabler/icons/list.svg')} />
|
||||
<span className='flex-grow'>
|
||||
{list.title}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const Lists: React.FC = () => {
|
|||
>
|
||||
{lists.map((list: any) => (
|
||||
<Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg'>
|
||||
<Icon src={require('@tabler/icons/list.svg')} fixedWidth />
|
||||
<Icon src={require('@tabler/icons/list.svg')} />
|
||||
<span className='flex-grow'>
|
||||
{list.title}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
|
|||
// @ts-ignore
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
|
||||
|
||||
import IconPickerMenu from './icon-picker-menu';
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji
|
|||
onKeyDown={onToggle}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Icon id={value} />
|
||||
<ForkAwesomeIcon id={value} />
|
||||
</div>
|
||||
|
||||
<Overlay show={active} placement={placement} target={target.current}>
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { fetchLists } from 'soapbox/actions/lists';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import type { List as ImmutableList } from 'immutable';
|
||||
import type { RootState } from 'soapbox/store';
|
||||
import type { List as ListEntity } from 'soapbox/types/entities';
|
||||
|
||||
const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
|
||||
if (!lists) {
|
||||
return lists;
|
||||
}
|
||||
|
||||
return lists.toList().filter(item => !!item).sort((a, b) => (a as ListEntity).title.localeCompare((b as ListEntity).title)).take(4) as ImmutableList<ListEntity>;
|
||||
});
|
||||
|
||||
const ListPanel = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const lists = useAppSelector((state) => getOrderedLists(state));
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchLists());
|
||||
}, []);
|
||||
|
||||
if (!lists || lists.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<hr />
|
||||
|
||||
{lists.map(list => (
|
||||
<NavLink key={list.id} className='column-link column-link--transparent' strict to={`/list/${list.id}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.title}</NavLink>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListPanel;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
|
||||
import { Widget, Stack, Text } from 'soapbox/components/ui';
|
||||
import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks';
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
|
|||
{promoItems.map((item, i) => (
|
||||
<Text key={i}>
|
||||
<a className='flex items-center' href={item.url} target='_blank'>
|
||||
<Icon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
|
||||
<ForkAwesomeIcon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
|
||||
{item.textLocales.get(locale) || item.text}
|
||||
</a>
|
||||
</Text>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue