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

web/satellite: reworked new navigation sidebar

Browse Source 
Reworked projects selection.
Added billing route to sidebar.
Reworked accounts container.
Fixed navigation console errors.
Fixed Quick start -> CLI flow back route bug.

Change-Id: Ia926146172598b9abde9a0ab5ed38cd7f9719ddd
This commit is contained in:
Vitalii Shpital 2021-11-04 19:59:38 +02:00
parent 804304a75d
commit 609526f6aa
13 changed files with 251 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
testsuite/ui/satellite/navigation_test.go
View File

@ -88,6 +88,12 @@ func TestNavigation(t *testing.T) {
membersTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, membersTitle, "Project Members")
// billing route
page.MustElementR("p", "Billing").MustClick()
waitVueTick(page)
pmTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, pmTitle, "Payment Method")
// resources dropdown
page.MustElementR("p", "Resources").MustClick()
docsLinkTitle := page.MustElement("[href=\"https://docs.storj.io/\"] div h2").MustText()
@ -100,14 +106,15 @@ func TestNavigation(t *testing.T) {
// quick start dropdown
// create project route
page.MustElementR("p", "Quick Start").MustClick()
page.MustElement("[href=\"/create-project\"]").MustClick()
page.MustElement("[aria-roledescription=create-project-route]").MustClick()
waitVueTick(page)
createProjectTitle1 := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, createProjectTitle1, "Create a Project")
page.MustNavigateBack()
// create access grant route
page.MustElement("[href=\"/access-grants/create-grant\"]").MustClick()
page.MustElementR("p", "Quick Start").MustClick()
page.MustElement("[aria-roledescription=create-ag-route]").MustClick()
waitVueTick(page)
nameAGTitle := page.MustElement("[aria-roledescription=name-ag-title]").MustText()
require.Contains(t, nameAGTitle, "Name Your Access Grant")
@ -115,7 +122,7 @@ func TestNavigation(t *testing.T) {
// objects route
page.MustElementR("p", "Quick Start").MustClick()
page.MustElement("[href=\"/objects\"]").MustClick()
page.MustElement("[aria-roledescription=objects-route]").MustClick()
waitVueTick(page)
objectsTitle1 := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, objectsTitle1, "Object Browser")
@ -123,7 +130,7 @@ func TestNavigation(t *testing.T) {
// onboarding cli flow route
page.MustElementR("p", "Quick Start").MustClick()
wait := page.MustWaitRequestIdle()
page.MustElement("[href=\"/onboarding-tour/cli/api-key\"]").MustClick()
page.MustElement("[aria-roledescription=cli-flow-route]").MustClick()
wait()
apiKeyGeneratedTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, apiKeyGeneratedTitle, "API Key Generated")
@ -135,8 +142,6 @@ func TestNavigation(t *testing.T) {
}).MustDo()
page.MustElementX("(//span[text()=\"< Back\"])").MustClick()
waitVueTick(page)
page.MustElement("[href=\"/project-dashboard\"]").MustClick()
waitVueTick(page)
// account dropdown
// account settings route
@ -146,20 +151,6 @@ func TestNavigation(t *testing.T) {
settingsTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, settingsTitle, "Account Settings")
// billing route
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Billing").MustClick()
waitVueTick(page)
pmTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, pmTitle, "Payment Method")
// upgrade account popup
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Upgrade Plan").MustClick()
upgradeTitle := page.MustElement("[aria-roledescription=modal-title]").MustText()
require.Contains(t, upgradeTitle, "Upgrade to Pro Account")
page.MustElement(".close-cross-container").MustClick()
// logout route
page.MustElement("[aria-roledescription=account-area]").MustClick()
page.MustElementR("p", "Logout").MustClick()

2
testsuite/ui/satellite/onboarding_wizard_restart_test.go
View File

