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

Column: remove top gap on mobile, implement pulling feedback

Browse source
This commit is contained in:
Alex Gleason 2021-11-03 20:35:40 -05:00
parent 9140e1daf0
commit 3e3433218c
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
17 changed files with 164 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/soapbox/components/pullable.js Normal file
View file

@ -0,0 +1,34 @@
import React from 'react';
import PropTypes from 'prop-types';
import PullToRefresh from 'react-simple-pull-to-refresh';
/**
* Pullable:
* Basic "pull to refresh" without the refresh.
* Just visual feedback.
*/
export default class Pullable extends React.Component {
static propTypes = {
children: PropTypes.node.isRequired,
}
handleRefresh = () => {
return new Promise(resolve => resolve());
}
render() {
const { children } = this.props;
return (
<PullToRefresh
onRefresh={this.handleRefresh}
pullingContent={null}
refreshingContent={null}
>
{children}
</PullToRefresh>
);
}
}

2
app/soapbox/features/account_timeline/index.js
View file

@ -7,7 +7,7 @@ import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../acti
import Icon from 'soapbox/components/icon';
import StatusList from '../../components/status_list';
import LoadingIndicator from '../../components/loading_indicator';
import Column from '../ui/components/column';
import Column from 'soapbox/components/column';
// import ColumnSettingsContainer from './containers/column_settings_container';
import SubNavigation from 'soapbox/components/sub_navigation';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';

11
app/soapbox/features/chats/index.js
View file

