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

Add Tooltips to header buttons and replace reach/ui

Browse source
This commit is contained in:
Rafael 2021-12-20 09:38:12 -03:00 committed by zeppi
parent a832fa17bd
commit 9d8de101cf
9 changed files with 108 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
ui/component/channelStakedIndicator/view.jsx
View file

@ -1,5 +1,4 @@
// @flow
import { SIMPLE_SITE } from 'config';
import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
@ -39,33 +38,31 @@ function ChannelStakedIndicator(props: Props) {
const icon = getChannelIcon(level);
return (
SIMPLE_SITE && (
<Tooltip
label={
<div className="channel-staked__tooltip">
<div className="channel-staked__tooltip-icons">
<LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
</div>
<Tooltip
title={
<div className="channel-staked__tooltip">
<div className="channel-staked__tooltip-icons">
<LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
</div>
<div className="channel-staked__tooltip-text">
<span>{__('Level %current_level%', { current_level: level })}</span>
<div className="channel-staked__amount">
<LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
</div>
<div className="channel-staked__tooltip-text">
<span>{__('Level %current_level%', { current_level: level })}</span>
<div className="channel-staked__amount">
<LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
</div>
</div>
}
>
<div
className={classnames('channel-staked__wrapper', {
'channel-staked__wrapper--large': large,
'channel-staked__wrapper--inline': inline,
})}
>
<LevelIcon icon={icon} large={large} isControlling={isControlling} />
</div>
</Tooltip>
)
}
>
<div
className={classnames('channel-staked__wrapper', {
'channel-staked__wrapper--large': large,
'channel-staked__wrapper--inline': inline,
})}
>
<LevelIcon icon={icon} large={large} isControlling={isControlling} />
</div>
</Tooltip>
);
}

4
ui/component/comment/view.jsx
View file