@ -51,7 +51,7 @@ func TestRestartOnboardingWizard(t *testing.T) {
// Testing restart tour functionality
page.MustElementR("p", "Quick Start").MustClick()
wait := page.MustWaitRequestIdle()
page.MustElement("[href=\"/onboarding-tour/cli/api-key\"]").MustClick()
page.MustElement("[aria-roledescription=cli-flow-route]").MustClick()
wait()
apiKeyGeneratedTitle := page.MustElement("[aria-roledescription=title]").MustText()
require.Contains(t, apiKeyGeneratedTitle, "API Key Generated")

221
web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
View File

@ -2,32 +2,36 @@
// See LICENSE for copying information.
<template>
<div ref="accountArea" class="account-area" :class="{ active: isDropdown }" aria-roledescription="account-area" @click.stop="toggleDropdown">
<div class="account-area__avatar">
<h1 class="account-area__avatar__letter">{{ avatarLetter }}</h1>
</div>
<div class="account-area__info">
<h2 class="account-area__info__email">{{ user.email }}</h2>
<p v-if="usersCCAmount" class="account-area__info__type">Pro account</p>
<p v-else class="account-area__info__type">Free account</p>
<div ref="accountArea" class="account-area">
<div class="account-area__wrap" :class="{ active: isDropdown }" aria-roledescription="account-area" @click.stop="toggleDropdown">
<div class="account-area__wrap__left">
<AccountIcon class="account-area__wrap__left__icon" />
<p class="account-area__wrap__left__label">My Account</p>
</div>
<ArrowImage class="account-area__wrap__arrow" />
</div>
<div v-if="isDropdown" v-click-outside="closeDropdown" class="account-area__dropdown" :style="style">
<div class="account-area__dropdown__header">
<p class="account-area__dropdown__header__greet">👋🏼 Hi, {{ user.fullName }}</p>
<p class="account-area__dropdown__header__sat">{{ satellite }}</p>
<div class="account-area__dropdown__header__left">
<SatelliteIcon />
<h2 class="account-area__dropdown__header__left__label">Satellite</h2>
</div>
<div class="account-area__dropdown__header__right">
<p class="account-area__dropdown__header__right__sat">{{ satellite }}</p>
<a
class="account-area__dropdown__header__right__link"
href="https://docs.storj.io/dcs/concepts/satellite"
target="_blank"
rel="noopener noreferrer"
>
<InfoIcon />
</a>
</div>
</div>
<div class="account-area__dropdown__item" @click="navigateToSettings">
<SettingsIcon />
<p class="account-area__dropdown__item__label">Account Settings</p>
</div>
<div class="account-area__dropdown__item" @click="navigateToBilling">
<BillingIcon />
<p class="account-area__dropdown__item__label">Billing</p>
</div>
<div v-if="!usersCCAmount" class="account-area__dropdown__item" @click="onUpgrade">
<PlanIcon />
<p class="account-area__dropdown__item__label">Upgrade Plan</p>
</div>
<div class="account-area__dropdown__item" @click="onLogout">
<LogoutIcon />
<p class="account-area__dropdown__item__label">Logout</p>
@ -49,19 +53,22 @@ import { USER_ACTIONS } from "@/store/modules/users";
import { ACCESS_GRANTS_ACTIONS } from "@/store/modules/accessGrants";
import { BUCKET_ACTIONS } from "@/store/modules/buckets";
import { OBJECTS_ACTIONS } from "@/store/modules/objects";
import { PAYMENTS_MUTATIONS } from "@/store/modules/payments";
import InfoIcon from '@/../static/images/navigation/info.svg';
import SatelliteIcon from '@/../static/images/navigation/satellite.svg';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowImage from '@/../static/images/navigation/arrowExpandRight.svg';
import SettingsIcon from '@/../static/images/navigation/settings.svg';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import PlanIcon from '@/../static/images/navigation/plan.svg';
import LogoutIcon from '@/../static/images/navigation/logout.svg';
// @vue/component
@Component({
components: {
InfoIcon,
SatelliteIcon,
AccountIcon,
ArrowImage,
SettingsIcon,
BillingIcon,
PlanIcon,
LogoutIcon,
}
})
@ -69,7 +76,6 @@ export default class AccountArea extends Vue {
private readonly auth: AuthHttpApi = new AuthHttpApi();
private dropdownYPos = 0;
private dropdownXPos = 0;
private dropdownWidth = 0;
public $refs!: {
accountArea: HTMLDivElement,
@ -79,21 +85,8 @@ export default class AccountArea extends Vue {
* Navigates user to account settings page.
*/
public navigateToSettings(): void {
this.$router.push(RouteConfig.Account.with(RouteConfig.Settings).path)
}
/**
* Navigates user to account billing page.
*/
public navigateToBilling(): void {
this.$router.push(RouteConfig.Account.with(RouteConfig.Billing).path)
}
/**
* Toggles upgrade account popup.
*/
public onUpgrade(): void {
this.$store.commit(PAYMENTS_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
this.closeDropdown();
this.$router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
}
/**
@ -127,16 +120,13 @@ export default class AccountArea extends Vue {
* Toggles account dropdown visibility.
*/
public toggleDropdown(): void {
let dropdownHeight = 262; // pixels
if (this.usersCCAmount) {
dropdownHeight = 210;
}
const DROPDOWN_HEIGHT = 158; // pixels
const SIXTEEN_PIXELS = 16;
const TWENTY_PIXELS = 20;
const accountContainer = this.$refs.accountArea.getBoundingClientRect();
this.dropdownYPos = accountContainer.top - dropdownHeight;
this.dropdownXPos = accountContainer.left;
this.dropdownWidth = accountContainer.width;
this.dropdownYPos = accountContainer.bottom - DROPDOWN_HEIGHT - SIXTEEN_PIXELS;
this.dropdownXPos = accountContainer.right - TWENTY_PIXELS;
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
}
@ -152,7 +142,7 @@ export default class AccountArea extends Vue {
* Returns bottom and left position of dropdown.
*/
public get style(): Record<string, string> {
return { top: `${this.dropdownYPos}px`, left: `${this.dropdownXPos}px`, width: `${this.dropdownWidth}px` };
return { top: `${this.dropdownYPos}px`, left: `${this.dropdownXPos}px` };
}
/**
@ -175,105 +165,82 @@ export default class AccountArea extends Vue {
public get user(): User {
return this.$store.getters.user;
}
/**
* Returns first letter of user's name.
*/
public get avatarLetter(): string {
return this.$store.getters.userName.slice(0, 1).toUpperCase();
}
/**
* Returns amount of user's credit cards from store.
*/
public get usersCCAmount(): number {
return this.$store.state.paymentsModule.creditCards.length;
}
}
</script>
<style scoped lang="scss">
.account-area {
margin: 32px 20px;
padding: 8px;
width: calc(100% - 56px);
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
cursor: pointer;
position: static;
width: 100%;
margin-top: 40px;
&__avatar {
min-width: 40px;
min-height: 40px;
border-radius: 20px;
&__wrap {
box-sizing: border-box;
padding: 22px 32px;
border-left: 4px solid #fff;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #2582ff;
justify-content: space-between;
cursor: pointer;
position: static;
&__letter {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #fff;
}
}
&__left {
display: flex;
align-items: center;
justify-content: space-between;
&__info {
margin-left: 16px;
max-width: calc(100% - 40px - 16px);
&__email {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: #56606d;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&__type {
font-size: 14px;
line-height: 20px;
color: #56606d;
&__label {
font-size: 14px;
line-height: 20px;
color: #56606d;
margin-left: 24px;
}
}
}
&__dropdown {
position: absolute;
background: #fff;
min-width: 230px;
min-width: 240px;
max-width: 240px;
z-index: 1;
cursor: default;
border: 1px solid #ebeef1;
box-sizing: border-box;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
border-radius: 8px 8px 0 0;
border-radius: 8px;
&__header {
background: #fafafb;
padding: 16px;
width: calc(100% - 32px);
display: flex;
align-items: center;
justify-content: space-between;
&__greet {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: #56606d;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&__left,
&__right {
display: flex;
align-items: center;
&__sat {
font-size: 14px;
line-height: 20px;
color: #56606d;
&__label {
font-family: 'font_medium', sans-serif;
font-size: 14px;
line-height: 20px;
color: #56606d;
margin-left: 16px;
}
&__sat {
font-size: 14px;
line-height: 20px;
color: #56606d;
margin-right: 16px;
}
&__link {
max-height: 16px;
}
}
}
@ -299,13 +266,31 @@ export default class AccountArea extends Vue {
}
.active {
border-color: #0149ff;
background-color: #f7f8fb;
.account-area__wrap {
&__left__label {
color: #0149ff;
font-weight: 600;
}
&__left__icon path,
&__arrow path {
fill: #0149ff;
}
}
}
@media screen and (max-width: 1280px) {
.account-area__info {
display: none;
.account-area__wrap {
&__left__label,
&__arrow {
display: none;
}
}
}
</style>

123
web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
View File

@ -10,6 +10,7 @@
<div class="navigation-area__container__wrap__edit">
<NewProjectSelection />
</div>
<div class="navigation-area__container__wrap__border" />
<router-link
v-for="navItem in navigation"
:key="navItem.name"
@ -23,17 +24,18 @@
</div>
</router-link>
<div class="navigation-area__container__wrap__border" />
<div
ref="resourcesContainer"
class="navigation-area__container__wrap__item-container"
:class="{ active: isResourcesDropdownShown }"
@click.stop="toggleResourcesDropdown"
>
<div class="navigation-area__container__wrap__item-container__left">
<ResourcesIcon class="navigation-area__container__wrap__item-container__left__image" />
<p class="navigation-area__container__wrap__item-container__left__label">Resources</p>
<div ref="resourcesContainer" class="container-wrapper">
<div
class="navigation-area__container__wrap__item-container"
:class="{ active: isResourcesDropdownShown }"
@click.stop="toggleResourcesDropdown"
>
<div class="navigation-area__container__wrap__item-container__left">
<ResourcesIcon class="navigation-area__container__wrap__item-container__left__image" />
<p class="navigation-area__container__wrap__item-container__left__label">Resources</p>
</div>
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
</div>
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
<GuidesDropdown
v-if="isResourcesDropdownShown"
:close="closeDropdowns"
@ -80,54 +82,55 @@
</a>
</GuidesDropdown>
</div>
<div
ref="quickStartContainer"
class="navigation-area__container__wrap__item-container"
:class="{ active: isQuickStartDropdownShown }"
@click.stop="toggleQuickStartDropdown"
>
<div class="navigation-area__container__wrap__item-container__left">
<QuickStartIcon class="navigation-area__container__wrap__item-container__left__image" />
<p class="navigation-area__container__wrap__item-container__left__label">Quick Start</p>
<div ref="quickStartContainer" class="container-wrapper">
<div
class="navigation-area__container__wrap__item-container"
:class="{ active: isQuickStartDropdownShown }"
@click.stop="toggleQuickStartDropdown"
>
<div class="navigation-area__container__wrap__item-container__left">
<QuickStartIcon class="navigation-area__container__wrap__item-container__left__image" />
<p class="navigation-area__container__wrap__item-container__left__label">Quick Start</p>
</div>
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
</div>
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
<GuidesDropdown
v-if="isQuickStartDropdownShown"
:close="closeDropdowns"
:y-position="quickStartDropdownYPos"
:x-position="quickStartDropdownXPos"
>
<router-link class="dropdown-item" :to="newProjectRoute">
<div class="dropdown-item" aria-roledescription="create-project-route" @click.stop="navigateToNewProject">
<NewProjectIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">New Project</h2>
<p class="dropdown-item__text__label">Create a new project.</p>
</div>
</router-link>
</div>
<div class="dropdown-border" />
<router-link class="dropdown-item" :to="createAGRoute">
<div class="dropdown-item" aria-roledescription="create-ag-route" @click.stop="navigateToCreateAG">
<CreateAGIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Create an Access Grant</h2>
<p class="dropdown-item__text__label">Start the wizard to create a new access grant.</p>
</div>
</router-link>
</div>
<div class="dropdown-border" />
<router-link class="dropdown-item" :to="objectsRoute">
<div class="dropdown-item" aria-roledescription="objects-route" @click.stop="navigateToObjects">
<UploadInWebIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Upload in Web</h2>
<p class="dropdown-item__text__label">Start uploading files in the web browser.</p>
</div>
</router-link>
</div>
<div class="dropdown-border" />
<router-link class="dropdown-item" :to="cliFlowRoute">
<div class="dropdown-item" aria-roledescription="cli-flow-route" @click.stop="navigateToCLIFlow">
<UploadInCLIIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
<h2 class="dropdown-item__text__title">Upload using CLI</h2>
<p class="dropdown-item__text__label">Start guide for using the Uplink CLI.</p>
</div>
</router-link>
</div>
</GuidesDropdown>
</div>
</div>
@ -153,6 +156,7 @@ import AccessGrantsIcon from '@/../static/images/navigation/accessGrants.svg';
import DashboardIcon from '@/../static/images/navigation/projectDashboard.svg';
import BucketsIcon from '@/../static/images/navigation/buckets.svg';
import UsersIcon from '@/../static/images/navigation/users.svg';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import ResourcesIcon from '@/../static/images/navigation/resources.svg';
import QuickStartIcon from '@/../static/images/navigation/quickStart.svg';
import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg';
@ -175,6 +179,7 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
DashboardIcon,
AccessGrantsIcon,
UsersIcon,
BillingIcon,
BucketsIcon,
ResourcesIcon,
QuickStartIcon,
@ -190,10 +195,6 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
})
export default class NewNavigationArea extends Vue {
private readonly TWENTY_PIXELS = 20;
public readonly newProjectRoute = RouteConfig.CreateProject.path;
public readonly createAGRoute = RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).path;
public readonly objectsRoute = RouteConfig.Objects.path;
public readonly cliFlowRoute = RouteConfig.OnboardingTour.with(RouteConfig.CLIStep.with(RouteConfig.APIKey)).path;
public resourcesDropdownYPos = 0;
public resourcesDropdownXPos = 0;
@ -204,6 +205,7 @@ export default class NewNavigationArea extends Vue {
RouteConfig.Objects.withIcon(BucketsIcon),
RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
RouteConfig.Users.withIcon(UsersIcon),
RouteConfig.Account.with(RouteConfig.Billing).withIcon(BillingIcon),
];
public $refs!: {
@ -218,6 +220,7 @@ export default class NewNavigationArea extends Vue {
*/
public mounted(): void {
this.$refs.navigationContainer.addEventListener('scroll', this.closeDropdowns)
window.addEventListener('resize', this.closeDropdowns)
}
/**
@ -226,6 +229,44 @@ export default class NewNavigationArea extends Vue {
*/
public beforeDestroy(): void {
this.$refs.navigationContainer.removeEventListener('scroll', this.closeDropdowns)
window.removeEventListener('resize', this.closeDropdowns)
}
/**
* Redirects to create project screen.
*/
public navigateToCreateAG(): void {
this.closeDropdowns();
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).path).catch(() => {return;});
}
/**
* Redirects to objects screen.
*/
public navigateToObjects(): void {
this.closeDropdowns();
this.$router.push(RouteConfig.Objects.path).catch(() => {return;});
}
/**
* Redirects to onboarding CLI flow screen.
*/
public navigateToCLIFlow(): void {
this.closeDropdowns();
this.$router.push({
name: RouteConfig.APIKey.name,
params: {
backRoute: this.$route.path,
}
});
}
/**
* Redirects to create access grant screen.
*/
public navigateToNewProject(): void {
this.closeDropdowns();
this.$router.push(RouteConfig.CreateProject.path);
}
/**
@ -337,6 +378,10 @@ export default class NewNavigationArea extends Vue {
fill: rgb(53, 64, 73);
}
.container-wrapper {
width: 100%;
}
.navigation-area {
min-width: 280px;
max-width: 280px;
@ -370,9 +415,8 @@ export default class NewNavigationArea extends Vue {
}
&__edit {
padding: 0 20px;
margin: 32px 0;
width: calc(100% - 40px);
margin-top: 40px;
width: 100%;
}
&__item-container {
@ -416,8 +460,12 @@ export default class NewNavigationArea extends Vue {
background-color: #f7f8fb;
color: #0149ff;
.navigation-area__container__wrap__item-container__left__image path {
fill: #0149ff;
.navigation-area__container__wrap__item-container {
&__left__image path,
&__arrow path {
fill: #0149ff;
}
}
}
@ -438,6 +486,7 @@ export default class NewNavigationArea extends Vue {
align-items: center;
font-family: 'font_regular', sans-serif;
padding: 10px 24px;
cursor: pointer;
&__icon {
margin-left: 15px;

48
web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
View File

@ -65,7 +65,7 @@ import { BUCKET_ACTIONS } from "@/store/modules/buckets";
import { Project } from "@/types/projects";
import ProjectIcon from '@/../static/images/navigation/project.svg';
import ArrowImage from '@/../static/images/navigation/arrow.svg';
import ArrowImage from '@/../static/images/navigation/arrowExpandRight.svg';
import CheckmarkIcon from '@/../static/images/navigation/checkmark.svg';
import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
@ -85,7 +85,6 @@ export default class NewProjectSelection extends Vue {
private FIRST_PAGE = 1;
private dropdownYPos = 0;
private dropdownXPos = 0;
private dropdownWidth = 0;
public isLoading = false;
@ -101,9 +100,10 @@ export default class NewProjectSelection extends Vue {
const selectionContainer = this.$refs.projectSelection.getBoundingClientRect();
this.dropdownYPos = selectionContainer.top + selectionContainer.height;
this.dropdownXPos = selectionContainer.left;
this.dropdownWidth = selectionContainer.width;
const FIVE_PIXELS = 5;
const TWENTY_PIXELS = 20;
this.dropdownYPos = selectionContainer.top - FIVE_PIXELS;
this.dropdownXPos = selectionContainer.right - TWENTY_PIXELS;
this.toggleDropdown();
@ -158,7 +158,7 @@ export default class NewProjectSelection extends Vue {
* Returns top and left position of dropdown.
*/
public get style(): Record<string, string> {
return { top: `${this.dropdownYPos}px`, left: `${this.dropdownXPos}px`, width: `${this.dropdownWidth}px` };
return { top: `${this.dropdownYPos}px`, left: `${this.dropdownXPos}px` };
}
/**
@ -241,15 +241,15 @@ export default class NewProjectSelection extends Vue {
width: 100%;
&__selected {
border: 1px solid #ebeef1;
box-sizing: border-box;
border-radius: 8px;
padding: 18px;
padding: 22px 32px;
border-left: 4px solid #fff;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: static;
&__left {
display: flex;
@ -268,18 +268,15 @@ export default class NewProjectSelection extends Vue {
text-overflow: ellipsis;
}
}
&__arrow {
min-width: 14px;
}
}
&__dropdown {
position: absolute;
min-width: 230px;
min-width: 240px;
max-width: 240px;
background-color: #fff;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
border-radius: 8px;
z-index: 1;
&__loader-container {
@ -355,14 +352,31 @@ export default class NewProjectSelection extends Vue {
}
.active {
background-color: #fafafb;
border-color: #0149ff;
background-color: #f7f8fb;
p {
color: #0149ff;
font-weight: 600;
}
svg path {
fill: #0149ff;
}
}
@media screen and (max-width: 1280px) {
.project-selection__selected {
&__left__name,
&__left {
min-width: 18px;
&__name {
display: none;
}
}
&__arrow {
display: none;
}

6
web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
View File

@ -125,6 +125,12 @@ export default class APIKey extends Vue {
* Navigates to previous screen.
*/
public async onBackClick(): Promise<void> {
if (this.$route.params.backRoute) {
await this.$router.push(this.$route.params.backRoute).catch(() => {return; });
return;
}
await this.$router.push(RouteConfig.OnboardingTour.path).catch(() => {return; })
}

3
web/satellite/static/images/navigation/account.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.0699 1.3501C11.7082 1.3501 13.847 3.48887 13.847 6.12718C13.847 7.71029 13.0769 9.11354 11.8909 9.98277C14.2702 10.8566 16.1441 12.779 16.954 15.1907C16.979 15.2652 17.003 15.3401 17.026 15.4155L17.0597 15.529C17.2173 16.0739 16.9033 16.6435 16.3583 16.8011C16.2655 16.8279 16.1695 16.8415 16.0729 16.8415H1.91906C1.35646 16.8415 0.900391 16.3854 0.900391 15.8228C0.900391 15.7435 0.909661 15.6645 0.927976 15.5874L0.940048 15.5414C0.97316 15.4262 1.00867 15.312 1.04651 15.199C1.86532 12.7524 3.77866 10.8083 6.20429 9.94947C5.04365 9.07822 4.29282 7.69038 4.29282 6.12718C4.29282 3.48887 6.43159 1.3501 9.0699 1.3501ZM9.00166 10.9725C6.16834 10.9725 3.66547 12.7019 2.62263 15.2641L2.59217 15.3401H15.4111L15.4106 15.3389C14.3969 12.7625 11.9147 11.0093 9.09094 10.9731L9.00166 10.9725ZM9.0699 2.85147C7.26077 2.85147 5.79419 4.31806 5.79419 6.12718C5.79419 7.93631 7.26077 9.4029 9.0699 9.4029C10.879 9.4029 12.3456 7.93631 12.3456 6.12718C12.3456 4.31806 10.879 2.85147 9.0699 2.85147Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
web/satellite/static/images/navigation/arrow.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.42663 11.6268C8.19665 11.8568 7.82726 11.8624 7.59048 11.6437L7.57298 11.6268L0.976601 5.03045C0.740873 4.79472 0.740873 4.41253 0.976601 4.1768C1.20658 3.94682 1.57597 3.94121 1.81274 4.15997L1.83025 4.1768L7.99973 10.3464L14.1694 4.1768C14.3993 3.94682 14.7687 3.94121 15.0055 4.15997L15.023 4.1768C15.253 4.40678 15.2586 4.77616 15.0398 5.01294L15.023 5.03045L8.42663 11.6268Z" fill="#56606D"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 517 B

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

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0642 2.3999L13.1648 2.4004C13.8319 2.40724 14.0888 2.48399 14.3477 2.62244C14.6192 2.76765 14.8323 2.98073 14.9775 3.25225L14.9973 3.29017C15.1297 3.54984 15.2 3.82762 15.2 4.53577V10.8558C15.2 11.5985 15.1227 11.8678 14.9775 12.1393C14.8323 12.4108 14.6192 12.6239 14.3477 12.7691L14.3098 12.7889C14.0501 12.9213 13.7723 12.9916 13.0642 12.9916H2.93591L2.83531 12.9911C2.16817 12.9843 1.91128 12.9076 1.6524 12.7691C1.38088 12.6239 1.16779 12.4108 1.02259 12.1393L1.00277 12.1014C0.870352 11.8417 0.800049 11.5639 0.800049 10.8558V4.53577L0.80055 4.43516C0.807389 3.76802 0.884132 3.51114 1.02259 3.25225C1.16779 2.98073 1.38088 2.76765 1.6524 2.62244L1.69031 2.60262C1.94999 2.47021 2.22777 2.3999 2.93591 2.3999H13.0642ZM13.891 7.75527H2.10926L2.10931 10.9322C2.11125 11.3457 2.12999 11.4341 2.17696 11.5219C2.20016 11.5653 2.22638 11.5915 2.26976 11.6147L2.29325 11.6265C2.3704 11.6624 2.46882 11.6785 2.78984 11.6819L2.93591 11.6825L13.1406 11.6824C13.5541 11.6804 13.6425 11.6617 13.7303 11.6147C13.7737 11.5915 13.7999 11.5653 13.8231 11.5219L13.8349 11.4984C13.8758 11.4106 13.891 11.2953 13.891 10.8558V7.75527ZM2.89684 3.70904C2.45121 3.71002 2.36017 3.72846 2.26976 3.77681C2.22638 3.80001 2.20016 3.82623 2.17696 3.86961L2.16518 3.8931C2.12929 3.97025 2.1132 4.06867 2.10983 4.3897L2.10914 4.53577V5.61312H13.891V4.49669C13.8899 4.05107 13.8715 3.96002 13.8231 3.86961C13.7999 3.82623 13.7737 3.80001 13.7303 3.77681L13.7069 3.76503C13.6244 3.72667 13.5176 3.71093 13.1406 3.70916L2.89684 3.70904Z" fill="#56606D"/>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6971 2.69995L14.8102 2.70051C15.5608 2.70821 15.8498 2.79454 16.141 2.95031C16.4465 3.11366 16.6862 3.35339 16.8496 3.65884L16.8718 3.7015C17.0208 3.99363 17.0999 4.30614 17.0999 5.1028V12.2128C17.0999 13.0483 17.0129 13.3513 16.8496 13.6568C16.6862 13.9622 16.4465 14.2019 16.141 14.3653L16.0984 14.3876C15.8062 14.5366 15.4937 14.6157 14.6971 14.6157H3.30275L3.18957 14.6151C2.43904 14.6074 2.15004 14.5211 1.85879 14.3653C1.55334 14.2019 1.31362 13.9622 1.15026 13.6568L1.12796 13.6141C0.978993 13.322 0.899902 13.0095 0.899902 12.2128V5.1028L0.900466 4.98962C0.90816 4.23909 0.994496 3.95009 1.15026 3.65884C1.31362 3.35339 1.55334 3.11366 1.85879 2.95031L1.90145 2.92801C2.19358 2.77904 2.50609 2.69995 3.30275 2.69995H14.6971ZM15.6272 8.72474H2.37276L2.37282 12.2988C2.375 12.7639 2.39609 12.8634 2.44893 12.9622C2.47503 13.011 2.50452 13.0405 2.55333 13.0666L2.57975 13.0799C2.66655 13.1203 2.77727 13.1384 3.13842 13.1422L3.30275 13.1429L14.783 13.1427C15.2482 13.1406 15.3477 13.1195 15.4465 13.0666C15.4953 13.0405 15.5248 13.011 15.5509 12.9622L15.5641 12.9358C15.6101 12.837 15.6272 12.7073 15.6272 12.2128V8.72474ZM3.25879 4.17273C2.75746 4.17384 2.65504 4.19458 2.55333 4.24898C2.50452 4.27508 2.47503 4.30457 2.44893 4.35338L2.43567 4.3798C2.3953 4.4666 2.3772 4.57732 2.3734 4.93847L2.37263 5.1028V6.31483H15.6272V5.05884C15.626 4.55751 15.6053 4.45509 15.5509 4.35338C15.5248 4.30457 15.4953 4.27508 15.4465 4.24898L15.4201 4.23572C15.3273 4.19256 15.2071 4.17486 14.783 4.17287L3.25879 4.17273Z" fill="#56606D"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

3
web/satellite/static/images/navigation/info.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00005 15.2C4.0236 15.2 0.800049 11.9765 0.800049 8.00005C0.800049 4.0236 4.0236 0.800049 8.00005 0.800049C11.9765 0.800049 15.2 4.0236 15.2 8.00005C15.2 11.9765 11.9765 15.2 8.00005 15.2ZM8.00005 13.88C11.2475 13.88 13.88 11.2475 13.88 8.00005C13.88 4.75261 11.2475 2.12005 8.00005 2.12005C4.75261 2.12005 2.12005 4.75261 2.12005 8.00005C2.12005 11.2475 4.75261 13.88 8.00005 13.88ZM7.40005 10.4597V8.34325C7.40005 7.97874 7.69554 7.68325 8.06005 7.68325C8.41567 7.68325 8.70559 7.9645 8.71952 8.3167L8.72005 8.34325V10.4158C8.72005 10.784 8.42805 11.0858 8.06005 11.0981C7.70747 11.1098 7.41213 10.8335 7.4004 10.4809C7.40017 10.4738 7.40005 10.4668 7.40005 10.4597ZM7.40005 5.53968V5.46325C7.40005 5.09874 7.69554 4.80325 8.06005 4.80325C8.41567 4.80325 8.70559 5.0845 8.71952 5.4367L8.72005 5.46325V5.49576C8.72005 5.86397 8.42805 6.16584 8.06005 6.17809C7.70747 6.18982 7.41213 5.91351 7.4004 5.56092C7.40017 5.55385 7.40005 5.54677 7.40005 5.53968Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
web/satellite/static/images/navigation/plan.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.67391 12.7993L7.73785 12.8L13.216 12.8C14.7537 12.8 16 11.5527 16 10.0143C16 8.49509 14.7836 7.2566 13.2674 7.22896L13.2219 7.22852L12.6499 7.22859L12.6356 7.04923C12.4471 4.70378 10.4837 2.8896 8.12577 2.8896C6.27206 2.8896 4.6122 4.01898 3.92544 5.73093L3.90468 5.78367L3.85493 5.91241L3.44156 5.91234C1.54071 5.91234 0 7.45433 0 9.3562C0 11.2369 1.5078 12.7691 3.38484 12.7996L3.43622 12.8L7.63231 12.7999L7.67391 12.7993ZM7.59768 11.4866H3.44154L3.40082 11.4863C2.24606 11.4675 1.31343 10.5198 1.31343 9.3562C1.31343 8.17947 2.26634 7.22577 3.44154 7.22577L4.75625 7.2258L5.12855 6.26036L5.14608 6.21583C5.63197 5.00466 6.81012 4.20303 8.12577 4.20303C9.79872 4.20303 11.1927 5.49104 11.3264 7.15443L11.4378 8.54185L13.2159 8.54192L13.2495 8.54226C14.0438 8.55676 14.6866 9.21122 14.6866 10.0143C14.6866 10.8275 14.028 11.4866 13.216 11.4866L7.74514 11.4866L7.68721 11.4858L7.66104 11.4858L7.59768 11.4866Z" fill="#56606D"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

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

@ -1,3 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.95639 0.869391L8.9817 0.883239L14.7099 4.19135C14.9014 4.30195 15.0042 4.48933 15.0184 4.6824L15.0196 4.70478L15.0201 4.72974V11.2863C15.0201 11.4991 14.9111 11.6965 14.7325 11.81L14.7088 11.8243L8.9806 15.1175C8.79663 15.2232 8.57203 15.2274 8.38493 15.1301L8.35966 15.1162L2.68707 11.823C2.50373 11.7166 2.38796 11.5243 2.37863 11.3138L2.37793 11.2863L2.37814 4.71807L2.37793 4.6991C2.37906 4.49418 2.48173 4.29502 2.66548 4.17829L2.68791 4.16468L8.36055 0.883452C8.53556 0.782217 8.74769 0.773137 8.92937 0.856235L8.95639 0.869391ZM13.7788 5.80398L9.29188 8.39516V13.5066L13.7788 10.9271V5.80398ZM3.61933 5.80917V10.9289L8.05057 13.5013V8.39335L3.61933 5.80917ZM8.67145 2.1375L4.21121 4.71739L8.6728 7.31928L13.1583 4.72879L8.67145 2.1375Z" fill="#56606D"/>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.20081 0.977913L9.22929 0.993492L15.6735 4.71511C15.8889 4.83955 16.0046 5.05035 16.0206 5.26755L16.022 5.29272L16.0225 5.3208V12.6969C16.0225 12.9364 15.8998 13.1584 15.6989 13.2861L15.6723 13.3022L9.22806 17.007C9.02108 17.126 8.76841 17.1306 8.55793 17.0212L8.52949 17.0055L2.14783 13.3007C1.94158 13.181 1.81134 12.9647 1.80084 12.7279L1.80005 12.6969L1.80028 5.30767L1.80005 5.28634C1.80132 5.0558 1.91682 4.83175 2.12354 4.70042L2.14878 4.68511L8.53049 0.993731C8.72739 0.879842 8.96603 0.869627 9.17042 0.963112L9.20081 0.977913ZM14.626 6.52933L9.57824 9.4444V15.1948L14.626 12.2928V6.52933ZM3.19662 6.53517V12.2948L8.18177 15.1888V9.44237L3.19662 6.53517ZM8.88026 2.40454L3.86249 5.30691L8.88178 8.23404L13.928 5.31973L8.88026 2.40454Z" fill="#56606D"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 880 B

After

Width:  |  Height:  |  Size: 880 B

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

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00005 0.800049C10.3223 0.800049 12.3877 1.89942 13.7043 3.60609C13.444 3.4991 13.1589 3.44005 12.86 3.44005C12.4812 3.44005 12.1246 3.53493 11.8126 3.70222C11.8508 3.67571 11.89 3.65043 11.9301 3.62641C10.8887 2.68989 9.51092 2.12005 8.00005 2.12005C6.69775 2.12005 5.49433 2.54342 4.51992 3.26004L5.90005 3.26005C7.25867 3.26005 8.36005 4.36143 8.36005 5.72005C8.36005 7.06481 7.28103 8.15754 5.94156 8.17971L5.90005 8.18005H4.82005C4.48868 8.18005 4.22005 8.44868 4.22005 8.78005C4.22005 9.1027 4.47473 9.36587 4.79402 9.37949L4.82005 9.38005H5.03005C6.1932 9.38005 7.13859 10.3124 7.15969 11.4705L7.16005 11.54C7.16005 12.407 6.64933 13.1546 5.91236 13.4985C6.56109 13.7451 7.26481 13.88 8.00005 13.88C8.68174 13.88 9.33634 13.764 9.94518 13.5507C9.08192 13.1688 8.47961 12.3048 8.47961 11.3C8.47961 9.95529 9.55863 8.86255 10.8981 8.84039L10.9396 8.84005H13.2196C13.551 8.84005 13.8196 8.57142 13.8196 8.24005C13.8196 8.04402 13.7256 7.86995 13.5802 7.76046C14.2606 7.52741 14.7918 6.97293 14.9928 6.27823C15.1282 6.8299 15.2 7.40659 15.2 8.00005C15.2 11.9765 11.9765 15.2 8.00005 15.2C4.0236 15.2 0.800049 11.9765 0.800049 8.00005C0.800049 4.0236 4.0236 0.800049 8.00005 0.800049ZM13.4774 10.1429L13.4458 10.1469C13.3838 10.1541 13.321 10.1585 13.2574 10.1597L13.2196 10.16H10.9396C10.31 10.16 9.79961 10.6704 9.79961 11.3C9.79961 11.9188 10.2926 12.4224 10.9072 12.4396L10.9396 12.44L11.8551 12.4401C12.5665 11.8219 13.1279 11.0355 13.4774 10.1429ZM5.90005 4.58005L3.21639 4.58005C2.52626 5.54364 2.12005 6.72441 2.12005 8.00005C2.12005 9.74009 2.87587 11.3036 4.07712 12.3802L5.00005 12.38C5.4543 12.38 5.82434 12.0195 5.83956 11.5689L5.84005 11.54V11.51C5.84005 11.0722 5.49267 10.7155 5.05849 10.7005L5.03005 10.7H4.82005C3.75966 10.7 2.90005 9.84044 2.90005 8.78005C2.90005 7.73229 3.73932 6.88054 4.78226 6.86041L4.82005 6.86005H5.90005C6.52965 6.86005 7.04005 6.34965 7.04005 5.72005C7.04005 5.1013 6.5471 4.59768 5.93251 4.5805L5.90005 4.58005ZM12.8187 4.34081C13.5477 4.34081 14.1387 4.93179 14.1387 5.66081C14.1387 6.38983 13.5477 6.98081 12.8187 6.98081C12.0897 6.98081 11.4987 6.38983 11.4987 5.66081C11.4987 4.93179 12.0897 4.34081 12.8187 4.34081Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB