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

web/satellite: create access grant progress bar

Browse Source 
WHAT:
progress bar for create access grant flow

WHY:
progress bar to show user current step of the flow

Change-Id: Ia3665fee91ac9b3c27eed5d5190e69d7ea5b3e8a
This commit is contained in:
VitaliiShpital 2020-11-16 23:15:53 +02:00 committed by Vitalii Shpital
parent 6517315ff8
commit 278e29c1c7
4 changed files with 124 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/satellite/src/components/accessGrants/CreateAccessGrant.vue
View File

@ -55,6 +55,7 @@ export default class CreateAccessGrant extends Vue {
background: #fff;
border-radius: 6px;
max-width: 835px;
height: 470px;
display: flex;
align-items: center;
position: relative;

105
web/satellite/src/components/accessGrants/ProgressBar.vue
View File

@ -2,12 +2,113 @@
// See LICENSE for copying information.
<template>
<div class="progress-bar">
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isNameStep || isPermissionsStep || isPassphraseStep || isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isNameStep || isPermissionsStep || isPassphraseStep || isResultStep }">Name Access</p>
</div>
<div class="progress-bar__progress" :class="{ blue: isPermissionsStep || isPassphraseStep || isResultStep }"/>
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isPermissionsStep || isPassphraseStep || isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isPermissionsStep || isPassphraseStep || isResultStep }">Permissions</p>
</div>
<div class="progress-bar__progress" :class="{ blue: isPassphraseStep || isResultStep }"/>
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isPassphraseStep || isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isPassphraseStep || isResultStep }">Passphrase</p>
</div>
<div class="progress-bar__progress" :class="{ blue: isResultStep }"/>
<div class="progress-bar__item">
<div class="progress-bar__item__circle" :class="{ blue: isResultStep }"/>
<p class="progress-bar__item__label" :class="{ checked: isResultStep }">Access Grant</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
@Component
export default class ProgressBar extends Vue {}
export default class ProgressBar extends Vue {
/**
* Indicates if current route is on name step.
*/
public get isNameStep(): boolean {
return this.$route.name === RouteConfig.NameStep.name;
}
/**
* Indicates if current route is on permissions step.
*/
public get isPermissionsStep(): boolean {
return this.$route.name === RouteConfig.PermissionsStep.name;
}
/**
* Indicates if current route is on passphrase step.
*/
public get isPassphraseStep(): boolean {
return this.$route.name === RouteConfig.PassphraseStep.name;
}
/**
* Indicates if current route is on result step.
*/
public get isResultStep(): boolean {
return this.$route.name === RouteConfig.ResultStep.name;
}
}
</script>
<style scoped lang="scss">
.progress-bar {
padding: 55px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #f5f6fa;
height: calc(100% - 110px);
border-radius: 6px 0 0 6px;
&__item {
display: flex;
align-items: center;
&__circle {
width: 20px;
height: 20px;
border-radius: 10px;
background: #dcdde1;
margin-right: 10px;
}
&__label {
font-family: 'font_regular', sans-serif;
font-style: normal;
font-size: 10px;
line-height: 15px;
color: rgba(0, 0, 0, 0.4);
margin: 0;
}
}
&__progress {
background: #DCDDE1;
width: 4px;
height: 33%;
margin-left: 8px;
}
}
.checked {
font-family: 'font_bold', sans-serif;
font-weight: bold;
color: #000;
}
.blue {
background: #0068dc;
}
</style>

13
web/satellite/src/components/accessGrants/steps/ResultStep.vue Normal file
View File

@ -0,0 +1,13 @@
v// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class ResultStep extends Vue {}
</script>

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

@ -9,6 +9,7 @@ import CreateAccessGrant from '@/components/accessGrants/CreateAccessGrant.vue';
import NameStep from '@/components/accessGrants/steps/NameStep.vue';
import PassphraseStep from '@/components/accessGrants/steps/PassphraseStep.vue';
import PermissionsStep from '@/components/accessGrants/steps/PermissionsStep.vue';
import ResultStep from '@/components/accessGrants/steps/ResultStep.vue';
import UploadStep from '@/components/accessGrants/steps/UploadStep.vue';
import AccountArea from '@/components/account/AccountArea.vue';
import AccountBilling from '@/components/account/billing/BillingArea.vue';
@ -60,6 +61,7 @@ export abstract class RouteConfig {
public static NameStep = new NavigationLink('name', 'Name Access Grant');
public static PermissionsStep = new NavigationLink('permissions', 'Access Grant Permissions');
public static PassphraseStep = new NavigationLink('passphrase', 'Access Grant Passphrase');
public static ResultStep = new NavigationLink('result', 'Access Grant Result');
public static UploadStep = new NavigationLink('upload', 'Access Grant Upload Data');
// TODO: disabled until implementation
@ -204,6 +206,11 @@ export const router = new Router({
name: RouteConfig.PassphraseStep.name,
component: PassphraseStep,
},
{
path: RouteConfig.ResultStep.path,
name: RouteConfig.ResultStep.name,
component: ResultStep,
},
{
path: RouteConfig.UploadStep.path,
name: RouteConfig.UploadStep.name,