mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Column: consolidate column components, refactor transparency, get rid of .column-area--mobile, wtf

profile-avatar-switcher
Alex Gleason 2021-10-06 15:57:24 -05:00
rodzic 4b92dbc93d
commit b6704991d2
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
26 zmienionych plików z 61 dodań i 104 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

6
app/soapbox/components/column.js
Wyświetl plik

@ -6,18 +6,20 @@ export default class Column extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
transparent: PropTypes.bool,
children: PropTypes.node,
label: PropTypes.string,
};
render() {
const { className, label, children } = this.props;
const { className, label, children, transparent, ...rest } = this.props;
return (
<div
role='region'
aria-label={label}
className={classNames('column', className)}
className={classNames('column', className, { 'column--transparent': transparent })}
{...rest}
>
{children}
</div>

2
app/soapbox/features/account_timeline/index.js
Wyświetl plik

@ -177,7 +177,7 @@ class AccountTimeline extends ImmutablePureComponent {
}
return (
<Column showBackBtn={false}>
<Column transparent>
<div className='account__section-headline'>
<NavLink exact to={`/@${accountUsername}`}>
<FormattedMessage id='account.posts' defaultMessage='Posts' />

2
app/soapbox/features/bookmarks/index.js
Wyświetl plik

@ -55,7 +55,7 @@ class Bookmarks extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.bookmarks' defaultMessage="You don't have any bookmarks yet. When you add one, it will show up here." />;
return (
<Column icon='bookmark' heading={intl.formatMessage(messages.heading)} backBtnSlim>
<Column heading={intl.formatMessage(messages.heading)} transparent>
<StatusList
trackScroll={!pinned}
statusIds={statusIds}

2
app/soapbox/features/community_timeline/index.js
Wyświetl plik

@ -73,7 +73,7 @@ class CommunityTimeline extends React.PureComponent {
const { intl, onlyMedia, timelineId } = this.props;
return (
<Column label={intl.formatMessage(messages.title)}>
<Column label={intl.formatMessage(messages.title)} transparent>
<SubNavigation message={intl.formatMessage(messages.title)} />
<StatusListContainer
scrollKey={`${timelineId}_timeline`}

2
app/soapbox/features/direct_timeline/index.js
Wyświetl plik

@ -48,7 +48,7 @@ class DirectTimeline extends React.PureComponent {
const { intl, hasUnread } = this.props;
return (
<Column label={intl.formatMessage(messages.title)}>
<Column label={intl.formatMessage(messages.title)} transparent>
<ColumnHeader
icon='envelope'
active={hasUnread}

2
app/soapbox/features/home_timeline/index.js
Wyświetl plik

@ -98,7 +98,7 @@ class HomeTimeline extends React.PureComponent {
const { done } = this.state;
return (
<Column label={intl.formatMessage(messages.title)}>
<Column label={intl.formatMessage(messages.title)} transparent>
{(features.suggestions && isEmpty && !isLoading && !done) ? (
<BundleContainer fetchComponent={FollowRecommendationsContainer}>
{Component => <Component onDone={this.handleDone} />}

2
app/soapbox/features/public_timeline/index.js
Wyświetl plik

@ -97,7 +97,7 @@ class CommunityTimeline extends React.PureComponent {
const { intl, onlyMedia, timelineId, siteTitle, showExplanationBox, explanationBoxExpanded } = this.props;
return (
<Column label={intl.formatMessage(messages.title)}>
<Column label={intl.formatMessage(messages.title)} transparent>
<SubNavigation message={intl.formatMessage(messages.title)} />
<PinnedHostsPicker />
{showExplanationBox && <div className='explanation-box'>

2
app/soapbox/features/remote_timeline/index.js
Wyświetl plik

@ -85,7 +85,7 @@ class RemoteTimeline extends React.PureComponent {
const { intl, hasUnread, onlyMedia, timelineId, instance, pinned } = this.props;
return (
<Column label={intl.formatMessage(messages.title)}>
<Column label={intl.formatMessage(messages.title)} transparent>
<HomeColumnHeader activeItem='fediverse' active={hasUnread} />
<PinnedHostsPicker host={instance} />
{!pinned && <div className='timeline-filter-message'>

9
app/soapbox/features/ui/components/better_column.js
Wyświetl plik

@ -1,11 +1,12 @@
import React from 'react';
import ColumnHeader from './column_header';
import PropTypes from 'prop-types';
import Column from 'soapbox/components/column';
import ColumnBackButton from '../../../components/column_back_button_slim';
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
// Yes, there are 3 types of columns at this point, but this one is better, I swear
export default class Column extends React.PureComponent {
export default class BetterColumn extends React.PureComponent {
static propTypes = {
heading: PropTypes.string,
@ -16,11 +17,11 @@ export default class Column extends React.PureComponent {
};
render() {
const { heading, icon, children, active, menu } = this.props;
const { heading, icon, children, active, menu, ...rest } = this.props;
const columnHeaderId = heading && heading.replace(/ /g, '-');
return (
<div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
<Column aria-labelledby={columnHeaderId} className='column--better' {...rest}>
<div className='column__top'>
{heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
{menu && (
@ -31,7 +32,7 @@ export default class Column extends React.PureComponent {
<ColumnBackButton />
</div>
{children}
</div>
</Column>
);
}

9
app/soapbox/features/ui/components/column.js
Wyświetl plik

@ -1,8 +1,9 @@
import React from 'react';
import ColumnHeader from './column_header';
import PropTypes from 'prop-types';
import Column from 'soapbox/components/column';
export default class Column extends React.PureComponent {
export default class UIColumn extends React.PureComponent {
static propTypes = {
heading: PropTypes.string,
@ -17,14 +18,14 @@ export default class Column extends React.PureComponent {
}
render() {
const { heading, icon, children, active, showBackBtn } = this.props;
const { heading, icon, children, active, showBackBtn, ...rest } = this.props;
const columnHeaderId = heading && heading.replace(/ /g, '-');
return (
<div role='region' aria-labelledby={columnHeaderId} className='column'>
<Column aria-labelledby={columnHeaderId} {...rest}>
{heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} showBackBtn={showBackBtn} />}
{children}
</div>
</Column>
);
}

2
app/soapbox/features/ui/components/columns_area.js
Wyświetl plik

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

2
app/soapbox/pages/admin_page.js
Wyświetl plik

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

2
app/soapbox/pages/default_page.js
Wyświetl plik

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

2
app/soapbox/pages/empty_page.js
Wyświetl plik

@ -16,7 +16,7 @@ export default class DefaultPage extends ImmutablePureComponent {
</div>
<div className='columns-area__panels__main'>
<div className='columns-area columns-area--mobile'>
<div className='columns-area'>
{children}
</div>
</div>

2
app/soapbox/pages/group_page.js
Wyświetl plik

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

2
app/soapbox/pages/groups_page.js
Wyświetl plik

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

4
app/soapbox/pages/home_page.js
Wyświetl plik

@ -67,8 +67,8 @@ class HomePage extends ImmutablePureComponent {
</div>
</div>
<div className='columns-area__panels__main columns-area__panels__main--transparent'>
<div className='columns-area columns-area--mobile columns-area--transparent'>
<div className='columns-area__panels__main'>
<div className='columns-area'>
{me && <div className='timeline-compose-block' ref={this.composeBlock}>
<Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
<Avatar account={account} size={46} />

4
app/soapbox/pages/profile_page.js
Wyświetl plik

@ -98,8 +98,8 @@ class ProfilePage extends ImmutablePureComponent {
</div>
</div>
<div className='columns-area__panels__main columns-area__panels__main--transparent'>
<div className='columns-area columns-area--mobile columns-area--transparent'>
<div className='columns-area__panels__main'>
<div className='columns-area'>
{children}
</div>
</div>

2
app/soapbox/pages/remote_instance_page.js
Wyświetl plik

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

4
app/soapbox/pages/status_page.js
Wyświetl plik

@ -45,8 +45,8 @@ class StatusPage extends ImmutablePureComponent {
</div>
</div>
<div className='columns-area__panels__main columns-area__panels__main--transparent'>
<div className='columns-area columns-area--mobile columns-area--transparent'>
<div className='columns-area__panels__main'>
<div className='columns-area'>
{children}
</div>
</div>

4
app/styles/accounts.scss
Wyświetl plik

@ -463,10 +463,6 @@ a .account__avatar {
}
.account__section-headline {
background: var(--foreground-color);
width: 100%;
display: flex;
button,
a {
flex: none;

2
app/styles/chats.scss
Wyświetl plik

@ -366,7 +366,7 @@
max-width: none;
}
.columns-area--mobile .column {
.columns-area .column {
border-radius: 0;
}

68
app/styles/components/columns.scss
Wyświetl plik

@ -93,7 +93,7 @@
}
}
.columns-area--mobile {
.columns-area {
display: block;
flex-direction: column;
width: 100%;
@ -340,34 +340,20 @@
cursor: default;
}
.columns-area--mobile .column {
.columns-area .column {
@include standard-panel;
&--transparent {
background: transparent;
border-radius: 0;
box-shadow: none;
}
@media screen and (max-width: 580px) {
border-radius: 0;
}
}
.columns-area--transparent .column {
background: transparent;
border-radius: 0;
box-shadow: none;
.column-back-button {
background: transparent;
}
.account__section-headline {
background: transparent;
border: 0;
}
.empty-column-indicator,
.error-column {
background: transparent;
}
}
.column-header__wrapper {
position: relative;
flex: 0 0 auto;
@ -817,26 +803,6 @@
}
}
.columns-area--transparent .follow-recommendations-container {
@include standard-panel;
}
// Let transparent columns extend the full width of the screen
@media screen and (max-width: 450px) {
.columns-area__panels__main--transparent {
padding: 0;
}
.columns-area--transparent {
.status__wrapper,
.detailed-status__wrapper,
.timeline-compose-block,
.follow-recommendations-container {
border-radius: 0;
}
}
}
.column-title {
text-align: center;
padding: 40px;
@ -896,3 +862,21 @@
border-radius: 0;
}
}
// Make MaterialStatus flush against SubNavigation
.sub-navigation ~ .slist .item-list > article:first-child .material-status__status {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
// Display background for loading indicator
.column--transparent {
.slist__append {
@include standard-panel;
}
.sub-navigation ~ .slist .slist__append {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}

17
app/styles/components/detailed-status.scss
Wyświetl plik

@ -111,7 +111,6 @@
}
.detailed-status__wrapper {
@include standard-panel;
margin-bottom: 10px;
position: relative;
overflow: hidden;
@ -159,19 +158,3 @@
float: left;
margin-right: 5px;
}
.thread {
// Don't display gaps between statuses in a thread
.status-container {
padding: 0;
}
.status__wrapper {
border-radius: 0;
}
.detailed-status__wrapper {
border-radius: 0;
margin: 0;
}
}

9
app/styles/components/status.scss
Wyświetl plik

@ -170,15 +170,6 @@
margin-top: 8px;
}
&.status-direct:not(.read) {
background: var(--brand-color--med);
border-bottom-color: var(--brand-color--med);
.status__content a {
color: var(--brand-color--hicontrast);
}
}
&.light {
.status__relative-time {
color: var(--primary-text-color--faint);

1
app/styles/ui.scss
Wyświetl plik

@ -443,7 +443,6 @@
&__append {
flex: 1 1 auto;
position: relative;
min-height: 120px;
padding: 30px 15px;
}
}