diff --git a/web/satellite/src/components/navigation/newNavigationStructure/GuidesDropdown.vue b/web/satellite/src/components/navigation/newNavigationStructure/GuidesDropdown.vue new file mode 100644 index 000000000..5245f6e87 --- /dev/null +++ b/web/satellite/src/components/navigation/newNavigationStructure/GuidesDropdown.vue @@ -0,0 +1,58 @@ +// Copyright (C) 2021 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue b/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue index 2d72d7fbe..b5fa0ebf5 100644 --- a/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue +++ b/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue @@ -3,22 +3,132 @@ @@ -26,35 +136,73 @@ import { Component, Vue } from 'vue-property-decorator'; import NewProjectSelection from '@/components/navigation/newNavigationStructure/NewProjectSelection.vue'; - -import LogoIcon from '@/../static/images/logo.svg'; -import AccessGrantsIcon from '@/../static/images/navigation/apiKeys.svg'; -import DashboardIcon from '@/../static/images/navigation/dashboard.svg'; -import ObjectsIcon from '@/../static/images/navigation/objects.svg'; -import TeamIcon from '@/../static/images/navigation/team.svg'; +import GuidesDropdown from '@/components/navigation/newNavigationStructure/GuidesDropdown.vue'; import { RouteConfig } from '@/router'; import { NavigationLink } from '@/types/navigation'; +import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames"; + +import LogoIcon from '@/../static/images/logo.svg'; +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 ResourcesIcon from '@/../static/images/navigation/resources.svg'; +import QuickStartIcon from '@/../static/images/navigation/quickStart.svg'; +import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg'; +import DocsIcon from '@/../static/images/navigation/docs.svg'; +import ForumIcon from '@/../static/images/navigation/forum.svg'; +import SupportIcon from '@/../static/images/navigation/support.svg'; +import NewProjectIcon from '@/../static/images/navigation/newProject.svg'; +import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg'; +import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg'; +import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg'; // @vue/component @Component({ components: { NewProjectSelection, + GuidesDropdown, LogoIcon, DashboardIcon, AccessGrantsIcon, - TeamIcon, - ObjectsIcon, + UsersIcon, + BucketsIcon, + ResourcesIcon, + QuickStartIcon, + ArrowIcon, + DocsIcon, + ForumIcon, + SupportIcon, + NewProjectIcon, + CreateAGIcon, + UploadInCLIIcon, + UploadInWebIcon, }, }) 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; + public quickStartDropdownYPos = 0; + public quickStartDropdownXPos = 0; public navigation: NavigationLink[] = [ RouteConfig.ProjectDashboard.withIcon(DashboardIcon), - RouteConfig.Objects.withIcon(ObjectsIcon), + RouteConfig.Objects.withIcon(BucketsIcon), RouteConfig.AccessGrants.withIcon(AccessGrantsIcon), - RouteConfig.Users.withIcon(TeamIcon), + RouteConfig.Users.withIcon(UsersIcon), ]; + public $refs!: { + resourcesContainer: HTMLDivElement; + quickStartContainer: HTMLDivElement; + }; + /** * Reloads page. */ @@ -62,6 +210,79 @@ export default class NewNavigationArea extends Vue { location.reload(); } + /** + * Sets resources dropdown Y position depending on container's current position. + * It is used to handle small screens. + */ + public setResourcesDropdownYPos(): void { + const container = this.$refs.resourcesContainer.getBoundingClientRect(); + this.resourcesDropdownYPos = container.top + container.height / 2; + } + + /** + * Sets resources dropdown X position depending on container's current position. + * It is used to handle small screens. + */ + public setResourcesDropdownXPos(): void { + this.resourcesDropdownXPos = this.$refs.resourcesContainer.getBoundingClientRect().width - this.TWENTY_PIXELS; + } + + /** + * Sets quick start dropdown Y position depending on container's current position. + * It is used to handle small screens. + */ + public setQuickStartDropdownYPos(): void { + const container = this.$refs.quickStartContainer.getBoundingClientRect(); + this.quickStartDropdownYPos = container.top + container.height / 2; + } + + /** + * Sets quick start dropdown X position depending on container's current position. + * It is used to handle small screens. + */ + public setQuickStartDropdownXPos(): void { + this.quickStartDropdownXPos = this.$refs.quickStartContainer.getBoundingClientRect().width - this.TWENTY_PIXELS; + } + + /** + * Toggles resources dropdown visibility. + */ + public toggleResourcesDropdown(): void { + this.setResourcesDropdownYPos() + this.setResourcesDropdownXPos() + this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN); + } + + /** + * Toggles quick start dropdown visibility. + */ + public toggleQuickStartDropdown(): void { + this.setQuickStartDropdownYPos() + this.setQuickStartDropdownXPos() + this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_QUICK_START_DROPDOWN); + } + + /** + * Closes dropdowns. + */ + public closeDropdowns(): void { + this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS); + } + + /** + * Indicates if resources dropdown shown. + */ + public get isResourcesDropdownShown(): boolean { + return this.$store.state.appStateModule.appState.isResourcesDropdownShown; + } + + /** + * Indicates if quick start dropdown shown. + */ + public get isQuickStartDropdownShown(): boolean { + return this.$store.state.appStateModule.appState.isQuickStartDropdownShown; + } + /** * Indicates if navigation side bar is hidden. */ @@ -92,68 +313,124 @@ export default class NewNavigationArea extends Vue { } .navigation-area { - padding: 40px 0 32px 0; min-width: 280px; max-width: 280px; background-color: #fff; - display: flex; - flex-direction: column; - align-items: center; font-family: 'font_regular', sans-serif; - overflow-y: auto; - &__logo { - cursor: pointer; - } - - &__edit { - padding: 0 20px; - margin: 32px 0; - width: calc(100% - 40px); - } - - &__item-container { - padding: 10px; - width: calc(100% - 20px); + &__wrap { display: flex; - justify-content: flex-start; + flex-direction: column; align-items: center; - margin-bottom: 40px; - text-decoration: none; + overflow-x: hidden; + overflow-y: auto; + width: 100%; + max-height: calc(100% - 72px); + padding: 40px 0 32px 0; - &__link { + &__logo { + cursor: pointer; + min-height: 37px; + } + + &__edit { + padding: 0 20px; + margin: 32px 0; + width: calc(100% - 40px); + } + + &__item-container { + padding: 22px 32px; + width: 100%; display: flex; - justify-content: flex-start; align-items: center; + justify-content: space-between; + border-left: 4px solid #fff; + color: #56606d; + font-weight: 500; + position: static; + cursor: pointer; + box-sizing: border-box; - &__icon { - min-width: 24px; - } + &__left { + display: flex; + align-items: center; - &__title { - font-family: 'font_medium', sans-serif; - font-size: 16px; - line-height: 23px; - color: #1b2533; - margin: 0 0 0 18px; - white-space: nowrap; + &__label { + font-size: 14px; + line-height: 20px; + margin-left: 24px; + } } } - &.router-link-active, - &:hover { - font-family: 'font_bold', sans-serif; - background: #0068dc; - border-radius: 6px; - - .navigation-area__item-container__link__title { - color: #fff; - } - - .svg .navigation-svg-path:not(.white) { - fill: #fff; - } + &__border { + margin: 8px 24px; + height: 1px; + width: calc(100% - 48px); + background: #ebeef1; } } } + + .active { + font-weight: 600; + border-color: #0149ff; + background-color: #f7f8fb; + color: #0149ff; + + .navigation-area__wrap__item-container__left__image path { + fill: #0149ff; + } + } + + .navigation-area__wrap__item-container .router-link-active, + .navigation-area__wrap__item-container:hover { + font-weight: 600; + border-color: #0149ff; + background-color: #f7f8fb; + color: #0149ff; + + .navigation-area__wrap__item-container__left__image path { + fill: #0149ff; + } + } + + .dropdown-item { + display: flex; + align-items: center; + font-family: 'font_regular', sans-serif; + padding: 10px 24px; + + &__icon { + margin-left: 15px; + max-width: 37px; + min-width: 37px; + } + + &__text { + margin-left: 24px; + + &__title { + font-family: 'font_bold', sans-serif; + font-size: 14px; + line-height: 22px; + color: #091c45; + } + + &__label { + font-size: 12px; + line-height: 21px; + color: #091c45; + } + } + } + + .dropdown-border { + height: 1px; + width: calc(100% - 48px); + margin: 0 24px; + background-color: #091c45; + opacity: 0.1; + } diff --git a/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue b/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue index 6062ce7a2..8db0b2bdb 100644 --- a/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue +++ b/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue @@ -175,8 +175,6 @@ export default class NewProjectSelection extends Vue { * Closes select project dropdown. */ public closeDropdown(): void { - if (!this.isDropdownShown) return; - this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS); } diff --git a/web/satellite/src/main.ts b/web/satellite/src/main.ts index 6ac75c017..9d9410c03 100644 --- a/web/satellite/src/main.ts +++ b/web/satellite/src/main.ts @@ -32,7 +32,7 @@ let clickOutsideEvent: EventListener; Vue.directive('click-outside', { bind: function (el: HTMLElement, binding: DirectiveBinding, vnode: VNode) { clickOutsideEvent = function(event: Event): void { - if (el === event.target || el.contains((event.target as Node))) { + if (el === event.target || el.contains(event.target as Node)) { return; } diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts index db9b133a9..8d94b130b 100644 --- a/web/satellite/src/store/modules/appState.ts +++ b/web/satellite/src/store/modules/appState.ts @@ -15,6 +15,7 @@ class ViewsState { public isAccountDropdownShown = false, public isSelectProjectDropdownShown = false, public isResourcesDropdownShown = false, + public isQuickStartDropdownShown = false, public isSettingsDropdownShown = false, public isEditProjectDropdownShown = false, public isFreeCreditsDropdownShown = false, @@ -69,6 +70,10 @@ export const appStateModule = { [APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN](state: State): void { state.appState.isResourcesDropdownShown = !state.appState.isResourcesDropdownShown; }, + // Mutation changing resources dropdown visibility + [APP_STATE_MUTATIONS.TOGGLE_QUICK_START_DROPDOWN](state: State): void { + state.appState.isQuickStartDropdownShown = !state.appState.isQuickStartDropdownShown; + }, // Mutation changing settings dropdown visibility [APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN](state: State): void { state.appState.isSettingsDropdownShown = !state.appState.isSettingsDropdownShown; @@ -117,6 +122,7 @@ export const appStateModule = { state.appState.isAccountDropdownShown = false; state.appState.isSelectProjectDropdownShown = false; state.appState.isResourcesDropdownShown = false; + state.appState.isQuickStartDropdownShown = false; state.appState.isSettingsDropdownShown = false; state.appState.isEditProjectDropdownShown = false; state.appState.isFreeCreditsDropdownShown = false; @@ -183,6 +189,13 @@ export const appStateModule = { commit(APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN); }, + [APP_STATE_ACTIONS.TOGGLE_QUICK_START_DROPDOWN]: function ({commit, state}: AppContext): void { + if (!state.appState.isQuickStartDropdownShown) { + commit(APP_STATE_MUTATIONS.CLOSE_ALL); + } + + commit(APP_STATE_MUTATIONS.TOGGLE_QUICK_START_DROPDOWN); + }, [APP_STATE_ACTIONS.TOGGLE_SETTINGS_DROPDOWN]: function ({commit, state}: AppContext): void { if (!state.appState.isSettingsDropdownShown) { commit(APP_STATE_MUTATIONS.CLOSE_ALL); diff --git a/web/satellite/src/store/mutationConstants.ts b/web/satellite/src/store/mutationConstants.ts index 4bd889581..3cac26f30 100644 --- a/web/satellite/src/store/mutationConstants.ts +++ b/web/satellite/src/store/mutationConstants.ts @@ -14,6 +14,7 @@ export const APP_STATE_MUTATIONS = { TOGGLE_ACCOUNT_DROPDOWN: 'TOGGLE_ACCOUNT_DROPDOWN', TOGGLE_SELECT_PROJECT_DROPDOWN: 'TOGGLE_SELECT_PROJECT_DROPDOWN', TOGGLE_RESOURCES_DROPDOWN: 'TOGGLE_RESOURCES_DROPDOWN', + TOGGLE_QUICK_START_DROPDOWN: 'TOGGLE_QUICK_START_DROPDOWN', TOGGLE_SETTINGS_DROPDOWN: 'TOGGLE_SETTINGS_DROPDOWN', TOGGLE_EDIT_PROJECT_DROPDOWN: 'TOGGLE_EDIT_PROJECT_DROPDOWN', TOGGLE_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN', diff --git a/web/satellite/src/utils/constants/actionNames.ts b/web/satellite/src/utils/constants/actionNames.ts index 677efecc6..144c23d9a 100644 --- a/web/satellite/src/utils/constants/actionNames.ts +++ b/web/satellite/src/utils/constants/actionNames.ts @@ -6,6 +6,7 @@ export const APP_STATE_ACTIONS = { TOGGLE_ACCOUNT: 'toggleAccountDropdown', TOGGLE_SELECT_PROJECT_DROPDOWN: 'toggleSelectProjectDropdown', TOGGLE_RESOURCES_DROPDOWN: 'toggleResourcesDropdown', + TOGGLE_QUICK_START_DROPDOWN: 'toggleQuickStartDropdown', TOGGLE_SETTINGS_DROPDOWN: 'toggleSettingsDropdown', TOGGLE_EDIT_PROJECT_DROPDOWN: 'toggleEditProjectDropdown', TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown', diff --git a/web/satellite/static/images/navigation/arrowExpandRight.svg b/web/satellite/static/images/navigation/arrowExpandRight.svg new file mode 100644 index 000000000..bf768de7f --- /dev/null +++ b/web/satellite/static/images/navigation/arrowExpandRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/satellite/static/images/navigation/createAccessGrant.svg b/web/satellite/static/images/navigation/createAccessGrant.svg new file mode 100644 index 000000000..43efbb6db --- /dev/null +++ b/web/satellite/static/images/navigation/createAccessGrant.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/satellite/static/images/navigation/docs.svg b/web/satellite/static/images/navigation/docs.svg new file mode 100644 index 000000000..a143c9778 --- /dev/null +++ b/web/satellite/static/images/navigation/docs.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/satellite/static/images/navigation/forum.svg b/web/satellite/static/images/navigation/forum.svg new file mode 100644 index 000000000..ea71fbb4b --- /dev/null +++ b/web/satellite/static/images/navigation/forum.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/satellite/static/images/navigation/newProject.svg b/web/satellite/static/images/navigation/newProject.svg new file mode 100644 index 000000000..eb1565468 --- /dev/null +++ b/web/satellite/static/images/navigation/newProject.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/satellite/static/images/navigation/support.svg b/web/satellite/static/images/navigation/support.svg new file mode 100644 index 000000000..5395a8ebf --- /dev/null +++ b/web/satellite/static/images/navigation/support.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/satellite/static/images/navigation/uploadInCLI.svg b/web/satellite/static/images/navigation/uploadInCLI.svg new file mode 100644 index 000000000..dad6f0968 --- /dev/null +++ b/web/satellite/static/images/navigation/uploadInCLI.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/web/satellite/static/images/navigation/uploadInWeb.svg b/web/satellite/static/images/navigation/uploadInWeb.svg new file mode 100644 index 000000000..1ff2ee4d2 --- /dev/null +++ b/web/satellite/static/images/navigation/uploadInWeb.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +