diff --git a/src/enhance/index.js b/src/enhance/index.js index 833a780..27a768e 100644 --- a/src/enhance/index.js +++ b/src/enhance/index.js @@ -36,24 +36,34 @@ class Tooltip extends React.Component { } const {tooltipOffsetX, tooltipOffsetY} = this.props; - const {x, y} = event.target.getBoundingClientRect(); + const { + x, + y, + width: targetWidth, + height: targetHeight + } = event.target.getBoundingClientRect(); const text = document.createTextNode(this.props.message); const tooltipElement = document.createElement('div'); tooltipElement.setAttribute('id', this.id); tooltipElement.setAttribute('class', 'react-tooltip'); - tooltipElement.setAttribute( - 'style', - `top: ${y + tooltipOffsetY + window.scrollY}px; left: ${x + tooltipOffsetX}px;` - ); tooltipElement.appendChild(text); document.querySelector('body').appendChild(tooltipElement); + const {width} = tooltipElement.getBoundingClientRect(); + const positionStyle = ` + top: ${y + targetHeight + window.scrollY + tooltipOffsetY}px; + left: ${x - (width / 2) + (targetWidth / 2) + tooltipOffsetX}px; + `; + + tooltipElement.setAttribute('style', positionStyle); this.timeout = setTimeout(() => { tooltipElement.setAttribute( - 'style', - `top: ${y + tooltipOffsetY + window.scrollY}px; left: ${x + tooltipOffsetX}px; opacity: .83;` + 'style', ` + ${positionStyle} + opacity: .9; + ` ); }, this.props.tooltipSpeed); } diff --git a/src/pages/NotificationsRedesign/redesign/Scene.js b/src/pages/NotificationsRedesign/redesign/Scene.js index 4f7245a..ed01905 100644 --- a/src/pages/NotificationsRedesign/redesign/Scene.js +++ b/src/pages/NotificationsRedesign/redesign/Scene.js @@ -10,7 +10,7 @@ import Logo from '../../../components/Logo'; import LoadingIcon from '../../../components/LoadingIcon' import {getFact} from '../../../utils/facts'; import {Mode, Sort, View} from '../index'; -import {isMobile} from 'react-device-detect'; +import {withTooltip} from '../../../enhance'; import { stringOfError, getPRIssueIcon, @@ -60,10 +60,10 @@ import { LoadingNotificationRow, NotificationBlock, ErrorContainer, - NotificationCell, + NotificationCell as BaseNotificationCell, NotificationTitle, NotificationByline, - IconLink, + IconLink as BaseIconLink, Divider, Connector, RepoBarContainer, @@ -78,10 +78,13 @@ import { } from './ui'; export const AnimatedNotificationRow = animated(NotificationRow); +const IconLink = withTooltip(BaseIconLink); +const NotificationCell = withTooltip(BaseNotificationCell); + const hash = process.localEnv.GIT_HASH ? `#${process.localEnv.GIT_HASH}` : ''; const version = require('../../../../package.json').version + hash; -function PageItem ({children, onChange, ...props}) { +function BasePageItem ({children, onChange, ...props}) { return ( onChange(props.view)} @@ -92,6 +95,8 @@ function PageItem ({children, onChange, ...props}) { ); } +const PageItem = withTooltip(BasePageItem); + function MenuIconItem ({children, onChange, selected, alwaysActive, noBorder, ...props}) { return ( - + {hasNotificationsOn ? ( ) : ( @@ -607,12 +612,12 @@ export default function Scene ({ setDarkMode(m => !m); }} > - + - setDropdownOpen(true)}> + setDropdownOpen(true)}> @@ -688,6 +693,8 @@ export default function Scene ({ primary={ThemeColor(darkMode)} onChange={setView} mark={hasUnread} + tooltip="View your active unread notifications" + tooltipOffsetY={-72} > {'Unread'} {unreadCount > 0 && ( @@ -715,6 +722,8 @@ export default function Scene ({ selected={view === View.READ} primary={ThemeColor(darkMode)} onChange={setView} + tooltip="View notifications you have already read" + tooltipOffsetY={-72} > {'Read'} {readCount > 0 && ( @@ -742,6 +751,8 @@ export default function Scene ({ selected={view === View.ARCHIVED} primary={ThemeColor(darkMode)} onChange={setView} + tooltip="View notifications that are considered completed" + tooltipOffsetY={-72} > {'Archived'} {archivedCount > 0 && ( @@ -1084,12 +1095,17 @@ function NotificationCollection ({ {'@' + item.repository} {/* Score */} - + {'+' + item.score} - markAsRead(item.id, item.repository)}> + markAsRead(item.id, item.repository)} + > - markAsArchived(item.id, item.repository)}> + markAsArchived(item.id, item.repository)} + > @@ -1144,10 +1166,16 @@ function ActionItems ({item, view, markAsRead, markAsArchived, markAsUnread}) { case View.READ: return ( <> - markAsUnread(item.id)}> + markAsUnread(item.id)} + > - markAsArchived(item.id, item.repository)}> + markAsArchived(item.id, item.repository)} + > @@ -1155,10 +1183,16 @@ function ActionItems ({item, view, markAsRead, markAsArchived, markAsUnread}) { case View.ARCHIVED: return ( <> - markAsUnread(item.id)}> + markAsUnread(item.id)} + > - markAsRead(item.id, item.repository)}> + markAsRead(item.id, item.repository)} + > diff --git a/src/styles/index.css b/src/styles/index.css index d1e0092..39fad46 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -98,7 +98,6 @@ a { font-size: 11px; border-radius: 4px; white-space: nowrap; - transform: translateX(-35%) translateY(-15px); opacity: 0; transition: all 75ms ease-in; }