@ -8,6 +8,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ChatList from './components/chat_list';
import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
import AccountSearch from 'soapbox/components/account_search';
import Pullable from 'soapbox/components/pullable';
const messages = defineMessages({
title: { id: 'column.chats', defaultMessage: 'Chats' },
@ -54,10 +55,12 @@ class ChatIndex extends React.PureComponent {
onSelected={this.handleSuggestion}
/>
<ChatList
onClickChat={this.handleClickChat}
emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
/>
<Pullable>
<ChatList
onClickChat={this.handleClickChat}
emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
/>
</Pullable>
</Column>
);
}

27
app/soapbox/features/compose/components/search_results.js
View file

@ -11,6 +11,7 @@ import ScrollableList from 'soapbox/components/scrollable_list';
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
import Pullable from 'soapbox/components/pullable';
export default class SearchResults extends ImmutablePureComponent {
@ -107,18 +108,20 @@ export default class SearchResults extends ImmutablePureComponent {
<FilterBar selectedFilter={selectedFilter} selectFilter={this.handleSelectFilter} />
{noResultsMessage || (
<ScrollableList
key={selectedFilter}
scrollKey={`${selectedFilter}:${value}`}
isLoading={submitted && !loaded}
showLoading={submitted && !loaded && results.isEmpty()}
hasMore={hasMore}
onLoadMore={this.handleLoadMore}
placeholderComponent={placeholderComponent}
placeholderCount={20}
>
{searchResults}
</ScrollableList>
<Pullable>
<ScrollableList
key={selectedFilter}
scrollKey={`${selectedFilter}:${value}`}
isLoading={submitted && !loaded}
showLoading={submitted && !loaded && results.isEmpty()}
hasMore={hasMore}
onLoadMore={this.handleLoadMore}
placeholderComponent={placeholderComponent}
placeholderCount={20}
>
{searchResults}
</ScrollableList>
</Pullable>
)}
</>
);

5
app/soapbox/features/notifications/index.js
View file

@ -21,6 +21,7 @@ import TimelineQueueButtonHeader from '../../components/timeline_queue_button_h
import { getSettings } from 'soapbox/actions/settings';
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
import SubNavigation from 'soapbox/components/sub_navigation';
import Pullable from 'soapbox/components/pullable';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@ -188,7 +189,9 @@ class Notifications extends React.PureComponent {
count={totalQueuedNotificationsCount}
message={messages.queue}
/>
{scrollContainer}
<Pullable>
{scrollContainer}
</Pullable>
</Column>
);
}

5
app/soapbox/features/search/index.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import Column from 'soapbox/components/column';
import ColumnHeader from 'soapbox/components/column_header';
import SearchContainer from 'soapbox/features/compose/containers/search_container';
import SearchResultsContainer from 'soapbox/features/compose/containers/search_results_container';
@ -10,11 +11,11 @@ const messages = defineMessages({
});
const Search = ({ intl }) => (
<div className='column search-page'>
<Column className='search-page'>
<ColumnHeader icon='search' title={intl.formatMessage(messages.heading)} />
<SearchContainer autoFocus autoSubmit />
<SearchResultsContainer />
</div>
</Column>
);
Search.propTypes = {

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

@ -8,7 +8,7 @@ import { fetchStatus } from '../../actions/statuses';
import MissingIndicator from '../../components/missing_indicator';
import DetailedStatus from './components/detailed_status';
import ActionBar from './components/action_bar';
import Column from '../ui/components/column';
import Column from 'soapbox/components/column';
import {
favourite,
unfavourite,
@ -52,6 +52,7 @@ import ThreadStatus from './components/thread_status';
import PendingStatus from 'soapbox/features/ui/components/pending_status';
import SubNavigation from 'soapbox/components/sub_navigation';
import { launchChat } from 'soapbox/actions/chats';
import Pullable from 'soapbox/components/pullable';
const messages = defineMessages({
title: { id: 'status.title', defaultMessage: 'Post' },
@ -626,56 +627,58 @@ class Status extends ImmutablePureComponent {
*/}
<div ref={this.setRef} className='thread'>
{ancestors && (
<div className='thread__ancestors'>{ancestors}</div>
)}
<Pullable>
{ancestors && (
<div className='thread__ancestors'>{ancestors}</div>
)}
<div className='thread__status thread__status--focused'>
<HotKeys handlers={handlers}>
<div ref={this.setStatusRef} 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}
/>
<div className='thread__status thread__status--focused'>
<HotKeys handlers={handlers}>
<div ref={this.setStatusRef} 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}
onEmojiReact={this.handleEmojiReactClick}
onReblog={this.handleReblogClick}
onDelete={this.handleDeleteClick}
onDirect={this.handleDirectClick}
onChat={this.handleChatClick}
onMention={this.handleMentionClick}
onMute={this.handleMuteClick}
onMuteConversation={this.handleConversationMuteClick}
onBlock={this.handleBlockClick}
onReport={this.handleReport}
onPin={this.handlePin}
onBookmark={this.handleBookmark}
onEmbed={this.handleEmbed}
onDeactivateUser={this.handleDeactivateUser}
onDeleteUser={this.handleDeleteUser}
onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
onDeleteStatus={this.handleDeleteStatus}
allowedEmoji={this.props.allowedEmoji}
emojiSelectorFocused={this.state.emojiSelectorFocused}
handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
/>
</div>
</HotKeys>
</div>
<ActionBar
status={status}
onReply={this.handleReplyClick}
onFavourite={this.handleFavouriteClick}
onEmojiReact={this.handleEmojiReactClick}
onReblog={this.handleReblogClick}
onDelete={this.handleDeleteClick}
onDirect={this.handleDirectClick}
onChat={this.handleChatClick}
onMention={this.handleMentionClick}
onMute={this.handleMuteClick}
onMuteConversation={this.handleConversationMuteClick}
onBlock={this.handleBlockClick}
onReport={this.handleReport}
onPin={this.handlePin}
onBookmark={this.handleBookmark}
onEmbed={this.handleEmbed}
onDeactivateUser={this.handleDeactivateUser}
onDeleteUser={this.handleDeleteUser}
onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
onDeleteStatus={this.handleDeleteStatus}
allowedEmoji={this.props.allowedEmoji}
emojiSelectorFocused={this.state.emojiSelectorFocused}
handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
/>
</div>
</HotKeys>
</div>
{descendants && (
<div className='thread__descendants'>{descendants}</div>
)}
{descendants && (
<div className='thread__descendants'>{descendants}</div>
)}
</Pullable>
</div>
</Column>
);

5
app/soapbox/features/ui/components/column.js
View file

@ -2,6 +2,7 @@ import React from 'react';
import ColumnHeader from './column_header';
import PropTypes from 'prop-types';
import Column from 'soapbox/components/column';
import Pullable from 'soapbox/components/pullable';
export default class UIColumn extends React.PureComponent {
@ -24,7 +25,9 @@ export default class UIColumn extends React.PureComponent {
return (
<Column aria-labelledby={columnHeaderId} {...rest}>
{heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} showBackBtn={showBackBtn} />}
{children}
<Pullable>
{children}
</Pullable>
</Column>
);
}

2
app/soapbox/features/ui/components/column_loading.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import Column from './column';
import Column from 'soapbox/components/column';
import ColumnHeader from '../../../components/column_header';
import ImmutablePureComponent from 'react-immutable-pure-component';
import LoadingIndicator from 'soapbox/components/loading_indicator';

2
app/soapbox/pages/profile_page.js
View file

@ -100,7 +100,7 @@ class ProfilePage extends ImmutablePureComponent {
</div>
<div className='columns-area__panels__main'>
<div className='columns-area'>
<div className='columns-area '>
{children}
</div>
</div>

2
app/styles/components/admin.scss
View file

@ -127,7 +127,7 @@
display: block;
width: 100%;
max-width: 600px;
padding: 20px 20px 0;
padding: 10px 0;
box-sizing: border-box;
.columns-area__panels__pane__inner {

21
app/styles/components/columns.scss
View file

@ -99,6 +99,10 @@
margin: 0 auto;
padding-top: 15px;
@media screen and (max-width: 580px) {
padding-top: 0;
}
.column {
width: 100%;
padding: 0;
@ -124,7 +128,7 @@
@media (max-width: 580px) {
.timeline-compose-block {
border-radius: 0;
margin-top: -5px;
margin-top: 10px;
}
}
@ -959,3 +963,18 @@
.sub-navigation + .account__section-headline {
background: var(--foreground-color);
}
// Pull to refresh
.columns-area .column {
.ptr,
.ptr__children {
background: var(--foreground-color);
}
&--transparent {
.ptr,
.ptr__children {
background: transparent;
}
}
}

4
app/styles/components/profile-info-panel.scss
View file

@ -103,10 +103,6 @@
padding: 10px 0;
margin: 5px 0;
@media screen and (max-width: 895px) {
border-bottom: 1px solid var(--brand-color--med);
}
a {
color: var(--highlight-text-color);
}

10
app/styles/loading.scss
View file

@ -219,3 +219,13 @@
}
}
}
// Pull to refresh
.lds-ellipsis div {
background: var(--primary-text-color--faint) !important;
}
.ptr,
.ptr__children {
overflow: visible !important;
}

6
app/styles/ui.scss
View file

@ -765,3 +765,9 @@
background: var(--accent-color);
}
}
.page__top + .page__columns .columns-area {
@media screen and (max-width: 580px) {
padding-top: 10px;
}
}

1
package.json
View file

@ -132,6 +132,7 @@
"react-redux": "^7.2.5",
"react-router-dom": "^4.3.1",
"react-router-scroll-4": "^1.0.0-beta.1",
"react-simple-pull-to-refresh": "^1.3.0",
"react-sparklines": "^1.7.0",
"react-stickynode": "^4.0.0",
"react-swipeable-views": "^0.14.0",

5
yarn.lock
View file

@ -7990,6 +7990,11 @@ react-side-effect@^2.1.0:
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
react-simple-pull-to-refresh@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-simple-pull-to-refresh/-/react-simple-pull-to-refresh-1.3.0.tgz#5f7bcd475ea5c33ecd505d097b14f56c3e5e3ce8"
integrity sha512-QPFGFsbroh2WoTcLCh3f6peMRfSettYJKCXMS9FNbFav7GWKD2whqACiNLx+Mi+VkP/I+aerB7kEirk+DQx41A==
react-sparklines@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/react-sparklines/-/react-sparklines-1.7.0.tgz#9b1d97e8c8610095eeb2ad658d2e1fcf91f91a60"