Dome/Masto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feature] add SVG icons

Browse Source
This commit is contained in:
Zoë Bijl
2025-10-01 23:48:22 +02:00
parent b62c1f4fc6
commit 5a6fd18ec2
4 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
+8 -8
View File
@@ -174,11 +174,11 @@ class Footer extends ImmutablePureComponent {
let replyIcon, replyTitle;
if (status.get("in_reply_to_id", null) === null) {
replyIcon = "reply";
if (status.get('in_reply_to_id', null) === null) {
replyIcon = 'arrow-bend-up-left';
replyTitle = intl.formatMessage(messages.reply);
} else {
replyIcon = "reply-all";
replyIcon = 'arrow-bend-double-up-left';
replyTitle = intl.formatMessage(messages.replyAll);
}
@@ -197,7 +197,7 @@ class Footer extends ImmutablePureComponent {
let replyButton = null;
if (showReplyCount) {
replyButton = (
<IconButton
<IconSVGButton
className='status__action-bar-button'
title={replyTitle}
icon={status.get("in_reply_to_account_id") === status.getIn(["account", "id"]) ? "reply" : replyIcon}
@@ -208,7 +208,7 @@ class Footer extends ImmutablePureComponent {
);
} else {
replyButton = (
<IconButton
<IconSVGButton
className='status__action-bar-button'
title={replyTitle}
icon={status.get("in_reply_to_account_id") === status.getIn(["account", "id"]) ? "reply" : replyIcon}
@@ -220,9 +220,9 @@ class Footer extends ImmutablePureComponent {
return (
<div className='picture-in-picture__footer'>
{replyButton}
<IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='rocket-launch' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
{withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={status.get('url')} />}
<IconSVGButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='rocket-launch' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
<IconSVGButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
{withOpenButton && <IconSVGButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='arrow-square-out' onClick={this.handleOpenClick} href={status.get('url')} />}
</div>
);
}
app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
+1 -1
View File
@@ -42,7 +42,7 @@ class Header extends ImmutablePureComponent {
<DisplayName account={account} />
</Link>
<IconButton icon='times' onClick={onClose} title={intl.formatMessage(messages.close)} />
<IconSVGButton icon='x' onClick={onClose} title={intl.formatMessage(messages.close)} />
</div>
);
}
app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
+4 -2
View File
@@ -420,12 +420,14 @@ class ZoomableImage extends PureComponent {
const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? "media-modal__zoom-button--hidden" : "";
const zoomButtonTitle = this.state.zoomState === "compress" ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
const zoomButtonIcon = this.state.zoomState === 'compress' ? 'arrows-in-simple' : 'arrows-out-simple';
return (
<>
<IconButton
<IconSVGButton
className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
title={zoomButtonTitle}
icon={this.state.zoomState}
icon={zoomButtonIcon}
onClick={this.handleZoomClick}
size={40}
style={{
public/icons.svg
+3
View File
@@ -243,4 +243,7 @@
<path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"></path>
<path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path>
</symbol>
<symbol id="arrow-square-out" fill="currentcolor" viewBox="0 0 256 256"><path d="M184,80V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H176A8,8,0,0,1,184,80Z" opacity="0.2"></path><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></symbol>
<symbol id="arrows-out-simple" fill="currentcolor" viewBox="0 0 256 256"><path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"></path></symbol>
<symbol id="arrows-in-simple" fill="currentcolor" viewBox="0 0 256 256"><path d="M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z"></path></symbol>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 39 KiB