fix channel tooltip styles / render issues
This commit is contained in:
btzr-io
parent
7d282d07af
commit
ce7d488fd6
12 changed files with 80 additions and 95 deletions
|
|
@ -164,7 +164,6 @@
|
|||
"remark-attr": "^0.8.3",
|
||||
"remark-emoji": "^2.0.1",
|
||||
"remark-react": "^4.0.3",
|
||||
"remark-squeeze-paragraphs": "^3.0.3",
|
||||
"render-media": "^3.1.0",
|
||||
"reselect": "^3.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
|
|
@ -176,6 +175,7 @@
|
|||
"three": "^0.93.0",
|
||||
"three-full": "^17.1.0",
|
||||
"tree-kill": "^1.1.0",
|
||||
"uniqid": "^5.0.3",
|
||||
"unist-util-visit": "^1.4.1",
|
||||
"video.js": "^7.2.2",
|
||||
"villain": "btzr-io/Villain",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { formatLbryUriForWeb } from 'util/uri';
|
|||
import { OutboundLink } from 'react-ga';
|
||||
|
||||
type Props = {
|
||||
id: ?string,
|
||||
href: ?string,
|
||||
title: ?string,
|
||||
label: ?string,
|
||||
|
|
@ -37,6 +38,7 @@ class Button extends React.PureComponent<Props> {
|
|||
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
|
|
@ -109,6 +111,7 @@ class Button extends React.PureComponent<Props> {
|
|||
|
||||
return path ? (
|
||||
<NavLink
|
||||
id={id}
|
||||
exact
|
||||
to={path}
|
||||
title={title}
|
||||
|
|
@ -128,6 +131,7 @@ class Button extends React.PureComponent<Props> {
|
|||
</NavLink>
|
||||
) : (
|
||||
<button
|
||||
id={id}
|
||||
title={title}
|
||||
aria-label={description || label || title}
|
||||
className={combinedClassName}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { THEME } from 'constants/settings';
|
||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||
|
||||
import {
|
||||
doResolveUri,
|
||||
|
|
@ -21,6 +23,7 @@ const select = (state, props) => {
|
|||
title: makeSelectTitleForUri(props.uri)(state),
|
||||
thumbnail: makeSelectThumbnailForUri(props.uri)(state),
|
||||
description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
|
||||
currentTheme: makeSelectClientSetting(THEME)(state),
|
||||
channelIsMine: makeSelectClaimIsMine(props.uri)(state),
|
||||
isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
|
||||
blackListedOutpoints: selectBlackListedOutpoints(state),
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import { parseURI } from 'lbry-redux';
|
||||
import Button from 'component/button';
|
||||
import ChannelTooltip from 'component/common/channel-tooltip';
|
||||
import uniqid from 'uniqid';
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
|
|
@ -11,6 +11,7 @@ type Props = {
|
|||
children: React.Node,
|
||||
thumbnail: ?string,
|
||||
description: ?string,
|
||||
currentTheme: ?string,
|
||||
isResolvingUri: boolean,
|
||||
resolveUri: string => void,
|
||||
blackListedOutpoints: Array<{
|
||||
|
|
@ -24,6 +25,7 @@ type State = {
|
|||
};
|
||||
|
||||
class ChannelLink extends React.Component<Props, State> {
|
||||
parentId: string;
|
||||
buttonRef: { current: ?any };
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -34,28 +36,21 @@ class ChannelLink extends React.Component<Props, State> {
|
|||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { isTooltipActive: false };
|
||||
(this: any).buttonRef = React.createRef();
|
||||
|
||||
// The tooltip component don't work very well with refs,
|
||||
// so we need to use an unique id for each link:
|
||||
// (this: any).buttonRef = React.createRef();
|
||||
(this: any).parentId = uniqid.time('channnel-');
|
||||
}
|
||||
|
||||
showTooltip = () => {
|
||||
if (this.isTooltipReady()) {
|
||||
setTimeout(() => this.setState({ isTooltipActive: true }), 500);
|
||||
}
|
||||
this.setState({ isTooltipActive: true });
|
||||
};
|
||||
|
||||
hideTooltip = () => {
|
||||
if (this.isTooltipReady()) {
|
||||
setTimeout(() => this.setState({ isTooltipActive: false }), 500);
|
||||
}
|
||||
this.setState({ isTooltipActive: false });
|
||||
};
|
||||
|
||||
isTooltipReady() {
|
||||
const { claim, isResolvingUri } = this.props;
|
||||
const blackListed = this.isClaimBlackListed();
|
||||
const isReady = !blackListed && !isResolvingUri && claim !== null;
|
||||
return isReady && this.buttonRef.current !== null;
|
||||
}
|
||||
|
||||
isClaimBlackListed() {
|
||||
const { claim, blackListedOutpoints } = this.props;
|
||||
|
||||
|
|
@ -88,9 +83,7 @@ class ChannelLink extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { uri, claim, title, description, thumbnail, children, isResolvingUri } = this.props;
|
||||
const { channelName, claimName, claimId } = parseURI(uri);
|
||||
const tooltipReady = this.isTooltipReady();
|
||||
const { uri, claim, title, description, thumbnail, children, currentTheme, isResolvingUri } = this.props;
|
||||
const isUnresolved = (!isResolvingUri && !claim) || !claim;
|
||||
const isBlacklisted = this.isClaimBlackListed();
|
||||
|
||||
|
|
@ -98,29 +91,30 @@ class ChannelLink extends React.Component<Props, State> {
|
|||
return <span className="channel-name">{children}</span>;
|
||||
}
|
||||
|
||||
const { claim_id: claimId, name: channelName } = claim;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
id={this.parentId}
|
||||
className="button--uri-indicator"
|
||||
label={children}
|
||||
navigate={uri}
|
||||
innerRef={this.buttonRef}
|
||||
onMouseEnter={this.showTooltip}
|
||||
onMouseLeave={this.hideTooltip}
|
||||
/>
|
||||
{tooltipReady && (
|
||||
<ChannelTooltip
|
||||
uri={uri}
|
||||
title={title}
|
||||
claimId={claimId}
|
||||
claimName={claimName}
|
||||
channelName={channelName}
|
||||
thumbnail={thumbnail}
|
||||
description={description}
|
||||
active={this.state.isTooltipActive}
|
||||
parent={this.buttonRef.current}
|
||||
/>
|
||||
)}
|
||||
<ChannelTooltip
|
||||
uri={uri}
|
||||
title={title}
|
||||
claimId={claimId}
|
||||
channelName={channelName}
|
||||
currentTheme={currentTheme}
|
||||
thumbnail={thumbnail}
|
||||
description={description}
|
||||
active={this.state.isTooltipActive}
|
||||
parent={`#${this.parentId}`}
|
||||
group={'channel-tooltip'}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,45 +7,55 @@ import ChannelThumbnail from 'component/common/channelThumbnail';
|
|||
type TooltipProps = {
|
||||
uri: string,
|
||||
title: ?string,
|
||||
group: ?string,
|
||||
active: ?boolean,
|
||||
parent: ?HTMLElement,
|
||||
claimId: ?string,
|
||||
parent: ?HTMLElement | ?string,
|
||||
claimId: string,
|
||||
thumbnail: ?string,
|
||||
claimName: ?string,
|
||||
channelName: ?string,
|
||||
channelName: string,
|
||||
description: ?string,
|
||||
currentTheme: ?string,
|
||||
};
|
||||
|
||||
const ChannelTooltip = (props: TooltipProps) => {
|
||||
const { uri, title, active, parent, claimId, thumbnail, claimName, channelName, description } = props;
|
||||
const { uri, group, title, active, parent, claimId, thumbnail, description, channelName, currentTheme } = props;
|
||||
|
||||
const bgColor = '#32373b';
|
||||
let bgColor = 'var(--lbry-white)';
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
// Background color of the tooltip component,
|
||||
// taken from the header component:
|
||||
// mix($lbry-black, $lbry-gray-3, 90%);
|
||||
bgColor = '#32373b';
|
||||
}
|
||||
|
||||
const style = {
|
||||
style: { background: bgColor },
|
||||
arrowStyle: { color: bgColor },
|
||||
style: { background: bgColor, padding: 0 },
|
||||
arrowStyle: { color: bgColor, borderColor: false },
|
||||
};
|
||||
|
||||
const channelUrl = `${channelName}#${claimId}`;
|
||||
const formatedName = channelName.replace('@', '');
|
||||
|
||||
return (
|
||||
<ToolTip
|
||||
align="left"
|
||||
arrow="left"
|
||||
group="channel-tooltip"
|
||||
active={active}
|
||||
active={parent && active}
|
||||
group={group}
|
||||
style={style}
|
||||
parent={parent}
|
||||
position="bottom"
|
||||
tooltipTimeout={0}
|
||||
>
|
||||
<div className={'channel-tooltip'}>
|
||||
<div className={'media-tile media-tile--small card--link'}>
|
||||
<div className={'channel-tooltip__profile'}>
|
||||
<ChannelThumbnail uri={uri} thumbnail={thumbnail} />
|
||||
<div className={'channel-tooltip__info'}>
|
||||
<h2 className={'channel-tooltip__title'}>
|
||||
<TruncatedText lines={1}>{title || channelName}</TruncatedText>
|
||||
<TruncatedText lines={1}>{title || formatedName}</TruncatedText>
|
||||
</h2>
|
||||
<h3 className={'channel-tooltip__url'}>
|
||||
<TruncatedText lines={1}>{claimName + (claimId ? `#${claimId}` : '')}</TruncatedText>
|
||||
<TruncatedText lines={1}>{channelUrl}</TruncatedText>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,4 +72,4 @@ const ChannelTooltip = (props: TooltipProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default ChannelTooltip;
|
||||
export default React.memo<TooltipProps>(ChannelTooltip);
|
||||
|
|
|
|||
|
|
@ -7,11 +7,10 @@ import Gerbil from './gerbil.png';
|
|||
type Props = {
|
||||
uri: string,
|
||||
thumbnail: ?string,
|
||||
className?: string,
|
||||
};
|
||||
|
||||
function ChannelThumbnail(props: Props) {
|
||||
const { className, thumbnail, uri } = props;
|
||||
const { thumbnail, uri } = props;
|
||||
|
||||
// Generate a random color class based on the first letter of the channel name
|
||||
const { channelName } = parseURI(uri);
|
||||
|
|
@ -22,7 +21,6 @@ function ChannelThumbnail(props: Props) {
|
|||
<div
|
||||
className={classnames('channel-thumbnail', {
|
||||
[thumbnailClass]: !thumbnail,
|
||||
[className]: className,
|
||||
})}
|
||||
>
|
||||
{!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
|
|||
scope: 'extended',
|
||||
elements: ['link'],
|
||||
extend: { link: ['data-preview'] },
|
||||
defaultValue: true,
|
||||
};
|
||||
|
||||
// Strip all content and just render text
|
||||
|
|
|
|||
|
|
@ -52,4 +52,4 @@ const PreviewLink = (props: Props) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default withRouter(PreviewLink);
|
||||
export default withRouter(React.memo(PreviewLink));
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ class ExternalLink extends React.PureComponent<Props> {
|
|||
if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
|
||||
try {
|
||||
const uri = parseURI(href);
|
||||
|
||||
if (uri.isChannel && !uri.path) {
|
||||
element = (
|
||||
<ChannelLink uri={href} link>
|
||||
|
|
|
|||
|
|
@ -94,33 +94,33 @@ $metadata-z-index: 1;
|
|||
.channel-thumbnail {
|
||||
left: 0;
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
max-width: 5rem;
|
||||
max-height: 5rem;
|
||||
margin-right: 1rem;
|
||||
box-shadow: 0px 2px 10px -2px $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-tooltip .media-tile {
|
||||
.channel-tooltip__profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.channel-tooltip__description {
|
||||
padding: 8px;
|
||||
margin: 4px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.channel-tooltip__description {
|
||||
padding: 1rem;
|
||||
visibility: visible;
|
||||
border-top: 1px solid rgba($lbry-gray-4, 0.4);
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
border-top: 1px solid rgba($lbry-black, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.channel-tooltip__info {
|
||||
padding: 8px;
|
||||
margin: 4px 0;
|
||||
align-items: center;
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -129,13 +129,8 @@ $metadata-z-index: 1;
|
|||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
margin-left: 4px;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.channel-tooltip__url {
|
||||
font-size: 1rem;
|
||||
margin-left: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ html {
|
|||
background-color: $lbry-white;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
31
yarn.lock
31
yarn.lock
|
|
@ -7078,13 +7078,6 @@ md5@^2.2.1:
|
|||
crypt "~0.0.1"
|
||||
is-buffer "~1.1.1"
|
||||
|
||||
mdast-squeeze-paragraphs@^3.0.0:
|
||||
version "3.0.5"
|
||||
resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
|
||||
integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
|
||||
dependencies:
|
||||
unist-util-remove "^1.0.0"
|
||||
|
||||
mdast-util-compact@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.2.tgz#c12ebe16fffc84573d3e19767726de226e95f649"
|
||||
|
|
@ -9838,13 +9831,6 @@ remark-react@^4.0.3:
|
|||
hast-util-sanitize "^1.0.0"
|
||||
mdast-util-to-hast "^3.0.0"
|
||||
|
||||
remark-squeeze-paragraphs@^3.0.3:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.3.tgz#299d8db7d44008c9ae240dbf6d1f55b8b0f924ce"
|
||||
integrity sha512-eDvjtwFa9eClqb7XgdF/1H9Pfs2LPnf/P3eRs9ucYAWUuv4WO8ZOVAUeT/1h66rQvghnfctz9au+HEmoKcdoqA==
|
||||
dependencies:
|
||||
mdast-squeeze-paragraphs "^3.0.0"
|
||||
|
||||
remark-stringify@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-5.0.0.tgz#336d3a4d4a6a3390d933eeba62e8de4bd280afba"
|
||||
|
|
@ -11467,6 +11453,11 @@ uniq@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
|
||||
integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
|
||||
|
||||
uniqid@^5.0.3:
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-5.0.3.tgz#917968310edc868d50df6c44f783f32c7d80fac1"
|
||||
integrity sha512-R2qx3X/LYWSdGRaluio4dYrPXAJACTqyUjuyXHoJLBUOIfmMcnYOyY2d6Y4clZcIz5lK6ZaI0Zzmm0cPfsIqzQ==
|
||||
|
||||
uniqs@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
|
||||
|
|
@ -11510,11 +11501,6 @@ unist-util-is@^2.0.0, unist-util-is@^2.1.2:
|
|||
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db"
|
||||
integrity sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==
|
||||
|
||||
unist-util-is@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
|
||||
integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
|
||||
|
||||
unist-util-position@^3.0.0:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.2.tgz#80ad4a05efc4ab01a66886cc70493893ba73c5eb"
|
||||
|
|
@ -11527,13 +11513,6 @@ unist-util-remove-position@^1.0.0:
|
|||
dependencies:
|
||||
unist-util-visit "^1.1.0"
|
||||
|
||||
unist-util-remove@^1.0.0:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
|
||||
integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
|
||||
dependencies:
|
||||
unist-util-is "^3.0.0"
|
||||
|
||||
unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
|
||||
|
|
|
|||
Loading…
Reference in a new issue