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

web/satellite/vuetify-poc: tiny changes for project dashboard

Browse Source 
Download card: added 'per month' to Limit value.
Coupon card: replaced 'Limit' label with 'Included free usage'.
Also, fixed chart tooltip positioning.

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

Change-Id: I6a4eb544cecaeabab6856acf6e272784f2a1c802
This commit is contained in:
Vitalii 2023-10-09 18:03:25 +03:00 committed by Vitalii Shpital
parent b6b9cccb72
commit 0db898b0a8
3 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -599,7 +599,7 @@ onBeforeUnmount((): void => {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 2px; border-radius: 2px;
background: var(--c-purple-3); background: #929fb1;
} }
&__allocated-label { &__allocated-label {

4
web/satellite/src/types/chart.ts
View File

@ -37,7 +37,7 @@ class Styling {
public element: HTMLElement, public element: HTMLElement,
public topPosition: number, public topPosition: number,
public leftPosition: number, public leftPosition: number,
public chartPosition: ClientRect, public chartPosition: DOMRect,
) {} ) {}
} }
@ -94,7 +94,7 @@ export class Tooltip {
elemStyling.element.style.opacity = StylingConstants.tooltipOpacity; elemStyling.element.style.opacity = StylingConstants.tooltipOpacity;
elemStyling.element.style.position = StylingConstants.tooltipPosition; elemStyling.element.style.position = StylingConstants.tooltipPosition;
elemStyling.element.style.left = `${elemStyling.chartPosition.left + elemStyling.tooltipModel.caretX - elemStyling.leftPosition}px`; elemStyling.element.style.left = `${elemStyling.chartPosition.left + elemStyling.tooltipModel.caretX - elemStyling.leftPosition}px`;
elemStyling.element.style.top = `${elemStyling.chartPosition.top + window.pageYOffset + elemStyling.tooltipModel.caretY - elemStyling.topPosition}px`; elemStyling.element.style.top = `${elemStyling.chartPosition.top + window.scrollY + elemStyling.tooltipModel.caretY - elemStyling.topPosition}px`;
} }
} }

12
web/satellite/vuetify-poc/src/views/Dashboard.vue
View File

@ -79,7 +79,7 @@
title="Download" title="Download"
:progress="egressUsedPercent" :progress="egressUsedPercent"
:used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`" :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`"
:limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)}`" :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)} per month`"
:available="`${usedLimitFormatted(availableEgress)} Available`" :available="`${usedLimitFormatted(availableEgress)} Available`"
cta="Need more?" cta="Need more?"
@cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)" @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
@ -89,7 +89,7 @@
<v-row class="d-flex align-center justify-center mt-2"> <v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card ref="chartContainer" variant="flat" :border="true" rounded="xlg"> <v-card ref="chartContainer" class="pb-4" variant="flat" :border="true" rounded="xlg">
<template #title> <template #title>
<v-card-title class="d-flex align-center"> <v-card-title class="d-flex align-center">
<IconCloud class="mr-2" width="16" height="16" /> <IconCloud class="mr-2" width="16" height="16" />
@ -103,12 +103,11 @@
:data="storageUsage" :data="storageUsage"
:since="chartsSinceDate" :since="chartsSinceDate"
:before="chartsBeforeDate" :before="chartsBeforeDate"
class="pr-4 pb-4"
/> />
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card variant="flat" :border="true" rounded="xlg"> <v-card class="pb-4" variant="flat" :border="true" rounded="xlg">
<template #title> <template #title>
<v-card-title class="d-flex align-center"> <v-card-title class="d-flex align-center">
<IconArrowDown class="mr-2" width="16" height="16" /> <IconArrowDown class="mr-2" width="16" height="16" />
@ -122,7 +121,6 @@
:data="allocatedBandwidthUsage" :data="allocatedBandwidthUsage"
:since="chartsSinceDate" :since="chartsSinceDate"
:before="chartsBeforeDate" :before="chartsBeforeDate"
class="pr-4 pb-4"
/> />
</v-card> </v-card>
</v-col> </v-col>
@ -148,7 +146,7 @@
:title="isFreeTierCoupon ? 'Free Usage' : 'Coupon'" :title="isFreeTierCoupon ? 'Free Usage' : 'Coupon'"
:progress="couponProgress" :progress="couponProgress"
:used="`${couponProgress}% Used`" :used="`${couponProgress}% Used`"
:limit="`Limit: ${couponValue}`" :limit="`Included free usage: ${couponValue}`"
:available="`${couponRemainingPercent}% Available`" :available="`${couponRemainingPercent}% Available`"
:cta="isFreeTierCoupon ? 'Learn more' : 'View Coupons'" :cta="isFreeTierCoupon ? 'Learn more' : 'View Coupons'"
@cta-click="onCouponCTAClicked" @cta-click="onCouponCTAClicked"
@ -415,7 +413,7 @@ const promptForPassphrase = computed((): boolean => {
* Used container size recalculation for charts resizing. * Used container size recalculation for charts resizing.
*/ */
function recalculateChartWidth(): void { function recalculateChartWidth(): void {
chartWidth.value = chartContainer.value?.$el.getBoundingClientRect().width || 0; chartWidth.value = chartContainer.value?.$el.getBoundingClientRect().width - 16 || 0;
} }
/** /**