mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'replace-icons' into 'develop' 

Replace LineAwesome with Tabler icons in some places

See merge request soapbox-pub/soapbox-fe!915
merge-requests/916/merge
Alex Gleason 2021-12-14 19:04:24 +00:00
rodzic 74d26b36ac efe74c3ddd
commit 1b7c0adc58
40 zmienionych plików z 110 dodań i 42 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
app/soapbox/components/domain.js
Wyświetl plik

@ -32,7 +32,7 @@ class Account extends ImmutablePureComponent {
</span>
<div className='domain__buttons'>
<IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
<IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
</div>
</div>
</div>

2
app/soapbox/features/admin/components/report.js
Wyświetl plik

@ -115,7 +115,7 @@ class Report extends ImmutablePureComponent {
<Button className='button-alternative' size={30} onClick={this.handleCloseReport}>
<FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
</Button>
<DropdownMenu items={menu} icon='ellipsis-v' size={24} direction='right' />
<DropdownMenu className='admin-report__dropdown' items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
</div>
</div>
);

2
app/soapbox/features/admin/components/report_status.js
Wyświetl plik

@ -119,7 +119,7 @@ class ReportStatus extends ImmutablePureComponent {
{media}
</div>
<div className='admin-report__status-actions'>
<DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
</div>
</div>
);

2
app/soapbox/features/aliases/components/account.js
Wyświetl plik

@ -65,7 +65,7 @@ class Account extends ImmutablePureComponent {
if (!added && accountId !== me) {
button = (
<div className='account__relationship'>
<IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
<IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
</div>
);
}

5
app/soapbox/features/chats/components/chat_box.js
Wyświetl plik

@ -158,7 +158,10 @@ class ChatBox extends ImmutablePureComponent {
{truncateFilename(attachment.preview_url, 20)}
</div>
<div class='chat-box__remove-attachment'>
<IconButton icon='remove' onClick={this.handleRemoveFile} />
<IconButton
src={require('@tabler/icons/icons/x.svg')}
onClick={this.handleRemoveFile}
/>
</div>
</div>
);

3
app/soapbox/features/chats/components/chat_message_list.js
Wyświetl plik

@ -296,8 +296,7 @@ class ChatMessageList extends ImmutablePureComponent {
<div className='chat-message__menu'>
<DropdownMenuContainer
items={menu}
icon='ellipsis-h'
size={18}
src={require('@tabler/icons/icons/dots.svg')}
direction='top'
title={intl.formatMessage(messages.more)}
/>

2
app/soapbox/features/compose/components/poll_form.js
Wyświetl plik

@ -109,7 +109,7 @@ class Option extends React.PureComponent {
</label>
<div className='poll__cancel'>
<IconButton title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
<IconButton title={intl.formatMessage(messages.remove_option)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleOptionRemove} />
</div>
</li>
);

4
app/soapbox/features/compose/components/reply_indicator.js
Wyświetl plik

@ -46,7 +46,9 @@ class ReplyIndicator extends ImmutablePureComponent {
return (
<div className='reply-indicator'>
<div className='reply-indicator__header'>
<div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted /></div>
<div className='reply-indicator__cancel'>
<IconButton title={intl.formatMessage(messages.cancel)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleClick} inverted />
</div>
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='reply-indicator__display-name'>
<div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>

2
app/soapbox/features/compose/components/schedule_form.js
Wyświetl plik

@ -115,7 +115,7 @@ class ScheduleForm extends React.Component {
ref={this.setRef}
/>
<div className='datepicker__cancel'>
<IconButton size={20} title={intl.formatMessage(messages.remove)} icon='times' onClick={this.handleRemove} />
<IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} />
</div>
</div>
</div>

4
app/soapbox/features/follow_requests/components/account_authorize.js
Wyświetl plik

@ -39,8 +39,8 @@ class AccountAuthorize extends ImmutablePureComponent {
</div>
<div className='account--panel'>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} /></div>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} /></div>
</div>
</div>
);

2
app/soapbox/features/groups/timeline/components/header.js
Wyświetl plik

@ -63,7 +63,7 @@ class Header extends ImmutablePureComponent {
},
];
return <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
return <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />;
}
render() {

4
app/soapbox/features/list_adder/components/list.js
Wyświetl plik

@ -45,9 +45,9 @@ class List extends ImmutablePureComponent {
let button;
if (added) {
button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
} else {
button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
}
return (

2
app/soapbox/features/list_adder/index.js
Wyświetl plik

@ -74,7 +74,7 @@ class ListAdder extends ImmutablePureComponent {
<h3 className='compose-modal__header__title'>
<FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />
</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<div className='compose-modal__content'>
<div className='list-adder'>

4
app/soapbox/features/list_editor/components/account.js
Wyświetl plik

@ -53,9 +53,9 @@ class Account extends ImmutablePureComponent {
let button;
if (added) {
button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
} else {
button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
}
return (

2
app/soapbox/features/list_editor/index.js
Wyświetl plik

@ -68,7 +68,7 @@ class ListEditor extends ImmutablePureComponent {
<h3 className='compose-modal__header__title'>
{intl.formatMessage(messages.editList)}
</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<div className='compose-modal__content'>
<div className='list-editor'>

2
app/soapbox/features/lists/index.js
Wyświetl plik

@ -71,7 +71,7 @@ class Lists extends ImmutablePureComponent {
emptyMessage={emptyMessage}
>
{lists.map(list =>
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />,
<ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
)}
</ScrollableList>
</Column>

4
app/soapbox/features/notifications/components/follow_request.js
Wyświetl plik

@ -48,8 +48,8 @@ class FollowRequest extends ImmutablePureComponent {
</Permalink>
<div className='account__relationship'>
<IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} />
<IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} />
<IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} />
<IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} />
</div>
</div>
</div>

2
app/soapbox/features/public_layout/components/header.js
Wyświetl plik

@ -88,7 +88,7 @@ class Header extends ImmutablePureComponent {
{ mfa_auth_needed &&
<div className='otp-form-overlay__container'>
<div className='otp-form-overlay__form'>
<IconButton className='otp-form-overlay__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
<IconButton className='otp-form-overlay__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
<OtpAuthForm mfa_token={mfa_token} />
</div>
</div>

2
app/soapbox/features/remote_timeline/index.js
Wyświetl plik

@ -87,7 +87,7 @@ class RemoteTimeline extends React.PureComponent {
<Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
<PinnedHostsPicker host={instance} />
{!pinned && <div className='timeline-filter-message'>
<IconButton icon='times' onClick={this.handleCloseClick} />
<IconButton src={require('@tabler/icons/icons/x.svg')} onClick={this.handleCloseClick} />
<FormattedMessage
id='remote_timeline.filter_message'
defaultMessage='You are viewing the timeline of {instance}.'

2
app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
Wyświetl plik

@ -47,7 +47,7 @@ class ScheduledStatusActionBar extends ImmutablePureComponent {
<IconButton
title={intl.formatMessage(messages.cancel)}
text={intl.formatMessage(messages.cancel)}
icon='times'
src={require('@tabler/icons/icons/x.svg')}
onClick={this.handleCancelClick}
/>
</div>

2
app/soapbox/features/status/components/action_bar.js
Wyświetl plik

@ -527,7 +527,7 @@ class ActionBar extends React.PureComponent {
className='emoji-picker-expand'
animate
title={intl.formatMessage(messages.emojiPickerExpand)}
icon='caret-down'
src={require('@tabler/icons/icons/caret-down.svg')}
onKeyUp={handleEmojiSelectorExpand}
onHover
/>

2
app/soapbox/features/ui/components/accordion.js
Wyświetl plik

@ -37,7 +37,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
<div className={classNames('accordion', { 'accordion--expanded': expanded })}>
{menu && (
<div className='accordion__menu'>
<DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
</div>
)}
<button

9
app/soapbox/features/ui/components/column_link.js
Wyświetl plik

@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Icon from 'soapbox/components/icon';
const ColumnLink = ({ icon, text, to, href, method, badge }) => {
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} fixedWidth className='column-link__icon' />
<Icon id={icon} src={src} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</a>
@ -17,7 +17,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
} else {
return (
<Link to={to} className='column-link'>
<Icon id={icon} fixedWidth className='column-link__icon' />
<Icon id={icon} src={src} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</Link>
@ -26,7 +26,8 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
};
ColumnLink.propTypes = {
icon: PropTypes.string.isRequired,
icon: PropTypes.string,
src: PropTypes.string,
text: PropTypes.string.isRequired,
to: PropTypes.string,
href: PropTypes.string,

2
app/soapbox/features/ui/components/hotkeys_modal.js
Wyświetl plik

@ -23,7 +23,7 @@ class HotkeysModal extends ImmutablePureComponent {
<div className='modal-root__modal hotkeys-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
</div>
<div className='compose-modal__content'>
<table>

2
app/soapbox/features/ui/components/instance_info_panel.js
Wyświetl plik

@ -73,7 +73,7 @@ class InstanceInfoPanel extends ImmutablePureComponent {
<span>{remoteInstance.get('host')}</span>
</span>
<div className='wtf-panel__menu'>
<DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
</div>
</div>
</div>

2
app/soapbox/features/ui/components/instance_moderation_panel.js
Wyświetl plik

@ -68,7 +68,7 @@ class InstanceModerationPanel extends ImmutablePureComponent {
<span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
</span>
{isAdmin && <div className='wtf-panel__menu'>
<DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
</div>}
</div>
<div className='wtf-panel__content'>

2
app/soapbox/features/ui/components/media_modal.js
Wyświetl plik

@ -271,7 +271,7 @@ class MediaModal extends ImmutablePureComponent {
</div>
<div className={navigationClassName}>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
{leftNav}
{rightNav}

2
app/soapbox/features/ui/components/report_modal.js
Wyświetl plik

@ -107,7 +107,7 @@ class ReportModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal report-modal'>
<div className='report-modal__target'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
</div>

2
app/soapbox/features/ui/components/unauthorized_modal.js
Wyświetl plik

@ -36,7 +36,7 @@ class UnauthorizedModal extends ImmutablePureComponent {
<div className='modal-root__modal compose-modal unauthorized-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'><FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} /></h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<div className='compose-modal__content'>
<div className='unauthorized-modal__content'>

5
app/styles/about.scss
Wyświetl plik

@ -690,6 +690,11 @@ $fluid-breakpoint: $maximum-width + 20px;
.otp-form-overlay__close {
align-self: flex-end;
.svg-icon {
height: 20px;
width: 20px;
}
}
}
}

5
app/styles/accounts.scss
Wyświetl plik

@ -456,6 +456,11 @@ a .account__avatar {
display: flex;
flex-direction: row;
padding: 10px 0;
&__button .svg-icon {
height: 20px;
width: 20px;
}
}
.account__section-headline {

7
app/styles/chats.scss
Wyświetl plik

@ -214,11 +214,18 @@
position: absolute;
top: -8px;
right: -8px;
height: 20px;
padding: 1px;
background: var(--background-color);
border-radius: 999px;
opacity: 0;
pointer-events: none;
transition: 0.2s;
.svg-icon {
height: 20px;
width: 20px;
}
}
}

9
app/styles/components/admin.scss
Wyświetl plik

@ -185,8 +185,10 @@
}
&__actions {
margin-left: auto;
display: flex;
align-items: center;
height: fit-content;
margin-left: auto;
.icon-button {
padding-left: 10px;
@ -195,6 +197,11 @@
display: flex;
align-items: center;
justify-content: center;
> .svg-icon {
height: 20px;
width: 20px;
}
}
}
}

14
app/styles/components/columns.scss
Wyświetl plik

@ -286,7 +286,8 @@
.column-link {
background: var(--brand-color--med);
color: var(--primary-text-color);
display: block;
display: flex;
align-items: center;
font-size: 16px;
padding: 15px;
text-decoration: none;
@ -318,7 +319,7 @@
}
}
.column-link__icon {
.svg-icon.column-link__icon {
display: inline-block;
margin-right: 5px;
}
@ -814,12 +815,19 @@
}
.timeline-filter-message {
display: flex;
align-items: center;
background-color: var(--brand-color--faint);
color: var(--primary-text-color);
padding: 15px 20px;
.icon-button {
margin-right: 8px;
margin: 2px 8px 2px 0;
.svg-icon {
height: 20px;
width: 20px;
}
}
}

5
app/styles/components/datepicker.scss
Wyświetl plik

@ -19,6 +19,11 @@
&__cancel {
padding-left: 10px;
.svg-icon {
height: 24px;
width: 24px;
}
}
&--error .react-datepicker__input-container {

4
app/styles/components/modal.scss
Wyświetl plik

@ -199,6 +199,8 @@
position: absolute;
right: 8px;
top: 8px;
height: 48px;
width: 48px;
z-index: 100;
color: #fff;
}
@ -693,6 +695,8 @@
.media-modal__close {
top: 19px;
right: 15px;
height: 20px;
width: 20px;
}
}

6
app/styles/components/reply-indicator.scss
Wyświetl plik

@ -18,7 +18,11 @@
.reply-indicator__cancel {
float: right;
line-height: 24px;
.svg-icon {
height: 20px;
width: 20px;
}
}
.reply-indicator__display-name {

4
app/styles/components/wtf-panel.scss
Wyświetl plik

@ -159,6 +159,10 @@
&__menu {
margin-left: auto;
> div {
height: 18px;
}
}
}

9
app/styles/polls.scss
Wyświetl plik

@ -167,6 +167,15 @@
margin-right: 10px;
font-size: 14px;
}
&__cancel {
height: 20px;
.svg-icon {
height: 20px;
width: 20px;
}
}
}
.compose-form__poll-wrapper {

5
app/styles/ui.scss
Wyświetl plik

@ -239,6 +239,11 @@
font-size: 14px;
font-weight: 500;
}
&__buttons .svg-icon {
height: 18px;
width: 18px;
}
}
.domain__wrapper {