moony/Gab-Social
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Removed unnecessary scrollContainer in status, account_gallery

Browse Source 
document scrolls, not individual containers/components
simply removed the wrapping <ScrollContainer /> and updated indentation
This commit is contained in:
mgabdev 2019-07-17 18:57:44 -04:00
parent c466fc6b86
commit d978734bce
2 changed files with 68 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
app/javascript/gabsocial/features/account_gallery/index.js
View File

@ -12,7 +12,6 @@ import Column from '../ui/components/column';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { getAccountGallery } from 'gabsocial/selectors';
import MediaItem from './components/media_item';
import { ScrollContainer } from 'react-router-scroll-4';
import LoadMore from 'gabsocial/components/load_more';
import MissingIndicator from 'gabsocial/components/missing_indicator';
import { openModal } from 'gabsocial/actions/modal';
@ -189,46 +188,44 @@ class AccountGallery extends ImmutablePureComponent {
return (
<Column>
<ScrollContainer scrollKey='account_gallery'>
<div className='slist slist--flex' onScroll={this.handleScroll}>
<div className='account__section-headline'>
<div style={{width: '100%', display: 'flex'}}>
<NavLink exact to={`/${accountUsername}`}>
<FormattedMessage id='account.posts' defaultMessage='Gabs' />
</NavLink>
<NavLink exact to={`/${accountUsername}/with_replies`}>
<FormattedMessage id='account.posts_with_replies' defaultMessage='Gabs and replies' />
</NavLink>
<NavLink exact to={`/${accountUsername}/media`}>
<FormattedMessage id='account.media' defaultMessage='Media' />
</NavLink>
</div>
<div className='slist slist--flex' onScroll={this.handleScroll}>
<div className='account__section-headline'>
<div style={{width: '100%', display: 'flex'}}>
<NavLink exact to={`/${accountUsername}`}>
<FormattedMessage id='account.posts' defaultMessage='Gabs' />
</NavLink>
<NavLink exact to={`/${accountUsername}/with_replies`}>
<FormattedMessage id='account.posts_with_replies' defaultMessage='Gabs and replies' />
</NavLink>
<NavLink exact to={`/${accountUsername}/media`}>
<FormattedMessage id='account.media' defaultMessage='Media' />
</NavLink>
</div>
<div role='feed' className='account-gallery__container' ref={this.handleRef}>
{attachments.map((attachment, index) => attachment === null ? (
<LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
) : (
<MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
))}
{
attachments.size == 0 &&
<div className='empty-column-indicator'>
<FormattedMessage id='account_gallery.none' defaultMessage='No media to show.'/>
</div>
}
{loadOlder}
</div>
{isLoading && attachments.size === 0 && (
<div className='slist__append'>
<LoadingIndicator />
</div>
)}
</div>
</ScrollContainer>
<div role='feed' className='account-gallery__container' ref={this.handleRef}>
{attachments.map((attachment, index) => attachment === null ? (
<LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
) : (
<MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
))}
{
attachments.size == 0 &&
<div className='empty-column-indicator'>
<FormattedMessage id='account_gallery.none' defaultMessage='No media to show.'/>
</div>
}
{loadOlder}
</div>
{isLoading && attachments.size === 0 && (
<div className='slist__append'>
<LoadingIndicator />
</div>
)}
</div>
</Column>
);
}

67
app/javascript/gabsocial/features/status/index.js
View File

@ -33,7 +33,6 @@ import {
import { initMuteModal } from '../../actions/mutes';
import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors';
import { ScrollContainer } from 'react-router-scroll-4';
import ColumnHeader from '../../components/column_header';
import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal';
@ -471,43 +470,41 @@ class Status extends ImmutablePureComponent {
/>
}
<ScrollContainer scrollKey='thread'>
<div ref={this.setRef}>
{ancestors}
<div ref={this.setRef}>
{ancestors}
<HotKeys handlers={handlers}>
<div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
<DetailedStatus
status={status}
onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia}
onToggleHidden={this.handleToggleHidden}
domain={domain}
showMedia={this.state.showMedia}
onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
<HotKeys handlers={handlers}>
<div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
<DetailedStatus
status={status}
onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia}
onToggleHidden={this.handleToggleHidden}
domain={domain}
showMedia={this.state.showMedia}
onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
<ActionBar
status={status}
onReply={this.handleReplyClick}
onFavourite={this.handleFavouriteClick}
onReblog={this.handleReblogClick}
onDelete={this.handleDeleteClick}
onDirect={this.handleDirectClick}
onMention={this.handleMentionClick}
onMute={this.handleMuteClick}
onMuteConversation={this.handleConversationMuteClick}
onBlock={this.handleBlockClick}
onReport={this.handleReport}
onPin={this.handlePin}
onEmbed={this.handleEmbed}
/>
</div>
</HotKeys>
<ActionBar
status={status}
onReply={this.handleReplyClick}
onFavourite={this.handleFavouriteClick}
onReblog={this.handleReblogClick}
onDelete={this.handleDeleteClick}
onDirect={this.handleDirectClick}
onMention={this.handleMentionClick}
onMute={this.handleMuteClick}
onMuteConversation={this.handleConversationMuteClick}
onBlock={this.handleBlockClick}
onReport={this.handleReport}
onPin={this.handlePin}
onEmbed={this.handleEmbed}
/>
</div>
</HotKeys>
{descendants}
</div>
</ScrollContainer>
{descendants}
</div>
</Column>
);
}