Skip to content

Commit

Permalink
Merge branch 'develop' into chore/ddw-596-webpack-5-upgrade
Browse files Browse the repository at this point in the history
# Conflicts:
#	source/renderer/app/i18n/locales/defaultMessages.json
  • Loading branch information
DominikGuzei committed Apr 27, 2022
2 parents e1a612b + 7a97d26 commit 6cc778b
Show file tree
Hide file tree
Showing 27 changed files with 296 additions and 127 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Features

- Implemented hover tooltips for menu ([PR 2938](https://github.com/input-output-hk/daedalus/pull/2938))
- Improved UI regarding the Hardware Wallet public key export error ([PR 2922](https://github.com/input-output-hk/daedalus/pull/2922))
- Added ASCII name to token header when metadata name is missing ([PR 2904](https://github.com/input-output-hk/daedalus/pull/2904))
- Improved IPC by reducing the amount of messages from periodic events ([PR 2892](https://github.com/input-output-hk/daedalus/pull/2892))
Expand All @@ -12,6 +13,7 @@

### Fixes

- Fixed stake pool list styling ([PR 2920](https://github.com/input-output-hk/daedalus/pull/2920))
- Fixed PopOver overlap ([PR 2954](https://github.com/input-output-hk/daedalus/pull/2954))
- Fixed tooltip being hidden in several places ([PR-2934](https://github.com/input-output-hk/daedalus/pull/2934))
- Adjusted padding for search field in stake pools ([PR 2945](https://github.com/input-output-hk/daedalus/pull/2945))
Expand Down
24 changes: 24 additions & 0 deletions source/renderer/app/components/sidebar/SidebarCategory.messages.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { defineMessages } from 'react-intl';

export const messages = defineMessages({
wallets: {
id: 'sidebar.categoryTooltip.wallets',
defaultMessage: '!!!Wallets',
description: 'Text for the tooltip of wallets category',
},
staking: {
id: 'sidebar.categoryTooltip.staking',
defaultMessage: '!!!Staking',
description: 'Text for the tooltip of staking category',
},
settings: {
id: 'sidebar.categoryTooltip.settings',
defaultMessage: '!!!Settings',
description: 'Text for the tooltip of settings category',
},
voting: {
id: 'sidebar.categoryTooltip.voting',
defaultMessage: '!!!Voting',
description: 'Text for the tooltip of voting category',
},
});
57 changes: 34 additions & 23 deletions source/renderer/app/components/sidebar/SidebarCategory.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,53 @@
import React, { Component } from 'react';
// @ts-ignore ts-migrate(2305) FIXME: Module '"react"' has no exported member 'Node'.
import type { Node } from 'react';
import React from 'react';
import SVGInline from 'react-svg-inline';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import { camelCase } from 'lodash';
import { PopOver } from 'react-polymorph/lib/components/PopOver';
import { injectIntl } from 'react-intl';
import type { SidebarCategoryInfo } from '../../config/sidebarConfig';
import styles from './SidebarCategory.scss';
import { messages } from './SidebarCategory.messages';
import type { Intl } from '../../types/i18nTypes';
import { TOOLTIP_DELAY } from '../../config/timingConfig';

type Props = {
category: SidebarCategoryInfo;
intl: Intl;
isActive: boolean;
onClick: (...args: Array<any>) => any;
content?: Node;
content?: React.ReactNode;
};

@observer
class SidebarCategory extends Component<Props> {
render() {
const { category, isActive, onClick, content } = this.props;
const { name, icon, route } = category;
const className = camelCase(name);
const componentStyles = classNames(
styles.component,
className,
styles[className],
{
[styles.active]: isActive,
}
);
const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
return (
function SidebarCategory({
category,
intl,
isActive,
onClick,
content,
}: Props) {
const { name, icon, route, tooltipTextId } = category;
const className = camelCase(name);
const componentStyles = classNames(
styles.component,
className,
styles[className],
isActive && styles.active
);
const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
return (
<PopOver
delay={TOOLTIP_DELAY}
offset={[0, -20]}
content={tooltipTextId && intl.formatMessage(messages[tooltipTextId])}
placement="bottom"
>
<button className={componentStyles} onClick={() => onClick(route)}>
<SVGInline svg={icon} className={iconClassName} />
{content}
</button>
);
}
</PopOver>
);
}

export default SidebarCategory;
export default injectIntl(observer(SidebarCategory));
Original file line number Diff line number Diff line change
Expand Up @@ -94,20 +94,25 @@

.table {
border-style: hidden;
margin-bottom: -10px;
user-select: text;
width: 100%;

.thead {
background: var(--theme-bordered-box-background-color);
border-radius: 4px 4px 0 0;
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
display: block;
margin: -20px -20px 0;
margin: -10px -20px 0;
padding: 0 20px;
position: sticky;
top: 0;
transition: box-shadow 0.1s ease-in-out;
z-index: $sticky-header-z-index;

&.stickyHeader {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
}

.tr {
border: 0;
display: flex;
Expand Down Expand Up @@ -145,7 +150,7 @@
}
}

.tr {
.tr:not(:last-child) {
border-bottom: 1px solid var(--theme-staking-table-border-color);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import styles from './StakePoolsTable.scss';
import StakePool from '../../../domains/StakePool';
import LoadingSpinner from '../../widgets/LoadingSpinner';
import BorderedBox from '../../widgets/BorderedBox';
import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell';
import {
useSortedStakePoolList,
useCreateColumns,
StakePoolsOrder,
StakePoolSortableProps,
} from './hooks';
import { StakePoolsTableHeader } from './StakePoolsTableHeader';

export const defaultTableOrdering: Record<
StakePoolSortableProps,
Expand Down Expand Up @@ -186,34 +186,14 @@ function StakePoolsTableComponent({
{sortedStakePoolList.length > 0 && (
<BorderedBox>
<div {...getTableProps()} className={styles.table}>
<div
className={styles.thead}
onMouseEnter={onTableHeaderMouseEnter}
onMouseLeave={onTableHeaderMouseLeave}
>
{headerGroups.map((headerGroup) => (
/* eslint-disable-next-line react/jsx-key */
<div
{...headerGroup.getHeaderGroupProps()}
className={styles.tr}
>
{headerGroup.headers.map((column) => (
<StakePoolsTableHeaderCell
{...column.getHeaderProps({
style: { width: undefined },
})}
stakePoolsSortBy={stakePoolsSortBy}
stakePoolsOrder={stakePoolsOrder}
onHandleSort={handleSort}
name={column.id}
key={column.id}
>
{column.render('Header')}
</StakePoolsTableHeaderCell>
))}
</div>
))}
</div>
<StakePoolsTableHeader
stakePoolsSortBy={stakePoolsSortBy}
stakePoolsOrder={stakePoolsOrder}
headerGroups={headerGroups}
onHandleSort={handleSort}
onTableHeaderMouseEnter={onTableHeaderMouseEnter}
onTableHeaderMouseLeave={onTableHeaderMouseLeave}
/>

<AutoSizer disableHeight>
{({ width }) => (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import { HeaderGroup } from 'react-table';
import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell';
import StakePool from '../../../domains/StakePool';
import {
useInViewPort,
StakePoolsOrder,
StakePoolSortableProps,
} from './hooks';
import styles from './StakePoolsTable.scss';

type Props = {
headerGroups: HeaderGroup<StakePool>[];
stakePoolsOrder: StakePoolsOrder;
stakePoolsSortBy: StakePoolSortableProps;
onHandleSort: (name: string) => void;
onTableHeaderMouseEnter: () => void;
onTableHeaderMouseLeave: () => void;
};

export const Component = ({
stakePoolsSortBy,
stakePoolsOrder,
headerGroups,
onHandleSort,
onTableHeaderMouseEnter,
onTableHeaderMouseLeave,
}: Props) => {
const { setTargetRef, isInViewport } = useInViewPort();

return (
<>
<div ref={setTargetRef} />
<div
className={classNames(
styles.thead,
!isInViewport && styles.stickyHeader
)}
onMouseEnter={onTableHeaderMouseEnter}
onMouseLeave={onTableHeaderMouseLeave}
>
{headerGroups.map((headerGroup) => (
/* eslint-disable-next-line react/jsx-key */
<div {...headerGroup.getHeaderGroupProps()} className={styles.tr}>
{headerGroup.headers.map((column) => (
<StakePoolsTableHeaderCell
{...column.getHeaderProps({
style: { width: undefined },
})}
stakePoolsSortBy={stakePoolsSortBy}
stakePoolsOrder={stakePoolsOrder}
onHandleSort={onHandleSort}
name={column.id}
key={column.id}
>
{column.render('Header')}
</StakePoolsTableHeaderCell>
))}
</div>
))}
</div>
</>
);
};

export const StakePoolsTableHeader = observer(Component);
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { useCreateColumns } from './useCreateColumns';
export { useInViewPort } from './useInViewPort';
export {
useSortedStakePoolList,
StakePoolsOrder,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { useRef, useState, useCallback } from 'react';

export const useInViewPort = () => {
const [isInViewport, setIsInViewport] = useState(true);
const targetRef = useRef(null);
const observerRef = useRef(
new IntersectionObserver((entries) => {
entries.forEach((entry) => {
setIsInViewport(entry.isIntersecting);
});
})
);

// React will call the ref callback twice. Once when the component mounts and again when it unmounts.
// https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
const setTargetRef = useCallback((target: HTMLElement) => {
if (targetRef.current) {
observerRef.current.unobserve(targetRef.current);
}

if (target) {
observerRef.current.observe(target);
}

targetRef.current = target;
}, []);

return { isInViewport, setTargetRef };
};
51 changes: 29 additions & 22 deletions source/renderer/app/components/widgets/NewsFeedIcon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,38 @@
right: 29px;
top: 20px;

&.notificationDot {
@extend .dot;

&:after {
background: var(
--theme-news-feed-icon-red-dot-background-color
) !important;
}
}

&.updateDot {
@extend .dot;
}

.icon {
.button {
border-radius: 50%;
cursor: pointer;
display: block;
height: 44px;
position: relative;
width: 44px;

&:hover {
background-color: var(
--theme-news-feed-icon-toggle-hover-background-color
);
}

&.notificationDot {
@extend .dot;

&:after {
background: var(--theme-news-feed-icon-red-dot-background-color);
}
}

&.updateDot {
@extend .dot;

&:after {
background: var(--theme-news-feed-icon-green-dot-background-color);
}
}
}

.icon {
svg {
height: 22px;
left: 11px;
Expand All @@ -36,18 +46,11 @@
stroke: var(--theme-news-feed-icon-color);
}
}

&:hover {
background-color: var(
--theme-news-feed-icon-toggle-hover-background-color
);
}
}
}

.dot {
&:after {
background: var(--theme-news-feed-icon-green-dot-background-color);
border-radius: 12.5px;
content: '';
display: block;
Expand All @@ -59,3 +62,7 @@
width: 8px;
}
}

.tooltip {
white-space: nowrap;
}
Loading

0 comments on commit 6cc778b

Please sign in to comment.