chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 4 Wiki Activity

Keep the status action buttons at their position regardless of the counter size (#32084)

Browse source 
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput 2024-09-25 16:33:58 +02:00 committed by GitHub
parent 51777fe3e2
commit 739ad0eed2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/javascript/mastodon/components/status_action_bar.jsx
View file

@ -375,20 +375,29 @@ class StatusActionBar extends ImmutablePureComponent {
return ( return (
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} /> <div className='status__action-bar__button-wrapper'>
<IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} /> <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
<IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} /> </div>
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} /> <div className='status__action-bar__button-wrapper'>
<IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
<DropdownMenuContainer </div>
scrollKey={scrollKey} <div className='status__action-bar__button-wrapper'>
status={status} <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
items={menu} </div>
icon='ellipsis-h' <div className='status__action-bar__button-wrapper'>
iconComponent={MoreHorizIcon} <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
direction='right' </div>
title={intl.formatMessage(messages.more)} <div className='status__action-bar__button-wrapper'>
/> <DropdownMenuContainer
scrollKey={scrollKey}
status={status}
items={menu}
icon='ellipsis-h'
iconComponent={MoreHorizIcon}
direction='right'
title={intl.formatMessage(messages.more)}
/>
</div>
</div> </div>
); );
} }

13
app/javascript/styles/mastodon/components.scss
View file

@ -299,6 +299,10 @@
} }
} }
&--with-counter {
padding-inline-end: 4px;
}
&__counter { &__counter {
display: block; display: block;
width: auto; width: auto;
@ -1465,6 +1469,15 @@ body > [data-popper-placement] {
} }
} }
&__action-bar__button-wrapper {
flex-basis: 0;
flex-grow: 1;
&:last-child {
flex-grow: 0;
}
}
&--first-in-thread { &--first-in-thread {
border-top: 1px solid var(--background-border-color); border-top: 1px solid var(--background-border-color);
} }