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 Thomas Zarebczan
parent 80a375fecb
commit 75b441e7cb
11 changed files with 82 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,7 +41,7 @@ function ChannelStakedIndicator(props: Props) {
return ( return (
SIMPLE_SITE && ( SIMPLE_SITE && (
<Tooltip <Tooltip
label={ title={
<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} />

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

@ -250,7 +250,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>
@ -258,7 +258,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;

18
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';
type Props = { type Props = {
@ -124,17 +125,22 @@ const Header = (props: Props) => {
<div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}> <div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
{authenticated ? ( {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} navigate={`/$/${PAGES.WALLET}`}
/> className={classnames(className, 'header__navigation-item--balance')}
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
icon={ICONS.LBC}
/>
</div>
</Tooltip>
<HeaderProfileMenuButton /> <HeaderProfileMenuButton />
</> </>

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 = {
activeChannelStakedLevel: number, activeChannelStakedLevel: number,
@ -39,13 +40,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
<div className="header__buttons"> <div className="header__buttons">
{authenticated && ( {authenticated && (
<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')} />
@ -59,13 +58,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>
); );
} }

6
ui/component/livestreamComment/view.jsx
View file

@ -71,7 +71,7 @@ function LivestreamComment(props: Props) {
})} })}
> >
{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={16} /> <Icon icon={ICONS.BADGE_MOD} size={16} />
</span> </span>
@ -79,7 +79,7 @@ function LivestreamComment(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={16} /> <Icon icon={ICONS.BADGE_MOD} size={16} />
</span> </span>
@ -87,7 +87,7 @@ function LivestreamComment(props: Props) {
)} )}
{commentByOwnerOfContent && ( {commentByOwnerOfContent && (
<Tooltip label={__('Streamer')}> <Tooltip title={__('Streamer')}>
<span className="comment__badge"> <span className="comment__badge">
<Icon icon={ICONS.BADGE_STREAMER} size={16} /> <Icon icon={ICONS.BADGE_STREAMER} size={16} />
</span> </span>

2
ui/component/livestreamComments/view.jsx
View file

@ -245,7 +245,7 @@ export default function LivestreamComments(props: Props) {
const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat); const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat);
const SuperChatWrapper = !isSticker const SuperChatWrapper = !isSticker
? ({ children }) => <Tooltip label={superChat.comment}>{children}</Tooltip> ? ({ children }) => <Tooltip title={superChat.comment}>{children}</Tooltip>
: ({ children }) => <>{children}</>; : ({ children }) => <>{children}</>;
return ( return (

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

@ -366,17 +366,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

@ -104,6 +104,7 @@
--color-purchased-text: black; --color-purchased-text: black;
--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-focus: #e91e6329; --color-focus: #e91e6329;
--color-placeholder-background: #261a35; --color-placeholder-background: #261a35;
--color-spinner-light: white; --color-spinner-light: white;