Merge pull request #2011 from lbryio/simple

Simplify FileCard & FileTile styles
2018-10-09 15:22:34 -04:00 · 2018-10-09 15:22:34 -04:00 · 3815d36f58
commit 3815d36f58
parent 25d4d09c10 36476bf45f
18 changed files with 130 additions and 317 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 * Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979))
 * Change channel pages to have 48 items instead of 10 ([#2002](https://github.com/lbryio/lbry-desktop/pull/2002))
 * Update to https ([#2016](https://github.com/lbryio/lbry-desktop/pull/2016))
+ * Simplify FileCard and FileTile component styling ([#2011](https://github.com/lbryio/lbry-desktop/pull/2011))

 ### Fixed
 * Invite table cutoff with large number of invites ([#1985](https://github.com/lbryio/lbry-desktop/pull/1985))
--- a/src/renderer/component/channelTile/view.jsx
+++ b/src/renderer/component/channelTile/view.jsx
@ -60,32 +60,13 @@ class ChannelTile extends React.PureComponent<Props> {
      >
        <CardMedia title={channelName} thumbnail={null} />
        <div className="file-tile__info">
-          {isResolvingUri && (
-            <div
-              className={classnames({
-                'card__title--small': size !== 'large',
-                'card__title--large': size === 'large',
-              })}
-            >
-              {__('Loading...')}
-            </div>
-          )}
+          {isResolvingUri && <div className="file-tile__title">{__('Loading...')}</div>}
          {!isResolvingUri && (
            <React.Fragment>
-              <div
-                className={classnames({
-                  'card__title--file': size === 'regular',
-                  'card__title--x-small': size === 'small',
-                  'card__title--large': size === 'large',
-                })}
-              >
+              <div className="file-tile__title">
                <TruncatedText text={channelName || uri} lines={1} />
              </div>
-              <div
-                className={classnames('card__subtitle', {
-                  'card__subtitle--large': size === 'large',
-                })}
-              >
+              <div className="card__subtitle">
                {totalItems > 0 && (
                  <span>
                    {totalItems} {totalItems === 1 ? 'file' : 'files'}
--- a/src/renderer/component/common/icon.jsx
+++ b/src/renderer/component/common/icon.jsx
@ -14,6 +14,7 @@ type Props = {
  icon: string,
  tooltip?: string, // tooltip direction
  iconColor?: string,
+  size?: number,
 };

 class IconComponent extends React.PureComponent<Props> {
@ -42,7 +43,7 @@ class IconComponent extends React.PureComponent<Props> {
  };

  render() {
-    const { icon, tooltip, iconColor } = this.props;
+    const { icon, tooltip, iconColor, size } = this.props;
    const Icon = FeatherIcons[icon];

    if (!Icon) {
@ -54,16 +55,17 @@ class IconComponent extends React.PureComponent<Props> {
      color = this.getIconColor(iconColor);
    }

-    let size = 14;
+    let iconSize = size || 14;
+    // Arrow icons are quite a bit smaller than the other icons we use
    if (icon === icons.ARROW_LEFT || icon === icons.ARROW_RIGHT) {
-      size = 20;
+      iconSize = 20;
    }

    let tooltipText;
    if (tooltip) {
      tooltipText = this.getTooltip(icon);
    }
-    const inner = <Icon size={size} className="icon" color={color} />;
+    const inner = <Icon size={iconSize} className="icon" color={color} />;

    return tooltipText ? (
      <Tooltip icon body={tooltipText} direction={tooltip}>
--- a/src/renderer/component/fileCard/view.jsx
+++ b/src/renderer/component/fileCard/view.jsx
@ -91,18 +91,16 @@ class FileCard extends React.PureComponent<Props> {
        onContextMenu={handleContextMenu}
      >
        <CardMedia thumbnail={thumbnail} />
-        <div className="card__title-identity">
-          <div className="card__title--small card__title--file-card">
-            <TruncatedText text={title} lines={2} />
-          </div>
-          <div className="card__subtitle">
-            {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
-          </div>
-          <div className="card__file-properties">
-            {showPrice && <FilePrice hideFree uri={uri} />}
-            {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-            {fileInfo && <Icon icon={icons.LOCAL} />}
-          </div>
+        <div className="card__title card__title--file-card">
+          <TruncatedText text={title} lines={2} />
+        </div>
+        <div className="card__subtitle">
+          {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
+        </div>
+        <div className="card__file-properties">
+          {showPrice && <FilePrice hideFree uri={uri} />}
+          {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+          {fileInfo && <Icon icon={icons.LOCAL} />}
        </div>
      </section>
    );
--- a/src/renderer/component/fileTile/view.jsx
+++ b/src/renderer/component/fileTile/view.jsx
@ -108,36 +108,14 @@ class FileTile extends React.PureComponent<Props> {
      >
        <CardMedia title={title || name} thumbnail={thumbnail} />
        <div className="file-tile__info">
-          {isResolvingUri && (
-            <div
-              className={classnames({
-                'card__title--small': size !== 'large',
-                'card__title--large': size === 'large',
-              })}
-            >
-              {__('Loading...')}
-            </div>
-          )}
+          {isResolvingUri && <div className="file-tile__title">{__('Loading...')}</div>}
          {!isResolvingUri && (
            <React.Fragment>
-              <div
-                className={classnames({
-                  'card__title--file': size === 'regular',
-                  'card__title--x-small': size === 'small',
-                  'card__title--large': size === 'large',
-                })}
-              >
+              <div className="file-tile__title">
                <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
              </div>
-              <div
-                className={classnames('card__subtitle', {
-                  'card__subtitle--x-small': size === 'small',
-                  'card__subtitle--large': size === 'large',
-                })}
-              >
-                <span className="file-tile__channel">
-                  {showUri ? uri : <UriIndicator uri={uri} link />}
-                </span>
+              <div className="card__subtitle">
+                {showUri ? uri : <UriIndicator uri={uri} link />}
              </div>
              <div className="card__file-properties">
                <FilePrice hideFree uri={uri} />
@ -145,12 +123,7 @@ class FileTile extends React.PureComponent<Props> {
                {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
              </div>
              {displayDescription && (
-                <div
-                  className={classnames('card__subtext', {
-                    'card__subtext--small': size !== 'small',
-                    'card__subtext--large': size === 'large',
-                  })}
-                >
+                <div className="card__subtext">
                  <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
                </div>
              )}
--- a/src/renderer/component/shapeShift/internal/active-shift.jsx
+++ b/src/renderer/component/shapeShift/internal/active-shift.jsx
@ -101,7 +101,7 @@ class ActiveShapeShift extends React.PureComponent<Props> {
        )}

        {shiftState === statuses.RECEIVED && (
-          <div className="card__content--extra-vertical-space">
+          <div>
            <p>
              {__('ShapeShift has received your payment! Sending the funds to your LBRY wallet.')}
            </p>
@ -110,7 +110,7 @@ class ActiveShapeShift extends React.PureComponent<Props> {
        )}

        {shiftState === statuses.COMPLETE && (
-          <div className="card__content--extra-vertical-space">
+          <div>
            <p>{__('Transaction complete! You should see the new LBC in your wallet.')}</p>
          </div>
        )}
--- a/src/renderer/component/uriIndicator/view.jsx
+++ b/src/renderer/component/uriIndicator/view.jsx
@ -2,7 +2,6 @@
 import React from 'react';
 import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
-import classnames from 'classnames';
 import type { Claim } from 'types/claim';

 type Props = {
@ -59,17 +58,7 @@ class UriIndicator extends React.PureComponent<Props> {
      channelLink = link ? buildURI({ channelName, claimId: channelClaimId }) : false;
    }

-    const inner = (
-      <span>
-        <span
-          className={classnames('channel-name', {
-            'button-text no-underline': link,
-          })}
-        >
-          {channelName}
-        </span>{' '}
-      </span>
-    );
+    const inner = <span className="channel-name">{channelName}</span>;

    if (!channelLink) {
      return inner;
--- a/src/renderer/page/channel/view.jsx
+++ b/src/renderer/page/channel/view.jsx
@ -80,7 +80,7 @@ class ChannelPage extends React.PureComponent<Props> {

    return (
      <Page notContained>
-        <section className="card__channel-info card__channel-info--large">
+        <section>
          <h1>
            {name}
            {fetching && <BusyIndicator />}
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@ -183,21 +183,20 @@ class FilePage extends React.Component<Props> {
            ))}

          <div className="card__content">
-            <div className="card__title-identity--file">
-              <h1 className="card__title card__title--file">{title}</h1>
+            <div className="card__title__space-between">
+              <h1>{title}</h1>
              <div className="card__title-identity-icons">
-                {isRewardContent && <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />}
+                {isRewardContent && (
+                  <Icon size={20} iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
+                )}
                <FilePrice filePage uri={normalizeURI(uri)} />
              </div>
            </div>
-            <span className="card__subtitle card__subtitle--file">
-              {__('Published on')}&nbsp;
+            <span className="card__subtitle">
+              <UriIndicator uri={uri} link /> {__('published on')}{' '}
              <DateTime block={height} show={DateTime.SHOW_DATE} />
            </span>
            {metadata.nsfw && <div>NSFW</div>}
-            <div className="card__channel-info">
-              <UriIndicator uri={uri} link />
-            </div>
            <div className="card__actions card__actions--no-margin card__actions--between">
              <div className="card__actions">
                {claimIsMine ? (
@ -221,17 +220,14 @@ class FilePage extends React.Component<Props> {
                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                  />
                )}
-                <Button
-                  button="alt"
-                  icon={icons.GLOBE}
-                  label={__('Share')}
-                  onClick={() =>
-                    openModal(
-                      { id: MODALS.SOCIAL_SHARE },
-                      { uri, speechShareable: speechShareable }
-                    )
-                  }
-                />
+                {speechShareable && (
+                  <Button
+                    button="alt"
+                    icon={icons.GLOBE}
+                    label={__('Share')}
+                    onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri })}
+                  />
+                )}
              </div>

              <div className="card__actions">
@ -239,7 +235,7 @@ class FilePage extends React.Component<Props> {
                <FileActions uri={uri} claimId={claim.claim_id} />
              </div>
            </div>
-            <FormRow padded>
+            <FormRow>
              <ToolTip direction="right" body={__('Automatically download and play free content.')}>
                <FormField
                  name="autoplay"
@ -250,7 +246,7 @@ class FilePage extends React.Component<Props> {
                />
              </ToolTip>
            </FormRow>
-            <div className="card__content--extra-padding">
+            <div className="card__content">
              <FileDetails uri={uri} />
            </div>
          </div>
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@ -258,7 +258,7 @@ p {
 }

 .credit-amount {
-  font-size: 10px;
+  font-size: 0.9em;
  white-space: nowrap;
 }

--- a/src/renderer/scss/all.scss
+++ b/src/renderer/scss/all.scss
@ -31,3 +31,4 @@
@import 'component/_dat-gui.scss';
@import 'component/_item-list.scss';
@import 'component/_time.scss';
+@import 'component/_icon.scss';
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@ -160,6 +160,7 @@ button:disabled {

 .btn--uri-indicator {
  transition: color var(--animation-duration) var(--animation-style);
+  display: inline-block;

  &:hover {
    color: var(--btn-color-inverse);
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@ -6,10 +6,18 @@
  display: flex;
  flex-direction: column;
  max-width: var(--card-max-width);
-}
+  white-space: normal;

-.card > h1 {
-  word-wrap: break-word;
+  .card__media {
+    padding-top: var(--video-aspect-ratio);
+  }
+
+  // Text that is shown if a piece of content has no thumbnail
+  // We need to do this because the thumbnail uses padding-top: var(--video-aspect-ratio); for dynamic height
+  // this lets the text sit in the middle instead of the bottom
+  .card__media-text {
+    margin-top: calc(var(--video-aspect-ratio) * -1);
+  }
 }

 .card--section {
@ -20,25 +28,25 @@
 }

 .card--small {
-  white-space: normal;
+  font-size: 13px;
+}

-  .card__media {
-    padding-top: var(--video-aspect-ratio);
-  }
+.card__media {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-color: var(--color-placeholder);
+}

-  .card__media-text {
-    // for the weird padding required for dynamic height
-    // this lets the text sit in the middle instead of the bottom
-    margin-top: calc(var(--video-aspect-ratio) * -1);
-  }
+.card__media--no-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}

-  .channel-name {
-    font-size: 12px;
-
-    @media only screen and (min-width: $medium-breakpoint) {
-      font-size: 14px;
-    }
-  }
+.card__media--nsfw {
+  background-color: var(--color-error);
 }

 .card--link {
@ -66,31 +74,29 @@
  pointer-events: none;
 }

-.card__media {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-color: var(--color-placeholder);
-}
-
-.card__media--no-img {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.card__media--nsfw {
-  background-color: var(--color-error);
-}
-
-.card__title-identity {
+.card__title {
+  font-size: 1.5em;
  color: var(--text-color);
+  padding-top: $spacing-vertical * 1/3;
+
+  @media (min-width: $large-breakpoint) {
+    font-size: 1.7em;
+  }
 }

-.card__title-identity--file {
+.card__title--file-card {
+  // FileCard is slightly different where the title is only slightly bigger than the subtitle
+  // Slightly bigger than 2 lines for consistent channel placement
+  font-size: 1.1em;
+  height: 4em;
+
+  @media only screen and (min-width: $large-breakpoint) {
+    font-size: 1.3em;
+  }
+}
+
+.card__title__space-between {
  display: flex;
-  align-items: center;
  justify-content: space-between;

  .icon {
@ -104,73 +110,26 @@
  align-self: flex-start;
 }

-.card__title {
-  font-size: 18px;
-  color: var(--text-color);
-  font-family: 'metropolis-semibold';
-}
-
-.card__title--small {
-  font-size: 12px;
-  line-height: 12px;
-
-  @media only screen and (min-width: $medium-breakpoint) {
-    font-size: 14px;
-    line-height: 14px;
-  }
-}
-
-.card__title--x-small {
-  font-size: 12px;
-  line-height: 12px;
-}
-
-.card__title--large {
-  font-size: 22px;
-}
-
-.card__title--file {
-  font-family: 'metropolis-bold';
-  font-size: 28px;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 5px;
-  font-size: 18px;
-}
-
-.card__title--file-card {
-  padding-top: $spacing-vertical * 1/3;
-  // height is the same height that two lines of title fill
-  // doing this so content below the title is inline accross the row
-  height: 30px;
-
-  @media only screen and (min-width: $medium-breakpoint) {
-    height: 36px;
-  }
-}
-
 .card__subtitle {
-  margin: 0;
-  font-size: 14px;
  color: var(--card-text-color);
+  font-size: 1em;
+  line-height: 1em;
+
+  @media (min-width: $large-breakpoint) {
+    font-size: 1.2em;
+  }
 }

-.card__subtitle--x-small {
-  font-size: 12px;
+.card__subtext-title {
+  font-size: 1.1em;
+
+  &:not(:first-of-type) {
+    margin-top: $spacing-vertical * 3/2;
+  }
 }

-.card__subtitle--large {
-  font-size: 18px;
-  padding-bottom: $spacing-vertical * 1/3;
-}
-
-.card__subtitle-price {
-  padding-top: $spacing-vertical * 1/3;
-}
-
-.card__title--small + .card__subtitle,
-.card__title--x-small + .card__subtitle {
-  padding-top: $spacing-vertical * 1/3;
+.card__subtext {
+  font-size: 0.85em;
 }

 .card__meta {
@ -185,11 +144,6 @@
  align-items: center;
  padding-top: $spacing-vertical * 1/3;
  color: var(--card-text-color);
-
-  .icon + .icon,
-  .credit-amount + .icon {
-    margin-left: $spacing-vertical * 1/3;
-  }
 }

 // .card-media__internal__links should always be inside a card
@ -201,57 +155,10 @@
  }
 }

-.card--small {
-  .card-media__internal-links {
-    top: $spacing-vertical * 1/3;
-    right: $spacing-vertical * 1/3;
-  }
-}
-
-// Channel info with buttons on the right side
-.card__channel-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $spacing-width 0 0;
-}
-
-.card__channel-info--large {
-  padding: 0;
-}
-
 .card__content {
  margin-top: $spacing-vertical * 2/3;
 }

-.card__content--extra-padding {
-  margin-top: $spacing-vertical * 3/2;
-}
-
-.card__subtext-title {
-  color: var(--text-color);
-  font-size: calc(var(--font-size-subtext-multiple) * 1.2em);
-
-  &:not(:first-of-type) {
-    margin-top: $spacing-vertical * 3/2;
-  }
-}
-
-.card__subtext {
-  font-size: calc(var(--font-size-subtext-multiple) * 1em);
-  padding-top: $spacing-vertical * 1/3;
-  word-break: break-word;
-  font-family: 'metropolis-medium';
-}
-
-.card__subtext--small {
-  font-size: calc(var(--font-size-subtext-multiple) * 0.8em);
-}
-
-.card__subtext--large {
-  font-size: calc(var(--font-size-subtext-multiple) * 0.9em);
-}
-
 .card__actions {
  margin-top: $spacing-vertical * 2/3;
  display: flex;
@ -463,43 +370,3 @@
  padding: $spacing-vertical * 1/3;
  margin: $spacing-vertical * 1/3 0;
 }
-
-.card__media--autothumb {
-  color: red !important;
-}
-
-.card__media {
-  &.card__media--autothumb.purple {
-    background-color: #9c27b0;
-  }
-  &.card__media--autothumb.red {
-    background-color: #e53935;
-  }
-  &.card__media--autothumb.pink {
-    background-color: #e91e63;
-  }
-  &.card__media--autothumb.indigo {
-    background-color: #3f51b5;
-  }
-  &.card__media--autothumb.blue {
-    background-color: #2196f3;
-  }
-  &.card__media--autothumb.light-blue {
-    background-color: #039be5;
-  }
-  &.card__media--autothumb.cyan {
-    background-color: #00acc1;
-  }
-  &.card__media--autothumb.teal {
-    background-color: #009688;
-  }
-  &.card__media--autothumb.green {
-    background-color: #43a047;
-  }
-  &.card__media--autothumb.yellow {
-    background-color: #ffeb3b;
-  }
-  &.card__media--autothumb.orange {
-    background-color: #ffa726;
-  }
-}
--- a/src/renderer/scss/component/_channel-indicator.scss
+++ b/src/renderer/scss/component/_channel-indicator.scss
@ -4,7 +4,3 @@
  white-space: nowrap;
  text-overflow: ellipsis;
 }
-
-.channel-indicator__icon--invalid {
-  color: var(--color-error);
-}
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@ -95,10 +95,6 @@
  &.content__empty--nsfw {
    background-color: var(--color-nsfw);
  }
-
-  .card__media-text {
-    margin-top: calc(var(--video-aspect-ratio) * -1);
-  }
 }

 img {
--- a/src/renderer/scss/component/_file-list.scss
+++ b/src/renderer/scss/component/_file-list.scss
@ -22,25 +22,32 @@

 .file-tile {
  display: flex;
+  font-size: 14px;
  padding-top: $spacing-vertical;

  .card__media {
    height: var(--file-tile-media-height);
    flex: 0 0 var(--file-tile-media-width);
  }
+}

-  .card__subtitle {
-    line-height: 1;
-    display: flex;
-    align-items: center;
+.file-tile--small {
+  font-size: 12px;
+
+  .card__media {
+    height: var(--file-tile-media-height-small);
+    flex: 0 0 var(--file-tile-media-width-small);
  }
 }

-.file-tile__channel {
-  padding-right: $spacing-width * 1/4;
+.file-tile--large {
+  font-size: 16px;
 }

-.file-tile.file-tile--small {
+.file-tile__title {
+}
+
+.file-tile--small {
  padding-top: $spacing-vertical * 2/3;

  .card__media {
@ -49,7 +56,7 @@
  }
 }

-.file-tile.file-tile--large {
+.file-tile--large {
  .card__media {
    height: var(--file-tile-media-height-large);
    flex: 0 0 var(--file-tile-media-width-large);
--- a/src/renderer/scss/component/_icon.scss
+++ b/src/renderer/scss/component/_icon.scss
@ -0,0 +1,6 @@
+// Icons with icons directly following should have a margin-right for proper spacing
+// Same for prices on cards
+.icon + .icon,
+.credit-amount + .icon {
+  margin-left: $spacing-vertical * 1/3;
+}
--- a/src/renderer/scss/component/_markdown-preview.scss
+++ b/src/renderer/scss/component/_markdown-preview.scss
@ -39,7 +39,6 @@

  /* Paragraphs */
  p {
-    margin: $spacing-vertical * 2/3 0;
    white-space: pre-line;
  }