bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

DetailedStatus: remove gaps, rename .detailed-status-container to .thread

Browse source
This commit is contained in:
Alex Gleason 2021-10-06 13:59:52 -05:00
parent fb1f05b0ec
commit 6e305fd854
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 57 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/soapbox/features/status/index.js
View file

@ -595,53 +595,55 @@ class Status extends ImmutablePureComponent {
/> />
*/} */}
<div ref={this.setRef} className='detailed-status-container'> <div ref={this.setRef} className='thread'>
{ancestors && ( {ancestors && (
<div className='detailed-status__ancestors'>{ancestors}</div> <div className='thread__ancestors'>{ancestors}</div>
)} )}
<HotKeys handlers={handlers}> <div className='thread__status'>
<div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}> <HotKeys handlers={handlers}>
<DetailedStatus <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
status={status} <DetailedStatus
onOpenVideo={this.handleOpenVideo} status={status}
onOpenMedia={this.handleOpenMedia} onOpenVideo={this.handleOpenVideo}
onToggleHidden={this.handleToggleHidden} onOpenMedia={this.handleOpenMedia}
domain={domain} onToggleHidden={this.handleToggleHidden}
showMedia={this.state.showMedia} domain={domain}
onToggleMediaVisibility={this.handleToggleMediaVisibility} showMedia={this.state.showMedia}
/> onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
<ActionBar <ActionBar
status={status} status={status}
onReply={this.handleReplyClick} onReply={this.handleReplyClick}
onFavourite={this.handleFavouriteClick} onFavourite={this.handleFavouriteClick}
onEmojiReact={this.handleEmojiReactClick} onEmojiReact={this.handleEmojiReactClick}
onReblog={this.handleReblogClick} onReblog={this.handleReblogClick}
onDelete={this.handleDeleteClick} onDelete={this.handleDeleteClick}
onDirect={this.handleDirectClick} onDirect={this.handleDirectClick}
onMention={this.handleMentionClick} onMention={this.handleMentionClick}
onMute={this.handleMuteClick} onMute={this.handleMuteClick}
onMuteConversation={this.handleConversationMuteClick} onMuteConversation={this.handleConversationMuteClick}
onBlock={this.handleBlockClick} onBlock={this.handleBlockClick}
onReport={this.handleReport} onReport={this.handleReport}
onPin={this.handlePin} onPin={this.handlePin}
onBookmark={this.handleBookmark} onBookmark={this.handleBookmark}
onEmbed={this.handleEmbed} onEmbed={this.handleEmbed}
onDeactivateUser={this.handleDeactivateUser} onDeactivateUser={this.handleDeactivateUser}
onDeleteUser={this.handleDeleteUser} onDeleteUser={this.handleDeleteUser}
onToggleStatusSensitivity={this.handleToggleStatusSensitivity} onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
onDeleteStatus={this.handleDeleteStatus} onDeleteStatus={this.handleDeleteStatus}
allowedEmoji={this.props.allowedEmoji} allowedEmoji={this.props.allowedEmoji}
emojiSelectorFocused={this.state.emojiSelectorFocused} emojiSelectorFocused={this.state.emojiSelectorFocused}
handleEmojiSelectorExpand={this.handleEmojiSelectorExpand} handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus} handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
/> />
</div> </div>
</HotKeys> </HotKeys>
</div>
{descendants && ( {descendants && (
<div className='detailed-status__descendants'>{descendants}</div> <div className='thread__descendants'>{descendants}</div>
)} )}
</div> </div>
</Column> </Column>

19
app/styles/components/detailed-status.scss
View file

@ -160,9 +160,18 @@
margin-right: 5px; margin-right: 5px;
} }
/* Connect the first status to the SubNavigation */ .thread {
.detailed-status__ancestors .status-container:first-child .status__wrapper, // Don't display gaps between statuses in a thread
.detailed-status-container > div:first-child .detailed-status__wrapper { .status-container {
border-top-left-radius: 0; padding: 0;
border-top-right-radius: 0; }
.status__wrapper {
border-radius: 0;
}
.detailed-status__wrapper {
border-radius: 0;
margin: 0;
}
} }