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 // @flow
import { SIMPLE_SITE } from 'config';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
@ -39,33 +38,31 @@ function ChannelStakedIndicator(props: Props) {
const icon = getChannelIcon(level); const icon = getChannelIcon(level);
return ( return (
SIMPLE_SITE && ( <Tooltip
<Tooltip title={
label={ <div className="channel-staked__tooltip">
<div className="channel-staked__tooltip"> <div className="channel-staked__tooltip-icons">
<div className="channel-staked__tooltip-icons"> <LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
<LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} /> </div>
</div>
<div className="channel-staked__tooltip-text"> <div className="channel-staked__tooltip-text">
<span>{__('Level %current_level%', { current_level: level })}</span> <span>{__('Level %current_level%', { current_level: level })}</span>
<div className="channel-staked__amount"> <div className="channel-staked__amount">
<LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} /> <LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
</div>
</div> </div>
</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> </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">
<div className="comment__meta-information"> <div className="comment__meta-information">
{isGlobalMod && ( {isGlobalMod && (
<Tooltip label={__('Admin')}> <Tooltip title={__('Admin')}>
<span className="comment__badge comment__badge--global-mod"> <span className="comment__badge comment__badge--global-mod">
<Icon icon={ICONS.BADGE_MOD} size={20} /> <Icon icon={ICONS.BADGE_MOD} size={20} />
</span> </span>
@ -249,7 +249,7 @@ function Comment(props: Props) {
)} )}
{isModerator && ( {isModerator && (
<Tooltip label={__('Moderator')}> <Tooltip title={__('Moderator')}>
<span className="comment__badge comment__badge--mod"> <span className="comment__badge comment__badge--mod">
<Icon icon={ICONS.BADGE_MOD} size={20} /> <Icon icon={ICONS.BADGE_MOD} size={20} />
</span> </span>

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

@ -1,18 +1,30 @@
// @flow // @flow
import type { Node } from 'react';
import React from 'react'; import React from 'react';
import ReachTooltip from '@reach/tooltip'; import MUITooltip from '@mui/material/Tooltip';
// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss' import type { Node } from 'react';
type Props = { type Props = {
label: string | Node, arrow?: boolean,
children: Node, children: Node,
disableInteractive?: boolean,
enterDelay?: number,
title?: string | Node,
}; };
function Tooltip(props: Props) { 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; 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 NotificationBubble from 'component/notificationBubble';
import React from 'react'; import React from 'react';
import SkipNavigationButton from 'component/skipNavigationButton'; import SkipNavigationButton from 'component/skipNavigationButton';
import Tooltip from 'component/common/tooltip';
import WunderBar from 'component/wunderbar'; import WunderBar from 'component/wunderbar';
import * as remote from '@electron/remote'; import * as remote from '@electron/remote';
import { IS_MAC } from 'component/app/view'; import { IS_MAC } from 'component/app/view';
@ -121,22 +122,32 @@ const Header = (props: Props) => {
const userButtons = (className: string) => ( const userButtons = (className: string) => (
<div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}> <div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
<Button <Tooltip
title={ title={
balance > 0 balance > 0
? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance }) ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
: __('Your Wallet') : __('Your Wallet')
} }
navigate={`/$/${PAGES.WALLET}`} >
className={classnames(className, 'header__navigation-item--balance')} <div>
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance} <Button
icon={ICONS.LBC} // title={
// @if TARGET='app' // balance > 0
onDoubleClick={(e) => { // ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
e.stopPropagation(); // : __('Your Wallet')
}} // }
// @endif 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 /> <HeaderProfileMenuButton />
</div> </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 Icon from 'component/common/icon';
import NotificationHeaderButton from 'component/headerNotificationButton'; import NotificationHeaderButton from 'component/headerNotificationButton';
import React from 'react'; import React from 'react';
import Tooltip from 'component/common/tooltip';
type HeaderMenuButtonProps = { type HeaderMenuButtonProps = {
authenticated: boolean, authenticated: boolean,
@ -24,13 +25,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
return ( return (
<div className="header__buttons"> <div className="header__buttons">
<Menu> <Menu>
<MenuButton <Tooltip title={__('Publish a file, or create a channel')}>
aria-label={__('Publish a file, or create a channel')} <MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden">
title={__('Publish a file, or create a channel')} <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden" </MenuButton>
> </Tooltip>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<HeaderMenuLink page={PAGES.UPLOAD} icon={ICONS.PUBLISH} name={__('Upload')} /> <HeaderMenuLink page={PAGES.UPLOAD} icon={ICONS.PUBLISH} name={__('Upload')} />
@ -41,13 +40,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
{notificationsEnabled && <NotificationHeaderButton />} {notificationsEnabled && <NotificationHeaderButton />}
<Menu> <Menu>
<MenuButton <Tooltip title={__('Settings')}>
aria-label={__('Settings')} <MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden">
title={__('Settings')} <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden" </MenuButton>
> </Tooltip>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} /> <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 Icon from 'component/common/icon';
import NotificationBubble from 'component/notificationBubble'; import NotificationBubble from 'component/notificationBubble';
import React from 'react'; import React from 'react';
import Tooltip from 'component/common/tooltip';
type Props = { type Props = {
unseenCount: number, unseenCount: number,
@ -28,14 +29,14 @@ export default function NotificationHeaderButton(props: Props) {
if (!notificationsEnabled) return null; if (!notificationsEnabled) return null;
return ( return (
<Button <Tooltip title={__('Notifications')}>
onClick={handleMenuClick} <Button
aria-label={__('Notifications')} onClick={handleMenuClick}
title={__('Notifications')} className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden" >
> <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
<Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden /> <NotificationBubble />
<NotificationBubble /> </Button>
</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 { .channel-staked__wrapper {
display: flex; display: flex;
position: absolute; position: absolute;

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

@ -1,8 +1,24 @@
[data-reach-tooltip] { .MuiTooltip-tooltip {
border-radius: var(--border-radius); border-radius: var(--border-radius) !important;
background-color: var(--color-tooltip-bg); background-color: var(--color-tooltip-bg) !important;
color: var(--color-tooltip-text); color: var(--color-tooltip-text) !important;
border: none; font-size: var(--font-small) !important;
padding: var(--spacing-s); }
overflow: hidden;
.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-purchased-text: var(--color-gray-5);
--color-thumbnail-background: var(--color-gray-5); --color-thumbnail-background: var(--color-gray-5);
--color-tooltip-bg: #2f3337; --color-tooltip-bg: #2f3337;
--color-tooltip-text: #fafafa;
--color-help-warning-bg: #d97706; --color-help-warning-bg: #d97706;
--color-help-warning-text: white; --color-help-warning-text: white;
--color-blockquote: var(--color-gray-5); --color-blockquote: var(--color-gray-5);