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 (
SIMPLE_SITE && (
<Tooltip
label={
title={
<div className="channel-staked__tooltip">
<div className="channel-staked__tooltip-icons">
<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-information">
{isGlobalMod && (
<Tooltip label={__('Admin')}>
<Tooltip title={__('Admin')}>
<span className="comment__badge comment__badge--global-mod">
<Icon icon={ICONS.BADGE_MOD} size={20} />
</span>
@ -258,7 +258,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;

18
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';
type Props = {
@ -124,17 +125,22 @@ const Header = (props: Props) => {
<div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
{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}
/>
>
<div>
<Button
navigate={`/$/${PAGES.WALLET}`}
className={classnames(className, 'header__navigation-item--balance')}
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
icon={ICONS.LBC}
/>
</div>
</Tooltip>
<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 NotificationHeaderButton from 'component/headerNotificationButton';
import React from 'react';
import Tooltip from 'component/common/tooltip';
type HeaderMenuButtonProps = {
activeChannelStakedLevel: number,
@ -39,13 +40,11 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
<div className="header__buttons">
{authenticated && (
<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')} />
@ -59,13 +58,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>
);
}

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

@ -71,7 +71,7 @@ function LivestreamComment(props: Props) {
})}
>
{isGlobalMod && (
<Tooltip label={__('Admin')}>
<Tooltip title={__('Admin')}>
<span className="comment__badge comment__badge--global-mod">
<Icon icon={ICONS.BADGE_MOD} size={16} />
</span>
@ -79,7 +79,7 @@ function LivestreamComment(props: Props) {
)}
{isModerator && (
<Tooltip label={__('Moderator')}>
<Tooltip title={__('Moderator')}>
<span className="comment__badge comment__badge--mod">
<Icon icon={ICONS.BADGE_MOD} size={16} />
</span>
@ -87,7 +87,7 @@ function LivestreamComment(props: Props) {
)}
{commentByOwnerOfContent && (
<Tooltip label={__('Streamer')}>
<Tooltip title={__('Streamer')}>
<span className="comment__badge">
<Icon icon={ICONS.BADGE_STREAMER} size={16} />
</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 SuperChatWrapper = !isSticker
? ({ children }) => <Tooltip label={superChat.comment}>{children}</Tooltip>
? ({ children }) => <Tooltip title={superChat.comment}>{children}</Tooltip>
: ({ children }) => <>{children}</>;
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 {
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

@ -104,6 +104,7 @@
--color-purchased-text: black;
--color-thumbnail-background: var(--color-gray-5);
--color-tooltip-bg: #2f3337;
--color-tooltip-text: #fafafa;
--color-focus: #e91e6329;
--color-placeholder-background: #261a35;
--color-spinner-light: white;