From 5413f52fd5f6223a4af2f86046f6c8132e6d04d1 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Wed, 9 Mar 2022 15:23:41 +0000 Subject: [PATCH 1/6] [DDW-1011] fix stake pool list view overlapping news feed --- .../app/components/staking/stake-pools/StakePoolsTable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index b76685e13d..b56e1e0998 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -105,7 +105,7 @@ padding: 0 20px; position: sticky; top: 0; - z-index: 999; + z-index: 1; tr { border: 0; From 6a3f6bed89d26f5399ea903ef838a80dd977cb18 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Wed, 9 Mar 2022 15:36:21 +0000 Subject: [PATCH 2/6] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index dac3ffa20b..4203e8e0d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ ### Fixes +- Fixed stake pool list view overlapping news feed ([PR 2917](https://github.com/input-output-hk/daedalus/pull/2917)) - Fixed discrete tooltip being clipped by loading overlay when stake pools are adjusted ([PR 2902](https://github.com/input-output-hk/daedalus/pull/2902)) ## 4.9.0 From 4cc98f1b769b0f167f37669a36d234ddd149bbe4 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Thu, 10 Mar 2022 10:34:19 +0000 Subject: [PATCH 3/6] [DDW-1011] level loading backdrop with table header --- .../staking/stake-pools/StakePoolsRankingLoader.scss | 3 +++ .../app/components/staking/stake-pools/StakePoolsTable.scss | 3 ++- source/renderer/app/themes/mixins/layers.scss | 2 ++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsRankingLoader.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsRankingLoader.scss index 52bd1458e6..1d6ee6ae1a 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsRankingLoader.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsRankingLoader.scss @@ -1,3 +1,5 @@ +@import '../../../themes/mixins/layers.scss'; + .component { align-items: center; background-color: var(--rp-modal-overlay-bg-color); @@ -8,4 +10,5 @@ position: fixed; right: 0; top: 134px; + z-index: $loader-backdrop-z-index; } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index b56e1e0998..c87f455cea 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -1,5 +1,6 @@ @import '../../../themes/mixins/link'; @import '../../../themes/mixins/loading-spinner'; +@import '../../../themes/mixins/layers'; .component { .headerWrapper { @@ -105,7 +106,7 @@ padding: 0 20px; position: sticky; top: 0; - z-index: 1; + z-index: $sticky-header-z-index; tr { border: 0; diff --git a/source/renderer/app/themes/mixins/layers.scss b/source/renderer/app/themes/mixins/layers.scss index 3892930f8a..e92f83d9b3 100644 --- a/source/renderer/app/themes/mixins/layers.scss +++ b/source/renderer/app/themes/mixins/layers.scss @@ -1 +1,3 @@ $dialog-z-index: 200; +$loader-backdrop-z-index: 5; +$sticky-header-z-index: 1; From 53925587e0a02789f2391558b38ac1eeede1ed16 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Wed, 16 Mar 2022 17:28:58 +0000 Subject: [PATCH 4/6] set news feed to top most layer --- source/renderer/app/components/widgets/BackToTopButton.scss | 4 +++- source/renderer/app/themes/mixins/layers.scss | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/source/renderer/app/components/widgets/BackToTopButton.scss b/source/renderer/app/components/widgets/BackToTopButton.scss index dc5d6b6641..83bd666900 100644 --- a/source/renderer/app/components/widgets/BackToTopButton.scss +++ b/source/renderer/app/components/widgets/BackToTopButton.scss @@ -1,3 +1,5 @@ +@import '../../themes/mixins/layers.scss'; + .component { background-color: var(--theme-back-to-top-button-background-color); border-radius: 5px; @@ -15,7 +17,7 @@ top: 144px; transform: translateX(-50%); transition: opacity 0.25s ease-out, top 0.25s ease-out; - z-index: 1001; + z-index: $back-to-top-z-index; &.isActive { opacity: 1; diff --git a/source/renderer/app/themes/mixins/layers.scss b/source/renderer/app/themes/mixins/layers.scss index e92f83d9b3..aca2a6e0bb 100644 --- a/source/renderer/app/themes/mixins/layers.scss +++ b/source/renderer/app/themes/mixins/layers.scss @@ -1,3 +1,4 @@ -$dialog-z-index: 200; +$dialog-z-index: 10001; $loader-backdrop-z-index: 5; +$back-to-top-z-index: 5; $sticky-header-z-index: 1; From d105ca6f469d2babe987e31264524a736ce6a49c Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Thu, 17 Mar 2022 16:56:07 +0000 Subject: [PATCH 5/6] [DDW-1011] prevent news feed from overlapping full screen dialogs --- .../redeem-itn-rewards/Step1ConfigurationContainer.tsx | 9 +++++++++ source/renderer/app/containers/static/AboutDialog.scss | 3 ++- .../app/containers/status/DaedalusDiagnosticsDialog.scss | 3 ++- source/renderer/app/stores/AppStore.ts | 3 +++ source/renderer/app/themes/mixins/layers.scss | 3 ++- source/renderer/app/themes/overrides/ModalOverrides.scss | 3 ++- 6 files changed, 20 insertions(+), 4 deletions(-) diff --git a/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx b/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx index 3a41d7f117..492b7c7382 100644 --- a/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx +++ b/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx @@ -41,6 +41,15 @@ class Step1ConfigurationContainer extends Component { return walletAmount && walletAmount.gte(minRewardsFunds); }; + componentDidMount() { + const { app } = this.props.stores; + const { closeNewsFeed } = this.props.actions.app; + + if (app.newsFeedIsOpen) { + closeNewsFeed.trigger(); + } + } + render() { const { actions, stores, onBack, onClose } = this.props; const { app, staking, wallets } = stores; diff --git a/source/renderer/app/containers/static/AboutDialog.scss b/source/renderer/app/containers/static/AboutDialog.scss index cb6e4e5a92..718573194d 100644 --- a/source/renderer/app/containers/static/AboutDialog.scss +++ b/source/renderer/app/containers/static/AboutDialog.scss @@ -1,4 +1,5 @@ @import '../../themes/mixins/overlay-backdrop'; +@import '../../themes/mixins/layers'; .overlay { background-color: var(--theme-about-window-background-color); @@ -9,7 +10,7 @@ position: fixed; right: 0; top: 0; - z-index: 9999; + z-index: $dialog-z-index; &::-webkit-scrollbar-button { height: 21px; diff --git a/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss b/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss index f9ac6c6875..492d9e757f 100644 --- a/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss +++ b/source/renderer/app/containers/status/DaedalusDiagnosticsDialog.scss @@ -1,4 +1,5 @@ @import '../../themes/mixins/overlay-backdrop'; +@import '../../themes/mixins/layers'; .overlay { bottom: 0; @@ -7,7 +8,7 @@ position: fixed; right: 0; top: 0; - z-index: 9999; + z-index: $dialog-z-index; @include overlay-backrop; *::-webkit-scrollbar-button { diff --git a/source/renderer/app/stores/AppStore.ts b/source/renderer/app/stores/AppStore.ts index 02e68af668..c55152a255 100644 --- a/source/renderer/app/stores/AppStore.ts +++ b/source/renderer/app/stores/AppStore.ts @@ -196,6 +196,9 @@ export default class AppStore extends Store { }; @action _updateActiveDialog = (currentDialog: ApplicationDialog) => { + if (this.newsFeedIsOpen) { + this.newsFeedIsOpen = false; + } if (this.activeDialog !== currentDialog) this.activeDialog = currentDialog; }; @action diff --git a/source/renderer/app/themes/mixins/layers.scss b/source/renderer/app/themes/mixins/layers.scss index aca2a6e0bb..8d33339247 100644 --- a/source/renderer/app/themes/mixins/layers.scss +++ b/source/renderer/app/themes/mixins/layers.scss @@ -1,4 +1,5 @@ -$dialog-z-index: 10001; +$backdrop-z-index: 10000; +$dialog-z-index: 10000; $loader-backdrop-z-index: 5; $back-to-top-z-index: 5; $sticky-header-z-index: 1; diff --git a/source/renderer/app/themes/overrides/ModalOverrides.scss b/source/renderer/app/themes/overrides/ModalOverrides.scss index 7c0ab60c38..df00802366 100644 --- a/source/renderer/app/themes/overrides/ModalOverrides.scss +++ b/source/renderer/app/themes/overrides/ModalOverrides.scss @@ -1,9 +1,10 @@ @import '../mixins/overlay-backdrop'; +@import '../mixins/layers.scss'; .overlay { @include overlay-backrop; overflow: hidden; - z-index: 100; + z-index: $backdrop-z-index; } .modal { From e3068fa88a296aa26b14105d90add5ee8d0df108 Mon Sep 17 00:00:00 2001 From: shawnbusuttil Date: Fri, 18 Mar 2022 10:29:48 +0000 Subject: [PATCH 6/6] [DDW-1011] move news feed closing logic one level up the component tree --- .../app/containers/staking/RedeemItnRewardsContainer.tsx | 9 +++++++++ .../redeem-itn-rewards/Step1ConfigurationContainer.tsx | 9 --------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/source/renderer/app/containers/staking/RedeemItnRewardsContainer.tsx b/source/renderer/app/containers/staking/RedeemItnRewardsContainer.tsx index 5a433a2a54..6c16fd19a6 100644 --- a/source/renderer/app/containers/staking/RedeemItnRewardsContainer.tsx +++ b/source/renderer/app/containers/staking/RedeemItnRewardsContainer.tsx @@ -27,6 +27,15 @@ class RedeemItnRewardsContainer extends Component { }; } + componentDidMount() { + const { app } = this.props.stores; + const { closeNewsFeed } = this.props.actions.app; + + if (app.newsFeedIsOpen) { + closeNewsFeed.trigger(); + } + } + render() { const { stores, actions } = this.props; const { allWallets } = stores.wallets; diff --git a/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx b/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx index 492b7c7382..3a41d7f117 100644 --- a/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx +++ b/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.tsx @@ -41,15 +41,6 @@ class Step1ConfigurationContainer extends Component { return walletAmount && walletAmount.gte(minRewardsFunds); }; - componentDidMount() { - const { app } = this.props.stores; - const { closeNewsFeed } = this.props.actions.app; - - if (app.newsFeedIsOpen) { - closeNewsFeed.trigger(); - } - } - render() { const { actions, stores, onBack, onClose } = this.props; const { app, staking, wallets } = stores;