web/satellite: tab adaptation for new navigation sidebar

Tab (768px) adaptation for new navigation sidebar. Change-Id: I53b6b7b8bb25df8975d7ab4b5145c72170bb2e1f
2021-10-25 18:30:08 +03:00 · 2021-10-25 18:30:08 +03:00 · c7e2570123
commit c7e2570123
parent eb68dbad41
4 changed files with 110 additions and 16 deletions
--- a/web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
+++ b/web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
@ -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">👋🏼 &nbsp; 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>
--- a/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
+++ b/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
@ -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>
--- a/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
+++ b/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
@ -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>
--- a/web/satellite/static/images/smallLogo.svg
+++ b/web/satellite/static/images/smallLogo.svg