Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DDW-863] Refactor topbar to use relative position #2782

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[DDW-863] Remove absolute position styles
Lucas Araujo committed Dec 13, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 3c4c5d62f69970bc63f5cf5f1b9b0908be6c401a
19 changes: 6 additions & 13 deletions source/renderer/app/components/layout/TopBar.scss
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@
display: flex;
flex-direction: column;
font-family: var(--font-regular);
max-width: 60%;
overflow: hidden;
text-align: center;
user-select: text;

@@ -64,6 +64,7 @@
align-items: center;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 50px;
justify-content: center;
width: 50px;
@@ -82,23 +83,15 @@
.topBarTitle {
align-items: center;
display: flex;
flex-grow: 1;
justify-content: center;
left: 70px;
position: absolute;
width: calc(100% - 230px);
margin: auto;
min-width: 0;
padding-left: 26px;
}

.rectangle {
&.hasTadaIcon {
right: 220px;
}

background-color: var(--theme-node-sync-icon-color);
border-right: 1px solid var(--theme-node-sync-icon-color);
height: 12px;
opacity: 0.3;
position: absolute;
right: 162px;
width: 1px;
}
}
Original file line number Diff line number Diff line change
@@ -188,12 +188,14 @@ export default class SyncingConnecting extends Component<Props, State> {
/>
)}
{showNewsFeedIcon && (
<NewsFeedIcon
onNewsFeedIconClick={onToggleNewsFeedIconClick}
newsFeedIconClass={newsFeedIconStyles}
hasNotification={hasNotification}
hasUpdate={hasUpdate}
/>
<div className={styles.newsFeedContainer}>
<NewsFeedIcon
onNewsFeedIconClick={onToggleNewsFeedIconClick}
newsFeedIconClass={newsFeedIconStyles}
hasNotification={hasNotification}
hasUpdate={hasUpdate}
/>
</div>
)}
<LogosDisplay isConnected={isConnected} />
</div>
Original file line number Diff line number Diff line change
@@ -13,6 +13,15 @@
z-index: 2000;
}

.newsFeedContainer {
display: flex;
justify-content: flex-end;
padding-right: 29px;
padding-top: 20px;
position: absolute;
width: 100%;
}

:global {
.connectingScreen {
span svg path {
4 changes: 1 addition & 3 deletions source/renderer/app/components/widgets/NewsFeedIcon.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.component {
position: absolute;
right: 29px;
top: 20px;
position: relative;

&.notificationDot {
@extend .dot;
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
.component {
margin: 0 40px;
overflow: visible;
position: absolute;
right: 202px;

&.hasTadaIcon {
right: 260px;
}

&:hover {
.info {
4 changes: 2 additions & 2 deletions source/renderer/app/components/widgets/TadaButton.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.component {
cursor: pointer;
font-size: 19px;
position: absolute;
right: 94px;
margin-left: 8px;
margin-right: 20px;
transform-origin: bottom left;
&.animate {
animation: animation 0.7s cubic-bezier(0.7, 0, 0.24, 1.01) infinite;
16 changes: 3 additions & 13 deletions source/renderer/app/containers/TopBarContainer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// @flow
import React from 'react';
import { observer, inject } from 'mobx-react';
import classnames from 'classnames';
import TopBar from '../components/layout/TopBar';
import NodeSyncStatusIcon from '../components/widgets/NodeSyncStatusIcon';
import { DiscreetToggleTopBar } from '../features/discreet-mode';
@@ -94,18 +93,9 @@ const TopBarContainer = (
isShelleyActivated={isShelleyActivated}
>
{testnetLabel}
<NodeSyncStatusIcon
isSynced={isSynced}
syncPercentage={syncPercentage}
hasTadaIcon={shouldShowTadaIcon}
/>
<span
className={classnames(
topBarStyles.rectangle,
shouldShowTadaIcon && topBarStyles.hasTadaIcon
)}
/>
<DiscreetToggleTopBar hasTadaIcon={shouldShowTadaIcon} />
<NodeSyncStatusIcon isSynced={isSynced} syncPercentage={syncPercentage} />
<span className={topBarStyles.rectangle} />
<DiscreetToggleTopBar />
{shouldShowTadaIcon && (
<TadaButton
onClick={onClickTadaButton}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// @flow
import React, { useState } from 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react';
import { PopOver } from 'react-polymorph/lib/components/PopOver';
import { injectIntl, FormattedHTMLMessage } from 'react-intl';
@@ -12,10 +11,9 @@ import type { Intl } from '../../../../types/i18nTypes';

type Props = {
intl: Intl,
hasTadaIcon?: boolean,
};

const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
const DiscreetToggleTopBar = ({ intl }: Props) => {
const {
isDiscreetMode,
isSettingsTooltipEnabled,
@@ -27,7 +25,7 @@ const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {

return (
<div
className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}
className={styles.root}
onMouseEnter={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
.root {
position: absolute;
right: 91px;

&.hasTadaIcon {
right: 149px;
}
margin: 0 28px;

.discreetToggle {
border-radius: 50%;