Skip to content

Commit

Permalink
Merge branch 'feature/ddw-16-table-comparison-view-for-stake-pools' of …
Browse files Browse the repository at this point in the history 
…https://github.com/input-output-hk/daedalus into feature/ddw-16-table-comparison-view-for-stake-pools
  • Loading branch information
@thedanheller
thedanheller committed Oct 19, 2020
2 parents b6dca80 + f180287 commit 57583ee
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 52 deletions.
26 changes: 14 additions & 12 deletions source/renderer/app/components/staking/stake-pools/StakePoolsTable.js
View file
Expand Up @@ -263,17 +263,19 @@ export class StakePoolsTable extends Component<Props, State> {
);
const targetEl = poolId.currentTarget;
const { parentElement } = targetEl;
const currentTargetChildren = get(
parentElement.parentElement,
'sectionRowIndex',
null
);
const highlightedPoolId = sortedStakePoolList[currentTargetChildren]
? sortedStakePoolList[currentTargetChildren].id
: null;
return this.setState({
highlightedPoolId,
});
if (parentElement) {
const currentTargetChildren = get(
parentElement.parentElement,
'sectionRowIndex',
null
);
const highlightedPoolId = sortedStakePoolList[currentTargetChildren]
? sortedStakePoolList[currentTargetChildren].id
: null;
return this.setState({
highlightedPoolId,
});
}
};

