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

Merge branch 'icons' into 'develop'

Browse source 
Replace LineAwesome with Tabler in some places

See merge request soapbox-pub/soapbox-fe!1683
This commit is contained in:
marcin mikołajczak 2022-07-26 14:07:53 +00:00
commit fa8f4b7a2a
14 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/load_gap.tsx
View file

@ -20,7 +20,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
return (
<button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
<Icon id='ellipsis-h' />
<Icon src={require('@tabler/icons/dots.svg')} />
</button>
);
};

2
app/soapbox/components/media_gallery.js
View file

@ -215,7 +215,7 @@ class Item extends React.PureComponent {
alt={attachment.get('description')}
title={attachment.get('description')}
>
<span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
<span className='media-gallery__file-extension__label'>{ext}</span>
</a>
);

2
app/soapbox/components/status_content.tsx
View file

@ -30,7 +30,7 @@ interface IReadMoreButton {
const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
<button className='status__content__read-more-button' onClick={onClick}>
<FormattedMessage id='status.read_more' defaultMessage='Read more' />
<Icon id='angle-right' fixedWidth />
<Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
</button>
);

4
app/soapbox/features/account_gallery/components/media_item.js
View file

@ -125,7 +125,7 @@ class MediaItem extends ImmutablePureComponent {
const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
thumbnail = (
<div className='media-gallery__item-thumbnail'>
<span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
<span className='media-gallery__file-extension__label'>{fileExtension}</span>
</div>
);
@ -134,7 +134,7 @@ class MediaItem extends ImmutablePureComponent {
if (!visible) {
icon = (
<span className='account-gallery__item__icons'>
<Icon id='eye-slash' />
<Icon src={require('@tabler/icons/eye-off.svg')} />
</span>
);
}

2
app/soapbox/features/aliases/index.tsx
View file

@ -84,7 +84,7 @@ const Aliases = () => {
<Text tag='span'>{alias}</Text>
</div>
<div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='pr-1.5 text-lg' id='times' />
<Icon className='mr-1.5' src={require('@tabler/icons/x.svg')} />
<Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
</div>
</HStack>

8
app/soapbox/features/compose/components/upload.tsx
View file

@ -13,8 +13,8 @@ import Motion from '../../ui/util/optional_motion';
import type { Map as ImmutableMap } from 'immutable';
const bookIcon = require('@tabler/icons/book.svg');
const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg');
const fileCodeIcon = require('@tabler/icons/file-code.svg');
const fileSpreadsheetIcon = require('@tabler/icons/file-spreadsheet.svg');
const fileTextIcon = require('@tabler/icons/file-text.svg');
const fileZipIcon = require('@tabler/icons/file-zip.svg');
const defaultIcon = require('@tabler/icons/paperclip.svg');
@ -39,9 +39,9 @@ export const MIMETYPE_ICONS: Record<string, string> = {
'application/xhtml+xml': fileCodeIcon,
'application/xml': fileCodeIcon,
'application/epub+zip': bookIcon,
'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
'application/vnd.ms-excel': fileAnalyticsIcon,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
'application/vnd.oasis.opendocument.spreadsheet': fileSpreadsheetIcon,
'application/vnd.ms-excel': fileSpreadsheetIcon,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileSpreadsheetIcon,
'application/pdf': fileTextIcon,
'application/vnd.oasis.opendocument.presentation': presentationIcon,
'application/vnd.ms-powerpoint': presentationIcon,

6
app/soapbox/features/federation_restrictions/components/instance_restrictions.js
View file

@ -95,7 +95,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (!fullMediaRemoval && media_nsfw) {
items.push((
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
<Icon id='eye-slash' />
<Icon src={require('@tabler/icons/eye-off.svg')} />
<FormattedMessage
id='federation_restriction.media_nsfw'
defaultMessage='Attachments marked NSFW'
@ -117,7 +117,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (remoteInstance.getIn(['federation', 'reject']) === true) {
return (
<Text className='flex items-center gap-2' theme='muted'>
<Icon id='times' />
<Icon src={require('@tabler/icons/x.svg')} />
<FormattedMessage
id='remote_instance.federation_panel.restricted_message'
defaultMessage='{siteTitle} blocks all activities from {host}.'
@ -141,7 +141,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
} else {
return (
<Text className='flex items-center gap-2' theme='muted'>
<Icon id='check' />
<Icon src={require('@tabler/icons/check.svg')} />
<FormattedMessage
id='remote_instance.federation_panel.no_restrictions_message'
defaultMessage='{siteTitle} has placed no restrictions on {host}.'

2
app/soapbox/features/filters/index.tsx
View file

@ -216,7 +216,7 @@ const Filters = () => {
</div>
</div>
<div className='filter__delete' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={filter.id} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='filter__delete-icon' id='times' />
<Icon className='filter__delete-icon' src={require('@tabler/icons/x.svg')} />
<span className='filter__delete-label'><FormattedMessage id='filters.filters_list_delete' defaultMessage='Delete' /></span>
</div>
</div>

2
app/soapbox/features/ui/components/boost_modal.tsx
View file

@ -38,7 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
<ReplyIndicator status={status} hideActions />
<Text>
<FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} />
<FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/repeat.svg')} /></span> }} />
</Text>
</Stack>
</Modal>

5
app/styles/accounts.scss
View file

@ -178,7 +178,10 @@ a .account__avatar {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
.svg-icon {
@apply h-6 w-6;
}
}
}

4
app/styles/components/filters.scss
View file

@ -87,14 +87,14 @@
}
.filter__delete {
@apply flex items-baseline h-5 m-2.5 cursor-pointer;
@apply flex items-center h-5 m-2.5 cursor-pointer;
span.filter__delete-label {
@apply text-gray-500 dark:text-gray-400 font-semibold;
}
.filter__delete-icon {
@apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400;
@apply mx-1 text-gray-500 dark:text-gray-400;
}
}
}

9
app/styles/components/media-gallery.scss
View file

@ -23,7 +23,10 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
.svg-icon {
@apply h-24 w-24;
}
}
&-overflow {
@ -207,8 +210,8 @@ $media-compact-size: 50px;
font-size: 20px;
}
&__icons {
font-size: 30px;
&__icons .svg-icon {
@apply h-8 w-8;
}
}

2
app/styles/components/status.scss
View file

@ -109,7 +109,7 @@
}
.status__content__read-more-button {
@apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
@apply flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
}
.status-link {

9
app/styles/loading.scss
View file

@ -132,20 +132,19 @@
color: var(--primary-text-color);
background-color: transparent;
border: 0;
font-size: inherit;
text-align: center;
line-height: inherit;
margin: 0;
padding: 15px;
box-sizing: border-box;
width: 100%;
clear: both;
text-decoration: none;
&:hover,
&:focus {
background: var(--brand-color--faint);
}
.svg-icon {
@apply mx-auto;
}
}
.load-gap {