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

web/satellite: navigation sidebar and dashboard header reworked

Browse Source 
WHAT:
Navigation sidebar reworked.
Project dropdown moved back to header, resources and settings sections moved to header as dropdowns.
Header reworked to match new design.

WHY:
GUI redesign

Change-Id: I73e1269326d3dbfba2e44d848dba4a415e64e539
This commit is contained in:
VitaliiShpital 2020-09-09 21:25:59 +03:00 committed by Vitalii Shpital
parent ac29d80495
commit df5a6ebe32
35 changed files with 781 additions and 675 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/satellite/src/App.vue
View File

@ -67,10 +67,15 @@ export default class App extends Vue {
</script>
<style lang="scss">
html {
overflow: hidden;
}
body {
margin: 0 !important;
height: 100vh;
zoom: 100%;
overflow: hidden;
}
img,
@ -97,6 +102,8 @@ export default class App extends Vue {
}
a {
text-decoration: none;
outline: none;
cursor: pointer;
}
@ -109,20 +116,14 @@ export default class App extends Vue {
caret-color: #2683ff;
}
/* width */
::-webkit-scrollbar {
width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #fff;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #afb7c1;
border-radius: 6px;

15
web/satellite/src/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue
View File

@ -58,7 +58,6 @@ export default class SmallDepositHistory extends Vue {
}
.deposit-area {
margin-bottom: 32px;
padding: 40px 40px 10px 40px;
background-color: #fff;
border-radius: 8px;
@ -95,18 +94,4 @@ export default class SmallDepositHistory extends Vue {
}
}
}
@media screen and (max-height: 850px) {
.deposit-area {
margin-bottom: 50px;
}
}
@media screen and (max-height: 650px) {
.deposit-area {
margin-bottom: 75px;
}
}
</style>

8
web/satellite/src/components/header/HeaderArea.vue
View File

@ -6,6 +6,9 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProjectSelection from '@/components/header/projectsDropdown/ProjectSelection.vue';
import ResourcesSelection from '@/components/header/resourcesDropdown/ResourcesSelection.vue';
import SettingsSelection from '@/components/header/settingsDropdown/SettingsSelection.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import LogoIcon from '@/../static/images/header/logo.svg';
@ -21,9 +24,12 @@ import AccountButton from './AccountButton.vue';
NavigationMenuIcon,
NavigationCloseIcon,
LogoIcon,
ProjectSelection,
ResourcesSelection,
SettingsSelection,
},
})
export default class DashboardHeader extends Vue {
export default class HeaderArea extends Vue {
/**
* Indicates if navigation toggling button is visible depending on screen width.
*/

37
web/satellite/src/components/header/headerArea.html
View File

@ -1,24 +1,29 @@
<!--Copyright (C) 2019 Storj Labs, Inc.-->
<!--See LICENSE for copying information.-->
<div class="dashboard-header-container">
<div class="dashboard-header-container__left-area">
<NavigationMenuIcon
class="dashboard-header-container__left-area__menu-button"
v-if="!isNavigationVisible"
@click.stop="toggleNavigationVisibility"
/>
<div class="dashboard-header-container__left-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
<NavigationCloseIcon/>
<p class="dashboard-header-container__left-area__close-button__title">Close</p>
<div class="header-container">
<div class="header-container__left-area">
<div class="header-container__left-area__logo-area">
<NavigationMenuIcon
class="header-container__left-area__logo-area__menu-button"
v-if="!isNavigationVisible"
@click.stop="toggleNavigationVisibility"
/>
<div class="header-container__left-area__logo-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
<NavigationCloseIcon/>
<p class="header-container__left-area__logo-area__close-button__title">Close</p>
</div>
<LogoIcon
class="logo"
@click.stop="onLogoClick"
/>
</div>
<ProjectSelection class="project-selection"/>
<ResourcesSelection class="resources-selection"/>
<SettingsSelection class="settings-selection"/>
</div>
<LogoIcon
class="storj-title"
@click.stop="onLogoClick"
/>
<div class="dashboard-header-container__right-area">
<AccountButton class="dashboard-header-container__right-area__account-button"/>
<div class="header-container__right-area">
<AccountButton class="header-container__right-area__account-button"/>
</div>
<NavigationArea
class="adapted-navigation"

92
web/satellite/src/components/header/headerArea.scss
View File

@ -1,97 +1,103 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
.dashboard-header-container {
font-family: 'font_medium', sans-serif;
height: 100px;
min-height: 100px;
background-color: white;
.header-container {
font-family: 'font_regular', sans-serif;
min-height: 62px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
position: relative;
&__left-area,
&__right-area {
&__left-area {
display: flex;
align-items: center;
&__menu-button {
display: none;
}
&__logo-area {
width: 220px;
&__close-button {
display: flex;
align-items: center;
cursor: pointer;
&__menu-button {
display: none;
}
&__title {
margin-left: 13px;
font-size: 16px;
line-height: 23px;
color: #a9b5c1;
&__close-button {
display: flex;
align-items: center;
cursor: pointer;
&__title {
margin-left: 13px;
font-size: 16px;
line-height: 23px;
color: #a9b5c1;
}
}
}
}
&__right-area {
display: flex;
align-items: center;
}
}
.storj-title {
display: none;
.logo {
cursor: pointer;
}
.adapted-navigation {
position: absolute;
top: 100px;
top: 62px;
left: 0;
height: calc(100vh - 240px);
z-index: 100;
height: 100vh;
background: #e2eaf3;
}
.navigation-blur {
height: 100vh;
width: 1000px;
position: absolute;
top: 100px;
left: 280px;
top: 62px;
left: 220px;
z-index: 100;
background: rgba(134, 134, 148, 0.4);
}
.project-selection,
.resources-selection {
margin-right: 35px;
}
@media screen and (min-width: 1281px) {
.adapted-navigation,
.navigation-blur,
.dashboard-header-container__left-area__close-button {
.header-container__left-area__close-button {
display: none;
}
}
@media screen and (max-width: 1280px) {
.dashboard-header-container {
.header-container {
padding: 0 40px;
&__left-area {
&__menu-button {
display: block;
cursor: pointer;
&__logo-area {
&__menu-button {
display: block;
cursor: pointer;
}
}
}
}
.storj-title {
display: block;
cursor: pointer;
position: absolute;
left: calc(50% - 41px);
}
}
@media screen and (max-height: 950px) {
.adapted-navigation {
padding: 20px 0 50px 0;
height: calc(100vh - 170px);
.logo {
display: none;
}
}

21
web/satellite/src/components/project/selection/ProjectDropdown.vue → web/satellite/src/components/header/projectsDropdown/ProjectDropdown.vue
View File

@ -6,7 +6,7 @@
<div class="project-dropdown__wrap">
<div class="project-dropdown__wrap__choice" @click.prevent.stop="closeDropdown">
<div class="project-dropdown__wrap__choice__mark-container">
<ProjectSelectionIcon
<SelectionIcon
class="project-dropdown__wrap__choice__mark-container__image"
/>
</div>
@ -36,7 +36,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProjectSelectionIcon from '@/../static/images/header/projectSelection.svg';
import SelectionIcon from '@/../static/images/header/selection.svg';
import { RouteConfig } from '@/router';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
@ -48,7 +48,7 @@ import { PM_ACTIONS } from '@/utils/constants/actionNames';
@Component({
components: {
ProjectSelectionIcon,
SelectionIcon,
},
})
export default class ProjectDropdown extends Vue {
@ -122,24 +122,25 @@ export default class ProjectDropdown extends Vue {
.project-dropdown {
position: absolute;
left: -3px;
top: 60px;
border: 1px solid #c5cbdb;
box-shadow: 0 8px 34px rgba(161, 173, 185, 0.41);
z-index: 1120;
left: 0;
top: 50px;
box-shadow: 0 20px 34px rgba(10, 27, 44, 0.28);
border-radius: 6px;
background-color: #fff;
padding-top: 6px;
&__wrap {
width: auto;
overflow-y: scroll;
height: auto;
min-width: 195px;
max-height: 240px;
min-width: 300px;
max-height: 250px;
background-color: #fff;
border-radius: 6px;
font-family: 'font_regular', sans-serif;
&__choice {
width: auto;
display: flex;
align-items: center;
justify-content: flex-start;

112
web/satellite/src/components/project/selection/ProjectSelection.vue → web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue
View File

@ -2,25 +2,17 @@
// See LICENSE for copying information.
<template>
<div class="project-selection" :class="{ default: !hasProjects }">
<p class="project-selection__no-projects-text" v-if="!hasProjects">You have no projects</p>
<div class="project-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
<div
class="project-selection__toggle-container"
:class="{ default: isOnboardingTour }"
@click.stop="toggleSelection"
v-if="hasProjects"
>
<h1 class="project-selection__toggle-container__name">{{name}}</h1>
<div class="project-selection__toggle-container__expander-area" v-if="!isOnboardingTour">
<ExpandIcon
v-if="!isDropdownShown"
alt="Arrow down (expand)"
/>
<HideIcon
v-if="isDropdownShown"
alt="Arrow up (hide)"
/>
</div>
<h1 class="project-selection__toggle-container__name" :class="{ white: isDropdownShown }">Projects</h1>
<ExpandIcon
class="project-selection__toggle-container__expand-icon"
:class="{ expanded: isDropdownShown }"
alt="Arrow down (expand)"
/>
<ProjectDropdown
v-show="isDropdownShown"
@close="closeDropdown"
@ -33,12 +25,10 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ExpandIcon from '@/../static/images/common/BlueExpand.svg';
import HideIcon from '@/../static/images/common/BlueHide.svg';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from '@/utils/meta';
@ -48,7 +38,6 @@ import ProjectDropdown from './ProjectDropdown.vue';
components: {
ProjectDropdown,
ExpandIcon,
HideIcon,
},
})
export default class ProjectSelection extends Vue {
@ -69,13 +58,6 @@ export default class ProjectSelection extends Vue {
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
}
/**
* Indicates if new project creation button is shown.
*/
public get isButtonShown(): boolean {
return this.$store.state.appStateModule.appState.isCreateProjectButtonShown;
}
/**
* Fetches projects related information and than toggles selection popup.
*/
@ -96,22 +78,6 @@ export default class ProjectSelection extends Vue {
this.isLoading = false;
}
/**
* Return selected project name if it is, if not returns default label.
*/
public get name(): string {
const selectedProject: Project = this.$store.state.projectsModule.selectedProject;
return selectedProject.id ? selectedProject.name : 'Choose project';
}
/**
* Indicates if user has projects.
*/
public get hasProjects(): boolean {
return this.$store.state.projectsModule.projects.length > 0;
}
/**
* Indicates if current route is onboarding tour.
*/
@ -149,34 +115,16 @@ export default class ProjectSelection extends Vue {
background-color: #fff;
cursor: pointer;
margin-right: 20px;
&__no-projects-text {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #354049;
opacity: 0.7;
cursor: default !important;
}
min-width: 130px;
&__toggle-container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 50px;
&__common {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: rgba(56, 75, 101, 0.4);
opacity: 0.7;
cursor: pointer;
margin-right: 5px;
}
padding: 0 16px;
width: calc(100% - 32px);
height: 36px;
&__name {
font-family: 'font_medium', sans-serif;
@ -184,24 +132,38 @@ export default class ProjectSelection extends Vue {
line-height: 23px;
color: #354049;
transition: opacity 0.2s ease-in-out;
word-break: break-all;
word-break: unset;
margin: 0;
}
&__expander-area {
margin-left: 11px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
&__expand-icon {
margin-left: 15px;
}
}
}
.default {
.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.expanded {
.black-arrow-expand-path {
fill: #fff;
}
}
.active {
background: #2582ff;
border-radius: 6px;
}
.white {
color: #fff;
}
@media screen and (max-width: 1280px) {
.project-selection {
@ -210,10 +172,6 @@ export default class ProjectSelection extends Vue {
&__toggle-container {
justify-content: space-between;
padding-left: 10px;
&__common {
display: none;
}
}
}
}

32
web/satellite/src/components/header/resourcesDropdown/ResourcesDropdown.vue Normal file
View File

@ -0,0 +1,32 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template src="./resourcesDropdown.html"></template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import CommunityIcon from '@/../static/images/header/community.svg';
import DocsIcon from '@/../static/images/header/docs.svg';
import SupportIcon from '@/../static/images/header/support.svg';
import { RouteConfig } from '@/router';
@Component({
components: {
DocsIcon,
CommunityIcon,
SupportIcon,
},
})
export default class ResourcesDropdown extends Vue {
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.name === RouteConfig.OnboardingTour.name;
}
}
</script>
<style src="./resourcesDropdown.scss" scoped lang="scss"></style>

119
web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue Normal file
View File

@ -0,0 +1,119 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="resources-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
<div
class="resources-selection__toggle-container"
@click.stop="toggleDropdown"
>
<h1 class="resources-selection__toggle-container__name" :class="{ white: isDropdownShown }">Resources</h1>
<ExpandIcon
class="resources-selection__toggle-container__expand-icon"
:class="{ expanded: isDropdownShown }"
alt="Arrow down (expand)"
/>
<ResourcesDropdown
v-show="isDropdownShown"
@close="closeDropdown"
v-click-outside="closeDropdown"
/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import { RouteConfig } from '@/router';
import ResourcesDropdown from './ResourcesDropdown.vue';
@Component({
components: {
ResourcesDropdown,
ExpandIcon,
},
})
export default class ResourcesSelection extends Vue {
public isDropdownShown: boolean = false;
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.name === RouteConfig.OnboardingTour.name;
}
/**
* Toggles resources dropdown visibility.
*/
public toggleDropdown(): void {
this.isDropdownShown = !this.isDropdownShown;
}
/**
* Closes resources dropdown.
*/
public closeDropdown(): void {
this.isDropdownShown = false;
}
}
</script>
<style scoped lang="scss">
.resources-selection {
background-color: #fff;
cursor: pointer;
margin-right: 20px;
&__toggle-container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 16px;
width: calc(100% - 32px);
height: 36px;
&__name {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #354049;
transition: opacity 0.2s ease-in-out;
word-break: unset;
margin: 0;
}
&__expand-icon {
margin-left: 15px;
}
}
}
.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.expanded {
.black-arrow-expand-path {
fill: #fff;
}
}
.active {
background: #2582ff;
border-radius: 6px;
}
.white {
color: #fff;
}
</style>

32
web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.html Normal file
View File

@ -0,0 +1,32 @@
<!--Copyright (C) 2020 Storj Labs, Inc.-->
<!--See LICENSE for copying information.-->
<div class="resources-dropdown">
<a
class="resources-dropdown__item-container"
href="https://documentation.storj.io"
target="_blank"
rel="noopener noreferrer"
>
<DocsIcon class="resources-dropdown__item-container__image"/>
<p class="resources-dropdown__item-container__title">Docs</p>
</a>
<a
class="resources-dropdown__item-container"
href="https://storj.io/community/"
target="_blank"
rel="noopener noreferrer"
>
<CommunityIcon class="resources-dropdown__item-container__image"/>
<p class="resources-dropdown__item-container__title">Community</p>
</a>
<a
class="resources-dropdown__item-container"
href="mailto:support@storj.io"
target="_blank"
rel="noopener noreferrer"
>
<SupportIcon class="resources-dropdown__item-container__image"/>
<p class="resources-dropdown__item-container__title">Support</p>
</a>
</div>

44
web/satellite/src/components/header/resourcesDropdown/resourcesDropdown.scss Normal file
View File

@ -0,0 +1,44 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
.resources-dropdown {
position: absolute;
top: 50px;
left: 0;
padding: 6px 0;
background-color: #fff;
z-index: 1120;
font-family: 'font_regular', sans-serif;
min-width: 255px;
box-shadow: 0 20px 34px rgba(10, 27, 44, 0.28);
border-radius: 6px;
&__item-container {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 20px;
&__image {
min-width: 20px;
object-fit: cover;
}
&__title {
margin-left: 13px;
font-size: 14px;
line-height: 20px;
color: #354049;
}
&:hover {
background-color: #f2f2f6;
.docs-svg-path,
.community-svg-path,
.support-svg-path {
fill: #2683ff !important;
}
}
}
}

133
web/satellite/src/components/header/settingsDropdown/SettingsDropdown.vue Normal file
View File

@ -0,0 +1,133 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="settings-dropdown">
<div class="settings-dropdown__choice" @click.prevent.stop="onAccountSettingsClick">
<div class="settings-dropdown__choice__mark-container">
<SelectionIcon
v-if="isAccountSettingsPage"
class="settings-dropdown__choice__mark-container__image"
/>
</div>
<p class="settings-dropdown__choice__label" :class="{ active: isAccountSettingsPage }">
Account Settings
</p>
</div>
<div class="settings-dropdown__choice" @click.prevent.stop="onBillingClick">
<div class="settings-dropdown__choice__mark-container">
<SelectionIcon
v-if="isBillingPage"
class="settings-dropdown__choice__mark-container__image"
/>
</div>
<p class="settings-dropdown__choice__label" :class="{ active: isBillingPage }">
Billing
</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SelectionIcon from '@/../static/images/header/selection.svg';
import { RouteConfig } from '@/router';
@Component({
components: {
SelectionIcon,
},
})
export default class SettingsDropdown extends Vue {
/**
* Indicates if current route is account settings page.
*/
public get isAccountSettingsPage(): boolean {
return this.$route.name === RouteConfig.Settings.name;
}
/**
* Indicates if current route is billing page.
*/
public get isBillingPage(): boolean {
return this.$route.name === RouteConfig.Billing.name;
}
/**
* Redirects to account settings page.
*/
public onAccountSettingsClick(): void {
this.$router.push(RouteConfig.Account.with(RouteConfig.Settings).path);
this.closeDropdown();
}
/**
* Redirects to billing page.
*/
public onBillingClick(): void {
this.$router.push(RouteConfig.Account.with(RouteConfig.Billing).path);
this.closeDropdown();
}
/**
* Closes dropdown.
*/
private closeDropdown(): void {
this.$emit('close');
}
}
</script>
<style scoped lang="scss">
.settings-dropdown {
position: absolute;
left: 0;
top: 50px;
z-index: 1120;
box-shadow: 0 20px 34px rgba(10, 27, 44, 0.28);
border-radius: 6px;
background-color: #fff;
padding: 6px 0;
&__choice {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 25px;
min-width: 255px;
background-color: #fff;
border-radius: 6px;
font-family: 'font_regular', sans-serif;
&__label {
margin: 12px 0;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
}
&:hover {
background-color: #f2f2f6;
.settings-dropdown__choice__label {
color: #354049;
}
}
&__mark-container {
width: 10px;
margin-right: 12px;
&__image {
object-fit: cover;
}
}
}
}
.active {
font-family: 'font_bold', sans-serif;
}
</style>

131
web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue Normal file
View File

@ -0,0 +1,131 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="settings-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
<div
class="settings-selection__toggle-container"
@click.stop="toggleDropdown"
>
<h1 class="settings-selection__toggle-container__name" :class="{ white: isDropdownShown }">Settings</h1>
<ExpandIcon
class="settings-selection__toggle-container__expand-icon"
:class="{ expanded: isDropdownShown }"
alt="Arrow down (expand)"
/>
<SettingsDropdown
v-show="isDropdownShown"
@close="closeDropdown"
v-click-outside="closeDropdown"
/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import { RouteConfig } from '@/router';
import SettingsDropdown from './SettingsDropdown.vue';
@Component({
components: {
SettingsDropdown,
ExpandIcon,
},
})
export default class SettingsSelection extends Vue {
public isDropdownShown: boolean = false;
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.name === RouteConfig.OnboardingTour.name;
}
/**
* Toggles project dropdown visibility.
*/
public toggleDropdown(): void {
this.isDropdownShown = !this.isDropdownShown;
}
/**
* Closes project dropdown.
*/
public closeDropdown(): void {
this.isDropdownShown = false;
}
}
</script>
<style scoped lang="scss">
.settings-selection {
background-color: #fff;
cursor: pointer;
margin-right: 20px;
min-width: 130px;
&__toggle-container {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
width: calc(100% - 32px);
height: 36px;
&__name {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #354049;
transition: opacity 0.2s ease-in-out;
word-break: unset;
margin: 0;
}
&__expand-icon {
margin-left: 15px;
}
}
}
.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.expanded {
.black-arrow-expand-path {
fill: #fff;
}
}
.active {
background: #2582ff;
border-radius: 6px;
}
.white {
color: #fff;
}
@media screen and (max-width: 1280px) {
.settings-selection {
margin-right: 30px;
&__toggle-container {
justify-content: space-between;
padding-left: 10px;
}
}
}
</style>

118
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -1,19 +1,28 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template src="./navigationArea.html"></template>
<template>
<div class="navigation-area" v-if="!isOnboardingTour">
<router-link
:aria-label="navItem.name"
class="navigation-area__item-container"
v-for="navItem in navigation"
:key="navItem.name"
:to="navItem.path"
>
<div class="navigation-area__item-container__link">
<component :is="navItem.icon"></component>
<h1 class="navigation-area__item-container__link__title">{{navItem.name}}</h1>
</div>
</router-link>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProjectSelection from '@/components/project/selection/ProjectSelection.vue';
import ApiKeysIcon from '@/../static/images/navigation/apiKeys.svg';
import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
import DocsIcon from '@/../static/images/navigation/docs.svg';
import LogoIcon from '@/../static/images/navigation/logo.svg';
import LogoTextIcon from '@/../static/images/navigation/logoText.svg';
import SupportIcon from '@/../static/images/navigation/support.svg';
import TeamIcon from '@/../static/images/navigation/team.svg';
import { RouteConfig } from '@/router';
@ -21,11 +30,6 @@ import { NavigationLink } from '@/types/navigation';
@Component({
components: {
ProjectSelection,
LogoIcon,
LogoTextIcon,
DocsIcon,
SupportIcon,
DashboardIcon,
ApiKeysIcon,
TeamIcon,
@ -38,51 +42,65 @@ export default class NavigationArea extends Vue {
public readonly navigation: NavigationLink[] = [
RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
RouteConfig.ApiKeys.withIcon(ApiKeysIcon),
RouteConfig.Team.withIcon(TeamIcon),
RouteConfig.Users.withIcon(TeamIcon),
];
/**
* Array of account related navigation links.
*/
public readonly accountNavigation: NavigationLink[] = [
RouteConfig.Account.with(RouteConfig.Settings),
RouteConfig.Account.with(RouteConfig.Billing),
// TODO: disabled until implementation
// RouteConfig.Account.with(RouteConfig.Referral),
];
/**
* Returns home path depending on app's state.
*/
public get homePath(): string {
if (this.isOnboardingTour) {
return RouteConfig.OnboardingTour.path;
}
return RouteConfig.ProjectDashboard.path;
}
/**
* Indicates if roter link is disabled.
*/
public get isLinkDisabled(): boolean {
return this.isOnboardingTour || this.isNoProject;
}
/**
* Indicates if current route is onboarding tour.
*/
private get isOnboardingTour(): boolean {
public get isOnboardingTour(): boolean {
return this.$route.name === RouteConfig.OnboardingTour.name;
}
/**
* Indicates if there is no projects.
*/
private get isNoProject(): boolean {
return this.$store.state.projectsModule.projects.length === 0;
}
}
</script>
<style src="./navigationArea.scss" lang="scss"></style>
<style scoped lang="scss">
.navigation-svg-path {
fill: rgb(53, 64, 73);
}
.navigation-area {
padding: 25px 30px;
min-width: 160px;
background: rgba(118, 131, 148, 0.3);
display: flex;
flex-direction: column;
align-items: center;
font-family: 'font_regular', sans-serif;
&__item-container {
flex: 0 0 auto;
padding: 10px;
width: calc(100% - 20px);
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 40px;
text-decoration: none;
&__link {
display: flex;
justify-content: flex-start;
align-items: center;
&__title {
font-size: 16px;
line-height: 23px;
color: #354049;
margin: 0 0 0 15px;
}
}
&.router-link-active,
&:hover {
font-family: 'font_bold', sans-serif;
background: rgba(245, 246, 250, 0.7);
border-radius: 6px;
.svg .navigation-svg-path:not(.white) {
fill: #2683ff !important;
}
}
}
}
</style>

62
web/satellite/src/components/navigation/navigationArea.html
View File

@ -1,62 +0,0 @@
<!--Copyright (C) 2019 Storj Labs, Inc.-->
<!--See LICENSE for copying information.-->
<div class="navigation-area">
<div class="navigation-area-top">
<router-link :to="homePath" class="navigation-area__logo">
<LogoIcon class="navigation-area__logo__img"/>
<LogoTextIcon class="navigation-area__logo__text"/>
</router-link>
<p class="navigation-area__project-title">PROJECT</p>
<ProjectSelection class="project-selection"/>
<router-link
:aria-label="navItem.name"
class="navigation-area__item-container"
:class="{ disabled: isLinkDisabled }"
v-for="navItem in navigation"
:key="navItem.name"
:to="navItem.path"
>
<div class="navigation-area__item-container__link-container">
<component :is="navItem.icon"></component>
<h1 class="navigation-area__item-container__link-container__title">{{navItem.name}}</h1>
</div>
</router-link>
<p class="navigation-area__resources-title">RESOURCES</p>
<a
class="navigation-area__item-container"
:class="{ disabled: isLinkDisabled }"
href="https://documentation.storj.io"
target="_blank"
>
<div class="navigation-area__item-container__link-container">
<DocsIcon class="svg"/>
<h1 class="navigation-area__item-container__link-container__title docs-title">Docs</h1>
</div>
</a>
<a
class="navigation-area__item-container support-item"
:class="{ disabled: isLinkDisabled }"
href="mailto:support@storj.io"
target="_blank"
>
<div class="navigation-area__item-container__link-container">
<SupportIcon class="svg"/>
<h1 class="navigation-area__item-container__link-container__title">Support</h1>
</div>
</a>
</div>
<div class="navigation-area__account-area">
<router-link
class="navigation-area__item-container account-item"
:class="{ disabled: isLinkDisabled }"
v-for="navItem in accountNavigation"
:key="navItem.name"
:to="navItem.path"
>
<div class="navigation-area__item-container__link-container" >
<h1 class="navigation-area__item-container__link-container__title account-item">{{navItem.name}}</h1>
</div>
</router-link>
</div>
</div>

190
web/satellite/src/components/navigation/navigationArea.scss
View File

@ -1,190 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
a {
text-decoration: none;
outline: none;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
width: 3px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #afb7c1;
}
.navigation-svg-path {
fill: rgb(53, 64, 73);
}
.navigation-area {
min-width: 280px;
max-width: 280px;
height: calc(100vh - 140px);
overflow-y: hidden;
overflow-x: hidden;
background-color: #fff;
padding: 20px 0 120px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: 'font_regular', sans-serif;
&__logo {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
margin-left: 60px;
flex: 0 0 auto;
&__img {
width: 54px;
height: 60px;
}
&__text {
margin-left: 12px;
width: 69px;
height: 16px;
}
}
&__project-title,
&__resources-title {
font-size: 14px;
line-height: 20px;
color: #505872;
margin: 0 0 20px 65px;
font-weight: 600;
flex: 0 0 auto;
}
&__project-title {
margin: 40px 0 15px 65px;
padding-top: 20px;
}
&__resources-title {
flex: 0 0 auto;
margin: 35px 0 20px 65px;
}
&__item-container {
flex: 0 0 auto;
height: 52px;
padding-left: 60px;
border-left: 3px solid transparent;
display: flex;
justify-content: flex-start;
align-items: center;
&.router-link-active,
&:hover {
border-left: 3px solid #2683ff;
.svg .navigation-svg-path:not(.white) {
fill: #2683ff !important;
}
}
&__link-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&__title {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #354049;
margin-left: 15px;
}
.docs-title {
margin-left: 20px;
}
}
}
.support-item {
margin-bottom: 25px;
}
.account-item {
margin-left: 0;
&.router-link-active {
.account-item {
color: #2683ff;
}
}
}
}
.disabled {
cursor: not-allowed;
pointer-events: none;
opacity: 0.6;
}
.project-selection {
margin: 10px 0 0 65px;
}
@media screen and (max-width: 1280px) {
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
margin-top: 0;
}
.divider {
margin-left: 42px;
}
.navigation-area {
z-index: 200;
&__item-container {
padding-left: 40px;
}
&__project-title,
&__resources-title {
margin-left: 45px;
}
&__project-title {
margin-top: 0;
}
&__logo {
display: none;
}
.project-selection {
margin-left: 35px;
}
}
}
@media screen and (max-height: 810px) {
.navigation-area {
overflow-y: scroll;
padding: 20px 0 50px 0;
height: calc(100vh - 70px);
&__account-area {
padding-bottom: 50px;
}
}
}

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

@ -36,7 +36,7 @@ export abstract class RouteConfig {
public static ForgotPassword = new NavigationLink('/forgot-password', 'Forgot Password');
public static Account = new NavigationLink('/account', 'Account');
public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');
public static Team = new NavigationLink('/project-members', 'Members');
public static Users = new NavigationLink('/project-members', 'Users');
public static ApiKeys = new NavigationLink('/api-keys', 'API Keys');
public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
public static CreateProject = new NavigationLink('/create-project', 'Create Project');
@ -139,8 +139,8 @@ export const router = new Router({
component: ProjectDashboard,
},
{
path: RouteConfig.Team.path,
name: RouteConfig.Team.name,
path: RouteConfig.Users.path,
name: RouteConfig.Users.name,
component: ProjectMembersArea,
},
{

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

@ -2,17 +2,17 @@
// See LICENSE for copying information.
<template>
<div class="dashboard-container">
<div class="dashboard">
<div v-if="isLoading" class="loading-overlay active">
<img class="loading-image" src="@/../static/images/register/Loading.gif" alt="Company logo loading gif">
</div>
<NoPaywallInfoBar v-if="isNoPaywallInfoBarShown && !isLoading"/>
<div v-if="!isLoading" class="dashboard-container__wrap">
<NavigationArea class="dashboard-container__wrap__regular-navigation"/>
<div class="dashboard-container__wrap__column">
<DashboardHeader/>
<div class="dashboard-container__wrap__column__main-area">
<div class="dashboard-container__wrap__column__main-area__bar-area">
<div v-if="!isLoading" class="dashboard__wrap">
<DashboardHeader/>
<div class="dashboard__wrap__main-area">
<NavigationArea class="regular-navigation"/>
<div class="dashboard__wrap__main-area__content">
<div class="dashboard__wrap__main-area__content__bar-area">
<VInfoBar
v-if="isBillingInfoBarShown"
:first-value="storageRemaining"
@ -34,9 +34,7 @@
link-label="Request Project Limit Increase"
/>
</div>
<div class="dashboard-container__wrap__column__main-area__content">
<router-view/>
</div>
<router-view/>
</div>
</div>
</div>
@ -345,43 +343,28 @@ export default class DashboardArea extends Vue {
opacity: 1;
}
.dashboard-container {
position: fixed;
max-width: 100%;
width: 100%;
.dashboard {
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #f5f6fa;
display: flex;
flex-direction: column;
&__wrap {
display: flex;
flex-direction: column;
height: 100%;
&__column {
&__main-area {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
&__main-area {
position: relative;
width: 100%;
height: calc(100vh - 50px);
&__content {
overflow-y: scroll;
display: flex;
flex-direction: column;
height: calc(100vh - 62px);
width: 100%;
&__bar-area {
flex: 0 0 auto;
}
&__content {
flex: 0 0 auto;
position: relative;
}
}
}
@ -390,7 +373,7 @@ export default class DashboardArea extends Vue {
@media screen and (max-width: 1280px) {
.dashboard-container__wrap__regular-navigation {
.regular-navigation {
display: none;
}
}

2
web/satellite/static/images/common/BlackArrowExpand.svg
View File

@ -1,3 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.266267 0.254166C0.621289 -0.0847221 1.19689 -0.0847221 1.55192 0.254166L5 3.54555L8.44808 0.254166C8.80311 -0.0847221 9.37871 -0.0847221 9.73373 0.254166C10.0888 0.593054 10.0888 1.1425 9.73373 1.48139L5 6L0.266267 1.48139C-0.0887555 1.1425 -0.0887555 0.593054 0.266267 0.254166Z" fill="#354049"/>
<path class="black-arrow-expand-path" fill-rule="evenodd" clip-rule="evenodd" d="M0.266267 0.254166C0.621289 -0.0847221 1.19689 -0.0847221 1.55192 0.254166L5 3.54555L8.44808 0.254166C8.80311 -0.0847221 9.37871 -0.0847221 9.73373 0.254166C10.0888 0.593054 10.0888 1.1425 9.73373 1.48139L5 6L0.266267 1.48139C-0.0887555 1.1425 -0.0887555 0.593054 0.266267 0.254166Z" fill="#354049"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 455 B

After

Width:  |  Height:  |  Size: 487 B

5
web/satellite/static/images/header/community.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="community-svg-path" d="M13.6765 3.63971C13.6765 1.62955 12.0469 0 10.0368 0C10.0245 0 10.0122 6.05864e-05 10 0.000181759C9.98776 6.05864e-05 9.9755 0 9.96324 0C7.95308 0 6.32353 1.62955 6.32353 3.63971C6.32353 4.98758 7.0562 6.16432 8.145 6.79341C6.72107 7.46304 5.73529 8.91052 5.73529 10.5882V12.1324H14.2647V10.5882C14.2647 8.91052 13.2789 7.46305 11.855 6.79342C12.9438 6.16433 13.6765 4.98758 13.6765 3.63971Z" fill="#5B5C5E"/>
<path class="community-svg-path" d="M6.17664 0.51958C5.62898 0.189734 4.98738 0 4.30147 0C2.29132 0 0.661765 1.62955 0.661765 3.63971C0.661765 4.97413 1.37988 6.14082 2.45092 6.77431C1.00483 7.43522 0 8.89438 0 10.5882V12.1324H4.41177V10.5882C4.41177 9.072 5.02955 7.66786 6.06128 6.65394L6.07985 6.63596L6.0486 6.5949C5.44573 5.78186 5.094 4.78793 5.0744 3.73295L5.07353 3.63971C5.07353 2.45764 5.48676 1.37208 6.17664 0.51958Z" fill="#5B5C5E"/>
<path class="community-svg-path" d="M13.8234 0.51958C14.371 0.189734 15.0126 0 15.6985 0C17.7087 0 19.3382 1.62955 19.3382 3.63971C19.3382 4.97413 18.6201 6.14082 17.5491 6.77431C18.9952 7.43522 20 8.89438 20 10.5882V12.1324H15.5882V10.5882C15.5882 9.072 14.9705 7.66786 13.9387 6.65394L13.9201 6.63596L13.9514 6.5949C14.5543 5.78186 14.906 4.78793 14.9256 3.73295L14.9265 3.63971C14.9265 2.45764 14.5132 1.37208 13.8234 0.51958Z" fill="#5B5C5E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
web/satellite/static/images/header/docs.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="docs-svg-path" fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H9.41177V13H1C0.447715 13 0 12.5523 0 12V1ZM8.23534 2.36358H1.17651V3.54539H8.23534V2.36358ZM4.70593 4.72734H1.17651V5.90915H4.70593V4.72734ZM1.17651 7.09091H4.70593V8.27273H1.17651V7.09091ZM8.23534 10.6364V9.45462H1.17651V10.6364H8.23534ZM10.5882 0H19C19.5523 0 20 0.447715 20 1V12C20 12.5523 19.5523 13 19 13H10.5882V0ZM18.8236 2.36358H11.7647V3.54539H18.8236V2.36358ZM18.8236 4.72734H11.7647V5.90915H18.8236V4.72734ZM11.7647 7.09091H18.8236V8.27273H11.7647V7.09091ZM15.2941 9.45462H11.7647V10.6364H15.2941V9.45462Z" fill="#5B5C5E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 744 B

20
web/satellite/static/images/header/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
web/satellite/static/images/header/projectSelection.svg → web/satellite/static/images/header/selection.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 690 B

After

Width:  |  Height:  |  Size: 690 B

6
web/satellite/static/images/header/support.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="support-svg-path" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V15L12.1428 13H4C1.79086 13 0 11.2091 0 9V4Z" fill="#5B5C5E"/>
<circle cx="4" cy="6" r="1" fill="white"/>
<circle cx="8" cy="6" r="1" fill="white"/>
<circle cx="12" cy="6" r="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

6
web/satellite/static/images/navigation/docs.svg
View File

@ -1,6 +0,0 @@
<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="navigation-svg-path" d="M17.975 5.74811C17.9448 5.71786 17.9448 5.68878 17.9157 5.65853L17.8854 5.62828L17.8261 5.56895C17.7959 5.53871 17.7668 5.50962 17.7365 5.47937L13.0017 0.744565C12.9715 0.714318 12.9424 0.685233 12.9121 0.654985C12.9121 0.656149 12.8819 0.625901 12.8528 0.625901L12.8226 0.595654C12.7923 0.565407 12.7632 0.565407 12.733 0.536321C12.2862 0.179171 11.7209 0 11.1543 0H3.35157C1.92178 0 0.760742 1.16104 0.760742 2.59083V20.7277C0.760742 22.1575 1.92178 23.3186 3.35157 23.3186H15.9195C17.3493 23.3186 18.5103 22.1575 18.5103 20.7277L18.5115 7.32683C18.5115 6.76144 18.3032 6.19486 17.9751 5.74812L17.975 5.74811ZM16.2183 20.6986C16.2183 20.8475 16.0997 20.9964 15.9205 20.9964H3.35143C3.20252 20.9964 3.05361 20.8777 3.05361 20.6986V2.59177C3.05361 2.44286 3.17227 2.29395 3.35143 2.29395H10.1117V5.77819C10.1117 7.20799 11.2728 8.36902 12.7026 8.36902H16.1868L16.188 20.6983L16.2183 20.6986Z" fill="#354049"/>
<path class="navigation-svg-path" d="M7.46108 12.5629C7.46108 13.3151 7.25209 13.88 6.85591 14.2795C6.46064 14.679 5.8791 14.8912 5.15762 14.8912H3.73828V10.4238H5.27393C5.97178 10.4238 6.52969 10.6121 6.90224 10.9648C7.27571 11.3405 7.46106 11.8814 7.46106 12.5629L7.46108 12.5629ZM6.22893 12.6107C6.22893 12.2111 6.15897 11.9053 5.99632 11.694C5.83367 11.4828 5.60105 11.3882 5.27483 11.3882L4.92591 11.3873V13.8801H5.18216C5.55472 13.8801 5.81004 13.7625 5.97268 13.5513C6.13533 13.3391 6.22893 13.0571 6.22893 12.6108V12.6107Z" fill="#354049"/>
<path class="navigation-svg-path" d="M11.9283 12.6459C11.9283 13.3788 11.7339 13.9292 11.3696 14.3185C11.0054 14.7077 10.4231 14.8912 9.69462 14.8912C8.96618 14.8912 8.40752 14.7077 8.0433 14.3185C7.65441 13.9292 7.46094 13.3788 7.46094 12.6459C7.46094 11.9129 7.65538 11.3626 8.0433 10.9966C8.43219 10.6073 8.98988 10.4238 9.71832 10.4238C10.4468 10.4238 11.0054 10.6073 11.3933 10.9966C11.7338 11.3626 11.9283 11.9129 11.9283 12.6459H11.9283ZM8.74794 12.6459C8.74794 13.4933 9.06379 13.9059 9.67082 13.9059C9.98667 13.9059 10.2295 13.8146 10.3746 13.6079C10.5207 13.4021 10.5927 13.0808 10.5927 12.6459C10.5927 12.211 10.5197 11.8897 10.3499 11.6839C10.1802 11.478 9.96104 11.3635 9.66986 11.3635C9.06283 11.3859 8.74793 11.7984 8.74793 12.6459L8.74794 12.6459Z" fill="#354049"/>
<path class="navigation-svg-path" d="M14.173 11.3808C13.8773 11.3808 13.6307 11.4948 13.4583 11.7227C13.2859 11.9506 13.2117 12.2693 13.2117 12.6575C13.2117 13.4783 13.5565 13.911 14.2472 13.911C14.4446 13.911 14.6662 13.8878 14.8386 13.8424C15.036 13.797 15.2335 13.7285 15.43 13.6599V14.6401C15.0351 14.7995 14.592 14.8912 14.0988 14.8912C13.3841 14.8912 12.8409 14.7087 12.471 14.3214C12.1011 13.9333 11.9287 13.3635 11.9287 12.6566C11.9287 12.2008 12.027 11.8135 12.2003 11.4717C12.3728 11.1298 12.6444 10.8787 12.9892 10.6971C13.334 10.5146 13.729 10.4238 14.1971 10.4238C14.6902 10.4238 15.1834 10.5146 15.6515 10.7203L15.2566 11.6319C15.0842 11.5634 14.9118 11.4948 14.7384 11.4494C14.5669 11.4031 14.3695 11.3809 14.173 11.3809L14.173 11.3808Z" fill="#354049"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

10
web/satellite/static/images/navigation/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

7
web/satellite/static/images/navigation/logoText.svg
View File

@ -1,7 +0,0 @@
<svg width="69" height="16" viewBox="0 0 69 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5974 3.50249C4.28571 3.7413 4.12986 4.1393 4.12986 4.61692C4.12986 5.09453 4.36363 5.41293 4.75324 5.65174C5.14285 5.89055 6.07792 6.20896 7.48052 6.60697C8.88311 7.00498 10.0519 7.48259 10.8312 8.19901C11.6104 8.91542 12 9.95025 12 11.3831C12 12.7363 11.4545 13.8507 10.4416 14.7264C9.42857 15.602 8.10389 16 6.46753 16C4.05194 16 1.94805 15.1244 0 13.2935L2.02597 10.7463C3.66233 12.1791 5.14285 12.8955 6.54545 12.8955C7.16883 12.8955 7.63636 12.7363 8.02597 12.4975C8.41558 12.2587 8.57143 11.8607 8.57143 11.3831C8.57143 10.9055 8.41558 10.5871 8.02597 10.2687C7.63636 10.0299 6.93506 9.71144 5.76623 9.47264C3.97402 9.07463 2.72727 8.51741 1.94805 7.801C1.16883 7.08458 0.701294 6.04975 0.701294 4.61692C0.701294 3.18408 1.24675 1.99005 2.25974 1.19403C3.27272 0.39801 4.59739 0 6.07792 0C7.0909 0 8.1039 0.159205 9.11688 0.557215C10.1299 0.875623 10.987 1.43283 11.7662 2.06965L10.0519 4.61692C8.72727 3.58209 7.4026 3.10448 6 3.10448C5.37662 3.10448 4.90909 3.26368 4.5974 3.50249Z" fill="#2683FF"/>
<path d="M21.3268 3.13402V16H17.6732V3.13402H13V0H26V3.13402H21.3268Z" fill="#2683FF"/>
<path d="M40.5594 13.68C38.8762 15.2 36.8564 16 34.5 16C32.1436 16 30.0396 15.2 28.4406 13.68C26.7574 12.16 26 10.24 26 8C26 5.76 26.8416 3.84 28.4406 2.32C30.1238 0.800001 32.1436 0 34.5 0C36.9406 0 38.9604 0.800001 40.5594 2.32C42.2426 3.84 43 5.76 43 8C43 10.24 42.2426 12.16 40.5594 13.68ZM39.297 8C39.297 6.64 38.7921 5.44 37.8663 4.48C36.9406 3.52 35.7624 3.04 34.4158 3.04C33.0693 3.04 31.8911 3.52 30.9653 4.48C30.0396 5.44 29.5347 6.64 29.5347 8C29.5347 9.36 30.0396 10.56 30.9653 11.52C31.8911 12.48 33.0693 12.96 34.4158 12.96C35.7624 12.96 36.9406 12.48 37.8663 11.52C38.8762 10.56 39.297 9.36 39.297 8Z" fill="#2683FF"/>
<path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"/>
<path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

4
web/satellite/static/images/navigation/support.svg
View File

@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="navigation-svg-path" d="M18.8333 3.56068H7.0359C5.11538 3.56068 3.56068 5.11538 3.56068 7.0359V16.7299L1.91453 18.1932V6.85299C1.91453 4.1094 4.1094 2.00598 6.85299 2.00598H16.1812C16.7299 2.00598 17.1872 2.18889 17.6444 2.46325C17.8274 2.64615 18.1932 2.5547 18.3761 2.37179C18.559 2.18889 18.4675 1.82308 18.2846 1.64017C17.6444 1.18291 17.0043 1 16.2727 1H6.94444C3.65214 1 1 3.65214 1 6.85299V19.2906C1 19.4735 1.09145 19.6564 1.27436 19.7479C1.45726 19.8393 1.64017 19.7479 1.82308 19.6564L3.56068 18.1017V21.8513C3.56068 22.0342 3.65214 22.2171 3.83504 22.3085C3.9265 22.3085 3.9265 22.3085 4.01795 22.3085C4.1094 22.3085 4.29231 22.3085 4.38376 22.2171L7.31026 19.565C7.40171 19.4735 7.49316 19.3821 7.58462 19.3821C7.76752 19.2906 7.85897 19.1077 7.85897 19.1077C7.85897 19.1077 8.04188 19.1077 8.22479 19.1077C8.31624 19.1077 8.40769 19.1077 8.5906 19.1077H18.7419C20.6624 19.1077 22.2171 17.553 22.2171 15.6325V7.0359C22.2171 5.11538 20.7538 3.56068 18.8333 3.56068ZM17.7359 14.0778C17.2786 14.9009 16.6385 15.2667 16.1812 14.9923L15.541 14.7179C15.2667 14.9009 14.9923 15.0838 14.6265 15.2667L14.535 16.0897C14.535 16.6385 13.8949 16.9128 12.9803 16.9128C12.0658 16.9128 11.4256 16.547 11.4256 16.0897L11.3342 15.2667C10.9684 15.1752 10.694 14.9923 10.4197 14.7179L9.68803 15.0838C9.50513 15.1752 9.13932 15.2667 8.7735 14.9009C8.5906 14.7179 8.31624 14.4436 8.22479 14.1692C7.76752 13.3462 7.67607 12.6145 8.13333 12.3402L8.7735 11.8829C8.7735 11.7 8.7735 11.5171 8.7735 11.3342C8.7735 11.1513 8.7735 10.9684 8.7735 10.7855L8.13333 10.3282C7.67607 10.0538 7.76752 9.32222 8.22479 8.49915C8.40769 8.22479 8.5906 7.95043 8.7735 7.76752C9.23077 7.40171 9.50513 7.49316 9.68803 7.58462L10.4197 7.95043C10.694 7.76752 10.9684 7.58462 11.3342 7.40171L11.4256 6.57863C11.4256 6.02991 12.0658 5.75556 12.9803 5.75556C13.9863 5.75556 14.535 6.12137 14.535 6.57863L14.6265 7.40171C14.9923 7.58462 15.2667 7.67607 15.541 7.95043L16.2727 7.58462C16.7299 7.31026 17.2786 7.67607 17.8274 8.49915C18.0103 8.7735 18.1017 9.13932 18.1932 9.41368C18.2846 9.96239 18.1017 10.2368 17.9188 10.3282L17.2786 10.7855C17.2786 10.9684 17.2786 11.1513 17.2786 11.3342C17.2786 11.5171 17.2786 11.7 17.2786 11.8829L17.9188 12.3402C18.2846 12.6145 18.2846 13.2547 17.7359 14.0778Z" fill="#354049"/>
<path class="navigation-svg-path" d="M12.8893 13.2551C13.9499 13.2551 14.8098 12.3952 14.8098 11.3346C14.8098 10.2739 13.9499 9.41406 12.8893 9.41406C11.8286 9.41406 10.9688 10.2739 10.9688 11.3346C10.9688 12.3952 11.8286 13.2551 12.8893 13.2551Z" fill="#354049"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

109
web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap
View File

@ -1,109 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NavigationArea snapshot not changed with project 1`] = `
<div class="navigation-area">
<div class="navigation-area-top">
<router-link-stub to="/project-dashboard" tag="a" event="click" class="navigation-area__logo">
<logoicon-stub class="navigation-area__logo__img"></logoicon-stub>
<logotexticon-stub class="navigation-area__logo__text"></logotexticon-stub>
</router-link-stub>
<p class="navigation-area__project-title">PROJECT</p>
<projectselection-stub class="project-selection"></projectselection-stub>
<router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link-container__title">Dashboard</h1>
</div>
</router-link-stub>
<router-link-stub to="/api-keys" tag="a" event="click" aria-label="API Keys" class="navigation-area__item-container">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link-container__title">API Keys</h1>
</div>
</router-link-stub>
<router-link-stub to="/project-members" tag="a" event="click" aria-label="Members" class="navigation-area__item-container">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link-container__title">Members</h1>
</div>
</router-link-stub>
<p class="navigation-area__resources-title">RESOURCES</p> <a href="https://documentation.storj.io" target="_blank" class="navigation-area__item-container">
<div class="navigation-area__item-container__link-container">
<docsicon-stub class="svg"></docsicon-stub>
<h1 class="navigation-area__item-container__link-container__title docs-title">Docs</h1>
</div>
</a> <a href="mailto:support@storj.io" target="_blank" class="navigation-area__item-container support-item">
<div class="navigation-area__item-container__link-container">
<supporticon-stub class="svg"></supporticon-stub>
<h1 class="navigation-area__item-container__link-container__title">Support</h1>
</div>
</a>
</div>
<div class="navigation-area__account-area">
<router-link-stub to="/account/settings" tag="a" event="click" class="navigation-area__item-container account-item">
<div class="navigation-area__item-container__link-container">
<h1 class="navigation-area__item-container__link-container__title account-item">Settings</h1>
</div>
</router-link-stub>
<router-link-stub to="/account/billing" tag="a" event="click" class="navigation-area__item-container account-item">
<div class="navigation-area__item-container__link-container">
<h1 class="navigation-area__item-container__link-container__title account-item">Billing</h1>
</div>
</router-link-stub>
</div>
</div>
`;
exports[`NavigationArea snapshot not changed without project 1`] = `
<div class="navigation-area">
<div class="navigation-area-top">
<router-link-stub to="/onboarding-tour" tag="a" event="click" class="navigation-area__logo">
<logoicon-stub class="navigation-area__logo__img"></logoicon-stub>
<logotexticon-stub class="navigation-area__logo__text"></logotexticon-stub>
</router-link-stub>
<p class="navigation-area__project-title">PROJECT</p>
<projectselection-stub class="project-selection"></projectselection-stub>
<router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container disabled">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link-container__title">Dashboard</h1>
</div>
</router-link-stub>
<router-link-stub to="/api-keys" tag="a" event="click" aria-label="API Keys" class="navigation-area__item-container disabled">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link-container__title">API Keys</h1>
</div>
</router-link-stub>
<router-link-stub to="/project-members" tag="a" event="click" aria-label="Members" class="navigation-area__item-container disabled">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link-container__title">Members</h1>
</div>
</router-link-stub>
<p class="navigation-area__resources-title">RESOURCES</p> <a href="https://documentation.storj.io" target="_blank" class="navigation-area__item-container disabled">
<div class="navigation-area__item-container__link-container">
<docsicon-stub class="svg"></docsicon-stub>
<h1 class="navigation-area__item-container__link-container__title docs-title">Docs</h1>
</div>
</a> <a href="mailto:support@storj.io" target="_blank" class="navigation-area__item-container support-item disabled">
<div class="navigation-area__item-container__link-container">
<supporticon-stub class="svg"></supporticon-stub>
<h1 class="navigation-area__item-container__link-container__title">Support</h1>
</div>
</a>
</div>
<div class="navigation-area__account-area">
<router-link-stub to="/account/settings" tag="a" event="click" class="navigation-area__item-container account-item disabled">
<div class="navigation-area__item-container__link-container">
<h1 class="navigation-area__item-container__link-container__title account-item">Settings</h1>
</div>
</router-link-stub>
<router-link-stub to="/account/billing" tag="a" event="click" class="navigation-area__item-container account-item disabled">
<div class="navigation-area__item-container__link-container">
<h1 class="navigation-area__item-container__link-container__title account-item">Billing</h1>
</div>
</router-link-stub>
</div>
</div>
`;

16
web/satellite/tests/unit/components/navigation/navigationArea.spec.ts → web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
View File

@ -14,7 +14,7 @@ import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '../../mock/api/projects';
import { ProjectsApiMock } from '../mock/api/projects';
const api = new ProjectsApiMock();
api.setMockProjects([new Project('1')]);
@ -29,11 +29,11 @@ const store = new Vuex.Store({ modules: { projectsModule } });
const expectedLinks: NavigationLink[] = [
RouteConfig.ProjectDashboard,
RouteConfig.ApiKeys,
RouteConfig.Team,
RouteConfig.Users,
];
describe('NavigationArea', () => {
it('snapshot not changed without project', (): void => {
it('snapshot not changed during onboarding tour', (): void => {
const router = new Router({
mode: 'history',
routes: [{
@ -49,11 +49,8 @@ describe('NavigationArea', () => {
});
const navigationElements = wrapper.findAll('.navigation-area__item-container');
const disabledElements = wrapper.findAll('.navigation-area__item-container.disabled');
expect(navigationElements.length).toBe(7);
expect(disabledElements.length).toBe(7);
expect(navigationElements.length).toBe(0);
expect(wrapper).toMatchSnapshot();
});
@ -77,11 +74,8 @@ describe('NavigationArea', () => {
});
const navigationElements = wrapper.findAll('.navigation-area__item-container');
const disabledElements = wrapper.findAll('.navigation-area__item-container.disabled');
expect(navigationElements.length).toBe(7);
expect(disabledElements.length).toBe(0);
expect(navigationElements.length).toBe(3);
expect(wrapper).toMatchSnapshot();
});

26
web/satellite/tests/unit/navigationArea/__snapshots__/NavigationArea.spec.ts.snap Normal file
View File

@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NavigationArea snapshot not changed during onboarding tour 1`] = ``;
exports[`NavigationArea snapshot not changed with project 1`] = `
<div class="navigation-area">
<router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link__title">Dashboard</h1>
</div>
</router-link-stub>
<router-link-stub to="/api-keys" tag="a" event="click" aria-label="API Keys" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link__title">API Keys</h1>
</div>
</router-link-stub>
<router-link-stub to="/project-members" tag="a" event="click" aria-label="Users" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link__title">Users</h1>
</div>
</router-link-stub>
</div>
`;

2
web/satellite/tests/unit/project/ProjectDropdown.spec.ts
View File

@ -3,7 +3,7 @@
import Vuex from 'vuex';
import ProjectDropdown from '@/components/project/selection/ProjectDropdown.vue';
import ProjectDropdown from '@/components/header/projectsDropdown/ProjectDropdown.vue';
import { appStateModule } from '@/store/modules/appState';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';

2
web/satellite/tests/unit/project/__snapshots__/ProjectDropdown.spec.ts.snap
View File

@ -5,7 +5,7 @@ exports[`ProjectDropdown renders correctly 1`] = `
<div class="project-dropdown__wrap">
<div class="project-dropdown__wrap__choice">
<div class="project-dropdown__wrap__choice__mark-container">
<projectselectionicon-stub class="project-dropdown__wrap__choice__mark-container__image"></projectselectionicon-stub>
<selectionicon-stub class="project-dropdown__wrap__choice__mark-container__image"></selectionicon-stub>
</div>
<p class="project-dropdown__wrap__choice__selected">
testName1

4
web/satellite/tests/unit/views/DashboardArea.spec.ts
View File

@ -90,7 +90,7 @@ describe('Dashboard', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.findAll('.loading-overlay active').length).toBe(0);
expect(wrapper.findAll('.dashboard-container__wrap').length).toBe(1);
expect(wrapper.findAll('.dashboard__wrap').length).toBe(1);
});
it('loads routes correctly when authorithed without project with available routes', async () => {
@ -115,7 +115,7 @@ describe('Dashboard', () => {
it('loads routes correctly when authorithed without project with unavailable routes', async () => {
const unavailableWithoutProject = [
RouteConfig.ApiKeys.path,
RouteConfig.Team.path,
RouteConfig.Users.path,
RouteConfig.ProjectDashboard.path,
];

20
web/satellite/tests/unit/views/__snapshots__/DashboardArea.spec.ts.snap
View File

@ -1,21 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dashboard renders correctly when data is loaded 1`] = `
<div class="dashboard-container">
<div class="dashboard">
<!---->
<!---->
<div class="dashboard-container__wrap">
<navigationarea-stub class="dashboard-container__wrap__regular-navigation"></navigationarea-stub>
<div class="dashboard-container__wrap__column">
<dashboardheader-stub></dashboardheader-stub>
<div class="dashboard-container__wrap__column__main-area">
<div class="dashboard-container__wrap__column__main-area__bar-area">
<div class="dashboard__wrap">
<dashboardheader-stub></dashboardheader-stub>
<div class="dashboard__wrap__main-area">
<navigationarea-stub class="regular-navigation"></navigationarea-stub>
<div class="dashboard__wrap__main-area__content">
<div class="dashboard__wrap__main-area__content__bar-area">
<!---->
<!---->
</div>
<div class="dashboard-container__wrap__column__main-area__content">
<router-view-stub name="default"></router-view-stub>
</div>
<router-view-stub name="default"></router-view-stub>
</div>
</div>
</div>
@ -23,7 +21,7 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
`;
exports[`Dashboard renders correctly when data is loading 1`] = `
<div class="dashboard-container">
<div class="dashboard">
<div class="loading-overlay active"><img src="@/../static/images/register/Loading.gif" alt="Company logo loading gif" class="loading-image"></div>
<!---->
<!---->