Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 16:59:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change icons in web UI

Browse Source 
Port 134de736dc to glitch-soc

Co-authored-by: Renaud Chaput <renchap@gmail.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2023-10-24 19:45:08 +02:00
committed by Claire
parent 5f8618443c
commit d54414866c
145 changed files with 1068 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
View File

@@ -5,6 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
import { preferencesLink, profileLink } from 'flavours/glitch/utils/backend_links';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
@@ -62,7 +64,7 @@ class ActionBar extends PureComponent {
return (
<div className='compose__action-bar'>
<div className='compose__action-bar-dropdown'>
<DropdownMenuContainer items={menu} icon='bars' size={18} direction='right' />
<DropdownMenuContainer items={menu} icon='bars' iconComponent={MenuIcon} size={24} direction='right' />
</div>
</div>
);

42
app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
View File

@@ -18,8 +18,10 @@ export default class ComposerOptionsDropdown extends PureComponent {
isUserTouching: PropTypes.func,
disabled: PropTypes.bool,
icon: PropTypes.string,
iconComponent: PropTypes.func,
items: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.string,
iconComponent: PropTypes.func,
meta: PropTypes.string,
name: PropTypes.string.isRequired,
text: PropTypes.string,
@@ -174,6 +176,7 @@ export default class ComposerOptionsDropdown extends PureComponent {
disabled,
title,
icon,
iconComponent,
items,
onChange,
value,
@@ -183,33 +186,30 @@ export default class ComposerOptionsDropdown extends PureComponent {
} = this.props;
const { open, placement } = this.state;
const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1));
return (
<div
className={classNames('privacy-dropdown', placement, { active: open })}
onKeyDown={this.handleKeyDown}
ref={this.setTargetRef}
>
<div className={classNames('privacy-dropdown__value', { active })}>
<IconButton
active={open}
className='privacy-dropdown__value-icon'
disabled={disabled}
icon={icon}
inverted
onClick={this.handleToggle}
onMouseDown={this.handleMouseDown}
onKeyDown={this.handleButtonKeyDown}
onKeyPress={this.handleKeyPress}
size={18}
style={{
height: null,
lineHeight: '27px',
}}
title={title}
/>
</div>
<IconButton
active={open}
className='privacy-dropdown__value-icon'
disabled={disabled}
icon={icon}
iconComponent={iconComponent}
inverted
onClick={this.handleToggle}
onMouseDown={this.handleMouseDown}
onKeyDown={this.handleButtonKeyDown}
onKeyPress={this.handleKeyPress}
size={18}
style={{
height: null,
lineHeight: '27px',
}}
title={title}
/>
<Overlay
containerPadding={20}

5
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
View File

@@ -17,6 +17,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
static propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.string,
iconComponent: PropTypes.func,
meta: PropTypes.node,
name: PropTypes.string.isRequired,
text: PropTypes.node,
@@ -144,7 +145,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
};
renderItem = (item, i) => {
const { name, icon, meta, text } = item;
const { name, icon, iconComponent, meta, text } = item;
const active = (name === (this.props.value || this.state.value));
@@ -155,7 +156,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
if (!contents) {
contents = (
<>
{icon && <Icon className='icon' fixedWidth id={icon} />}
{icon && <Icon className='icon' id={icon} icon={iconComponent} />}
<div className='privacy-dropdown__option__content'>
<strong>{text}</strong>

29
app/javascript/flavours/glitch/features/compose/components/header.jsx
View File

@@ -7,6 +7,14 @@ import { Link } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
import { ReactComponent as LogoutIcon } from '@material-symbols/svg-600/outlined/logout.svg';
import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg';
import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
import { Icon } from 'flavours/glitch/components/icon';
import { signOutLink } from 'flavours/glitch/utils/backend_links';
import { conditionalRender } from 'flavours/glitch/utils/react_helpers';
@@ -79,22 +87,25 @@ class Header extends ImmutablePureComponent {
aria-label={intl.formatMessage(messages.start)}
title={intl.formatMessage(messages.start)}
to='/getting-started'
><Icon id='asterisk' /></Link>
className='drawer__tab'
><Icon id='bars' icon={MenuIcon} /></Link>
{renderForColumn('HOME', (
<Link
aria-label={intl.formatMessage(messages.home_timeline)}
title={intl.formatMessage(messages.home_timeline)}
to='/home'
><Icon id='home' /></Link>
className='drawer__tab'
><Icon id='home' icon={HomeIcon} /></Link>
))}
{renderForColumn('NOTIFICATIONS', (
<Link
aria-label={intl.formatMessage(messages.notifications)}
title={intl.formatMessage(messages.notifications)}
to='/notifications'
className='drawer__tab'
>
<span className='icon-badge-wrapper'>
<Icon id='bell' />
<Icon id='bell' icon={NotificationsIcon} />
{ showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
</span>
</Link>
@@ -104,27 +115,31 @@ class Header extends ImmutablePureComponent {
aria-label={intl.formatMessage(messages.community)}
title={intl.formatMessage(messages.community)}
to='/public/local'
><Icon id='users' /></Link>
className='drawer__tab'
><Icon id='users' icon={PeopleIcon} /></Link>
))}
{renderForColumn('PUBLIC', (
<Link
aria-label={intl.formatMessage(messages.public)}
title={intl.formatMessage(messages.public)}
to='/public'
><Icon id='globe' /></Link>
className='drawer__tab'
><Icon id='globe' icon={PublicIcon} /></Link>
))}
<a
aria-label={intl.formatMessage(messages.settings)}
onClick={onSettingsClick}
href='/settings/preferences'
title={intl.formatMessage(messages.settings)}
><Icon id='cogs' /></a>
className='drawer__tab'
><Icon id='cogs' icon={ManufacturingIcon} /></a>
<a
aria-label={intl.formatMessage(messages.logout)}
onClick={this.handleLogoutClick}
href={signOutLink}
title={intl.formatMessage(messages.logout)}
><Icon id='sign-out' /></a>
className='drawer__tab'
><Icon id='sign-out' icon={LogoutIcon} /></a>
</nav>
);
}

18
app/javascript/flavours/glitch/features/compose/components/options.jsx
View File

@@ -6,6 +6,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { ReactComponent as AttachFileIcon } from '@material-symbols/svg-600/outlined/attach_file.svg';
import { ReactComponent as BrushIcon } from '@material-symbols/svg-600/outlined/brush.svg';
import { ReactComponent as CodeIcon } from '@material-symbols/svg-600/outlined/code.svg';
import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description.svg';
import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
import { ReactComponent as MarkdownIcon } from '@material-symbols/svg-600/outlined/markdown.svg';
import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
import Toggle from 'react-toggle';
import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -195,16 +203,19 @@ class ComposerOptions extends ImmutablePureComponent {
const contentTypeItems = {
plain: {
icon: 'file-text',
iconComponent: DescriptionIcon,
name: 'text/plain',
text: formatMessage(messages.plain),
},
html: {
icon: 'code',
iconComponent: CodeIcon,
name: 'text/html',
text: formatMessage(messages.html),
},
markdown: {
icon: 'arrow-circle-down',
iconComponent: MarkdownIcon,
name: 'text/markdown',
text: formatMessage(messages.markdown),
},
@@ -226,14 +237,17 @@ class ComposerOptions extends ImmutablePureComponent {
<DropdownContainer
disabled={disabled || !allowMedia}
icon='paperclip'
iconComponent={AttachFileIcon}
items={[
{
icon: 'cloud-upload',
iconComponent: UploadFileIcon,
name: 'upload',
text: formatMessage(messages.upload),
},
{
icon: 'paint-brush',
iconComponent: BrushIcon,
name: 'doodle',
text: formatMessage(messages.doodle),
},
@@ -246,6 +260,7 @@ class ComposerOptions extends ImmutablePureComponent {
active={hasPoll}
disabled={disabled || !allowPoll}
icon='tasks'
iconComponent={InsertChartIcon}
inverted
onClick={onTogglePoll}
size={18}
@@ -256,12 +271,12 @@ class ComposerOptions extends ImmutablePureComponent {
title={formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)}
/>
)}
<hr />
<PrivacyDropdownContainer disabled={disabled || isEditing} />
{showContentTypeChoice && (
<DropdownContainer
disabled={disabled}
icon={(contentTypeItems[contentType.split('/')[1]] || {}).icon}
iconComponent={(contentTypeItems[contentType.split('/')[1]] || {}).iconComponent}
items={[
contentTypeItems.plain,
contentTypeItems.html,
@@ -285,6 +300,7 @@ class ComposerOptions extends ImmutablePureComponent {
<DropdownContainer
disabled={disabled || isEditing}
icon='ellipsis-h'
iconComponent={MoreHorizIcon}
items={advancedOptions ? [
{
meta: formatMessage(messages.local_only_long),

7
app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
View File

@@ -8,6 +8,9 @@ import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -87,7 +90,7 @@ class OptionIntl extends PureComponent {
</label>
<div className='poll__cancel'>
<IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
<IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' iconComponent={CloseIcon} onClick={this.handleOptionRemove} />
</div>
</li>
);
@@ -143,7 +146,7 @@ class PollForm extends ImmutablePureComponent {
{options.size < pollLimits.max_options && (
<label className='poll__text editable'>
<span className={classNames('poll__input')} style={{ opacity: 0 }} />
<button className='button button-secondary' onClick={this.handleAddOption} type='button'><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
<button className='button button-secondary' onClick={this.handleAddOption} type='button'><Icon id='plus' icon={AddIcon} /> <FormattedMessage {...messages.add_option} /></button>
</label>
)}
</ul>

10
app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
View File

@@ -3,6 +3,11 @@ import { PureComponent } from 'react';
import { injectIntl, defineMessages } from 'react-intl';
import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
import Dropdown from './dropdown';
const messages = defineMessages({
@@ -39,24 +44,28 @@ class PrivacyDropdown extends PureComponent {
const privacyItems = {
direct: {
icon: 'envelope',
iconComponent: MailIcon,
meta: formatMessage(messages.direct_long),
name: 'direct',
text: formatMessage(messages.direct_short),
},
private: {
icon: 'lock',
iconComponent: LockIcon,
meta: formatMessage(messages.private_long),
name: 'private',
text: formatMessage(messages.private_short),
},
public: {
icon: 'globe',
iconComponent: PublicIcon,
meta: formatMessage(messages.public_long),
name: 'public',
text: formatMessage(messages.public_short),
},
unlisted: {
icon: 'unlock',
iconComponent: LockOpenIcon,
meta: formatMessage(messages.unlisted_long),
name: 'unlisted',
text: formatMessage(messages.unlisted_short),
@@ -73,6 +82,7 @@ class PrivacyDropdown extends PureComponent {
<Dropdown
disabled={disabled}
icon={(privacyItems[value] || {}).icon}
iconComponent={(privacyItems[value] || {}).iconComponent}
items={items}
onChange={onChange}
isUserTouching={isUserTouching}

30
app/javascript/flavours/glitch/features/compose/components/publisher.jsx
View File

@@ -4,6 +4,11 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
@@ -37,16 +42,33 @@ class Publisher extends ImmutablePureComponent {
render () {
const { disabled, intl, onSecondarySubmit, privacy, sideArm, isEditing } = this.props;
const privacyIcons = { direct: 'envelope', private: 'lock', public: 'globe', unlisted: 'unlock' };
const privacyIcons = {
direct: {
id: 'envelope',
icon: MailIcon,
},
private: {
id: 'lock',
icon: LockIcon,
},
public: {
id: 'globe',
icon: PublicIcon,
},
unlisted: {
id: 'unlock',
icon: LockOpenIcon,
},
};
let publishText;
if (isEditing) {
publishText = intl.formatMessage(messages.saveChanges);
} else if (privacy === 'private' || privacy === 'direct') {
const iconId = privacyIcons[privacy];
const icon = privacyIcons[privacy];
publishText = (
<span>
<Icon id={iconId} /> {intl.formatMessage(messages.publish)}
<Icon {...icon} /> {intl.formatMessage(messages.publish)}
</span>
);
} else {
@@ -69,7 +91,7 @@ class Publisher extends ImmutablePureComponent {
disabled={disabled}
onClick={onSecondarySubmit}
style={{ padding: null }}
text={<Icon id={privacyIcons[sideArm]} />}
text={<Icon {...privacyIcons[sideArm]} />}
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
/>
</div>

4
app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
View File

@@ -5,6 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
@@ -48,7 +50,7 @@ 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)} icon='times' iconComponent={CloseIcon} onClick={this.handleClick} inverted /></div>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' target='_blank' rel='noopener noreferrer'>
<div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>

10
app/javascript/flavours/glitch/features/compose/components/search.jsx
View File

@@ -8,6 +8,10 @@ import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
import { Icon } from 'flavours/glitch/components/icon';
import { domain, searchEnabled } from 'flavours/glitch/initial_state';
import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags';
@@ -333,8 +337,8 @@ class Search extends PureComponent {
/>
<div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
<Icon id='search' className={hasValue ? '' : 'active'} />
<Icon id='times-circle' className={hasValue ? 'active' : ''} />
<Icon id='search' icon={SearchIcon} className={hasValue ? '' : 'active'} />
<Icon id='times-circle' icon={CancelIcon} className={hasValue ? 'active' : ''} />
</div>
<div className='search__popout'>
@@ -346,7 +350,7 @@ class Search extends PureComponent {
{recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => (
<button key={label} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
<span>{label}</span>
<button className='icon-button' onMouseDown={forget}><Icon id='times' /></button>
<button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
</button>
)) : (
<div className='search__popout__menu__message'>

13
app/javascript/flavours/glitch/features/compose/components/search_results.jsx
View File

@@ -5,6 +5,11 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg';
import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
import { Icon } from 'flavours/glitch/components/icon';
import { LoadMore } from 'flavours/glitch/components/load_more';
import { SearchSection } from 'flavours/glitch/features/explore/components/search_section';
@@ -44,7 +49,7 @@ class SearchResults extends ImmutablePureComponent {
if (results.get('accounts') && results.get('accounts').size > 0) {
accounts = (
<SearchSection title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
<SearchSection title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
{withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
{(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
</SearchSection>
@@ -53,7 +58,7 @@ class SearchResults extends ImmutablePureComponent {
if (results.get('hashtags') && results.get('hashtags').size > 0) {
hashtags = (
<SearchSection title={<><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
<SearchSection title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
{withoutLastResult(results.get('hashtags')).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
{(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
</SearchSection>
@@ -62,7 +67,7 @@ class SearchResults extends ImmutablePureComponent {
if (results.get('statuses') && results.get('statuses').size > 0) {
statuses = (
<SearchSection title={<><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
<SearchSection title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
{withoutLastResult(results.get('statuses')).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
{(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
</SearchSection>
@@ -73,7 +78,7 @@ class SearchResults extends ImmutablePureComponent {
return (
<div className='drawer--results'>
<header className='search-results__header'>
<Icon id='search' fixedWidth />
<Icon id='search' icon={SearchIcon} />
<FormattedMessage id='explore.search_results' defaultMessage='Search results' />
</header>

9
app/javascript/flavours/glitch/features/compose/components/upload.jsx
View File

@@ -5,6 +5,9 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
import spring from 'react-motion/lib/spring';
import { Icon } from 'flavours/glitch/components/icon';
@@ -47,13 +50,13 @@ export default class Upload extends ImmutablePureComponent {
{({ scale }) => (
<div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
<div className='compose-form__upload__actions'>
<button type='button' className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
<button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
<button type='button' className='icon-button' onClick={this.handleUndoClick}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
<button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
</div>
{(media.get('description') || '').length === 0 && (
<div className='compose-form__upload__warning'>
<button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
<button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
</div>
)}
</div>

3
app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
View File

@@ -3,6 +3,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
import spring from 'react-motion/lib/spring';
import { Icon } from 'flavours/glitch/components/icon';
@@ -35,7 +36,7 @@ export default class UploadProgress extends PureComponent {
return (
<div className='upload-progress'>
<div className='upload-progress__icon'>
<Icon id='upload' />
<Icon id='upload' icon={UploadFileIcon} />
</div>
<div className='upload-progress__message'>