From 7d44f99ce6ea858a7fcace9dbb2943de2e8ccb6b Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Mon, 26 Jun 2023 23:36:42 -0500
Subject: [PATCH] web/satellite: add My Projects button to All Projects
 Dashboard

This change adds a button to the header of the All Projects Dashboard
that navigates the user to the My Projects page.

Resolves #5996

Change-Id: Ie467e22c9039cf30fda1b8d815c1d6269f5ddf4f
---
 .../src/components/common/VButton.vue         |  2 +
 .../all-dashboard/components/Heading.vue      | 65 ++++++++++++++++---
 2 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/web/satellite/src/components/common/VButton.vue b/web/satellite/src/components/common/VButton.vue
index 8db1fc35f..a14e8949e 100644
--- a/web/satellite/src/components/common/VButton.vue
+++ b/web/satellite/src/components/common/VButton.vue
@@ -65,6 +65,7 @@ import DownloadIcon from '@/../static/images/common/download.svg';
 import FolderIcon from '@/../static/images/objects/newFolder.svg';
 import ResourcesIcon from '@/../static/images/navigation/resources.svg';
 import UploadIcon from '@/../static/images/common/upload.svg';
+import ProjectIcon from '@/../static/images/navigation/project.svg';
 
 const props = withDefaults(defineProps<{
     link?: string;
@@ -121,6 +122,7 @@ const icons = new Map<string, string>([
     ['addcircle', AddCircleIcon],
     ['add', WhitePlusIcon],
     ['upload', UploadIcon],
+    ['project', ProjectIcon],
 ]);
 
 const iconComponent = computed((): string | undefined => icons.get(props.icon.toLowerCase()));
diff --git a/web/satellite/src/views/all-dashboard/components/Heading.vue b/web/satellite/src/views/all-dashboard/components/Heading.vue
index 4538889bd..a2e81a826 100644
--- a/web/satellite/src/views/all-dashboard/components/Heading.vue
+++ b/web/satellite/src/views/all-dashboard/components/Heading.vue
@@ -5,9 +5,20 @@
     <div class="header">
         <div class="header__content">
             <LogoIcon class="header__content__logo" @click="goToProjects" />
+            <SmallLogoIcon class="header__content__small-logo" @click="goToProjects" />
             <div class="header__content__actions">
                 <VButton
-                    class="header__content__actions__docs"
+                    v-if="isMyProjectsButtonShown"
+                    class="header__content__actions__button"
+                    icon="project"
+                    border-radius="8px"
+                    font-size="12px"
+                    is-white
+                    :on-press="goToProjects"
+                    label="My Projects"
+                />
+                <VButton
+                    class="header__content__actions__button"
                     icon="resources"
                     border-radius="8px"
                     font-size="12px"
@@ -29,6 +40,17 @@
                     <MenuIcon v-else @click="toggleNavigation" />
                 </header>
                 <div v-if="isNavOpened" class="header__mobile-area__container__wrap">
+                    <div
+                        v-if="isMyProjectsButtonShown"
+                        aria-label="My Projects"
+                        class="header__mobile-area__container__wrap__item-container"
+                        @click="goToProjects"
+                    >
+                        <div class="header__mobile-area__container__wrap__item-container__left">
+                            <project-icon class="header__mobile-area__container__wrap__item-container__left__image" />
+                            <p class="header__mobile-area__container__wrap__item-container__left__label">My Projects</p>
+                        </div>
+                    </div>
                     <a
                         aria-label="Docs"
                         class="header__mobile-area__container__wrap__item-container"
@@ -118,6 +140,7 @@ import { useConfigStore } from '@/store/modules/configStore';
 import VButton from '@/components/common/VButton.vue';
 
 import LogoIcon from '@/../static/images/logo.svg';
+import SmallLogoIcon from '@/../static/images/smallLogo.svg';
 import ResourcesIcon from '@/../static/images/navigation/resources.svg';
 import BillingIcon from '@/../static/images/navigation/billing.svg';
 import LogoutIcon from '@/../static/images/navigation/logout.svg';
@@ -130,6 +153,7 @@ import AccountIcon from '@/../static/images/navigation/account.svg';
 import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg';
 import CrossIcon from '@/../static/images/common/closeCross.svg';
 import MenuIcon from '@/../static/images/navigation/menu.svg';
+import ProjectIcon from '@/../static/images/navigation/project.svg';
 
 const router = useRouter();
 const route = useRoute();
@@ -169,6 +193,13 @@ const user = computed((): User => {
     return usersStore.state.user;
 });
 
+/**
+ * Returns whether the My Projects button should be shown.
+ */
+const isMyProjectsButtonShown = computed((): boolean => {
+    return route.name !== RouteConfig.AllProjectsDashboard.name;
+});
+
 /**
  * Toggles account dropdown visibility.
  */
@@ -279,13 +310,28 @@ function sendDocsEvent(): void {
             min-height: 37px;
             width: 207px;
             height: 37px;
+
+            @media screen and (width <= 680px) {
+                display: none;
+            }
+        }
+
+        &__small-logo {
+            cursor: pointer;
+            width: 44px;
+            height: 44px;
+            display: none;
+
+            @media screen and (width <= 680px) {
+                display: block;
+            }
         }
 
         &__actions {
             display: flex;
             gap: 10px;
 
-            &__docs {
+            &__button {
                 padding: 10px 16px;
                 box-shadow: 0 0 20px rgb(0 0 0 / 4%);
 
@@ -316,8 +362,6 @@ function sendDocsEvent(): void {
             flex-direction: column;
             align-items: center;
             justify-content: space-between;
-            overflow-x: hidden;
-            overflow-y: auto;
             width: 100%;
 
             &__header {
@@ -343,21 +387,22 @@ function sendDocsEvent(): void {
             }
 
             &__wrap {
-                position: fixed;
+                position: absolute;
                 top: 4rem;
                 left: 0;
                 display: flex;
                 flex-direction: column;
-                align-items: center;
+                align-items: stretch;
                 width: 100%;
+                padding-bottom: 8px;
                 z-index: 9999;
                 overflow-y: auto;
                 overflow-x: hidden;
                 background: white;
+                border-bottom: 1px solid var(--c-grey-2);
 
                 &__item-container {
                     padding: 14px 32px;
-                    width: 100%;
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
@@ -381,9 +426,9 @@ function sendDocsEvent(): void {
                 }
 
                 &__border {
-                    margin: 0 32px 16px;
-                    border: 0.5px solid var(--c-grey-2);
-                    width: calc(100% - 48px);
+                    margin: 8px 32px;
+                    height: 1px;
+                    background-color: var(--c-grey-2);
                 }
             }
         }