From c0e6de66a4266cd28b26ef9d4c00a2c081a49698 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 16 May 2018 22:49:51 -0400 Subject: [PATCH 01/10] don't use channel name in FileList --- src/renderer/component/fileList/view.jsx | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx index 8bc26d362..1f649f527 100644 --- a/src/renderer/component/fileList/view.jsx +++ b/src/renderer/component/fileList/view.jsx @@ -8,6 +8,7 @@ type FileInfo = { name: string, channelName: ?string, pending?: boolean, + channel_claim_id: string, value?: { publisherSignature: { certificateId: string, @@ -139,6 +140,8 @@ class FileList extends React.PureComponent { }); } + sortFunctions: {}; + render() { const { fileInfos, hideFilter, checkPending } = this.props; const { sortBy } = this.state; @@ -149,27 +152,14 @@ class FileList extends React.PureComponent { } this.sortFunctions[sortBy](fileInfos).forEach(fileInfo => { - const { - channel_name: channelName, - name: claimName, - claim_name: claimNameDownloaded, - claim_id: claimId, - } = fileInfo; + const { name: claimName, claim_name: claimNameDownloaded, claim_id: claimId } = fileInfo; const uriParams = {}; // This is unfortunate // https://github.com/lbryio/lbry/issues/1159 const name = claimName || claimNameDownloaded; - - if (channelName) { - uriParams.channelName = channelName; - uriParams.contentName = name; - uriParams.claimId = this.getChannelSignature(fileInfo); - } else { - uriParams.claimId = claimId; - uriParams.claimName = name; - } - + uriParams.contentName = name; + uriParams.claimId = claimId; const uri = buildURI(uriParams); content.push(); -- 2.43.4 From 85191292118e48e7acd7399b5390d54d4219c973 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 16 May 2018 23:36:38 -0400 Subject: [PATCH 02/10] dropdown styling --- src/renderer/scss/_gui.scss | 14 ++++++++++++++ src/renderer/scss/_vars.scss | 3 +++ src/renderer/scss/component/_form-field.scss | 2 +- static/themes/dark.css | 6 ++++-- 4 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index e7266b68b..d49071623 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -121,6 +121,20 @@ input::placeholder { opacity: 0.5; } +select { + min-width: 100px; + height: 30px; + border-radius: 8px; + background-color: var(--input-select-bg-color); + font: normal 12px/30px 'metropolis-medium'; + text-indent: 12px; + color: var(--input-select-color); + + &:disabled { + opacity: 0.5; + } +} + button + input { margin-left: $spacing-vertical * 2/3; } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index cdfe3ddcf..ea591571e 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -35,6 +35,7 @@ $large-breakpoint: 1760px; --color-green-light: #effbe4; --color-green-blue: #2ec1a8; --color-purple: #8165b0; + --color-blue-grey: #203049; /* Colors */ --color-divider: #e3e3e3; @@ -73,6 +74,8 @@ $large-breakpoint: 1760px; --input-copyable-bg: #f6f6f6; --input-copyable-color: var(--color-grey-dark); --input-copyable-border: var(--color-grey); + --input-select-bg-color: var(--color-grey); + --input-select-color: var(--text-color); /* input:disabled */ --input-disabled-border-color: rgba(0, 0, 0, 0.42); diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index 2be99b8ab..406318e8e 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -103,7 +103,7 @@ // Not sure if I like these // Maybe this should be in gui.scss? .input--price-amount { - width: 60px; + width: 80px; } .input--address { diff --git a/static/themes/dark.css b/static/themes/dark.css index 7796724ef..dc4d666b7 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -7,7 +7,7 @@ --color-help: #8696AF; --color-download: rgba(255, 255, 255, 0.75); --color-download-overlay: var(--color-black); - --color-bg: #203049; + --color-bg: var(--color-blue-grey); --color-bg-alt: #2D3D56; --color-placeholder: var(--color-bg-alt); @@ -26,9 +26,11 @@ --input-border-size: 1px; --input-border-color: rgba(255,255,255, 0.5); --input-hover-border-color: rgba(255, 255, 255, 1); - --input-copyable-bg: #203049; + --input-copyable-bg: var(--color-blue-grey); --input-copyable-color: #8696AF; --input-copyable-border: #53637C; + --input-select-bg-color: var(--color-blue-grey); + --input-select-color: var(--color-white); /* input:disabled */ --input-disabled-border-color: rgba(255, 255, 255, 0.42); -- 2.43.4 From 55209a21cf0b4935c9b78da6d2fc013a87e33fa4 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 17 May 2018 00:09:25 -0400 Subject: [PATCH 03/10] don't show rewards message if no claimable rewards --- src/renderer/modal/modalCreditIntro/view.jsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/renderer/modal/modalCreditIntro/view.jsx b/src/renderer/modal/modalCreditIntro/view.jsx index 96e2fb801..bacd4ce3f 100644 --- a/src/renderer/modal/modalCreditIntro/view.jsx +++ b/src/renderer/modal/modalCreditIntro/view.jsx @@ -25,16 +25,13 @@ const ModalCreditIntro = props => { can take are limited.

)} -

