JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: make inactivity modal appear on top of other modals

Browse Source 
This change makes sure that inactivity modal appears on top of everything else including other modals.
If it is the last element of main dashboard wrapper then it will be the last element in DOM tree which makes it appear on top of everything.

Issue:
https://github.com/storj/storj/issues/5549

Change-Id: Ibb0c6e2036c0be09aae17118f672dbed4ffc5b62
This commit is contained in:
Vitalii 2023-02-24 16:39:58 +02:00 committed by Storj Robot
parent 20bcdeb8b1
commit 17ec326fd4
1 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/satellite/src/views/DashboardArea.vue
View File

@ -69,13 +69,6 @@
<div v-if="debugTimerShown && !isLoading" class="dashboard__debug-timer">
<p>Remaining session time: <b class="dashboard__debug-timer__bold">{{ debugTimerText }}</b></p>
</div>
<InactivityModal
v-if="inactivityModalShown"
:on-continue="refreshSession"
:on-logout="handleInactive"
:on-close="closeInactivityModal"
:initial-seconds="inactivityModalTime / 1000"
/>
<limit-warning-modal
v-if="isHundredLimitModalShown && !isLoading"
severity="critical"
@ -93,6 +86,14 @@
:on-upgrade="togglePMModal"
/>
<AllModals />
<!-- IMPORTANT! Make sure this modal is positioned as the last element here so that it is shown on top of everything else -->
<InactivityModal
v-if="inactivityModalShown"
:on-continue="refreshSession"
:on-logout="handleInactive"
:on-close="closeInactivityModal"
:initial-seconds="inactivityModalTime / 1000"
/>
</div>
</template>
@ -186,21 +187,21 @@ const isAccountFrozen = computed((): boolean => {
const limitState = computed((): { eightyIsShown: boolean, hundredIsShown: boolean, eightyLabel?: string, eightyModalTitle?: string, eightyModalLimitType?: string, hundredLabel?: string, hundredModalTitle?: string, hundredModalLimitType?: string } => {
if (store.state.usersModule.user.paidTier || isAccountFrozen.value) return { eightyIsShown: false, hundredIsShown: false };
const result:
{
eightyIsShown: boolean,
hundredIsShown: boolean,
eightyLabel?: string,
eightyModalTitle?: string,
eightyModalLimitType?: string,
hundredLabel?: string,
hundredModalTitle?: string,
hundredModalLimitType?: string
const result:
{
eightyIsShown: boolean,
hundredIsShown: boolean,
eightyLabel?: string,
eightyModalTitle?: string,
eightyModalLimitType?: string,
hundredLabel?: string,
hundredModalTitle?: string,
hundredModalLimitType?: string
} = { eightyIsShown: false, hundredIsShown: false, eightyLabel: '', hundredLabel: '' };
const { currentLimits } = store.state.projectsModule;
const limitTypeArr = [
{ name: 'bandwidth', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
{ name: 'storage', usedPercent: Math.round(currentLimits.storageUsed * 100 / currentLimits.storageLimit) },
@ -217,7 +218,7 @@ const limitState = computed((): { eightyIsShown: boolean, hundredIsShown: boolea
} else {
eightyPercent.push(limitType.name);
}
}
}
});
if (eightyPercent.length !== 0) {