diff --git a/package.json b/package.json
index 70dc93f75..59deb6a5c 100644
--- 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",
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 4029cbd1e..3a530ea64 100644
--- 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} />;
}
diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx
index 4bd264516..e0045d4a1 100644
--- 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}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 83d30fb84..b47ad5879 100644
--- 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>
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index fc2b6fe68..762edd995 100644
--- 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);
diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss
index 0055ca6d0..487a4684b 100644
--- 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';
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index b2c964fc5..a504fc232 100644
--- 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;
}
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 6fe2194ee..4a245129a 100644
--- 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 {
diff --git a/src/renderer/scss/component/_toggle.scss b/src/renderer/scss/component/_toggle.scss
new file mode 100644
index 000000000..e095c86ce
--- /dev/null
+++ 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);
+}
diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index 3e32a7fbe..a85bdfc4a 100644
--- 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%;
diff --git a/yarn.lock b/yarn.lock
index 262e65dbd..4f9b41fda 100644
--- 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"