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.
|
||||
|
||||
<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">
|
||||
<h1 class="account-area__avatar__letter">{{ avatarLetter }}</h1>
|
||||
</div>
|
||||
@ -11,7 +11,7 @@
|
||||
<p v-if="user.paidTier" class="account-area__info__type">Pro account</p>
|
||||
<p v-else class="account-area__info__type">Free account</p>
|
||||
</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">
|
||||
<p class="account-area__dropdown__header__greet">👋🏼 Hi, {{ user.fullName }}</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 {
|
||||
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.
|
||||
@ -120,6 +127,13 @@ export default class AccountArea extends Vue {
|
||||
* Toggles account dropdown visibility.
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
@ -130,6 +144,13 @@ export default class AccountArea extends Vue {
|
||||
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.
|
||||
*/
|
||||
@ -169,8 +190,7 @@ export default class AccountArea extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
flex-shrink: unset;
|
||||
position: static;
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
@ -181,7 +201,6 @@ export default class AccountArea extends Vue {
|
||||
justify-content: center;
|
||||
background: #2582ff;
|
||||
cursor: pointer;
|
||||
margin-right: 16px;
|
||||
|
||||
&__letter {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
@ -192,6 +211,7 @@ export default class AccountArea extends Vue {
|
||||
}
|
||||
|
||||
&__info {
|
||||
margin-left: 16px;
|
||||
|
||||
&__email {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
@ -212,10 +232,8 @@ export default class AccountArea extends Vue {
|
||||
|
||||
&__dropdown {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
background: #fff;
|
||||
width: 240px;
|
||||
min-width: 230px;
|
||||
z-index: 1;
|
||||
cursor: default;
|
||||
border: 1px solid #ebeef1;
|
||||
@ -268,4 +286,11 @@ export default class AccountArea extends Vue {
|
||||
.active {
|
||||
background-color: #f7f8fb;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
.account-area__info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -6,6 +6,7 @@
|
||||
<div class="navigation-area__container">
|
||||
<div class="navigation-area__container__wrap">
|
||||
<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">
|
||||
<NewProjectSelection />
|
||||
</div>
|
||||
@ -32,7 +33,7 @@
|
||||
<ResourcesIcon class="navigation-area__container__wrap__item-container__left__image" />
|
||||
<p class="navigation-area__container__wrap__item-container__left__label">Resources</p>
|
||||
</div>
|
||||
<ArrowIcon />
|
||||
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
|
||||
<GuidesDropdown
|
||||
v-if="isResourcesDropdownShown"
|
||||
:close="closeDropdowns"
|
||||
@ -89,7 +90,7 @@
|
||||
<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 />
|
||||
<ArrowIcon class="navigation-area__container__wrap__item-container__arrow" />
|
||||
<GuidesDropdown
|
||||
v-if="isQuickStartDropdownShown"
|
||||
:close="closeDropdowns"
|
||||
@ -147,6 +148,7 @@ import { NavigationLink } from '@/types/navigation';
|
||||
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
|
||||
|
||||
import LogoIcon from '@/../static/images/logo.svg';
|
||||
import SmallLogoIcon from '@/../static/images/smallLogo.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';
|
||||
@ -169,6 +171,7 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
|
||||
GuidesDropdown,
|
||||
AccountArea,
|
||||
LogoIcon,
|
||||
SmallLogoIcon,
|
||||
DashboardIcon,
|
||||
AccessGrantsIcon,
|
||||
UsersIcon,
|
||||
@ -345,6 +348,10 @@ export default class NewNavigationArea extends Vue {
|
||||
min-height: 37px;
|
||||
}
|
||||
|
||||
&__small-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
padding: 0 20px;
|
||||
margin: 32px 0;
|
||||
@ -446,4 +453,34 @@ export default class NewNavigationArea extends Vue {
|
||||
background-color: #091c45;
|
||||
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>
|
||||
|
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="project-selection">
|
||||
<div ref="projectSelection" class="project-selection">
|
||||
<div
|
||||
class="project-selection__selected"
|
||||
:class="{ active: isDropdownShown }"
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<ArrowImage class="project-selection__selected__arrow" />
|
||||
</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">
|
||||
<VLoader width="30px" height="30px" />
|
||||
</div>
|
||||
@ -83,15 +83,28 @@ import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
|
||||
})
|
||||
export default class NewProjectSelection extends Vue {
|
||||
private FIRST_PAGE = 1;
|
||||
private dropdownYPos = 0;
|
||||
private dropdownXPos = 0;
|
||||
private dropdownWidth = 0;
|
||||
|
||||
public isLoading = false;
|
||||
|
||||
public $refs!: {
|
||||
projectSelection: HTMLDivElement,
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches projects related information and than toggles selection popup.
|
||||
*/
|
||||
public async toggleSelection(): Promise<void> {
|
||||
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();
|
||||
|
||||
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.
|
||||
*/
|
||||
@ -217,7 +237,7 @@ export default class NewProjectSelection extends Vue {
|
||||
<style scoped lang="scss">
|
||||
.project-selection {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
position: relative;
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
&__selected {
|
||||
@ -254,9 +274,7 @@ export default class NewProjectSelection extends Vue {
|
||||
|
||||
&__dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% - 5px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 230px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 8px 8px;
|
||||
@ -337,4 +355,15 @@ export default class NewProjectSelection extends Vue {
|
||||
.active {
|
||||
background-color: #fafafb;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
.project-selection__selected {
|
||||
|
||||
&__left__name,
|
||||
&__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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