From 6be2388620883c41eadeaa5525f8218d7994b91d Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 19 Jun 2018 13:59:55 -0400 Subject: [PATCH 1/9] simplify autocomplete ux --- src/renderer/component/common/icon.jsx | 2 +- src/renderer/component/wunderbar/view.jsx | 14 ++++++++------ src/renderer/scss/component/_search.scss | 4 ++++ 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/renderer/component/common/icon.jsx b/src/renderer/component/common/icon.jsx index 36810b721..1a244422b 100644 --- a/src/renderer/component/common/icon.jsx +++ b/src/renderer/component/common/icon.jsx @@ -60,7 +60,7 @@ class IconComponent extends React.PureComponent { } const inner = ; - return tooltip ? ( + return tooltip && tooltipText ? ( {inner} diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx index 43869e917..2ee8dfb19 100644 --- a/src/renderer/component/wunderbar/view.jsx +++ b/src/renderer/component/wunderbar/view.jsx @@ -1,7 +1,7 @@ // @flow import React from 'react'; import classnames from 'classnames'; -import { normalizeURI } from 'lbry-redux'; +import { normalizeURI, SEARCH_TYPES } from 'lbry-redux'; import Icon from 'component/common/icon'; import { parseQueryParams } from 'util/query_params'; import * as icons from 'constants/icons'; @@ -29,7 +29,7 @@ class WunderBar extends React.PureComponent { getSuggestionIcon = (type: string) => { switch (type) { case 'file': - return icons.COMPASS; + return icons.LOCAL; case 'channel': return icons.AT_SIGN; default: @@ -109,7 +109,7 @@ class WunderBar extends React.PureComponent { placeholder="Enter LBRY URL here or search for videos, music, games and more" /> )} - renderItem={({ value, type, shorthand }, isHighlighted) => ( + renderItem={({ value, type }, isHighlighted) => (
{ })} > - {shorthand || value} - {(true || isHighlighted) && ( + {value} + {isHighlighted && ( {'- '} - {type === 'search' ? 'Search' : value} + {type === SEARCH_TYPES.SEARCH && __('Search')} + {type === SEARCH_TYPES.CHANNEL && __('View channel')} + {type === SEARCH_TYPES.FILE && __('View file')} )}
diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index 29b05b12a..74e4eeca5 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -53,6 +53,7 @@ display: flex; flex-direction: row; justify-items: flex-start; + align-items: center; font-family: 'metropolis-medium'; &:not(:first-of-type) { @@ -74,6 +75,9 @@ .wunderbar__suggestion-label--action { margin-left: $spacing-vertical * 1/3; white-space: nowrap; + font-family: 'metropolis-medium'; + font-size: 12px; + line-height: 0.1; // to vertically align because the font size is smaller } .wunderbar__active-suggestion { From da96f28794cfaa23fbbd171df61beb0fbc812bee Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 19 Jun 2018 23:55:25 -0400 Subject: [PATCH 2/9] improve file page ux --- src/renderer/component/common/tooltip.jsx | 20 ++- src/renderer/component/fileActions/view.jsx | 39 +++--- .../component/fileDownloadLink/view.jsx | 32 +++-- src/renderer/component/wunderbar/index.js | 7 +- src/renderer/page/file/view.jsx | 97 +++++++-------- src/renderer/scss/component/_card.scss | 19 ++- .../scss/component/_file-download.scss | 1 + src/renderer/scss/component/_tooltip.scss | 114 +++++++++++------- 8 files changed, 182 insertions(+), 147 deletions(-) diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx index e0045d4a1..811f09fef 100644 --- a/src/renderer/component/common/tooltip.jsx +++ b/src/renderer/component/common/tooltip.jsx @@ -5,10 +5,10 @@ import classnames from 'classnames'; type Props = { body: string, label?: string, - children: ?React.Node, - icon: ?boolean, + children?: React.Node, + icon?: boolean, direction: string, - onFormField?: boolean, + onComponent?: boolean, // extra padding to account for button/form field size }; class ToolTip extends React.PureComponent { @@ -17,9 +17,11 @@ class ToolTip extends React.PureComponent { }; render() { - const { children, label, body, icon, direction, onFormField } = this.props; + const { children, label, body, icon, direction, onComponent } = this.props; const tooltipContent = children || label; + const bodyLength = body.length; + const isShortDescription = bodyLength < 30; return ( { 'tooltip--right': direction === 'right', 'tooltip--bottom': direction === 'bottom', 'tooltip--left': direction === 'left', - 'tooltip--on-formfield': onFormField, + 'tooltip--on-component': onComponent, })} > {tooltipContent} - {body} + + {body} + ); } diff --git a/src/renderer/component/fileActions/view.jsx b/src/renderer/component/fileActions/view.jsx index 6ca72f9bb..378c8c0e5 100644 --- a/src/renderer/component/fileActions/view.jsx +++ b/src/renderer/component/fileActions/view.jsx @@ -1,9 +1,9 @@ // @flow -import React from 'react'; +import * as React from 'react'; import Button from 'component/button'; import { MODALS } from 'lbry-redux'; -import classnames from 'classnames'; import * as icons from 'constants/icons'; +import Tooltip from 'component/common/tooltip'; type FileInfo = { claim_id: string, @@ -15,34 +15,35 @@ type Props = { openModal: ({ id: string }, { uri: string }) => void, claimIsMine: boolean, fileInfo: FileInfo, - vertical?: boolean, // should the buttons be stacked vertically? }; class FileActions extends React.PureComponent { render() { - const { fileInfo, uri, openModal, claimIsMine, vertical, claimId } = this.props; + const { fileInfo, uri, openModal, claimIsMine, claimId } = this.props; const showDelete = fileInfo && Object.keys(fileInfo).length > 0; return ( -
+ {showDelete && ( -
+ ); } } diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx index 8d96624f8..ab4e9f362 100644 --- a/src/renderer/component/fileDownloadLink/view.jsx +++ b/src/renderer/component/fileDownloadLink/view.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Button from 'component/button'; import * as icons from 'constants/icons'; +import ToolTip from 'component/common/tooltip'; type Props = { uri: string, @@ -59,7 +60,7 @@ class FileDownloadLink extends React.PureComponent { if (loading || downloading) { const progress = fileInfo && fileInfo.written_bytes - ? fileInfo.written_bytes / fileInfo.total_bytes * 100 + ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0; const label = fileInfo ? __('Downloading: ') + progress.toFixed(0) + __('% complete') @@ -72,25 +73,22 @@ class FileDownloadLink extends React.PureComponent { } return ( -