LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

UX changes #1650

Merged
neb-b merged 9 commits from ux-fixes into master 2018-06-21 00:36:11 +02:00
Conversation 3 Commits 9 Files changed 20 +243 -244
20 changed files with 243 additions and 244 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} />;
return tooltip ? (
return tooltipText ? (
<Tooltip icon body={tooltipText} direction={tooltip}>
{inner}
</Tooltip>

20
src/renderer/component/common/tooltip.jsx
View file

@ -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<Props> {
@ -17,9 +17,11 @@ class ToolTip extends React.PureComponent<Props> {
};
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 (
<span
@ -30,11 +32,17 @@ class ToolTip extends React.PureComponent<Props> {
'tooltip--right': direction === 'right',
'tooltip--bottom': direction === 'bottom',
'tooltip--left': direction === 'left',
'tooltip--on-formfield': onFormField,
'tooltip--on-component': onComponent,
})}
>
{tooltipContent}
<span className="tooltip__body">{body}</span>
<span
className={classnames('tooltip__body', {
'tooltip__body--short': isShortDescription,
})}
>
{body}
</span>
</span>
);
}

39
src/renderer/component/fileActions/view.jsx
View file

@ -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<Props> {
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 (
<section className={classnames('card__actions', { 'card__actions--vertical': vertical })}>
<React.Fragment>
{showDelete && (
<Button
button="alt"
icon={icons.TRASH}
iconColor="red"
label={__('Delete')}
onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
/>
<Tooltip onComponent body={__('Delete this file')}>
<Button
button="alt"
icon={icons.TRASH}
description={__('Delete')}
onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
/>
</Tooltip>
)}
{!claimIsMine && (
<Button
button="alt"
icon={icons.REPORT}
href={`https://lbry.io/dmca?claim_id=${claimId}`}
label={__('Report content')}
/>
<Tooltip onComponent body={__('Report content')}>
<Button
button="alt"
icon={icons.REPORT}
href={`https://lbry.io/dmca?claim_id=${claimId}`}
/>
</Tooltip>
)}
</section>
</React.Fragment>
);
}
}

32
src/renderer/component/fileDownloadLink/view.jsx
View file

@ -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<Props> {
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<Props> {
}
return (
<Button
button="alt"
label={__('Download')}
icon={icons.DOWNLOAD}
iconColor="purple"
onClick={() => {
purchaseUri(uri);
}}
/>
<ToolTip onComponent body={__('Download')}>
<Button
button="alt"
icon={icons.DOWNLOAD}
iconColor="purple"
onClick={() => {
purchaseUri(uri);
}}
/>
</ToolTip>
);
} else if (fileInfo && fileInfo.download_path) {
return (
<Button
button="alt"
iconColor="purple"
label={__('Open File')}
icon={icons.OPEN}
onClick={() => openFile()}
/>
<ToolTip onComponent body={__('Open file')}>
<Button button="alt" iconColor="purple" icon={icons.LOCAL} onClick={() => openFile()} />
</ToolTip>
);
}

16
src/renderer/component/fileListSearch/index.js
View file

