Merge pull request #1608 from lbryio/css-fixes

More css fixes
2018-06-15 16:49:29 -04:00 · 2018-06-15 16:49:29 -04:00 · a90870e1f9
commit a90870e1f9
parent f9dcee5604 6f4734b518
11 changed files with 178 additions and 35 deletions
--- a/package.json
+++ b/package.json
@ -61,6 +61,7 @@
    "react-paginate": "^5.2.1",
    "react-redux": "^5.0.3",
    "react-simplemde-editor": "^3.6.15",
+    "react-toggle": "^4.0.2",
    "react-transition-group": "1.x",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.1",
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@ -5,6 +5,7 @@ import classnames from 'classnames';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
 import 'simplemde/dist/simplemde.min.css';
+import Toggle from 'react-toggle';

 type Props = {
  name: string,
@ -21,6 +22,7 @@ type Props = {
  children?: React.Node,
  stretch?: boolean,
  affixClass?: string, // class applied to prefix/postfix label
+  useToggle?: boolean,
 };

 export class FormField extends React.PureComponent<Props> {
@ -37,6 +39,7 @@ export class FormField extends React.PureComponent<Props> {
      children,
      stretch,
      affixClass,
+      useToggle,
      ...inputProps
    } = this.props;

@ -68,6 +71,8 @@ export class FormField extends React.PureComponent<Props> {
        );
      } else if (type === 'textarea') {
        input = <textarea type={type} id={name} {...inputProps} />;
+      } else if (type === 'checkbox' && useToggle) {
+        input = <Toggle id={name} {...inputProps} />;
      } else {
        input = <input type={type} id={name} {...inputProps} />;
      }
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@ -8,6 +8,7 @@ type Props = {
  children: ?React.Node,
  icon: ?boolean,
  direction: string,
+  onFormField?: boolean,
 };

 class ToolTip extends React.PureComponent<Props> {
@ -16,7 +17,7 @@ class ToolTip extends React.PureComponent<Props> {
  };

  render() {
-    const { children, label, body, icon, direction } = this.props;
+    const { children, label, body, icon, direction, onFormField } = this.props;

    const tooltipContent = children || label;

@ -29,6 +30,7 @@ class ToolTip extends React.PureComponent<Props> {
          'tooltip--right': direction === 'right',
          'tooltip--bottom': direction === 'bottom',
          'tooltip--left': direction === 'left',
+          'tooltip--on-formfield': onFormField,
        })}
      >
        {tooltipContent}
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@ -7,7 +7,6 @@ import FilePrice from 'component/filePrice';
 import FileDetails from 'component/fileDetails';
 import FileActions from 'component/fileActions';
 import UriIndicator from 'component/uriIndicator';
-import { FormField, FormRow } from 'component/common/form';
 import Icon from 'component/common/icon';
 import DateTime from 'component/dateTime';
 import * as icons from 'constants/icons';
@ -21,6 +20,8 @@ import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
+import { FormField, FormRow } from 'component/common/form';
+import ToolTip from 'component/common/tooltip';

 type Props = {
  claim: Claim,
@ -195,29 +196,35 @@ class FilePage extends React.Component<Props> {
                  )}
                </div>
              </div>
-              {!claimIsMine ||
-                (speechSharable && (
-                  <div className="card__actions card__actions--end">
-                    {!claimIsMine && (
-                      <Button
-                        button="alt"
-                        icon="Send"
-                        label={__('Enjoy this? Send a tip')}
-                        onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
-                      />
-                    )}
-                    {speechSharable && (
-                      <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
-                    )}
-                  </div>
-                ))}
-              <FormRow alignRight>
+              {(!claimIsMine || speechSharable) && (
+                <div className="card__actions card__actions--end">
+                  {!claimIsMine && (
+                    <Button
+                      button="alt"
+                      icon="Send"
+                      label={__('Enjoy this? Send a tip')}
+                      onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                    />
+                  )}
+                  {speechSharable && (
+                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                  )}
+                </div>
+              )}
+              <FormRow alignRight padded>
                <FormField
-                  type="checkbox"
+                  useToggle
                  name="autoplay"
-                  onChange={this.onAutoplayChange}
+                  type="checkbox"
                  checked={autoplay}
-                  postfix={__('Autoplay')}
+                  onChange={this.onAutoplayChange}
+                  postfix={
+                    <ToolTip
+                      onFormField
+                      label={__('Autoplay')}
+                      body={__('Automatically download and play free content.')}
+                    />
+                  }
                />
              </FormRow>
            </div>
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@ -78,6 +78,7 @@ $large-breakpoint: 1760px;
  --input-copyable-border: var(--color-grey);
  --input-select-bg-color: var(--color-grey);
  --input-select-color: var(--text-color);
+  --input-switch-color: var(--color-teal);

  /* input:disabled */
  --input-disabled-border-color: rgba(0, 0, 0, 0.42);
--- a/src/renderer/scss/all.scss
+++ b/src/renderer/scss/all.scss
@ -24,3 +24,4 @@
@import 'component/_nav.scss';
@import 'component/_file-list.scss';
@import 'component/_search.scss';
+@import 'component/_toggle.scss';
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@ -27,17 +27,17 @@
    padding-top: var(--video-aspect-ratio);
  }

+  .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);
+  }
+
  .channel-name {
    font-size: 12px;
  }
 }

-.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--link {
  cursor: pointer;
 }
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@ -90,6 +90,10 @@
  &.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/_toggle.scss
+++ b/src/renderer/scss/component/_toggle.scss
@ -0,0 +1,112 @@
+// Taken from react-toggle/style.css
+// Edited to add the teal color, nothing else
+.react-toggle {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  user-select: none;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4d4d4d;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: var(--input-switch-color);
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #158a88;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4d4d4d;
+  border-radius: 50%;
+  background-color: #fafafa;
+  box-sizing: border-box;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: var(--input-switch-color);
+}
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@ -4,8 +4,8 @@
 }

 // When there is a label for the tooltip and not just using a button or icon
-.tooltip.tooltip--label {
-  font-size: 12px;
+.tooltip--label {
+  font-size: 14px;
  padding-left: $spacing-vertical * 1/3;

  .tooltip__body {
@ -13,7 +13,11 @@
  }
 }

-.tooltip.tooltip--icon {
+.tooltip--on-formfield {
+  padding: 0;
+}
+
+.tooltip--icon {
  margin-top: 5px;
 }

@ -42,7 +46,7 @@
  border-style: solid;
 }

-.tooltip.tooltip--top .tooltip__body {
+.tooltip--top .tooltip__body {
  bottom: 100%;
  left: 50%;
  margin-left: -100px;
@ -55,7 +59,7 @@
  }
 }

-.tooltip.tooltip--right .tooltip__body {
+.tooltip--right .tooltip__body {
  margin-top: -5px;
  margin-left: 10px;

@ -67,7 +71,7 @@
  }
 }

-.tooltip.tooltip--bottom .tooltip__body {
+.tooltip--bottom .tooltip__body {
  top: 90%;
  left: 50%;
  margin-left: -100px;
@ -80,7 +84,7 @@
  }
 }

-.tooltip.tooltip--left .tooltip__body {
+.tooltip--left .tooltip__body {
  top: -5px;
  right: 105%;

--- a/yarn.lock
+++ b/yarn.lock
@ -7632,6 +7632,12 @@ react-simplemde-editor@^3.6.15:
  dependencies:
    simplemde "^1.11.2"

+react-toggle@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.0.2.tgz#77f487860efb87fafd197672a2db8c885be1440f"
+  dependencies:
+    classnames "^2.2.5"
+
 react-transition-group@1.x:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"