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

web/storagenode: bug fixes

Browse Source 
WHAT:
- fix for wrong total held calcutation on refresh
- payout history year restrictions depends on selected satellite fixed
- payout history total changed if distributed amount > 0
- dark mode info icon colors changed
- option menu closing issue fixed

Change-Id: Ia289d51f081b782ae601722b7c05c3307f56541d
This commit is contained in:
NickolaiYurchenko 2021-03-15 19:57:17 +02:00
parent b91ba7057e
commit f2718734f6
8 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/storagenode/src/app/components/OptionsDropdown.vue
View File

@ -3,11 +3,11 @@
<template>
<div class="options-dropdown" v-click-outside="close">
<input id="theme-switch" type="checkbox" v-model="darkMode" />
<input id="theme-switch" type="checkbox" v-model="isDarkMode" @change="close" />
<label class="options-dropdown__mode" for="theme-switch">
<SunIcon class="icon" v-if="darkMode" />
<SunIcon class="icon" v-if="isDarkMode" />
<MoonIcon class="icon" v-else />
{{ darkMode ? 'Light Mode' : 'Dark Mode' }}
{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
</label>
</div>
</template>
@ -31,7 +31,7 @@ export default class OptionsDropdown extends Vue {
/**
* Uses for switching mode.
*/
public darkMode: boolean = false;
public isDarkMode: boolean = false;
/**
* Lifecycle hook after initial render.
@ -52,7 +52,7 @@ export default class OptionsDropdown extends Vue {
htmlElement.setAttribute('theme', theme);
const isDarkMode = theme === SNO_THEME.DARK;
this.darkMode = isDarkMode;
this.isDarkMode = isDarkMode;
this.$store.dispatch(APPSTATE_ACTIONS.SET_DARK_MODE, isDarkMode);
}
@ -63,12 +63,12 @@ export default class OptionsDropdown extends Vue {
this.$emit('closeDropdown');
}
@Watch('darkMode')
@Watch('isDarkMode')
private changeMode(): void {
this.$store.dispatch(APPSTATE_ACTIONS.SET_DARK_MODE, this.darkMode);
this.$store.dispatch(APPSTATE_ACTIONS.SET_DARK_MODE, this.isDarkMode);
const htmlElement = document.documentElement;
if (this.darkMode) {
if (this.isDarkMode) {
localStorage.setItem('theme', SNO_THEME.DARK);
htmlElement.setAttribute('theme', SNO_THEME.DARK);
@ -96,6 +96,7 @@ export default class OptionsDropdown extends Vue {
font-family: 'font_regular', sans-serif;
font-size: 14px;
color: var(--regular-text-color);
cursor: pointer;
&__mode {
display: flex;

4
web/storagenode/src/app/components/SNOHeader.vue
View File

@ -181,7 +181,7 @@ export default class SNOHeader extends Vue {
}
try {
await this.$store.dispatch(PAYOUT_ACTIONS.GET_ESTIMATION, this.$store.state.node.selectedSatellite.id);
await this.$store.dispatch(PAYOUT_ACTIONS.GET_ESTIMATION, selectedSatelliteId);
} catch (error) {
console.error(error);
}
@ -190,7 +190,7 @@ export default class SNOHeader extends Vue {
try {
await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_INFO, selectedSatelliteId);
await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL);
await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL, selectedSatelliteId);
} catch (error) {
console.error(error.message);
}

14
web/storagenode/src/app/components/payments/EstimationArea.vue
View File

@ -4,7 +4,7 @@
<template>
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info & Estimation,<span class="estimation-container__header__period">{{ currentPeriod }}</span></p>
<p class="estimation-container__header__title">Info & Estimation, <span class="estimation-container__header__period">{{ currentPeriod }}</span></p>
<div class="estimation-container__header__selection-area">
<button
name="Select Current Period"
@ -765,6 +765,18 @@ export default class EstimationArea extends Vue {
}
}
.checks-area-image {
cursor: pointer;
rect {
fill: var(--info-icon-background);
}
path {
fill: var(--info-icon-letter);
}
}
@media screen and (max-width: 870px) {
.estimation-container {

5
web/storagenode/src/app/components/payments/PayoutHistoryPeriodCalendar.vue
View File

@ -135,9 +135,10 @@ export default class PayoutHistoryPeriodCalendar extends Vue {
* Decrement year and updates current months set.
*/
public decrementYear(): void {
const isSelectedYearFirstForNodeInSatellite = this.displayedYear === this.$store.state.node.selectedSatellite.joinDate.getUTCFullYear();
const availableYears: number[] = this.$store.state.payoutModule.payoutHistoryAvailablePeriods.map(payoutPeriod => payoutPeriod.year);
const minYear: number = Math.min(...availableYears);
if (isSelectedYearFirstForNodeInSatellite) return;
if (this.displayedYear === minYear) return;
this.displayedYear -= 1;
this.populateMonths(this.displayedYear);

2
web/storagenode/src/app/components/payments/PayoutHistoryTableItem.vue
View File

@ -95,7 +95,7 @@
</a>
<ShareIcon class="payout-history-item__expanded-area__right-area__footer__transaction__icon" />
</div>
<p class="payout-history-item__expanded-area__right-area__footer__total">{{ historyItem.paid | centsToDollars }}</p>
<p class="payout-history-item__expanded-area__right-area__footer__total">{{ (historyItem.distributed > 0 ? historyItem.distributed : historyItem.paid) | centsToDollars }}</p>
</div>
</div>
</div>

4
web/storagenode/static/styles/_variables.scss
View File

@ -58,6 +58,8 @@
--error-page-background-color: #f2f2f3;
--error-page-text-color: #000;
--error-page-button-background: #133e9c;
--info-icon-background: #5a667c;
--info-icon-letter: white;
--wallet-feature-opted-in: #00ce7d;
--error-page-image-path: url('../../static/images/errors/404.png');
--tooltip-background-path: url('../../static/images/tooltipBack.png');
@ -124,6 +126,8 @@
--error-page-background-color: #1f2026;
--error-page-text-color: #fff;
--error-page-button-background: #565b6b;
--info-icon-background: white;
--info-icon-letter: #5a667c;
--wallet-feature-opted-in: #00ce7d;
--error-page-image-path: url('../../static/images/errors/404Dark.png');
--tooltip-background-path: url('../../static/images/tooltipBackDark.png');

10
web/storagenode/tests/unit/components/payments/__snapshots__/EstimationArea.spec.ts.snap
View File

@ -3,7 +3,7 @@
exports[`EstimationArea renders correctly with actual values and current period 1`] = `
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Feb 2020</span></p>
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Feb 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item active">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
@ -141,7 +141,7 @@ exports[`EstimationArea renders correctly with actual values and current period
exports[`EstimationArea renders correctly with actual values and current period and not first day on month 1`] = `
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Feb 2020</span></p>
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Feb 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item active">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
@ -287,7 +287,7 @@ exports[`EstimationArea renders correctly with actual values and current period
exports[`EstimationArea renders correctly with actual values and historical period with paystub 1`] = `
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Jan 2020</span></p>
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
@ -442,7 +442,7 @@ exports[`EstimationArea renders correctly with actual values and historical peri
exports[`EstimationArea renders correctly with actual values and historical period without paystub 1`] = `
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Jan 2020</span></p>
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
@ -467,7 +467,7 @@ exports[`EstimationArea renders correctly with actual values and historical peri
exports[`EstimationArea renders correctly with actual values and previous period without paystub 1`] = `
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation,<span class="estimation-container__header__period">Jan 2020</span></p>
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period

4
web/storagenode/tests/unit/components/payments/__snapshots__/PayoutHistoryTableItem.spec.ts.snap
View File

@ -85,7 +85,7 @@ exports[`PayoutHistoryTableItem renders correctly with actual values (eth) 2`] =
</a>
<shareicon-stub class="payout-history-item__expanded-area__right-area__footer__transaction__icon"></shareicon-stub>
</div>
<p class="payout-history-item__expanded-area__right-area__footer__total">$0.80</p>
<p class="payout-history-item__expanded-area__right-area__footer__total">$0.30</p>
</div>
</div>
</div>
@ -161,7 +161,7 @@ exports[`PayoutHistoryTableItem renders correctly with actual values (zksync) 1`
</a>
<shareicon-stub class="payout-history-item__expanded-area__right-area__footer__transaction__icon"></shareicon-stub>
</div>
<p class="payout-history-item__expanded-area__right-area__footer__total">$0.80</p>
<p class="payout-history-item__expanded-area__right-area__footer__total">$0.30</p>
</div>
</div>
</div>