@ -1,10 +1,5 @@
import { connect } from 'react-redux';
import {
doSearch,
makeSelectSearchUris,
selectIsSearching,
selectSearchDownloadUris,
} from 'lbry-redux';
import { makeSelectSearchUris, selectIsSearching, selectSearchDownloadUris } from 'lbry-redux';
import FileListSearch from './view';
const select = (state, props) => ({
@ -13,8 +8,9 @@ const select = (state, props) => ({
isSearching: selectIsSearching(state),
});
const perform = dispatch => ({
search: search => dispatch(doSearch(search)),
});
const perform = () => ({});
export default connect(select, perform)(FileListSearch);
export default connect(
select,
perform
)(FileListSearch);

25
src/renderer/component/fileListSearch/view.jsx
View file

@ -3,14 +3,10 @@ import React from 'react';
import FileTile from 'component/fileTile';
import ChannelTile from 'component/channelTile';
import { parseURI } from 'lbry-redux';
import debounce from 'util/debounce';
const SEARCH_DEBOUNCE_TIME = 800;
const NoResults = () => <div className="file-tile">{__('No results')}</div>;
type Props = {
search: string => void,
query: string,
isSearching: boolean,
uris: ?Array<string>,
@ -18,27 +14,6 @@ type Props = {
};
class FileListSearch extends React.PureComponent<Props> {
constructor(props: Props) {
super(props);
this.debouncedSearch = debounce(this.props.search, SEARCH_DEBOUNCE_TIME);
}
componentDidMount() {
const { search, query } = this.props;
search(query);
}
componentWillReceiveProps(nextProps: Props) {
const { query: nextQuery } = nextProps;
const { query: currentQuerry } = this.props;
if (nextQuery !== currentQuerry) {
this.debouncedSearch(nextQuery);
}
}
debouncedSearch: string => void;
render() {
const { uris, query, downloadUris, isSearching } = this.props;

16
src/renderer/component/shapeShift/internal/active-shift.jsx
View file

@ -131,16 +131,14 @@ class ActiveShapeShift extends React.PureComponent<Props> {
href={`https://shapeshift.io/#/status/${shiftOrderId}`}
/>
)}
{shiftState === statuses.NO_DEPOSITS &&
shiftReturnAddress && (
<div className="shapeshift__actions-help">
<span className="help">
If the transaction doesn't go through, ShapeShift will return your {shiftCoinType}{' '}
back to {shiftReturnAddress}
</span>
</div>
)}
</div>
{shiftState === statuses.NO_DEPOSITS &&
shiftReturnAddress && (
<div className="help">
If the transaction doesn't go through, ShapeShift will return your {shiftCoinType}{' '}
back to {shiftReturnAddress}
</div>
)}
</div>
);
}

24
src/renderer/component/userEmailVerify/view.jsx
View file

@ -8,6 +8,7 @@ type Props = {
errorMessage: ?string,
email: string,
isPending: boolean,
onModal?: boolean,
verifyUserEmail: (string, string) => void,
verifyUserEmailFailure: string => void,
resendVerificationEmail: string => void,
@ -50,7 +51,7 @@ class UserEmailVerify extends React.PureComponent<Props, State> {
}
render() {
const { cancelButton, errorMessage, email, isPending } = this.props;
const { cancelButton, errorMessage, email, isPending, onModal } = this.props;
return (
<Form onSubmit={this.handleSubmit}>
@ -77,12 +78,23 @@ class UserEmailVerify extends React.PureComponent<Props, State> {
<div className="card__actions">
<Submit label={__('Verify')} disabled={isPending} />
{cancelButton}
<Button
button="link"
label={__('Resend verification email')}
onClick={this.handleResendVerificationEmail}
/>
{!onModal && (
<Button
button="link"
label={__('Resend verification email')}
onClick={this.handleResendVerificationEmail}
/>
)}
</div>
{onModal && (
<div className="card__actions help">
<Button
button="link"
label={__('Resend verification email')}
onClick={this.handleResendVerificationEmail}
/>
</div>
)}
</Form>
);
}

8
src/renderer/component/walletAddress/view.jsx
View file

@ -66,9 +66,11 @@ class WalletAddress extends React.PureComponent<Props> {
/>
</div>
<div className="card__content">
{showQR && <QRCode value={receiveAddress} paddingTop />}
</div>
{showQR && (
<div className="card__content">
<QRCode value={receiveAddress} paddingTop />
</div>
)}
<div className="card__content">
<div className="help">

9
src/renderer/component/wunderbar/index.js
View file

@ -3,8 +3,6 @@ import {
selectSearchState as selectSearch,
selectWunderBarAddress,
doUpdateSearchQuery,
doNotify,
MODALS,
doFocusSearchInput,
doBlurSearchInput,
doSearch,
@ -28,7 +26,7 @@ const select = state => {
const perform = dispatch => ({
onSearch: query => {
dispatch(doSearch(query));
dispatch(doSearch(query, 30)); // Hard coding this for now until https://github.com/lbryio/lbry-app/pull/1639 is merged
dispatch(doNavigate(`/search`, { query }));
},
onSubmit: (uri, extraParams) => dispatch(doNavigate('/show', { uri, ...extraParams })),
@ -37,4 +35,7 @@ const perform = dispatch => ({
doBlur: () => dispatch(doBlurSearchInput()),
});
export default connect(select, perform)(Wunderbar);
export default connect(
select,
perform
)(Wunderbar);

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

@ -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<Props> {
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<Props> {
placeholder="Enter LBRY URL here or search for videos, music, games and more"
/>
)}
renderItem={({ value, type, shorthand }, isHighlighted) => (
renderItem={({ value, type }, isHighlighted) => (
<div
key={value}
className={classnames('wunderbar__suggestion', {
@ -117,11 +117,13 @@ class WunderBar extends React.PureComponent<Props> {
})}
>
<Icon icon={this.getSuggestionIcon(type)} />
<span className="wunderbar__suggestion-label">{shorthand || value}</span>
{(true || isHighlighted) && (
<span className="wunderbar__suggestion-label">{value}</span>
{isHighlighted && (
<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>
)}
</div>

2
src/renderer/modal/modalEmailCollection/view.jsx
View file

@ -20,7 +20,7 @@ class ModalEmailCollection extends React.PureComponent<Props> {
if (user && !user.has_verified_email && !email) {
return <UserEmailNew cancelButton={cancelButton} />;
} else if (user && !user.has_verified_email) {
return <UserEmailVerify cancelButton={cancelButton} />;
return <UserEmailVerify onModal cancelButton={cancelButton} />;
}
return closeModal();

97
src/renderer/page/file/view.jsx
View file

@ -167,10 +167,10 @@ class FilePage extends React.Component<Props> {
<div className="card__title-identity--file">
<h1 className="card__title card__title--file">{title}</h1>
<div className="card__title-identity-icons">
<FilePrice uri={normalizeURI(uri)} />
{isRewardContent && (
<Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
)}
<FilePrice uri={normalizeURI(uri)} />
</div>
</div>
<span className="card__subtitle card__subtitle--file">
@ -180,60 +180,55 @@ class FilePage extends React.Component<Props> {
{metadata.nsfw && <div>NSFW</div>}
<div className="card__channel-info">
<UriIndicator uri={uri} link />
<div className="card__actions card__actions--no-margin">
{claimIsMine ? (
<Button
button="primary"
icon={icons.EDIT}
label={__('Edit')}
onClick={() => {
prepareEdit(claim, editUri);
navigate('/publish');
}}
/>
) : (
<SubscribeButton uri={subscriptionUri} channelName={channelName} />
)}
</div>
<div className="card__actions card__actions--between">
{(claimIsMine || subscriptionUri || speechSharable) && (
<div className="card__actions">
{claimIsMine ? (
<Button
button="primary"
icon={icons.EDIT}
label={__('Edit')}
onClick={() => {
prepareEdit(claim, editUri);
navigate('/publish');
}}
/>
) : (
<SubscribeButton uri={subscriptionUri} channelName={channelName} />
)}
{!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>
)}
<div className="card__actions">
<FileDownloadLink uri={uri} />
<FileActions uri={uri} claimId={claim.claim_id} />
</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 padded>
<FormField
useToggle
name="autoplay"
type="checkbox"
checked={autoplay}
onChange={this.onAutoplayChange}
postfix={
<ToolTip
onFormField
label={__('Autoplay')}
body={__('Automatically download and play free content.')}
/>
}
/>
<FormRow padded>
<ToolTip onComponent body={__('Automatically download and play free content.')}>
<FormField
useToggle
name="autoplay"
type="checkbox"
postfix={__('Autoplay')}
checked={autoplay}
onChange={this.onAutoplayChange}
/>
</ToolTip>
</FormRow>
</div>
<div className="card__content">
<FileDownloadLink uri={uri} />
<FileActions uri={uri} claimId={claim.claim_id} />
</div>
<div className="card__content--extra-padding">
<FileDetails uri={uri} />
</div>

10
src/renderer/page/search/index.js
View file

@ -1,12 +1,11 @@
import React from 'react';
import { connect } from 'react-redux';
import { selectIsSearching, selectSearchValue, doUpdateSearchQuery } from 'lbry-redux';
import { selectIsSearching, doUpdateSearchQuery, makeSelectCurrentParam } from 'lbry-redux';
import { doNavigate } from 'redux/actions/navigation';
import SearchPage from './view';
const select = state => ({
isSearching: selectIsSearching(state),
query: selectSearchValue(state),
query: makeSelectCurrentParam('query')(state),
});
const perform = dispatch => ({
@ -14,4 +13,7 @@ const perform = dispatch => ({
updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
});
export default connect(select, perform)(SearchPage);
export default connect(
select,
perform
)(SearchPage);

20
src/renderer/page/search/view.jsx
View file

@ -8,31 +8,11 @@ import Page from 'component/page';
import Icon from 'component/common/icon';
import * as icons from 'constants/icons';
const MODAL_ANIMATION_TIME = 250;
type Props = {
query: ?string,
};
class SearchPage extends React.PureComponent<Props> {
constructor() {
super();
this.input = null;
}
componentDidMount() {
// Wait for the modal to animate down before focusing
// without this there is an issue with scroll the page down
setTimeout(() => {
if (this.input) {
this.input.focus();
}
}, MODAL_ANIMATION_TIME);
}
input: ?HTMLInputElement;
render() {
const { query } = this.props;
return (

10
src/renderer/scss/_gui.scss
View file

@ -190,15 +190,7 @@ p {
.main--contained {
max-width: 1000px;
margin: 0 80px - $spacing-width;
@media only screen and (min-width: $medium-breakpoint) {
margin: 0 120px - $spacing-width;
}
@media only screen and (min-width: $large-breakpoint) {
margin: 0 200px - $spacing-width;
}
margin: auto;
}
.main--no-padding {

24
src/renderer/scss/component/_card.scss
View file

@ -93,9 +93,10 @@
.card__title-identity--file {
display: flex;
align-items: center;
.credit-amount,
justify-content: space-between;
.icon {
margin: $spacing-vertical * 1/3;
margin: 0 $spacing-vertical * 1/3;
}
}
@ -113,9 +114,9 @@
.card__title--small {
font-size: 14px;
line-height: 18px;
padding-top: 20px;
padding-top: $spacing-vertical / 3;
@media only screen and (min-width: $medium-breakpoint) {
@media only screen and (min-width: $large-breakpoint) {
font-size: 16px;
}
}
@ -198,7 +199,7 @@
.card__subtext-title {
color: var(--text-color);
font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
font-size: calc(var(--font-size-subtext-multiple) * 1.2em);
&:not(:first-of-type) {
margin-top: $spacing-vertical * 3/2;
@ -220,8 +221,12 @@
margin-top: $spacing-vertical * 2/3;
display: flex;
&:not(.card__actions--vertical) .btn:nth-child(n + 2) {
margin-left: $spacing-vertical / 3;
&:not(.card__actions--vertical) {
.btn:nth-child(n + 2),
// For buttons wrapped in a tooltip
.tooltip:nth-child(n + 2) {
margin-left: $spacing-vertical / 3;
}
}
}
@ -258,6 +263,11 @@
justify-content: flex-end;
}
.card__actions--between {
justify-content: space-between;
flex-wrap: wrap;
}
/*
.card-row is used on the discover page
It is a list of cards that extend past the right edge of the screen

1
src/renderer/scss/component/_file-download.scss
View file

@ -1,3 +1,4 @@
.file-download {
font-size: 0.8em;
align-self: center;
}

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

@ -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 {

114
src/renderer/scss/component/_tooltip.scss
View file

@ -13,43 +13,57 @@
}
}
.tooltip--on-formfield {
padding: 0;
}
.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;
width: 200px;
text-align: center;
white-space: pre-wrap;
padding: $spacing-vertical * 1/3;
visibility: hidden;
.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;
width: 200px;
text-align: center;
white-space: pre-wrap;
padding: $spacing-vertical * 1/3;
visibility: hidden;
}
.tooltip__body--short {
width: 130px;
}
.tooltip__body::after {
content: ' ';
width: 0;
height: 0;
position: absolute;
border-width: 5px;
border-style: solid;
}
&.tooltip--on-component {
.tooltip__body {
margin-top: 10px;
}
}
}
.tooltip .tooltip__body::after {
content: ' ';
width: 0;
height: 0;
position: absolute;
border-width: 5px;
border-style: solid;
}
.tooltip--top {
.tooltip__body {
bottom: 100%;
left: 50%;
margin-left: -100px;
.tooltip--top .tooltip__body {
bottom: 100%;
left: 50%;
margin-left: -100px;
&.tooltip__body--short {
margin-left: -65px;
}
}
&::after {
top: 100%;
@ -59,28 +73,36 @@
}
}
.tooltip--right .tooltip__body {
margin-top: -5px;
margin-left: 10px;
&::after {
top: 17px;
right: 100%; /* To the left of the tooltip */
.tooltip--right {
.tooltip__body {
margin-top: -5px;
border-color: transparent var(--tooltip-bg) transparent transparent;
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;
}
}
}
kauffj commented 2018-06-20 23:50:49 +02:00 (Migrated from github.com)
Review
Copy link

The margins on <main> appear to make this safe for realistic use cases, but what would happen if a tooltip is on a button with a width that would extend past the canvas size?

The margins on `<main>` appear to make this safe for realistic use cases, but what would happen if a tooltip is on a button with a width that would extend past the canvas size?
neb-b commented 2018-06-21 00:08:14 +02:00 (Migrated from github.com)
Review
Copy link

Tooltips can extend past the margin with no issues

Tooltips can extend past the margin with no issues
.tooltip--bottom .tooltip__body {
top: 90%;
left: 50%;
margin-left: -100px;
&::after {
bottom: 100%;
.tooltip--bottom {
.tooltip__body {
top: 90%;
left: 50%;
margin-left: -5px;
border-color: transparent transparent var(--tooltip-bg) transparent;
margin-left: -100px;
&.tooltip__body--short {
margin-left: -65px;
}
&::after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-color: transparent transparent var(--tooltip-bg) transparent;
}
}
}