bigNumbersToFormattedNumbers = (value: BigNumber, shortNumber?: boolean) => {
Expand Down Expand Up @@ -550,7 +552,7 @@ export class StakePoolsTable extends Component<Props, State> {
onOpenExternalLink={onOpenExternalLink}
top={top}
left={left}
bottom={100}
fromStakePool
color={color}
onSelect={this.handleSelect}
showWithSelectButton={showWithSelectButton}
Expand Down
80 changes: 43 additions & 37 deletions source/renderer/app/components/staking/widgets/TooltipPool.js
View file
Expand Up @@ -38,6 +38,7 @@ import {
TOOLTIP_WIDTH,
IS_RANKING_DATA_AVAILABLE,
IS_SATURATION_DATA_AVAILABLE,
THUMBNAIL_WIDTH,
} from '../../../config/stakingConfig';

const messages = defineMessages({
Expand Down Expand Up @@ -107,14 +108,14 @@ const messages = defineMessages({
type Props = {
stakePool: StakePool,
isVisible: boolean,
fromStakePool?: boolean,
currentTheme: string,
onClick: Function,
onOpenExternalLink: Function,
onSelect?: Function,
showWithSelectButton?: boolean,
top: number,
left: number,
bottom?: number,
color: string,
containerClassName: string,
numberOfStakePools: number,
Expand Down Expand Up @@ -148,7 +149,7 @@ export default class TooltipPool extends Component<Props, State> {
};

componentDidMount() {
const { top, left, containerClassName, bottom } = this.props;
const { top, left, containerClassName } = this.props;
const container = document.querySelector(`.${containerClassName}`);

window.document.addEventListener('click', this.handleOutterClick);
Expand All @@ -157,14 +158,14 @@ export default class TooltipPool extends Component<Props, State> {
this.containerWidth = container.offsetWidth;
this.containerHeight = container.offsetHeight;
}
this.getTooltipStyle(top, left, bottom);
this.getTooltipStyle(top, left);
}

componentDidUpdate(prevProps: Props) {
const { isVisible: prevVisibility } = prevProps;
const { isVisible: currentVisibility, top, left, bottom } = this.props;
const { isVisible: currentVisibility, top, left } = this.props;
if (currentVisibility !== prevVisibility) {
this.getTooltipStyle(top, left, bottom);
this.getTooltipStyle(top, left);
}
}

Expand All @@ -191,7 +192,7 @@ export default class TooltipPool extends Component<Props, State> {
this.tooltipClick = true;
};

getTooltipStyle = (top: number, originalLeft: number, bottom?: number) => {
getTooltipStyle = (top: number, originalLeft: number) => {
const { color } = this.props;

const left = originalLeft + THUMBNAIL_OFFSET_WIDTH;
Expand All @@ -210,14 +211,14 @@ export default class TooltipPool extends Component<Props, State> {
arrowLeft,
} =
tooltipPosition === 'top' || tooltipPosition === 'bottom'
? this.getTopBottomPosition(left, bottom)
: this.getLeftRightPosition(top, isTopHalf, bottom);
? this.getTopBottomPosition(left)
: this.getLeftRightPosition(top, isTopHalf, left);

const componentStyle = this.getComponentStyle(
tooltipPosition,
componentTop,
componentBottom,
componentLeft,
componentLeft
);
const arrowStyle = this.getArrowStyle(
tooltipPosition,
Expand All @@ -228,9 +229,7 @@ export default class TooltipPool extends Component<Props, State> {
const colorBandStyle = {
background: color,
};
if (bottom) {
componentStyle.right = bottom;
}

this.setState({
componentStyle,
arrowStyle,
Expand All @@ -239,7 +238,8 @@ export default class TooltipPool extends Component<Props, State> {
});
};

getTopBottomPosition = (left: number, fixedBottom?: number) => {
getTopBottomPosition = (left: number) => {
const { fromStakePool } = this.props;
const paddingOffset = rangeMap(
left,
THUMBNAIL_OFFSET_WIDTH,
Expand All @@ -248,14 +248,23 @@ export default class TooltipPool extends Component<Props, State> {
THUMBNAIL_OFFSET_WIDTH / 2
);

const componentLeft = !fixedBottom ?
-((TOOLTIP_WIDTH * left) / this.containerWidth) +
THUMBNAIL_OFFSET_WIDTH +
paddingOffset : 'auto';
const componentTop = !fixedBottom ? THUMBNAIL_HEIGHT + ARROW_HEIGHT / 2 : 'auto';
const componentBottom = !fixedBottom ? THUMBNAIL_HEIGHT + ARROW_HEIGHT / 2 : fixedBottom;

const arrowLeft = !fixedBottom && typeof componentLeft === 'number' ? -componentLeft + THUMBNAIL_OFFSET_WIDTH - ARROW_OFFSET : 0;
const componentLeft = !fromStakePool
? -((TOOLTIP_WIDTH * left) / this.containerWidth) +
THUMBNAIL_OFFSET_WIDTH +
paddingOffset
: -((TOOLTIP_WIDTH * left) / this.containerWidth) +
THUMBNAIL_OFFSET_WIDTH +
(left - THUMBNAIL_OFFSET_WIDTH - THUMBNAIL_WIDTH);
const componentTop = !fromStakePool
? THUMBNAIL_HEIGHT + ARROW_HEIGHT / 2
: THUMBNAIL_HEIGHT + ARROW_WIDTH / 2;
const componentBottom = !fromStakePool
? THUMBNAIL_HEIGHT + ARROW_HEIGHT / 2
: THUMBNAIL_HEIGHT / 2;

const arrowLeft = !fromStakePool
? -componentLeft + THUMBNAIL_OFFSET_WIDTH - ARROW_OFFSET
: THUMBNAIL_HEIGHT - ARROW_WIDTH - TOOLTIP_DELTA;
const arrowTop = -(ARROW_WIDTH / 2);
const arrowBottom = -(ARROW_WIDTH / 2);

Expand All @@ -269,22 +278,26 @@ export default class TooltipPool extends Component<Props, State> {
};
};

getLeftRightPosition = (top: number, isTopHalf: boolean, fixedBottom?: number) => {
getLeftRightPosition = (top: number, isTopHalf: boolean, left: number) => {
const { fromStakePool } = this.props;
const bottom = this.containerHeight - (top + THUMBNAIL_HEIGHT);

const componentLeft = fixedBottom ? 'auto' : THUMBNAIL_HEIGHT;
const componentLeft = fromStakePool
? -((TOOLTIP_WIDTH * left) / this.containerWidth) +
THUMBNAIL_OFFSET_WIDTH +
(left - THUMBNAIL_OFFSET_WIDTH + ARROW_HEIGHT)
: THUMBNAIL_HEIGHT;
let componentTop = 'auto';
let componentBottom = 'auto';
let arrowTop = 'auto';
let arrowBottom = 'auto';

if (isTopHalf) {
componentTop = !fixedBottom ? -((TOOLTIP_MAX_HEIGHT * top) / this.containerHeight) : 'auto';
arrowTop = !fixedBottom && typeof componentTop === 'number' ? -componentTop + ARROW_WIDTH / 2 : 0;
componentBottom = fixedBottom || 'auto';
componentTop = -((TOOLTIP_MAX_HEIGHT * top) / this.containerHeight);
arrowTop = -componentTop + ARROW_WIDTH / 2;
} else {
componentBottom = !fixedBottom ? -((TOOLTIP_MAX_HEIGHT * bottom) / this.containerHeight) : fixedBottom;
componentBottom = -((TOOLTIP_MAX_HEIGHT * bottom) / this.containerHeight);
arrowBottom = -componentBottom + ARROW_WIDTH / 2;
if (fromStakePool) arrowBottom -= TOOLTIP_DELTA;
}

const arrowLeft = -(ARROW_WIDTH / 2);
Expand Down Expand Up @@ -322,30 +335,26 @@ export default class TooltipPool extends Component<Props, State> {
tooltipPosition: string,
top: number | 'auto',
bottom: number | 'auto',
left: number | string,
right: number | string = left
left: number,
right: number = left
) => {
const fixedBottom = this.props.bottom;
if (tooltipPosition === 'top') {
return {
bottom,
left,
right: fixedBottom ? right : 'auto'
};
}
if (tooltipPosition === 'right') {
return {
left,
top,
bottom,
right: fixedBottom ? right : 'auto'
};
}
if (tooltipPosition === 'bottom') {
return {
left,
top,
right: fixedBottom ? right : 'auto'
};
}
return {
Expand Down Expand Up @@ -412,7 +421,6 @@ export default class TooltipPool extends Component<Props, State> {
onSelect,
showWithSelectButton,
numberOfStakePools,
bottom,
} = this.props;
const {
componentStyle,
Expand Down Expand Up @@ -440,7 +448,6 @@ export default class TooltipPool extends Component<Props, State> {

const componentClassnames = classnames([
styles.component,
bottom ? styles.fixedComponent : null,
isVisible ? styles.isVisible : null,
]);

Expand All @@ -463,7 +470,6 @@ export default class TooltipPool extends Component<Props, State> {
const idCopyIcon = idCopyFeedback ? copyCheckmarkIcon : copyIcon;
const hoverContentStyles = classnames([
styles.hoverContent,
bottom ? styles.fixedHover : null,
idCopyFeedback ? styles.checkIcon : styles.copyIcon,
]);
const colorBandStyles = classnames([
Expand Down
3 changes: 1 addition & 2 deletions source/renderer/app/components/staking/widgets/TooltipPool.scss
View file
Expand Up @@ -12,12 +12,11 @@
position: absolute;
user-select: text;
width: 280px;
z-index: 20;
z-index: 100;

&.fixedComponent {
position: fixed;
text-align: initial;
z-index: 100;
}

:global {
Expand Down
3 changes: 2 additions & 1 deletion source/renderer/app/components/widgets/BackToTopButton.scss
View file
Expand Up @@ -16,7 +16,8 @@
top: 144px;
transform: translateX(-50%);
transition: opacity 0.25s ease-out, top 0.25s ease-out;
z-index: 3;
z-index: 999;

&.isActive {
opacity: 1;
}
Expand Down

0 comments on commit 57583ee

Please sign in to comment.