+
diff --git a/src/enhance/index.js b/src/enhance/index.js
index 92ad373..88181cf 100644
--- a/src/enhance/index.js
+++ b/src/enhance/index.js
@@ -10,3 +10,74 @@ export const withOnEnter = WrappedComponent => ({onEnter, ...props}) => (
}}
/>
);
+
+class Tooltip extends React.Component {
+ constructor (props) {
+ super(props);
+
+ this.id = ('tooltip-id-' + Math.random()).replace(/\./g, '');
+ }
+
+ static defaultProps = {
+ tooltipOffsetX: 0,
+ tooltipOffsetY: 0
+ }
+
+ getTooltipElement = () => document.querySelector(`#${this.id}`);
+
+ onMouseEnter = event => {
+ if (this.getTooltipElement()) {
+ return;
+ }
+
+ const {tooltipOffsetX, tooltipOffsetY} = this.props;
+ const {x, y, height} = 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}px; left: ${x + tooltipOffsetX}px;`
+ );
+ tooltipElement.appendChild(text);
+
+ document.querySelector('body').appendChild(tooltipElement);
+
+ this.timeout = setTimeout(() => {
+ tooltipElement.setAttribute(
+ 'style',
+ `top: ${y + tooltipOffsetY}px; left: ${x + tooltipOffsetX}px; opacity: .83;`
+ );
+ }, 500);
+ }
+
+ onMouseLeave = () => {
+ clearTimeout(this.timeout);
+ const tooltipElement = this.getTooltipElement();
+ if (tooltipElement) {
+ tooltipElement.parentNode.removeChild(tooltipElement);
+ }
+ }
+
+ render () {
+ return this.props.children({
+ onMouseEnter: this.onMouseEnter,
+ onMouseLeave: this.onMouseLeave,
+ });
+ }
+}
+
+export const withTooltip = WrappedComponent => ({tooltip, tooltipOffsetX, tooltipOffsetY, ...props}) => (
+
+ {mouseEvents => tooltip ? (
+
+ ) : (
+
+ )}
+
+);
diff --git a/src/pages/Notifications/SceneAlt.js b/src/pages/Notifications/SceneAlt.js
index 9456b17..5bced77 100644
--- a/src/pages/Notifications/SceneAlt.js
+++ b/src/pages/Notifications/SceneAlt.js
@@ -8,7 +8,7 @@ import Logo from '../../components/Logo';
import LoadingIcon from '../../components/LoadingIcon';
import {routes} from '../../constants';
import {Filters} from '../../constants/filters';
-import {withOnEnter} from '../../enhance';
+import {withOnEnter, withTooltip} from '../../enhance';
import {Status} from '../../constants/status';
import {Badges} from '../../constants/reasons';
import '../../styles/gradient.css';
@@ -405,6 +405,14 @@ const SmallLink = styled('a')({
}
});
+const EnhancedTab = withTooltip(Tab);
+const EnhancedNavTab = withTooltip(NavTab);
+const EnhancedNotificationTab = withTooltip(NotificationTab);
+const EnhancedSidebarLink = withTooltip(SidebarLink);
+const EnhancedIconHot = withTooltip(Icon.Hot);
+const EnhancedIconTimer = withTooltip(Icon.Timer);
+const EnhancedIconConvo = withTooltip(Icon.Convo);
+
function getPRIssueIcon (type, reasons) {
const grow = 1.0;
switch (type) {
@@ -443,6 +451,7 @@ export default function Scene ({
onFetchNotifications,
onRefreshNotifications,
onStageThread,
+ onRestoreThread,
isSearching,
isFetchingNotifications,
onClearCache,
@@ -450,7 +459,7 @@ export default function Scene ({
activeFilter,
onSetActiveFilter,
}) {
- const isLoading = isSearching || isFetchingNotifications;
+ const loading = isSearching || isFetchingNotifications;
const isFirstPage = page === 1;
const isLastPage = page === lastPage;
@@ -479,12 +488,12 @@ export default function Scene ({
- {isSearching && }
+ {isSearching && }
You've triaged {stagedTodayCount} notifications today
+ {/*
+ We shouldn't show all the notificaitons. Pointless and creates more noise.
+
- onSetActiveFilter(Filters.PARTICIPATING)}>
{activeFilter === Filters.PARTICIPATING ? (
-
+
) : (
-
+
)}
- {/* participating */}
- your triage
-
-
+ onSetActiveFilter(Filters.COMMENT)}>
{activeFilter === Filters.COMMENT ? (
-
+
) : (
-
+
)}
- commented
-
+ participating
+
- Report bugs
- Submit feedback
- See source code
+ Report bugs
+ Submit feedback
+ See source code
@@ -603,23 +619,23 @@ export default function Scene ({
flex: 1
}}>
-
+
onFetchNotifications()) : undefined}
+ onClick={!loading ? (() => onFetchNotifications()) : undefined}
/>
-
-
+
+
{
+ onClick={!loading ? (() => {
const response = window.confirm('Are you sure you want to clear the cache?');
if (response) {
onClearCache();
}
}) : undefined}
/>
-
+
{query ? (
@@ -636,12 +652,12 @@ export default function Scene ({
Showing results for '{query}'
-
+
onClearQuery()) : undefined}
+ onClick={!loading ? (() => onClearQuery()) : undefined}
/>
-
+
) : null}
@@ -659,45 +675,51 @@ export default function Scene ({
{first}-{last} of about {allNotificationsCount}
-
+
onChangePage(page - 1)) : undefined}
+ onClick={!loading && !isFirstPage ? (() => onChangePage(page - 1)) : undefined}
/>
-
-
+
+
onChangePage(page + 1)) : undefined}
+ onClick={!loading && !isLastPage ? (() => onChangePage(page + 1)) : undefined}
/>
-
+