- There are a variety of ways to get credits, including more than{' '} - {totalRewardValue ? ( - - ) : ( - {__('?? credits')} - )}{' '} - {__(' in free rewards for participating in the LBRY beta.')} -

- + {totalRewardValue && ( +

+ There are a variety of ways to get credits, including more than{' '} + {' '} + {__('in free rewards for participating in the LBRY beta.')} +

+ )}
+ + +
+ +
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 84e74d3e2..9d5404e42 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -2,7 +2,6 @@ margin-left: auto; margin-right: auto; border-radius: var(--card-radius); - overflow: auto; user-select: text; display: flex; position: relative; @@ -184,6 +183,10 @@ margin-top: $spacing-vertical * 2/3; } +.card__content--extra-padding { + margin-top: $spacing-vertical; +} + .card__subtext-title { color: var(--text-color); font-size: calc(var(--font-size-subtext-multiple) * 1.5em); diff --git a/src/renderer/scss/component/_file-download.scss b/src/renderer/scss/component/_file-download.scss index c4bd7e025..b38d8a520 100644 --- a/src/renderer/scss/component/_file-download.scss +++ b/src/renderer/scss/component/_file-download.scss @@ -1,26 +1,3 @@ -.file-download, -.file-download__overlay { - padding: 5px; -} - .file-download { - position: relative; - background-color: var(--color-black); - border-radius: var(--btn-radius); - color: var(--color-download); - font-size: 12px; - opacity: 0.8; - font-family: 'metropolis-medium'; -} - -.file-download__overlay { - background: var(--color-download); - color: var(--color-download-overlay); - border-radius: var(--btn-radius); - position: absolute; - white-space: nowrap; - overflow: hidden; - z-index: 1; - top: 0px; - left: 0px; + font-size: 0.8em; } -- 2.43.4 From 7c4e4c24ad326972f9a58d5157f20ebf71bd03d8 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 21 May 2018 22:10:47 -0400 Subject: [PATCH 05/10] update lbry redux --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d279738d6..3337b697d 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "formik": "^0.10.4", "hast-util-sanitize": "^1.1.2", "keytar": "^4.2.1", - "lbry-redux": "lbryio/lbry-redux#30c18725d8c6c141c30c57f0a324d0abb8963b99", + "lbry-redux": "lbryio/lbry-redux#c41899e78415cae6fcb7bfca0e6ba48bb6bfe6c4", "localforage": "^1.7.1", "mixpanel-browser": "^2.17.1", "moment": "^2.22.0", -- 2.43.4 From f86bb14591fa6fdfc60fe08363c067cdf545c403 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 22 May 2018 20:11:20 -0400 Subject: [PATCH 06/10] update tooltip component to show on hover and add different directions --- src/renderer/component/categoryList/view.jsx | 1 + src/renderer/component/common/icon.jsx | 35 +++++- src/renderer/component/common/tooltip.jsx | 70 +++++------- src/renderer/component/fileCard/view.jsx | 8 +- src/renderer/page/file/view.jsx | 2 +- src/renderer/page/search/view.jsx | 9 +- src/renderer/scss/_gui.scss | 3 +- src/renderer/scss/_vars.scss | 5 +- src/renderer/scss/component/_card.scss | 51 ++++----- src/renderer/scss/component/_tooltip.scss | 109 +++++++++++++++---- src/renderer/scss/mixin/link.scss | 28 ----- 11 files changed, 181 insertions(+), 140 deletions(-) delete mode 100644 src/renderer/scss/mixin/link.scss diff --git a/src/renderer/component/categoryList/view.jsx b/src/renderer/component/categoryList/view.jsx index 0afa57940..56c69f4c9 100644 --- a/src/renderer/component/categoryList/view.jsx +++ b/src/renderer/component/categoryList/view.jsx @@ -223,6 +223,7 @@ class CategoryList extends React.PureComponent { {category && category.match(/^community/i) && ( { - // TODO: Move all icons to constants and add titles for all - // Add some some sort of hover flyout with the title? - + getTooltip = (icon: string) => { + switch (icon) { + case icons.FEATURED: + return __('Featured content. Earn rewards for watching.'); + case icons.LOCAL: + return __('This file is downloaded.'); + default: + return null; + } + }; render() { - const { icon } = this.props; + const { icon, tooltip } = this.props; const Icon = FeatherIcons[icon]; + if (!Icon) { + return null; + } + let color; if (icon === icons.TRASH || icon === icons.FEATURED) { color = RED_COLOR; @@ -30,7 +43,19 @@ class IconComponent extends React.PureComponent { size = 20; } - return Icon ? : null; + let tooltipText; + if (tooltip) { + tooltipText = this.getTooltip(icon); + } + const inner = ; + + return tooltip ? ( + + {inner} + + ) : ( + inner + ); } } diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx index e226a8351..f1c5ca893 100644 --- a/src/renderer/component/common/tooltip.jsx +++ b/src/renderer/component/common/tooltip.jsx @@ -1,55 +1,41 @@ // @flow -import React from 'react'; +import * as React from 'react'; import classnames from 'classnames'; -import Icon from 'component/common/icon'; -import Button from 'component/button'; -import * as icons from 'constants/icons'; type Props = { - body: string, - label: string, + body: ?string, + label?: string, + children: ?React.Node, + icon: ?boolean, + direction: string, }; -type State = { - showTooltip: boolean, -}; - -class ToolTip extends React.PureComponent { - constructor(props: Props) { - super(props); - - this.state = { - showTooltip: false, - }; - - (this: any).handleClick = this.handleClick.bind(this); - } - - handleClick() { - const { showTooltip } = this.state; - - if (!showTooltip) { - document.addEventListener('click', this.handleClick); - } else { - document.removeEventListener('click', this.handleClick); - } - - this.setState({ - showTooltip: !showTooltip, - }); - } +class ToolTip extends React.PureComponent { + static defaultProps = { + direction: 'top', + }; render() { - const { label, body } = this.props; - const { showTooltip } = this.state; + const { children, label, body, icon, direction } = this.props; + + const tooltipContent = children || label; return ( - - -
{body}
+ + {tooltipContent} + {body && ( + // body may be undefined for some icons until we add messages for them + {body} + )} ); } diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index 88bb99946..460006f70 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -98,14 +98,16 @@ class FileCard extends React.PureComponent {
{title}
-
+
{pending ? (
Pending...
) : ( - {isRewardContent && } - {fileInfo && } +
+ {isRewardContent && } + {fileInfo && } +
)}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index f6bec07aa..55a85904a 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -158,7 +158,7 @@ class FilePage extends React.Component {

{title}

- {isRewardContent && } + {isRewardContent && }
diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index 0535c34d7..763848def 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -5,6 +5,8 @@ import FileTile from 'component/fileTile'; import FileListSearch from 'component/fileListSearch'; import ToolTip from 'component/common/tooltip'; import Page from 'component/page'; +import Icon from 'component/common/icon'; +import * as icons from 'constants/icons'; const MODAL_ANIMATION_TIME = 250; @@ -50,10 +52,11 @@ class SearchPage extends React.PureComponent {
{__('Exact URL')} + > + +
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index d49071623..0ad4197dc 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -122,12 +122,11 @@ input::placeholder { } select { - min-width: 100px; + min-width: 60px; height: 30px; border-radius: 8px; background-color: var(--input-select-bg-color); font: normal 12px/30px 'metropolis-medium'; - text-indent: 12px; color: var(--input-select-color); &:disabled { diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index ea591571e..db8bf3e9e 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -161,9 +161,8 @@ $large-breakpoint: 1760px; --modal-btn-bg-color: var(--btn-bg-alt); // /* Tooltip */ - --tooltip-width: 300px; - --tooltip-bg: var(--color-bg); - --tooltip-color: var(--text-color); + --tooltip-bg: #555; + --tooltip-color: var(--color-white); /* Scrollbar */ --scrollbar-radius: 10px; diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 9d5404e42..b872a95e0 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -17,7 +17,6 @@ .card--small { width: var(--card-small-width); - overflow-x: hidden; white-space: normal; .card__media { @@ -86,8 +85,7 @@ align-items: center; .credit-amount, .icon { - margin-top: $spacing-vertical * 1/3; - margin-left: $spacing-vertical * 2/3; + margin: $spacing-vertical * 1/3; } } @@ -126,7 +124,11 @@ color: var(--card-text-color); .icon { - margin-left: $spacing-vertical * 1/3; + margin-top: $spacing-vertical * 1/6; + + &:not(:first-of-type) { + margin: 0 $spacing-vertical * 1/3; + } } } @@ -134,11 +136,6 @@ padding-top: $spacing-vertical * 1/3; } -.card__subtitle--file-info { - display: flex; - align-items: center; -} - .card__subtitle--block { display: block; } @@ -243,12 +240,11 @@ } /* - .card-row is used on the discover/subscriptions page + .card-row is used on the discover page It is a list of cards that extend past the right edge of the screen There are left/right arrows to scroll the cards and view hidden content */ .card-row { - overflow: hidden; white-space: nowrap; width: 100%; min-width: var(--card-small-width); @@ -289,6 +285,18 @@ padding-top: $spacing-vertical * 2/3; overflow: hidden; + .card { + display: inline-block; + vertical-align: top; + overflow-y: visible; + // 31 px to handle to padding between cards + width: calc((100% / 4) - 31px); + } + + .card:not(:first-of-type) { + margin-left: 20px; + } + .card:first-of-type { margin-left: $spacing-width; } @@ -327,27 +335,6 @@ } } -.card-row__scrollhouse { - padding-top: $spacing-vertical * 2/3; - overflow: hidden; - - .card { - display: inline-block; - vertical-align: top; - overflow: visible; - // 31 px to handle to padding between cards - width: calc((100% / 4) - 31px); - } - - .card:not(:first-of-type) { - margin-left: 20px; - } - - .card:last-of-type { - margin-right: 20px; - } -} - .card__success-msg { border-left: 2px solid var(--success-msg-border); color: var(--success-msg-color); diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss index 504880b09..3e32a7fbe 100644 --- a/src/renderer/scss/component/_tooltip.scss +++ b/src/renderer/scss/component/_tooltip.scss @@ -1,30 +1,97 @@ -@import '../mixin/link.scss'; - .tooltip { position: relative; - padding: 0 $spacing-vertical / 3; - font-size: 12px; + display: inline-block; } -.tooltip__body { +// When there is a label for the tooltip and not just using a button or icon +.tooltip.tooltip--label { + font-size: 12px; + padding-left: $spacing-vertical * 1/3; + + .tooltip__body { + margin-top: 5px; + } +} + +.tooltip.tooltip--icon { + margin-top: 5px; +} + +/* Tooltip text */ +.tooltip .tooltip__body { + background-color: var(--tooltip-bg); + font-family: 'metropolis-medium'; + font-size: 12px; + color: var(--tooltip-color); + border-radius: 8px; position: absolute; z-index: 1; - left: 50%; - margin-left: calc(var(--tooltip-width) * -1 / 2); - white-space: normal; - box-sizing: border-box; - padding: $spacing-vertical / 2; - width: var(--tooltip-width); - color: var(--tooltip-color); - background-color: var(--tooltip-bg); - font-size: calc(var(--font-size) * 7 / 8); - line-height: var(--font-line-height); - box-shadow: var(--box-shadow-layer); - border-radius: var(--card-radius); + width: 200px; + text-align: center; + white-space: pre-wrap; + padding: $spacing-vertical * 1/3; + visibility: hidden; } -.tooltip__link { - font-size: calc(var(--font-size) * 3 / 4); - margin-left: var(--button-padding); - vertical-align: middle; +.tooltip .tooltip__body::after { + content: ' '; + width: 0; + height: 0; + position: absolute; + border-width: 5px; + border-style: solid; +} + +.tooltip.tooltip--top .tooltip__body { + bottom: 100%; + left: 50%; + margin-left: -100px; + + &::after { + top: 100%; + left: 50%; + margin-left: -5px; + border-color: var(--tooltip-bg) transparent transparent transparent; + } +} + +.tooltip.tooltip--right .tooltip__body { + margin-top: -5px; + margin-left: 10px; + + &::after { + top: 17px; + right: 100%; /* To the left of the tooltip */ + margin-top: -5px; + border-color: transparent var(--tooltip-bg) transparent transparent; + } +} + +.tooltip.tooltip--bottom .tooltip__body { + top: 90%; + left: 50%; + margin-left: -100px; + + &::after { + bottom: 100%; + left: 50%; + margin-left: -5px; + border-color: transparent transparent var(--tooltip-bg) transparent; + } +} + +.tooltip.tooltip--left .tooltip__body { + top: -5px; + right: 105%; + + &::after { + top: 17px; + left: 100%; + margin-top: -5px; + border-color: transparent transparent transparent var(--tooltip-bg); + } +} + +.tooltip:hover .tooltip__body { + visibility: visible; } diff --git a/src/renderer/scss/mixin/link.scss b/src/renderer/scss/mixin/link.scss deleted file mode 100644 index df55e49ba..000000000 --- a/src/renderer/scss/mixin/link.scss +++ /dev/null @@ -1,28 +0,0 @@ -@mixin text-link($color: var(--color-primary), $hover-opacity: 0.7) { - .icon { - &:first-child { - padding-right: 5px; - } - &:last-child:not(:only-child) { - padding-left: 5px; - } - } - - &:not(.no-underline) { - text-decoration: underline; - .icon { - text-decoration: none; - } - } - &:hover { - opacity: $hover-opacity; - transition: opacity var(--transition-duration) var(--transition-type); - text-decoration: underline; - .icon { - text-decoration: none; - } - } - - color: $color; - cursor: pointer; -} -- 2.43.4 From 2f4395a9e3582d295cef7a20a738b2642def3c95 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 22 May 2018 20:29:29 -0400 Subject: [PATCH 07/10] cleanup FileDownloadLink --- .../component/fileDownloadLink/index.js | 2 -- .../component/fileDownloadLink/view.jsx | 27 ++++--------------- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/src/renderer/component/fileDownloadLink/index.js b/src/renderer/component/fileDownloadLink/index.js index d36f4c896..22f4f0a3f 100644 --- a/src/renderer/component/fileDownloadLink/index.js +++ b/src/renderer/component/fileDownloadLink/index.js @@ -5,7 +5,6 @@ import { makeSelectLoadingForUri, makeSelectCostInfoForUri, } from 'lbry-redux'; -import { doFetchAvailability } from 'redux/actions/availability'; import { doOpenFileInShell } from 'redux/actions/file'; import { doPurchaseUri, doStartDownload } from 'redux/actions/content'; import { doPause } from 'redux/actions/media'; @@ -20,7 +19,6 @@ const select = (state, props) => ({ }); const perform = dispatch => ({ - checkAvailability: uri => dispatch(doFetchAvailability(uri)), openInShell: path => dispatch(doOpenFileInShell(path)), purchaseUri: uri => dispatch(doPurchaseUri(uri)), restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)), diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx index 0658ae253..8acc17db3 100644 --- a/src/renderer/component/fileDownloadLink/view.jsx +++ b/src/renderer/component/fileDownloadLink/view.jsx @@ -11,31 +11,19 @@ type Props = { total_bytes: number, outpoint: number, download_path: string, + completed: boolean, }, loading: boolean, costInfo: ?{}, restartDownload: (string, number) => void, - checkAvailability: string => void, openInShell: string => void, purchaseUri: string => void, doPause: () => void, }; class FileDownloadLink extends React.PureComponent { - componentWillMount() { - this.checkAvailability(this.props.uri); - } - - componentWillReceiveProps(nextProps: Props) { - this.checkAvailability(nextProps.uri); - this.restartDownload(nextProps); - } - - uri: ?string; - - restartDownload = (props: Props) => { - const { downloading, fileInfo, uri, restartDownload } = props; - + componentWillUpdate() { + const { downloading, fileInfo, uri, restartDownload } = this.props; if ( !downloading && fileInfo && @@ -45,15 +33,10 @@ class FileDownloadLink extends React.PureComponent { ) { restartDownload(uri, fileInfo.outpoint); } - }; - - checkAvailability(uri: string) { - if (!this.uri || uri !== this.uri) { - this.uri = uri; - this.props.checkAvailability(uri); - } } + uri: ?string; + render() { const { fileInfo, -- 2.43.4 From e56c21fd22d73afa4be1922e5404545c005a25f8 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 22 May 2018 23:48:22 -0400 Subject: [PATCH 08/10] use color prop for icon color instead of relying on type of icon and tooltip cleanup --- src/renderer/component/button/view.jsx | 6 +++-- src/renderer/component/categoryList/view.jsx | 1 - src/renderer/component/common/icon.jsx | 23 ++++++++++++++----- src/renderer/component/common/tooltip.jsx | 9 +++----- src/renderer/component/fileActions/view.jsx | 1 + src/renderer/component/fileCard/view.jsx | 2 +- .../component/fileDownloadLink/view.jsx | 9 +++++++- .../component/subscribeButton/view.jsx | 3 ++- src/renderer/page/file/view.jsx | 4 ++-- src/renderer/scss/component/_file-list.scss | 4 ++++ 10 files changed, 42 insertions(+), 20 deletions(-) diff --git a/src/renderer/component/button/view.jsx b/src/renderer/component/button/view.jsx index f622ff28a..8b496ea12 100644 --- a/src/renderer/component/button/view.jsx +++ b/src/renderer/component/button/view.jsx @@ -22,6 +22,7 @@ type Props = { button: ?string, // primary, secondary, alt, link noPadding: ?boolean, // to remove padding and allow circular buttons uppercase: ?boolean, + iconColor: ?string, }; class Button extends React.PureComponent { @@ -48,6 +49,7 @@ class Button extends React.PureComponent { type, noPadding, uppercase, + iconColor, ...otherProps } = this.props; @@ -82,10 +84,10 @@ class Button extends React.PureComponent { const content = ( - {icon && } + {icon && } {label && {label}} {children && children} - {iconRight && } + {iconRight && } ); diff --git a/src/renderer/component/categoryList/view.jsx b/src/renderer/component/categoryList/view.jsx index 56c69f4c9..0afa57940 100644 --- a/src/renderer/component/categoryList/view.jsx +++ b/src/renderer/component/categoryList/view.jsx @@ -223,7 +223,6 @@ class CategoryList extends React.PureComponent { {category && category.match(/^community/i) && ( { @@ -23,8 +24,20 @@ class IconComponent extends React.PureComponent { return null; } }; + + getIconColor = (color: string) => { + switch (color) { + case 'red': + return RED_COLOR; + case 'purple': + return PURPLE_COLOR; + default: + return null; + } + }; + render() { - const { icon, tooltip } = this.props; + const { icon, tooltip, iconColor } = this.props; const Icon = FeatherIcons[icon]; if (!Icon) { @@ -32,10 +45,8 @@ class IconComponent extends React.PureComponent { } let color; - if (icon === icons.TRASH || icon === icons.FEATURED) { - color = RED_COLOR; - } else if (icon === icons.OPEN) { - color = PURPLE_COLOR; + if (iconColor) { + color = this.getIconColor(iconColor); } let size = 14; diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx index f1c5ca893..4bd264516 100644 --- a/src/renderer/component/common/tooltip.jsx +++ b/src/renderer/component/common/tooltip.jsx @@ -3,7 +3,7 @@ import * as React from 'react'; import classnames from 'classnames'; type Props = { - body: ?string, + body: string, label?: string, children: ?React.Node, icon: ?boolean, @@ -12,7 +12,7 @@ type Props = { class ToolTip extends React.PureComponent { static defaultProps = { - direction: 'top', + direction: 'bottom', }; render() { @@ -32,10 +32,7 @@ class ToolTip extends React.PureComponent { })} > {tooltipContent} - {body && ( - // body may be undefined for some icons until we add messages for them - {body} - )} + {body} ); } diff --git a/src/renderer/component/fileActions/view.jsx b/src/renderer/component/fileActions/view.jsx index a485cc90e..4ab110fca 100644 --- a/src/renderer/component/fileActions/view.jsx +++ b/src/renderer/component/fileActions/view.jsx @@ -30,6 +30,7 @@ class FileActions extends React.PureComponent {