mirrors/catstodon
1
0
Fork 0
mirror of https://git.kescher.at/CatCatNya/catstodon.git synced 2024-11-22 12:58:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Glitch] Keep the status action buttons at their position regardless of the counter size

Browse source 
Port 739ad0eed2 to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput 2024-09-25 16:33:58 +02:00 committed by Claire
parent 5716ebf390
commit 0b1310feb3
2 changed files with 48 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
app/javascript/flavours/glitch/components/status_action_bar.jsx
View file

@ -315,36 +315,48 @@ class StatusActionBar extends ImmutablePureComponent {
} }
const filterButton = this.props.onFilter && ( const filterButton = this.props.onFilter && (
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} /> <div className='status__action-bar__button-wrapper'>
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
</div>
); );
return ( return (
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton <div className='status__action-bar__button-wrapper'>
className='status__action-bar-button' <IconButton
title={replyTitle} className='status__action-bar-button'
icon={replyIcon} title={replyTitle}
iconComponent={replyIconComponent} icon={replyIcon}
onClick={this.handleReplyClick} iconComponent={replyIconComponent}
counter={showReplyCount ? status.get('replies_count') : undefined} onClick={this.handleReplyClick}
obfuscateCount counter={showReplyCount ? status.get('replies_count') : undefined}
/> obfuscateCount
<IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} /> />
<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={reblogIcon} iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
</div>
<div className='status__action-bar__button-wrapper'>
<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>
<div className='status__action-bar__button-wrapper'>
<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>
{filterButton} {filterButton}
<DropdownMenuContainer <div className='status__action-bar__button-wrapper'>
scrollKey={scrollKey} <DropdownMenuContainer
status={status} scrollKey={scrollKey}
items={menu} status={status}
icon='ellipsis-h' items={menu}
size={18} icon='ellipsis-h'
iconComponent={MoreHorizIcon} size={18}
direction='right' iconComponent={MoreHorizIcon}
ariaLabel={intl.formatMessage(messages.more)} direction='right'
/> ariaLabel={intl.formatMessage(messages.more)}
/>
</div>
<div className='status__action-bar-spacer' /> <div className='status__action-bar-spacer' />
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>

13
app/javascript/flavours/glitch/styles/components.scss
View file

@ -299,6 +299,10 @@
} }
} }
&--with-counter {
padding-inline-end: 4px;
}
&__counter { &__counter {
display: block; display: block;
width: auto; width: auto;
@ -1516,6 +1520,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);
} }