random-mirrors
/
gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed unnecessary scrollContainer in status, account_gallery 

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 ImmutablePureComponent from 'react-immutable-pure-component';
import { getAccountGallery } from 'gabsocial/selectors'; import { getAccountGallery } from 'gabsocial/selectors';
import MediaItem from './components/media_item'; import MediaItem from './components/media_item';
import { ScrollContainer } from 'react-router-scroll-4';
import LoadMore from 'gabsocial/components/load_more'; import LoadMore from 'gabsocial/components/load_more';
import MissingIndicator from 'gabsocial/components/missing_indicator'; import MissingIndicator from 'gabsocial/components/missing_indicator';
import { openModal } from 'gabsocial/actions/modal'; import { openModal } from 'gabsocial/actions/modal';
@ -189,46 +188,44 @@ class AccountGallery extends ImmutablePureComponent {
return ( return (
<Column> <Column>
<ScrollContainer scrollKey='account_gallery'> <div className='slist slist--flex' onScroll={this.handleScroll}>
<div className='slist slist--flex' onScroll={this.handleScroll}> <div className='account__section-headline'>
<div className='account__section-headline'> <div style={{width: '100%', display: 'flex'}}>
<div style={{width: '100%', display: 'flex'}}> <NavLink exact to={`/${accountUsername}`}>
<NavLink exact to={`/${accountUsername}`}> <FormattedMessage id='account.posts' defaultMessage='Gabs' />
<FormattedMessage id='account.posts' defaultMessage='Gabs' /> </NavLink>
</NavLink> <NavLink exact to={`/${accountUsername}/with_replies`}>
<NavLink exact to={`/${accountUsername}/with_replies`}> <FormattedMessage id='account.posts_with_replies' defaultMessage='Gabs and replies' />
<FormattedMessage id='account.posts_with_replies' defaultMessage='Gabs and replies' /> </NavLink>
</NavLink> <NavLink exact to={`/${accountUsername}/media`}>
<NavLink exact to={`/${accountUsername}/media`}> <FormattedMessage id='account.media' defaultMessage='Media' />
<FormattedMessage id='account.media' defaultMessage='Media' /> </NavLink>
</NavLink>
</div>
</div> </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> </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> </Column>
); );
} }

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

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