LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-28 07:51:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

simplify autocomplete ux

Browse source
This commit is contained in:
Sean Yesmunt 2018-06-19 13:59:55 -04:00 • committed by seanyesmunt
parent 941672bd81
commit 6be2388620
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/component/common/icon.jsx
View file

@ -60,7 +60,7 @@ class IconComponent extends React.PureComponent<Props> {
} }
const inner = <Icon size={size} className="icon" color={color} />; const inner = <Icon size={size} className="icon" color={color} />;
return tooltip ? ( return tooltip && tooltipText ? (
<Tooltip icon body={tooltipText} direction={tooltip}> <Tooltip icon body={tooltipText} direction={tooltip}>
{inner} {inner}
</Tooltip> </Tooltip>

14
src/renderer/component/wunderbar/view.jsx
View file

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import { normalizeURI } from 'lbry-redux'; import { normalizeURI, SEARCH_TYPES } from 'lbry-redux';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import { parseQueryParams } from 'util/query_params'; import { parseQueryParams } from 'util/query_params';
import * as icons from 'constants/icons'; import * as icons from 'constants/icons';
@ -29,7 +29,7 @@ class WunderBar extends React.PureComponent<Props> {
getSuggestionIcon = (type: string) => { getSuggestionIcon = (type: string) => {
switch (type) { switch (type) {
case 'file': case 'file':
return icons.COMPASS; return icons.LOCAL;
case 'channel': case 'channel':
return icons.AT_SIGN; return icons.AT_SIGN;
default: default:
@ -109,7 +109,7 @@ class WunderBar extends React.PureComponent<Props> {
placeholder="Enter LBRY URL here or search for videos, music, games and more" placeholder="Enter LBRY URL here or search for videos, music, games and more"
/> />
)} )}
renderItem={({ value, type, shorthand }, isHighlighted) => ( renderItem={({ value, type }, isHighlighted) => (
<div <div
key={value} key={value}
className={classnames('wunderbar__suggestion', { className={classnames('wunderbar__suggestion', {
@ -117,11 +117,13 @@ class WunderBar extends React.PureComponent<Props> {
})} })}
> >
<Icon icon={this.getSuggestionIcon(type)} /> <Icon icon={this.getSuggestionIcon(type)} />
<span className="wunderbar__suggestion-label">{shorthand || value}</span> <span className="wunderbar__suggestion-label">{value}</span>
{(true || isHighlighted) && ( {isHighlighted && (
<span className="wunderbar__suggestion-label--action"> <span className="wunderbar__suggestion-label--action">
{'- '} {'- '}
{type === 'search' ? 'Search' : value} {type === SEARCH_TYPES.SEARCH && __('Search')}
{type === SEARCH_TYPES.CHANNEL && __('View channel')}
{type === SEARCH_TYPES.FILE && __('View file')}
</span> </span>
)} )}
</div> </div>

4
src/renderer/scss/component/_search.scss
View file

@ -53,6 +53,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-items: flex-start; justify-items: flex-start;
align-items: center;
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
&:not(:first-of-type) { &:not(:first-of-type) {
@ -74,6 +75,9 @@
.wunderbar__suggestion-label--action { .wunderbar__suggestion-label--action {
margin-left: $spacing-vertical * 1/3; margin-left: $spacing-vertical * 1/3;
white-space: nowrap; 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 { .wunderbar__active-suggestion {