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

detailed usage charges info markup added (#3528)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2019-11-11 13:12:32 +02:00 committed by GitHub
parent 20623fdc96
commit e065ad0016
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 119 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -29,10 +29,10 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import AccountBalance from '@/components/account/billing/AccountBalance.vue';
import DepositAndBilling from '@/components/account/billing/DepositAndBilling.vue';
import MonthlyBillingSummary from '@/components/account/billing/MonthlyBillingSummary.vue';
import PaymentMethods from '@/components/account/billing/PaymentMethods.vue';
import AccountBalance from '@/components/account/billing/balance/AccountBalance.vue';
import DepositAndBilling from '@/components/account/billing/depositAndBilling/DepositAndBilling.vue';
import MonthlyBillingSummary from '@/components/account/billing/monthlySummary/MonthlyBillingSummary.vue';
import PaymentMethods from '@/components/account/billing/paymentMethods/PaymentMethods.vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';

2
web/satellite/src/components/account/billing/AccountBalance.vue → web/satellite/src/components/account/billing/balance/AccountBalance.vue
View File

@ -140,7 +140,7 @@ export default class AccountBalance extends Vue {
}
/deep/ .info__message-box {
background-image: url('../../../../static/images/account/billing/MessageBox.png');
background-image: url('../../../../../static/images/account/billing/MessageBox.png');
background-repeat: no-repeat;
min-height: 80px;
min-width: 195px;

4
web/satellite/src/components/account/billing/BillingHistory.vue → web/satellite/src/components/account/billing/depositAndBilling/BillingHistory.vue
View File

@ -31,8 +31,8 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import BillingItem from '@/components/account/billing/BillingItem.vue';
import SortingHeader from '@/components/account/billing/SortingHeader.vue';
import BillingItem from '@/components/account/billing/depositAndBilling/BillingItem.vue';
import SortingHeader from '@/components/account/billing/depositAndBilling/SortingHeader.vue';
import VPagination from '@/components/common/VPagination.vue';
import { RouteConfig } from '@/router';

0
web/satellite/src/components/account/billing/BillingItem.vue → web/satellite/src/components/account/billing/depositAndBilling/BillingItem.vue
View File

4
web/satellite/src/components/account/billing/DepositAndBilling.vue → web/satellite/src/components/account/billing/depositAndBilling/DepositAndBilling.vue
View File

@ -19,8 +19,8 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import BillingItem from '@/components/account/billing/BillingItem.vue';
import SortingHeader from '@/components/account/billing/SortingHeader.vue';
import BillingItem from '@/components/account/billing/depositAndBilling/BillingItem.vue';
import SortingHeader from '@/components/account/billing/depositAndBilling/SortingHeader.vue';
import { RouteConfig } from '@/router';
import { BillingHistoryItem } from '@/types/payments';

0
web/satellite/src/components/account/billing/SortingHeader.vue → web/satellite/src/components/account/billing/depositAndBilling/SortingHeader.vue
View File

23
web/satellite/src/components/account/billing/MonthlyBillingSummary.vue → web/satellite/src/components/account/billing/monthlySummary/MonthlyBillingSummary.vue
View File

@ -33,14 +33,7 @@
<span>Estimated total $82.44</span>
</div>
<div class="current-month-area__content__usage-charges__content" v-if="areUsageChargesShown" @click.stop>
<div class="item">
<span>Project 1</span>
<span>$21.22</span>
</div>
<div class="item">
<span>Project 2</span>
<span>$12.88</span>
</div>
<UsageChargeItem class="item"></UsageChargeItem>
</div>
</div>
</div>
@ -50,11 +43,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import UsageChargeItem from '@/components/account/billing/monthlySummary/UsageChargeItem.vue';
import VButton from '@/components/common/VButton.vue';
@Component({
components: {
VButton,
UsageChargeItem,
},
})
export default class MonthlyBillingSummary extends Vue {
@ -140,8 +135,8 @@ export default class MonthlyBillingSummary extends Vue {
}
&__usage-charges {
position: relative;
margin: 18px 0 0 0;
padding: 20px 20px 20px 20px;
background-color: #f5f6fa;
border-radius: 12px;
cursor: pointer;
@ -150,6 +145,7 @@ export default class MonthlyBillingSummary extends Vue {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
&__name {
display: flex;
@ -163,18 +159,15 @@ export default class MonthlyBillingSummary extends Vue {
&__content {
cursor: default;
max-height: 228px;
overflow-y: auto;
padding: 0 20px 20px 20px;
}
}
}
}
.item {
font-size: 16px;
line-height: 21px;
display: flex;
justify-content: space-between;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(169, 181, 193, 0.3);
}
</style>

96
web/satellite/src/components/account/billing/monthlySummary/UsageChargeItem.vue Normal file
View File

@ -0,0 +1,96 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="usage-charge-item-container">
<div class="usage-charge-item-container__summary" @click="toggleDetailedInfo">
<div class="usage-charge-item-container__summary__name-container">
<svg class="usage-charge-item-container__summary__name-container__expand-image" v-if="!isDetailedInfoShown" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"/>
</svg>
<svg class="usage-charge-item-container__summary__name-container__expand-image" v-if="isDetailedInfoShown" width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"/>
</svg>
<span>Project 2</span>
</div>
<span class="small-font-size">$12.88</span>
</div>
<div class="usage-charge-item-container__detailed-info-container" v-if="isDetailedInfoShown">
<div class="usage-charge-item-container__detailed-info-container__item">
<span>Storage</span>
<span>$18.00</span>
</div>
<div class="usage-charge-item-container__detailed-info-container__item">
<span>Egress</span>
<span>$2.00</span>
</div>
<div class="usage-charge-item-container__detailed-info-container__item">
<span>Objects</span>
<span>$1.22</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class UsageChargeItem extends Vue {
public isDetailedInfoShown: boolean = false;
public toggleDetailedInfo(): void {
this.isDetailedInfoShown = !this.isDetailedInfoShown;
}
}
</script>
<style scoped lang="scss">
.usage-charge-item-container {
font-size: 16px;
line-height: 21px;
padding: 20px 0;
&__summary {
display: flex;
justify-content: space-between;
align-items: center;
&__name-container {
display: flex;
align-items: center;
&__expand-image {
width: 14px;
height: 14px;
margin-right: 12px;
}
}
}
&__detailed-info-container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 16px 0 0 26px;
&__item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-family: 'font_regular', sans-serif;
font-size: 14px;
line-height: 18px;
color: #6f7a83;
margin-top: 5px;
}
}
}
.small-font-size {
font-size: 14px;
line-height: 18px;
}
</style>

2
web/satellite/src/components/account/billing/CardComponent.vue → web/satellite/src/components/account/billing/paymentMethods/CardComponent.vue
View File

@ -38,7 +38,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import CardDialog from '@/components/account/billing/CardDialog.vue';
import CardDialog from '@/components/account/billing/paymentMethods/CardDialog.vue';
import AmericanExpressIcon from '@/../static/images/payments/cardIcons/americanexpress.svg';
import DefaultIcon from '@/../static/images/payments/cardIcons/default.svg';

2
web/satellite/src/components/account/billing/CardDialog.vue → web/satellite/src/components/account/billing/paymentMethods/CardDialog.vue
View File

@ -57,7 +57,7 @@ export default class CardDialog extends Vue {
align-items: center;
justify-content: flex-end;
z-index: 100;
background-image: url('../../../../static/images/payments/Dialog.png');
background-image: url('../../../../../static/images/payments/Dialog.png');
background-size: contain;
width: 167px;
height: 122px;

6
web/satellite/src/components/account/billing/PaymentMethods.vue → web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
View File

@ -66,9 +66,9 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import CardComponent from '@/components/account/billing/CardComponent.vue';
import StorjInput from '@/components/account/billing/StorjInput.vue';
import StripeInput from '@/components/account/billing/StripeInput.vue';
import CardComponent from '@/components/account/billing/paymentMethods/CardComponent.vue';
import StorjInput from '@/components/account/billing/paymentMethods/StorjInput.vue';
import StripeInput from '@/components/account/billing/paymentMethods/StripeInput.vue';
import VButton from '@/components/common/VButton.vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';

0
web/satellite/src/components/account/billing/StorjInput.vue → web/satellite/src/components/account/billing/paymentMethods/StorjInput.vue
View File

0
web/satellite/src/components/account/billing/StripeInput.vue → web/satellite/src/components/account/billing/paymentMethods/StripeInput.vue
View File

2
web/satellite/src/router/index.ts
View File

@ -6,7 +6,7 @@ import Router, { RouteRecord } from 'vue-router';
import AccountArea from '@/components/account/AccountArea.vue';
import AccountBilling from '@/components/account/billing/BillingArea.vue';
import BillingHistory from '@/components/account/billing/BillingHistory.vue';
import BillingHistory from '@/components/account/billing/depositAndBilling/BillingHistory.vue';
import ProfileArea from '@/components/account/ProfileArea.vue';
import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
import BucketArea from '@/components/buckets/BucketArea.vue';