Create a new project.
-
@@ -156,6 +151,7 @@ import { NavigationLink } from '@/types/navigation';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
+import { User } from "@/types/users";
import LogoIcon from '@/../static/images/logo.svg';
import SmallLogoIcon from '@/../static/images/smallLogo.svg';
@@ -222,13 +218,15 @@ export default class NavigationArea extends Vue {
navigationContainer: HTMLDivElement;
};
+ private windowWidth = window.innerWidth;
+
/**
* Mounted hook after initial render.
* Adds scroll event listener to close dropdowns.
*/
public mounted(): void {
this.$refs.navigationContainer.addEventListener('scroll', this.closeDropdowns)
- window.addEventListener('resize', this.closeDropdowns)
+ window.addEventListener('resize', this.onResize)
}
/**
@@ -237,7 +235,15 @@ export default class NavigationArea extends Vue {
*/
public beforeDestroy(): void {
this.$refs.navigationContainer.removeEventListener('scroll', this.closeDropdowns)
- window.removeEventListener('resize', this.closeDropdowns)
+ window.removeEventListener('resize', this.onResize)
+ }
+
+ /**
+ * On screen resize handler.
+ */
+ public onResize(): void {
+ this.windowWidth = window.innerWidth;
+ this.closeDropdowns();
}
/**
@@ -275,17 +281,30 @@ export default class NavigationArea extends Vue {
* Redirects to create access grant screen.
*/
public navigateToNewProject(): void {
- this.analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
+ if (this.$route.name !== RouteConfig.CreateProject.name) {
+ this.analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
+
+ const user: User = this.$store.getters.user;
+ const ownProjectsCount: number = this.$store.getters.projectsCount;
+
+ if (!user.paidTier && user.projectLimit === ownProjectsCount) {
+ this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
+ } else {
+ this.analytics.pageVisit(RouteConfig.CreateProject.path);
+ this.$router.push(RouteConfig.CreateProject.path);
+ }
+ }
+
this.closeDropdowns();
- this.analytics.pageVisit(RouteConfig.CreateProject.path);
- this.$router.push(RouteConfig.CreateProject.path);
}
/**
- * Reloads page.
+ * Redirects to project dashboard.
*/
public onLogoClick(): void {
- location.reload();
+ if (this.$route.name !== RouteConfig.ProjectDashboard.name) {
+ this.$router.push(RouteConfig.ProjectDashboard.path);
+ }
}
/**
@@ -361,6 +380,13 @@ export default class NavigationArea extends Vue {
return this.$store.state.appStateModule.appState.isQuickStartDropdownShown;
}
+ /**
+ * Indicates if window is less or equal of 1280px.
+ */
+ public get isSmallWindow(): boolean {
+ return this.windowWidth <= 1280;
+ }
+
/**
* Sends "View Docs" event to segment and opens link.
*/
@@ -452,7 +478,6 @@ export default class NavigationArea extends Vue {
justify-content: space-between;
border-left: 4px solid #fff;
color: #56606d;
- font-weight: 500;
position: static;
cursor: pointer;
box-sizing: border-box;
@@ -467,6 +492,16 @@ export default class NavigationArea extends Vue {
margin-left: 24px;
}
}
+
+ &:hover {
+ border-color: #fafafb;
+ background-color: #fafafb;
+ color: #0149ff;
+
+ ::v-deep path {
+ fill: #0149ff;
+ }
+ }
}
&__border {
@@ -479,48 +514,42 @@ export default class NavigationArea extends Vue {
}
}
+ .router-link-active,
.active {
- font-weight: 600;
- border-color: #0149ff;
- background-color: #f7f8fb;
- color: #0149ff;
+ border-color: #000;
+ color: #091c45;
+ font-family: 'font_bold', sans-serif;
- .navigation-area__container__wrap__item-container {
+ ::v-deep path {
+ fill: #000;
+ }
- &__left__image ::v-deep path,
- &__arrow ::v-deep path {
+ &:hover {
+ color: #0149ff;
+ border-color: #0149ff;
+
+ ::v-deep path {
fill: #0149ff;
}
}
}
- .router-link-active,
- .navigation-area__container__wrap__item-container:hover {
- font-weight: 600;
- border-color: #0149ff;
- background-color: #f7f8fb;
- color: #0149ff;
-
- .navigation-area__container__wrap__item-container__left__image ::v-deep path {
- fill: #0149ff;
- }
- }
-
.dropdown-item {
display: flex;
align-items: center;
font-family: 'font_regular', sans-serif;
- padding: 10px 24px;
+ padding: 10px 16px;
cursor: pointer;
+ border-top: 1px solid #ebeef1;
+ border-bottom: 1px solid #ebeef1;
&__icon {
- margin-left: 15px;
- max-width: 37px;
- min-width: 37px;
+ max-width: 40px;
+ min-width: 40px;
}
&__text {
- margin-left: 24px;
+ margin-left: 10px;
&__title {
font-family: 'font_bold', sans-serif;
@@ -535,14 +564,23 @@ export default class NavigationArea extends Vue {
color: #091c45;
}
}
- }
- .dropdown-border {
- height: 1px;
- width: calc(100% - 48px);
- margin: 0 24px;
- background-color: #091c45;
- opacity: 0.1;
+ &:first-of-type {
+ border-radius: 8px 8px 0 0;
+ }
+
+ &:last-of-type {
+ border-radius: 0 0 8px 8px;
+ }
+
+ &:hover {
+ background-color: #fafafb;
+
+ h2,
+ p {
+ color: #0149ff;
+ }
+ }
}
@media screen and (max-width: 1280px) {
@@ -553,14 +591,30 @@ export default class NavigationArea extends Vue {
&__container__wrap {
+ &__border {
+ margin: 8px 16px;
+ width: calc(100% - 32px);
+ }
+
&__logo {
display: none;
}
&__item-container {
justify-content: center;
+ align-items: center;
+ padding: 10px 27px 10px 23px;
+
+ &__left {
+ flex-direction: column;
+
+ &__label {
+ font-family: 'font_medium', sans-serif;
+ font-size: 9px;
+ margin: 10px 0 0;
+ }
+ }
- &__left__label,
&__arrow {
display: none;
}
@@ -573,5 +627,10 @@ export default class NavigationArea extends Vue {
}
}
}
+
+ .router-link-active,
+ .active {
+ font-family: 'font_medium', sans-serif;
+ }
}
diff --git a/web/satellite/src/components/navigation/ProjectSelection.vue b/web/satellite/src/components/navigation/ProjectSelection.vue
index d4afed8bf..aa12ad0af 100644
--- a/web/satellite/src/components/navigation/ProjectSelection.vue
+++ b/web/satellite/src/components/navigation/ProjectSelection.vue
@@ -12,6 +12,7 @@
{{ projectName }}
+
Projects
@@ -278,7 +279,6 @@ export default class ProjectSelection extends Vue {
&__name {
max-width: calc(100% - 24px - 16px);
- font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #56606d;
@@ -287,6 +287,23 @@ export default class ProjectSelection extends Vue {
overflow: hidden;
text-overflow: ellipsis;
}
+
+ &__placeholder {
+ display: none;
+ }
+ }
+
+ &:hover {
+ background-color: #fafafb;
+ border-color: #fafafb;
+
+ p {
+ color: #0149ff;
+ }
+
+ ::v-deep path {
+ fill: #0149ff;
+ }
}
}
@@ -295,6 +312,7 @@ export default class ProjectSelection extends Vue {
min-width: 240px;
max-width: 240px;
background-color: #fff;
+ border: 1px solid #ebeef1;
box-shadow: 0 2px 16px rgb(0 0 0 / 10%);
border-radius: 8px;
z-index: 1;
@@ -304,6 +322,7 @@ export default class ProjectSelection extends Vue {
display: flex;
align-items: center;
justify-content: center;
+ border-radius: 8px 8px 0 0;
}
&__items {
@@ -318,6 +337,7 @@ export default class ProjectSelection extends Vue {
padding: 8px 16px;
cursor: pointer;
height: 32px;
+ border-radius: 8px 8px 0 0;
&__selected,
&__unselected {
@@ -330,7 +350,7 @@ export default class ProjectSelection extends Vue {
}
&__selected {
- font-family: 'font_medium', sans-serif;
+ font-family: 'font_bold', sans-serif;
margin-left: 24px;
}
@@ -340,6 +360,10 @@ export default class ProjectSelection extends Vue {
&:hover {
background-color: #f5f6fa;
+
+ p {
+ color: #0149ff;
+ }
}
&__mark-container {
@@ -364,23 +388,51 @@ export default class ProjectSelection extends Vue {
&__label {
font-size: 14px;
line-height: 20px;
- color: #0149ff;
+ color: #56606d;
margin-left: 24px;
}
+
+ &:last-of-type {
+ border-radius: 0 0 8px 8px;
+ }
+
+ &:hover {
+ background-color: #f5f6fa;
+
+ p {
+ color: #0149ff;
+ }
+
+ ::v-deep path {
+ fill: #0149ff;
+ }
+ }
}
}
}
.active {
+ border-color: #000;
+
+ p {
+ color: #091c45;
+ font-family: 'font_bold', sans-serif;
+ }
+
+ ::v-deep path {
+ fill: #000;
+ }
+ }
+
+ .active:hover {
border-color: #0149ff;
background-color: #f7f8fb;
p {
color: #0149ff;
- font-weight: 600;
}
- svg ::v-deep path {
+ ::v-deep path {
fill: #0149ff;
}
}
@@ -388,18 +440,33 @@ export default class ProjectSelection extends Vue {
@media screen and (max-width: 1280px) {
.project-selection__selected {
+ padding: 10px 0;
+ justify-content: center;
&__left {
min-width: 18px;
+ flex-direction: column;
+ align-items: center;
&__name {
display: none;
}
+
+ &__placeholder {
+ display: block;
+ margin: 10px 0 0;
+ font-family: 'font_medium', sans-serif;
+ font-size: 9px;
+ }
}
&__arrow {
display: none;
}
}
+
+ .active p {
+ font-family: 'font_medium', sans-serif;
+ }
}
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 76f18b97e..824461293 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -83,8 +83,8 @@ export abstract class RouteConfig {
public static ResetPassword = new NavigationLink('/password-recovery', 'Reset Password');
public static Authorize = new NavigationLink('/oauth/v2/authorize', 'Authorize')
public static Account = new NavigationLink('/account', 'Account');
- public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');
- public static NewProjectDashboard = new NavigationLink('/new-project-dashboard', 'Dashboard ');
+ public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Project Overview');
+ public static NewProjectDashboard = new NavigationLink('/new-project-dashboard', 'Project Overview ');
public static Users = new NavigationLink('/project-members', 'Users');
public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
public static CreateProject = new NavigationLink('/create-project', 'Create Project');
diff --git a/web/satellite/static/images/navigation/accessGrants.svg b/web/satellite/static/images/navigation/accessGrants.svg
index cc66967c7..63b88cf81 100644
--- a/web/satellite/static/images/navigation/accessGrants.svg
+++ b/web/satellite/static/images/navigation/accessGrants.svg
@@ -1,3 +1,3 @@
diff --git a/web/satellite/static/images/navigation/account.svg b/web/satellite/static/images/navigation/account.svg
index 2d2d2f24d..6f05fbde1 100644
--- a/web/satellite/static/images/navigation/account.svg
+++ b/web/satellite/static/images/navigation/account.svg
@@ -1,3 +1,3 @@
diff --git a/web/satellite/static/images/navigation/billing.svg b/web/satellite/static/images/navigation/billing.svg
index 9d268d2db..edb589fde 100644
--- a/web/satellite/static/images/navigation/billing.svg
+++ b/web/satellite/static/images/navigation/billing.svg
@@ -1,3 +1,3 @@
diff --git a/web/satellite/static/images/navigation/buckets.svg b/web/satellite/static/images/navigation/buckets.svg
index 2cf78ea33..2fb409ec9 100644
--- a/web/satellite/static/images/navigation/buckets.svg
+++ b/web/satellite/static/images/navigation/buckets.svg
@@ -1,3 +1,3 @@
diff --git a/web/satellite/static/images/navigation/createAccessGrant.svg b/web/satellite/static/images/navigation/createAccessGrant.svg
index 43efbb6db..1ad8c1003 100644
--- a/web/satellite/static/images/navigation/createAccessGrant.svg
+++ b/web/satellite/static/images/navigation/createAccessGrant.svg
@@ -1,6 +1,7 @@
-