web/satellite: tab adaptation for new navigation sidebar
Tab (768px) adaptation for new navigation sidebar. Change-Id: I53b6b7b8bb25df8975d7ab4b5145c72170bb2e1f
This commit is contained in:
parent
eb68dbad41
commit
c7e2570123
@ -2,7 +2,7 @@
|
|||||||
// See LICENSE for copying information.
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="account-area" :class="{ active: isDropdown }" aria-roledescription="account-area" @click.stop="toggleDropdown">
|
<div ref="accountArea" class="account-area" :class="{ active: isDropdown }" aria-roledescription="account-area" @click.stop="toggleDropdown">
|
||||||
<div class="account-area__avatar">
|
<div class="account-area__avatar">
|
||||||
<h1 class="account-area__avatar__letter">{{ avatarLetter }}</h1>
|
<h1 class="account-area__avatar__letter">{{ avatarLetter }}</h1>
|
||||||
</div>
|
</div>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
<p v-if="user.paidTier" class="account-area__info__type">Pro account</p>
|
<p v-if="user.paidTier" class="account-area__info__type">Pro account</p>
|
||||||
<p v-else class="account-area__info__type">Free account</p>
|
<p v-else class="account-area__info__type">Free account</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isDropdown" v-click-outside="closeDropdown" class="account-area__dropdown">
|
<div v-if="isDropdown" v-click-outside="closeDropdown" class="account-area__dropdown" :style="style">
|
||||||
<div class="account-area__dropdown__header">
|
<div class="account-area__dropdown__header">
|
||||||
<p class="account-area__dropdown__header__greet">👋🏼 Hi, {{ user.fullName }}</p>
|
<p class="account-area__dropdown__header__greet">👋🏼 Hi, {{ user.fullName }}</p>
|
||||||
<p class="account-area__dropdown__header__sat">{{ satellite }}</p>
|
<p class="account-area__dropdown__header__sat">{{ satellite }}</p>
|
||||||
@ -67,6 +67,13 @@ import LogoutIcon from '@/../static/images/navigation/logout.svg';
|
|||||||
})
|
})
|
||||||
export default class AccountArea extends Vue {
|
export default class AccountArea extends Vue {
|
||||||
private readonly auth: AuthHttpApi = new AuthHttpApi();
|
private readonly auth: AuthHttpApi = new AuthHttpApi();
|
||||||
|
private dropdownYPos = 0;
|
||||||
|
private dropdownXPos = 0;
|
||||||
|
private dropdownWidth = 0;
|
||||||
|
|
||||||
|
public $refs!: {
|
||||||
|
accountArea: HTMLDivElement,
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Navigates user to account settings page.
|
* Navigates user to account settings page.
|
||||||
@ -120,6 +127,13 @@ export default class AccountArea extends Vue {
|
|||||||
* Toggles account dropdown visibility.
|
* Toggles account dropdown visibility.
|
||||||
*/
|
*/
|
||||||
public toggleDropdown(): void {
|
public toggleDropdown(): void {
|
||||||
|
const DROPDOWN_HEIGHT = 262;
|
||||||
|
const accountContainer = this.$refs.accountArea.getBoundingClientRect();
|
||||||
|
|
||||||
|
this.dropdownYPos = accountContainer.top - DROPDOWN_HEIGHT;
|
||||||
|
this.dropdownXPos = accountContainer.left;
|
||||||
|
this.dropdownWidth = accountContainer.width;
|
||||||
|
|
||||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
|
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -130,6 +144,13 @@ export default class AccountArea extends Vue {
|
|||||||
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
|
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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` };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Indicates if account dropdown is visible.
|
* Indicates if account dropdown is visible.
|
||||||
*/
|
*/
|
||||||
@ -169,8 +190,7 @@ export default class AccountArea extends Vue {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: static;
|
||||||
flex-shrink: unset;
|
|
||||||
|
|
||||||
&__avatar {
|
&__avatar {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
@ -181,7 +201,6 @@ export default class AccountArea extends Vue {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #2582ff;
|
background: #2582ff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 16px;
|
|
||||||
|
|
||||||
&__letter {
|
&__letter {
|
||||||
font-family: 'font_medium', sans-serif;
|
font-family: 'font_medium', sans-serif;
|
||||||
@ -192,6 +211,7 @@ export default class AccountArea extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
&__email {
|
&__email {
|
||||||
font-family: 'font_bold', sans-serif;
|
font-family: 'font_bold', sans-serif;
|
||||||
@ -212,10 +232,8 @@ export default class AccountArea extends Vue {
|
|||||||
|
|
||||||
&__dropdown {
|
&__dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
|
||||||
bottom: 100%;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 240px;
|
min-width: 230px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 1px solid #ebeef1;
|
border: 1px solid #ebeef1;
|
||||||
@ -268,4 +286,11 @@ export default class AccountArea extends Vue {
|
|||||||
.active {
|
.active {
|
||||||
background-color: #f7f8fb;
|
background-color: #f7f8fb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
.account-area__info {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<div class="navigation-area__container">
|
<div class="navigation-area__container">
|
||||||
<div class="navigation-area__container__wrap">
|
<div class="navigation-area__container__wrap">
|
||||||
<LogoIcon class="navigation-area__container__wrap__logo" @click.stop="onLogoClick" />
|
<LogoIcon class="navigation-area__container__wrap__logo" @click.stop="onLogoClick" />
|
||||||
|
<SmallLogoIcon class="navigation-area__container__wrap__small-logo" @click.stop="onLogoClick" />
|
||||||
<div class="navigation-area__container__wrap__edit">
|
<div class="navigation-area__container__wrap__edit">
|
||||||
<NewProjectSelection />
|
<NewProjectSelection />
|
||||||
</div>
|
</div>
|
||||||
@ -32,7 +33,7 @@
|
|||||||
<ResourcesIcon class="navigation-area__container__wrap__item-container__left__image" />
|
<ResourcesIcon class="navigation-area__container__wrap__item-container__left__image" />
|
||||||
<p class="navigation-area__container__wrap__item-container__left__label">Resources</p>
|
<p class="navigation-area__container__wrap__item-container__left__label">Resources</p>
|
||||||
</div>
|
</div>
|
||||||
<ArrowIcon />
|
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
|
||||||
<GuidesDropdown
|
<GuidesDropdown
|
||||||
v-if="isResourcesDropdownShown"
|
v-if="isResourcesDropdownShown"
|
||||||
:close="closeDropdowns"
|
:close="closeDropdowns"
|
||||||
@ -89,7 +90,7 @@
|
|||||||
<QuickStartIcon class="navigation-area__container__wrap__item-container__left__image" />
|
<QuickStartIcon class="navigation-area__container__wrap__item-container__left__image" />
|
||||||
<p class="navigation-area__container__wrap__item-container__left__label">Quick Start</p>
|
<p class="navigation-area__container__wrap__item-container__left__label">Quick Start</p>
|
||||||
</div>
|
</div>
|
||||||
<ArrowIcon />
|
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
|
||||||
<GuidesDropdown
|
<GuidesDropdown
|
||||||
v-if="isQuickStartDropdownShown"
|
v-if="isQuickStartDropdownShown"
|
||||||
:close="closeDropdowns"
|
:close="closeDropdowns"
|
||||||
@ -147,6 +148,7 @@ import { NavigationLink } from '@/types/navigation';
|
|||||||
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
|
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
|
||||||
|
|
||||||
import LogoIcon from '@/../static/images/logo.svg';
|
import LogoIcon from '@/../static/images/logo.svg';
|
||||||
|
import SmallLogoIcon from '@/../static/images/smallLogo.svg';
|
||||||
import AccessGrantsIcon from '@/../static/images/navigation/accessGrants.svg';
|
import AccessGrantsIcon from '@/../static/images/navigation/accessGrants.svg';
|
||||||
import DashboardIcon from '@/../static/images/navigation/projectDashboard.svg';
|
import DashboardIcon from '@/../static/images/navigation/projectDashboard.svg';
|
||||||
import BucketsIcon from '@/../static/images/navigation/buckets.svg';
|
import BucketsIcon from '@/../static/images/navigation/buckets.svg';
|
||||||
@ -169,6 +171,7 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
|
|||||||
GuidesDropdown,
|
GuidesDropdown,
|
||||||
AccountArea,
|
AccountArea,
|
||||||
LogoIcon,
|
LogoIcon,
|
||||||
|
SmallLogoIcon,
|
||||||
DashboardIcon,
|
DashboardIcon,
|
||||||
AccessGrantsIcon,
|
AccessGrantsIcon,
|
||||||
UsersIcon,
|
UsersIcon,
|
||||||
@ -345,6 +348,10 @@ export default class NewNavigationArea extends Vue {
|
|||||||
min-height: 37px;
|
min-height: 37px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__small-logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&__edit {
|
&__edit {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
margin: 32px 0;
|
margin: 32px 0;
|
||||||
@ -446,4 +453,34 @@ export default class NewNavigationArea extends Vue {
|
|||||||
background-color: #091c45;
|
background-color: #091c45;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
.navigation-area {
|
||||||
|
min-width: unset;
|
||||||
|
max-width: unset;
|
||||||
|
|
||||||
|
&__container__wrap {
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-container {
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__left__label,
|
||||||
|
&__arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__small-logo {
|
||||||
|
cursor: pointer;
|
||||||
|
min-height: 40px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
// See LICENSE for copying information.
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="project-selection">
|
<div ref="projectSelection" class="project-selection">
|
||||||
<div
|
<div
|
||||||
class="project-selection__selected"
|
class="project-selection__selected"
|
||||||
:class="{ active: isDropdownShown }"
|
:class="{ active: isDropdownShown }"
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<ArrowImage class="project-selection__selected__arrow" />
|
<ArrowImage class="project-selection__selected__arrow" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isDropdownShown" v-click-outside="closeDropdown" class="project-selection__dropdown">
|
<div v-if="isDropdownShown" v-click-outside="closeDropdown" class="project-selection__dropdown" :style="style">
|
||||||
<div v-if="isLoading" class="project-selection__dropdown__loader-container">
|
<div v-if="isLoading" class="project-selection__dropdown__loader-container">
|
||||||
<VLoader width="30px" height="30px" />
|
<VLoader width="30px" height="30px" />
|
||||||
</div>
|
</div>
|
||||||
@ -83,15 +83,28 @@ import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
|
|||||||
})
|
})
|
||||||
export default class NewProjectSelection extends Vue {
|
export default class NewProjectSelection extends Vue {
|
||||||
private FIRST_PAGE = 1;
|
private FIRST_PAGE = 1;
|
||||||
|
private dropdownYPos = 0;
|
||||||
|
private dropdownXPos = 0;
|
||||||
|
private dropdownWidth = 0;
|
||||||
|
|
||||||
public isLoading = false;
|
public isLoading = false;
|
||||||
|
|
||||||
|
public $refs!: {
|
||||||
|
projectSelection: HTMLDivElement,
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetches projects related information and than toggles selection popup.
|
* Fetches projects related information and than toggles selection popup.
|
||||||
*/
|
*/
|
||||||
public async toggleSelection(): Promise<void> {
|
public async toggleSelection(): Promise<void> {
|
||||||
if (this.isOnboardingTour) return;
|
if (this.isOnboardingTour) return;
|
||||||
|
|
||||||
|
const selectionContainer = this.$refs.projectSelection.getBoundingClientRect();
|
||||||
|
|
||||||
|
this.dropdownYPos = selectionContainer.top + selectionContainer.height;
|
||||||
|
this.dropdownXPos = selectionContainer.left;
|
||||||
|
this.dropdownWidth = selectionContainer.width;
|
||||||
|
|
||||||
this.toggleDropdown();
|
this.toggleDropdown();
|
||||||
|
|
||||||
if (this.isLoading || !this.isDropdownShown) return;
|
if (this.isLoading || !this.isDropdownShown) return;
|
||||||
@ -141,6 +154,13 @@ 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` };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Indicates if current route is onboarding tour.
|
* Indicates if current route is onboarding tour.
|
||||||
*/
|
*/
|
||||||
@ -217,7 +237,7 @@ export default class NewProjectSelection extends Vue {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.project-selection {
|
.project-selection {
|
||||||
font-family: 'font_regular', sans-serif;
|
font-family: 'font_regular', sans-serif;
|
||||||
position: relative;
|
position: static;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&__selected {
|
&__selected {
|
||||||
@ -254,9 +274,7 @@ export default class NewProjectSelection extends Vue {
|
|||||||
|
|
||||||
&__dropdown {
|
&__dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% - 5px);
|
min-width: 230px;
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 0 0 8px 8px;
|
border-radius: 0 0 8px 8px;
|
||||||
@ -337,4 +355,15 @@ export default class NewProjectSelection extends Vue {
|
|||||||
.active {
|
.active {
|
||||||
background-color: #fafafb;
|
background-color: #fafafb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
.project-selection__selected {
|
||||||
|
|
||||||
|
&__left__name,
|
||||||
|
&__arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
3
web/satellite/static/images/smallLogo.svg
Normal file
3
web/satellite/static/images/smallLogo.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 36 KiB |
Loading…
Reference in New Issue
Block a user