cleanup

2020-01-02 15:36:03 -05:00 · 2020-01-02 15:36:03 -05:00 · ef9b34c51f
commit ef9b34c51f
parent ee2fce1bdf
18 changed files with 146 additions and 100 deletions
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@ -147,13 +147,6 @@ function App(props: Props) {
    }
  }, [previousRewardApproved, isRewardApproved]);

-  // @if TARGET='app'
-  useEffect(() => {
-    console.log('update prefs');
-    updatePreferences();
-  }, []);
-  // @endif
-
  // Keep this at the end to ensure initial setup effects are run first
  useEffect(() => {
    // Wait for balance to be populated on desktop so we know when we can begin syncing
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@ -28,6 +28,7 @@ type Props = {
  // If using the default header, this is a unique ID needed to persist the state of the filter setting
  persistedStorageKey?: string,
  showHiddenByUser: boolean,
+  headerLabel?: string | Node,
 };

 export default function ClaimList(props: Props) {
@ -45,6 +46,7 @@ export default function ClaimList(props: Props) {
    page,
    id,
    showHiddenByUser,
+    headerLabel,
  } = props;
  const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
  const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@ -97,29 +99,32 @@ export default function ClaimList(props: Props) {
      })}
    >
      {header !== false && (
-        <div className={classnames('claim-list__header', { 'claim-list__header--small': type === 'small' })}>
-          {header}
-          {loading && <Spinner type="small" />}
-          <div className="claim-list__alt-controls">
-            {headerAltControls}
-            {defaultSort && (
-              <FormField
-                className="claim-list__dropdown"
-                type="select"
-                name="file_sort"
-                value={currentSort}
-                onChange={handleSortChange}
-              >
-                <option value={SORT_NEW}>{__('Newest First')}</option>
-                <option value={SORT_OLD}>{__('Oldest First')}</option>
-              </FormField>
-            )}
+        <React.Fragment>
+          {headerLabel && <label className="claim-list__header-label">{headerLabel}</label>}
+          <div className={classnames('claim-list__header', { 'claim-list__header--small': type === 'small' })}>
+            {header}
+            {loading && <Spinner type="small" />}
+            <div className="claim-list__alt-controls">
+              {headerAltControls}
+              {defaultSort && (
+                <FormField
+                  className="claim-list__dropdown"
+                  type="select"
+                  name="file_sort"
+                  value={currentSort}
+                  onChange={handleSortChange}
+                >
+                  <option value={SORT_NEW}>{__('Newest First')}</option>
+                  <option value={SORT_OLD}>{__('Oldest First')}</option>
+                </FormField>
+              )}
+            </div>
          </div>
-        </div>
+        </React.Fragment>
      )}

      {urisLength > 0 && (
-        <ul className="ul--no-style">
+        <ul className="card ul--no-style">
          {sortedUris.map((uri, index) => (
            <ClaimPreview
              key={uri}
@ -132,7 +137,7 @@ export default function ClaimList(props: Props) {
        </ul>
      )}

-      {urisLength === 0 && !loading && <div className="main--empty empty">{empty || __('No results')}</div>}
+      {urisLength === 0 && !loading && <div className="card main--empty empty">{empty || __('No results')}</div>}
    </section>
  );
 }
--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@ -45,6 +45,7 @@ type Props = {
  hiddenNsfwMessage?: Node,
  channelIds?: Array<string>,
  defaultTypeSort?: string,
+  headerLabel?: string | Node,
 };

 function ClaimListDiscover(props: Props) {
@ -62,6 +63,7 @@ function ClaimListDiscover(props: Props) {
    hiddenUris,
    hiddenNsfwMessage,
    defaultTypeSort,
+    headerLabel,
  } = props;
  const didNavigateForward = history.action === 'PUSH';
  const [page, setPage] = useState(1);
@ -221,12 +223,13 @@ function ClaimListDiscover(props: Props) {
  );

  return (
-    <div className="card">
+    <React.Fragment>
      <ClaimList
        id={claimSearchCacheQuery}
        loading={loading}
        uris={uris}
        header={header}
+        headerLabel={headerLabel}
        headerAltControls={meta}
        onScrollBottom={handleScrollBottom}
        page={page}
@ -234,8 +237,10 @@ function ClaimListDiscover(props: Props) {
        empty={noResults}
      />

-      {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
-    </div>
+      <div className="card">
+        {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
+      </div>
+    </React.Fragment>
  );
 }

--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@ -51,8 +51,12 @@ const Header = (props: Props) => {
  const isAuthPage = history.location.pathname.includes(PAGES.AUTH);

  // Sign out if they click the "x" when they are on the password prompt
-  const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
-  const homeButtonNavigationProps = isVerifyPage ? {} : authHeader ? authHeaderAction : { navigate: '/' };
+  const authHeaderAction = syncError ? { onClick: signOut } : { navigate: `/$/${PAGES.CHANNELS_FOLLOWING}` };
+  const homeButtonNavigationProps = isVerifyPage
+    ? {}
+    : authHeader
+    ? authHeaderAction
+    : { navigate: `/$/${PAGES.CHANNELS_FOLLOWING}` };
  const closeButtonNavigationProps = authHeader ? authHeaderAction : { onClick: () => history.goBack() };

  function handleThemeToggle() {
--- a/ui/component/recommendedContent/view.jsx
+++ b/ui/component/recommendedContent/view.jsx
@ -51,15 +51,13 @@ export default class RecommendedContent extends React.PureComponent<Props> {
    const { recommendedContent, isSearching } = this.props;

    return (
-      <section className="card">
-        <ClaimList
-          type="small"
-          loading={isSearching}
-          uris={recommendedContent}
-          header={__('Related')}
-          empty={__('No related content found')}
-        />
-      </section>
+      <ClaimList
+        type="small"
+        loading={isSearching}
+        uris={recommendedContent}
+        header={__('Related')}
+        empty={__('No related content found')}
+      />
    );
  }
 }
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@ -73,7 +73,7 @@ function AppRouter(props: Props) {

  return (
    <Switch>
-      {/* <Route path={`/$/${PAGES.HOME}`} exact component={HomePage} /> */}
+      <Route path={`/`} exact component={ChannelsFollowingPage} />
      <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
      <Route path={`/$/${PAGES.AUTH}`} exact component={SignInPage} />
      <Route path={`/$/${PAGES.TAGS}`} exact component={TagsPage} />
--- a/ui/page/channelsFollowing/view.jsx
+++ b/ui/page/channelsFollowing/view.jsx
@ -1,10 +1,12 @@
 // @flow
 import * as PAGES from 'constants/pages';
+import * as ICONS from 'constants/icons';
 import React from 'react';
 import ClaimListDiscover from 'component/claimListDiscover';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
 import Button from 'component/button';
+import Icon from 'component/common/icon';

 import { TYPE_NEW } from 'component/claimListDiscover/view';

@ -29,24 +31,35 @@ function ChannelsFollowing(props: Props) {
  return (
    <Page>
      {showTab ? (
-        <div className="card">
-          <ClaimList
-            header={__('Find Channels To Follow')}
-            headerAltControls={
-              <Button
-                button="link"
-                label={hasSubsribedChannels && __('View Your Feed')}
-                onClick={() => setShowTab(false)}
-              />
-            }
-            uris={suggestedSubscriptions.map(sub => `lbry://${sub.uri}`)}
-          />
-        </div>
+        <ClaimList
+          headerLabel={__('Find Channels To Follow')}
+          headerAltControls={
+            <Button
+              button="link"
+              label={hasSubsribedChannels && __('View Your Feed')}
+              onClick={() => setShowTab(false)}
+            />
+          }
+          uris={suggestedSubscriptions.map(sub => `lbry://${sub.uri}`)}
+        />
      ) : (
        <ClaimListDiscover
+          headerLabel={
+            <span>
+              <Icon icon={ICONS.SUBSCRIBE} size={10} />
+              {__('Following')}
+            </span>
+          }
          defaultTypeSort={TYPE_NEW}
          channelIds={subscribedChannels.map(sub => sub.uri.split('#')[1])}
-          meta={<Button button="link" label={__('Manage')} navigate={`/$/${PAGES.CHANNELS_FOLLOWING_MANAGE}`} />}
+          meta={
+            <Button
+              icon={ICONS.EDIT}
+              button="link"
+              label={__('Manage')}
+              navigate={`/$/${PAGES.CHANNELS_FOLLOWING_MANAGE}`}
+            />
+          }
        />
      )}
    </Page>
--- a/ui/page/channelsFollowingManage/view.jsx
+++ b/ui/page/channelsFollowingManage/view.jsx
@ -37,19 +37,17 @@ function ChannelsFollowingManagePage(props: Props) {

  return (
    <Page>
-      <div className="card">
-        <ClaimList
-          header={viewingSuggestedSubs ? __('Discover New Channels') : __('Channels You Follow')}
-          headerAltControls={
-            <Button
-              button="link"
-              label={viewingSuggestedSubs ? hasSubscriptions && __('View Your Channels') : __('Find New Channels')}
-              onClick={() => onClick()}
-            />
-          }
-          uris={viewingSuggestedSubs ? suggestedSubscriptions.map(sub => `lbry://${sub.uri}`) : channelUris}
-        />
-      </div>
+      <ClaimList
+        header={viewingSuggestedSubs ? __('Discover New Channels') : __('Channels You Follow')}
+        headerAltControls={
+          <Button
+            button="link"
+            label={viewingSuggestedSubs ? hasSubscriptions && __('View Your Channels') : __('Find New Channels')}
+            onClick={() => onClick()}
+          />
+        }
+        uris={viewingSuggestedSubs ? suggestedSubscriptions.map(sub => `lbry://${sub.uri}`) : channelUris}
+      />
    </Page>
  );
 }
--- a/ui/page/discover/view.jsx
+++ b/ui/page/discover/view.jsx
@ -1,12 +1,21 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import React from 'react';
 import ClaimListDiscover from 'component/claimListDiscover';
 import Page from 'component/page';
+import Icon from 'component/common/icon';

 function DiscoverPage() {
  return (
    <Page>
-      <ClaimListDiscover />
+      <ClaimListDiscover
+        headerLabel={
+          <span>
+            <Icon icon={ICONS.DISCOVER} size={10} />
+            {__('All Content')}
+          </span>
+        }
+      />
    </Page>
  );
 }
--- a/ui/page/fileListDownloaded/view.jsx
+++ b/ui/page/fileListDownloaded/view.jsx
@ -9,6 +9,7 @@ import Icon from 'component/common/icon';
 import * as ICONS from '../../constants/icons';
 import { FormField } from '../../component/common/form-components/form-field';
 import { withRouter } from 'react-router';
+import Page from 'component/page';

 type Props = {
  fetching: boolean,
@ -35,11 +36,9 @@ function FileListDownloaded(props: Props) {
  }

  return (
-    // Removed the <Page> wapper to try combining this page with UserHistory
-    // This should eventually move into /components if we want to keep it this way
-    <React.Fragment>
+    <Page>
      {hasDownloads ? (
-        <div className="card">
+        <React.Fragment>
          <ClaimList
            header={__('Your Library')}
            headerAltControls={
@ -61,7 +60,7 @@ function FileListDownloaded(props: Props) {
            loading={fetching}
          />
          <Paginate totalPages={Math.ceil(Number(downloadedUrlsCount) / Number(PAGE_SIZE))} loading={fetching} />
-        </div>
+        </React.Fragment>
      ) : (
        <div className="main--empty">
          <section className="card card--section">
@ -74,7 +73,7 @@ function FileListDownloaded(props: Props) {
          </section>
        </div>
      )}
-    </React.Fragment>
+    </Page>
  );
 }

--- a/ui/page/fileListPublished/view.jsx
+++ b/ui/page/fileListPublished/view.jsx
@ -26,10 +26,10 @@ function FileListPublished(props: Props) {
  }, [checkPendingPublishes, fetchClaimListMine]);

  return (
-    <Page notContained>
+    <Page>
      <WebUploadList />
      {urls && Boolean(urls.length) && (
-        <div className="card">
+        <React.Fragment>
          <ClaimList
            header={__('Your Publishes')}
            loading={fetching}
@ -38,7 +38,7 @@ function FileListPublished(props: Props) {
            headerAltControls={<Button button="link" label={__('New Publish')} navigate="/$/publish" />}
          />
          <Paginate totalPages={Math.ceil(Number(urlTotal) / Number(PAGE_SIZE))} loading={fetching} />
-        </div>
+        </React.Fragment>
      )}
      {!(urls && urls.length) && (
        <React.Fragment>
--- a/ui/page/tagsFollowing/view.jsx
+++ b/ui/page/tagsFollowing/view.jsx
@ -1,10 +1,12 @@
 // @flow
 import * as PAGES from 'constants/pages';
+import * as ICONS from 'constants/icons';
 import React from 'react';
 import ClaimListDiscover from 'component/claimListDiscover';
 import TagsSelect from 'component/tagsSelect';
 import Page from 'component/page';
 import Button from 'component/button';
+import Icon from 'component/common/icon';

 type Props = {
  followedTags: Array<Tag>,
@ -18,10 +20,24 @@ function DiscoverPage(props: Props) {
    <Page>
      {(email || !IS_WEB) && <TagsSelect showClose title={__('Find New Tags To Follow')} />}
      <ClaimListDiscover
+        headerLabel={
+          <span>
+            <Icon icon={ICONS.TAG} size={10} />
+            {__('Your Tags')}
+          </span>
+        }
        hideCustomization={IS_WEB && !email}
        personalView
        tags={followedTags.map(tag => tag.name)}
-        meta={<Button button="link" label={__('Customize')} requiresAuth={IS_WEB} navigate={`/$/${PAGES.FOLLOWING}`} />}
+        meta={
+          <Button
+            button="link"
+            icon={ICONS.EDIT}
+            label={__('Manage')}
+            requiresAuth={IS_WEB}
+            navigate={`/$/${PAGES.FOLLOWING}`}
+          />
+        }
      />
    </Page>
  );
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@ -73,6 +73,7 @@ svg + .button__label,
  border-left-width: 0;
  border-radius: 0;
  margin: 0;
+  background-color: var(--color-card-background);

  svg {
    opacity: 0.5;
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@ -115,7 +115,6 @@ $metadata-z-index: 1;
  margin-right: var(--spacing-small);
  overflow: hidden;
  text-overflow: ellipsis;
-  // line-height: var(--font-heading);
  font-size: xx-large;
  font-weight: var(--font-weight-bold);

--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@ -7,13 +7,10 @@
 .claim-list__header {
  display: flex;
  align-items: center;
-  min-height: 6rem;
-  padding: var(--spacing-medium);
+  min-height: 3rem;
+  margin: var(--spacing-medium) 0;
+  margin-top: 0;
  font-size: var(--font-body);
-  border-bottom: 1px solid var(--color-border);
-
-  border-top-left-radius: var(--card-radius);
-  border-top-right-radius: var(--card-radius);

  fieldset-section {
    margin-top: 0;
@ -22,14 +19,14 @@
 }

 .claim-list__header--small {
-  height: 3rem;
-  min-height: 3rem;
+  min-height: 0;
+  color: var(--color-text-subtitle);
 }

 .claim-list__dropdown {
-  margin-bottom: 0;
  padding: 0 var(--spacing-medium);
  padding-right: var(--spacing-large);
+  margin-bottom: 0;
  margin-left: var(--spacing-medium);

  @media (max-width: $breakpoint-small) {
@ -39,8 +36,20 @@
  }
 }

-.claim-list__header-title {
-  display: block;
+.claim-list__header-label {
+  position: absolute;
+  transform: translateY(-130%);
+  font-size: var(--font-xsmall);
+  color: var(--color-text-subtitle);
+
+  .icon {
+    margin-right: var(--spacing-xsmall);
+  }
+
+  @media (max-width: $breakpoint-small) {
+    position: static;
+    transform: none;
+  }
 }

 .claim-list__conjuction {
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@ -126,6 +126,10 @@
  &:hover {
    background-color: var(--color-primary-alt);
  }
+
+  &:focus {
+    @include focus;
+  }
 }

 .header__navigation-item--lbry {
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@ -1,13 +1,6 @@
 // Generic html styles used across the App
 // component specific styling should go in the component scss file

-.top-bid {
-  width: 100%;
-  height: 400px;
-  background-color: var(--color-primary-alt);
-  padding: 1rem;
-}
-
 *::selection {
  background-color: var(--color-text-selection-bg);
  color: var(--color-text-selection);
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@ -12,7 +12,7 @@ $breakpoint-small: 900px;
  --mobile: 600px;
  --side-nav-width: 170px;
  --spacing-miniscule: calc(2rem / 5);
-  --spacing-tiny: calc(2rem / 4);
+  --spacing-xsmall: calc(2rem / 4);
  --spacing-small: calc(2rem / 3);
  --spacing-medium: calc(2rem / 2);
  --spacing-large: 2rem;