Merge branch 'hide-profile-tabs' into 'develop'

Hide tabs on Followers, Following… pages See merge request soapbox-pub/soapbox-fe!1630
2022-07-18 15:41:01 +00:00 · 2022-07-18 15:41:01 +00:00 · 9de46333b2
commit 9de46333b2
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@ -35,7 +35,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant, size
    className={classNames({
      'space-y-4': true,
      'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset overflow-hidden': variant === 'rounded',
-      [sizes[size]]: true,
+      [sizes[size]]: variant === 'rounded',
    }, className)}
  >
    {children}
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 import { useHistory } from 'react-router-dom';

@ -42,25 +41,19 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
    }
  };

-  const renderChildren = () => {
-    if (transparent) {
-      return <div className={classNames('text-black dark:text-white', className)}>{children}</div>;
-    }
+  const renderChildren = () => (
+    <Card variant={transparent ? undefined : 'rounded'} className={className}>
+      {withHeader ? (
+        <CardHeader onBackClick={handleBackClick}>
+          <CardTitle title={label} />
+        </CardHeader>
+      ) : null}

-    return (
-      <Card variant='rounded' className={className}>
-        {withHeader ? (
-          <CardHeader onBackClick={handleBackClick}>
-            <CardTitle title={label} />
-          </CardHeader>
-        ) : null}
-
-        <CardBody>
-          {children}
-        </CardBody>
-      </Card>
-    );
-  };
+      <CardBody>
+        {children}
+      </CardBody>
+    </Card>
+  );

  return (
    <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>
--- a/app/soapbox/features/bookmarks/index.tsx
+++ b/app/soapbox/features/bookmarks/index.tsx
@ -36,7 +36,7 @@ const Bookmarks: React.FC = () => {
  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 transparent>
+    <Column transparent withHeader={false}>
      <div className='px-4 pt-4 sm:p-0'>
        <SubNavigation message={intl.formatMessage(messages.heading)} />
      </div>
--- a/app/soapbox/features/community_timeline/index.tsx
+++ b/app/soapbox/features/community_timeline/index.tsx
@ -43,7 +43,7 @@ const CommunityTimeline = () => {
  }, [onlyMedia]);

  return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
      <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
      <PullToRefresh onRefresh={handleRefresh}>
        <Timeline
--- a/app/soapbox/features/direct_timeline/index.tsx
+++ b/app/soapbox/features/direct_timeline/index.tsx
@ -40,7 +40,7 @@ const DirectTimeline = () => {
  };

  return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
      <ColumnHeader
        icon='envelope'
        active={hasUnread}
--- a/app/soapbox/features/followers/index.js
+++ b/app/soapbox/features/followers/index.js
@ -118,7 +118,7 @@ class Followers extends ImmutablePureComponent {
    }

    return (
-      <Column label={intl.formatMessage(messages.heading)} withHeader={false} transparent>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
        <ScrollableList
          scrollKey='followers'
          hasMore={hasMore}
--- a/app/soapbox/features/following/index.js
+++ b/app/soapbox/features/following/index.js
@ -118,7 +118,7 @@ class Following extends ImmutablePureComponent {
    }

    return (
-      <Column label={intl.formatMessage(messages.heading)} withHeader={false} transparent>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
        <ScrollableList
          scrollKey='following'
          hasMore={hasMore}
--- a/app/soapbox/features/hashtag_timeline/index.js
+++ b/app/soapbox/features/hashtag_timeline/index.js
@ -112,7 +112,7 @@ class HashtagTimeline extends React.PureComponent {
    const { id } = this.props.params;

    return (
-      <Column label={`#${id}`} transparent>
+      <Column label={`#${id}`} transparent withHeader={false}>
        <ColumnHeader active={hasUnread} title={this.title()} />
        <Timeline
          scrollKey='hashtag_timeline'
--- a/app/soapbox/features/home_timeline/index.tsx
+++ b/app/soapbox/features/home_timeline/index.tsx
@ -59,7 +59,7 @@ const HomeTimeline: React.FC = () => {
  }, [isPartial]);

  return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
      <PullToRefresh onRefresh={handleRefresh}>
        <Timeline
          scrollKey='home_timeline'
--- a/app/soapbox/features/list_timeline/index.tsx
+++ b/app/soapbox/features/list_timeline/index.tsx
@ -85,7 +85,7 @@ const ListTimeline: React.FC = () => {
  );

  return (
-    <Column label={title} heading={title} transparent>
+    <Column label={title} heading={title} transparent withHeader={false}>
      {/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
        <div className='column-header__links'>
          <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleEditClick}>
--- a/app/soapbox/features/pinned_statuses/index.tsx
+++ b/app/soapbox/features/pinned_statuses/index.tsx
@ -36,7 +36,7 @@ const PinnedStatuses = () => {
  }

  return (
-    <Column label={intl.formatMessage(messages.heading)}>
+    <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
      <StatusList
        statusIds={statusIds}
        scrollKey='pinned_statuses'
--- a/app/soapbox/features/public_timeline/index.tsx
+++ b/app/soapbox/features/public_timeline/index.tsx
@ -64,7 +64,7 @@ const CommunityTimeline = () => {
  }, [onlyMedia]);

  return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
      <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
      <PinnedHostsPicker />
      {showExplanationBox && <div className='mb-4'>
--- a/app/soapbox/features/remote_timeline/index.tsx
+++ b/app/soapbox/features/remote_timeline/index.tsx
@ -65,7 +65,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
  }, [onlyMedia]);

  return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
+    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
      {instance && <PinnedHostsPicker host={instance} />}
      {!pinned && <HStack className='mb-4 px-2' space={2}>
        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@ -792,7 +792,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
    }

    return (
-      <Column label={intl.formatMessage(titleMessage, { username })} transparent>
+      <Column label={intl.formatMessage(titleMessage, { username })} transparent withHeader={false}>
        <div className='px-4 pt-4 sm:p-0'>
          <SubNavigation message={intl.formatMessage(titleMessage, { username })} />
        </div>
--- a/app/soapbox/features/test_timeline/index.tsx
+++ b/app/soapbox/features/test_timeline/index.tsx
@ -38,7 +38,7 @@ const TestTimeline: React.FC = () => {
  }, []);

  return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
      <SubNavigation message={intl.formatMessage(messages.title)} />
      <Timeline
        scrollKey={`${timelineId}_timeline`}
--- a/app/soapbox/pages/profile_page.tsx
+++ b/app/soapbox/pages/profile_page.tsx
@ -116,6 +116,8 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
    activeItem = 'profile';
  }

+  const showTabs = !['following', 'followers', 'pins'].some(path => pathname.includes(path));
+
  return (
    <>
      <Layout.Main>
@ -128,7 +130,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
              {Component => <Component username={username} account={account} />}
            </BundleContainer>

-            {account && (
+            {account && showTabs && (
              <Tabs items={tabItems} activeItem={activeItem} />
            )}