@ -241,7 +241,7 @@ function Comment(props: Props) {
<div className="comment__meta">
<div className="comment__meta-information">
{isGlobalMod && (
<Tooltip label={__('Admin')}>
<Tooltip title={__('Admin')}>
<span className="comment__badge comment__badge--global-mod">
<Icon icon={ICONS.BADGE_MOD} size={20} />
</span>
@ -249,7 +249,7 @@ function Comment(props: Props) {
)}
{isModerator && (
<Tooltip label={__('Moderator')}>
<Tooltip title={__('Moderator')}>
<span className="comment__badge comment__badge--mod">
<Icon icon={ICONS.BADGE_MOD} size={20} />
</span>

24
ui/component/common/tooltip.jsx
View file

@ -1,18 +1,30 @@
// @flow
import type { Node } from 'react';
import React from 'react';
import ReachTooltip from '@reach/tooltip';
// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss'
import MUITooltip from '@mui/material/Tooltip';
import type { Node } from 'react';
type Props = {
label: string | Node,
arrow?: boolean,
children: Node,
disableInteractive?: boolean,
enterDelay?: number,
title?: string | Node,
};
function Tooltip(props: Props) {
const { children, label } = props;
const { arrow = true, children, disableInteractive = true, enterDelay = 300, title } = props;
return <ReachTooltip label={label}>{children}</ReachTooltip>;
return (
<MUITooltip
arrow={arrow}
disableInteractive={disableInteractive}
enterDelay={enterDelay}
enterNextDelay={enterDelay}
title={title}
>
{children}
</MUITooltip>
);
}
export default Tooltip;

33
ui/component/header/view.jsx
View file

@ -11,6 +11,7 @@ import Logo from 'component/logo';
import NotificationBubble from 'component/notificationBubble';
import React from 'react';
import SkipNavigationButton from 'component/skipNavigationButton';
import Tooltip from 'component/common/tooltip';
import WunderBar from 'component/wunderbar';
import * as remote from '@electron/remote';
import { IS_MAC } from 'component/app/view';
@ -121,22 +122,32 @@ const Header = (props: Props) => {
const userButtons = (className: string) => (
<div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
<Button
<Tooltip
title={
balance > 0
? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
: __('Your Wallet')
}
navigate={`/$/${PAGES.WALLET}`}
className={classnames(className, 'header__navigation-item--balance')}
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
icon={ICONS.LBC}
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
/>
>
<div>
<Button
// title={
// balance > 0
// ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
// : __('Your Wallet')
// }
navigate={`/$/${PAGES.WALLET}`}
className={classnames(className, 'header__navigation-item--balance')}
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
icon={ICONS.LBC}
// @if TARGET='app'
onDoubleClick={(e) => {
e.stopPropagation();
}}
// @endif
/>
</div>
</Tooltip>
<HeaderProfileMenuButton />
</div>

25
ui/component/headerMenuButtons/view.jsx
View file

@ -7,6 +7,7 @@ import HeaderMenuLink from 'component/common/header-menu-link';
import Icon from 'component/common/icon';
import NotificationHeaderButton from 'component/headerNotificationButton';
import React from 'react';
import Tooltip from 'component/common/tooltip';
type HeaderMenuButtonProps = {
authenticated: boolean,
@ -24,13 +25,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
return (
<div className="header__buttons">
<Menu>
<MenuButton
aria-label={__('Publish a file, or create a channel')}
title={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<Tooltip title={__('Publish a file, or create a channel')}>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden">
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
</Tooltip>
<MenuList className="menu__list--header">
<HeaderMenuLink page={PAGES.UPLOAD} icon={ICONS.PUBLISH} name={__('Upload')} />
@ -41,13 +40,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
{notificationsEnabled && <NotificationHeaderButton />}
<Menu>
<MenuButton
aria-label={__('Settings')}
title={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<Tooltip title={__('Settings')}>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden">
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
</Tooltip>
<MenuList className="menu__list--header">
<HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />

19
ui/component/headerNotificationButton/view.jsx
View file

@ -7,6 +7,7 @@ import Button from 'component/button';
import Icon from 'component/common/icon';
import NotificationBubble from 'component/notificationBubble';
import React from 'react';
import Tooltip from 'component/common/tooltip';
type Props = {
unseenCount: number,
@ -28,14 +29,14 @@ export default function NotificationHeaderButton(props: Props) {
if (!notificationsEnabled) return null;
return (
<Button
onClick={handleMenuClick}
aria-label={__('Notifications')}
title={__('Notifications')}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
>
<Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
<NotificationBubble />
</Button>
<Tooltip title={__('Notifications')}>
<Button
onClick={handleMenuClick}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
>
<Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
<NotificationBubble />
</Button>
</Tooltip>
);
}

11
ui/scss/component/_channel.scss
View file

@ -363,17 +363,6 @@ $actions-z-index: 2;
}
}
.channel-staked__tooltip {
display: flex;
align-items: center;
line-height: 1rem;
}
.channel-staked__tooltip-text {
margin-left: var(--spacing-xs);
font-size: var(--font-xsmall);
}
.channel-staked__wrapper {
display: flex;
position: absolute;

30
ui/scss/component/_tooltip.scss
View file

@ -1,8 +1,24 @@
[data-reach-tooltip] {
border-radius: var(--border-radius);
background-color: var(--color-tooltip-bg);
color: var(--color-tooltip-text);
border: none;
padding: var(--spacing-s);
overflow: hidden;
.MuiTooltip-tooltip {
border-radius: var(--border-radius) !important;
background-color: var(--color-tooltip-bg) !important;
color: var(--color-tooltip-text) !important;
font-size: var(--font-small) !important;
}
.MuiTooltip-arrow {
color: var(--color-tooltip-bg) !important;
font-size: var(--font-xxsmall) !important;
}
.channel-staked__tooltip {
display: flex;
align-items: center;
line-height: 1rem;
padding: var(--spacing-xs);
.channel-staked__tooltip-text {
margin-left: var(--spacing-xs);
font-size: var(--font-xsmall);
font-size: var(--font-small);
}
}

1
ui/scss/themes/dark.scss
View file

@ -123,6 +123,7 @@
--color-purchased-text: var(--color-gray-5);
--color-thumbnail-background: var(--color-gray-5);
--color-tooltip-bg: #2f3337;
--color-tooltip-text: #fafafa;
--color-help-warning-bg: #d97706;
--color-help-warning-text: white;
--color-blockquote: var(--color-gray-5);