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
This commit is contained in:
parent
30d0094c43
commit
7d44f99ce6
@ -65,6 +65,7 @@ import DownloadIcon from '@/../static/images/common/download.svg';
|
|||||||
import FolderIcon from '@/../static/images/objects/newFolder.svg';
|
import FolderIcon from '@/../static/images/objects/newFolder.svg';
|
||||||
import ResourcesIcon from '@/../static/images/navigation/resources.svg';
|
import ResourcesIcon from '@/../static/images/navigation/resources.svg';
|
||||||
import UploadIcon from '@/../static/images/common/upload.svg';
|
import UploadIcon from '@/../static/images/common/upload.svg';
|
||||||
|
import ProjectIcon from '@/../static/images/navigation/project.svg';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
link?: string;
|
link?: string;
|
||||||
@ -121,6 +122,7 @@ const icons = new Map<string, string>([
|
|||||||
['addcircle', AddCircleIcon],
|
['addcircle', AddCircleIcon],
|
||||||
['add', WhitePlusIcon],
|
['add', WhitePlusIcon],
|
||||||
['upload', UploadIcon],
|
['upload', UploadIcon],
|
||||||
|
['project', ProjectIcon],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const iconComponent = computed((): string | undefined => icons.get(props.icon.toLowerCase()));
|
const iconComponent = computed((): string | undefined => icons.get(props.icon.toLowerCase()));
|
||||||
|
@ -5,9 +5,20 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header__content">
|
<div class="header__content">
|
||||||
<LogoIcon class="header__content__logo" @click="goToProjects" />
|
<LogoIcon class="header__content__logo" @click="goToProjects" />
|
||||||
|
<SmallLogoIcon class="header__content__small-logo" @click="goToProjects" />
|
||||||
<div class="header__content__actions">
|
<div class="header__content__actions">
|
||||||
<VButton
|
<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"
|
icon="resources"
|
||||||
border-radius="8px"
|
border-radius="8px"
|
||||||
font-size="12px"
|
font-size="12px"
|
||||||
@ -29,6 +40,17 @@
|
|||||||
<MenuIcon v-else @click="toggleNavigation" />
|
<MenuIcon v-else @click="toggleNavigation" />
|
||||||
</header>
|
</header>
|
||||||
<div v-if="isNavOpened" class="header__mobile-area__container__wrap">
|
<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
|
<a
|
||||||
aria-label="Docs"
|
aria-label="Docs"
|
||||||
class="header__mobile-area__container__wrap__item-container"
|
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 VButton from '@/components/common/VButton.vue';
|
||||||
|
|
||||||
import LogoIcon from '@/../static/images/logo.svg';
|
import LogoIcon from '@/../static/images/logo.svg';
|
||||||
|
import SmallLogoIcon from '@/../static/images/smallLogo.svg';
|
||||||
import ResourcesIcon from '@/../static/images/navigation/resources.svg';
|
import ResourcesIcon from '@/../static/images/navigation/resources.svg';
|
||||||
import BillingIcon from '@/../static/images/navigation/billing.svg';
|
import BillingIcon from '@/../static/images/navigation/billing.svg';
|
||||||
import LogoutIcon from '@/../static/images/navigation/logout.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 ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg';
|
||||||
import CrossIcon from '@/../static/images/common/closeCross.svg';
|
import CrossIcon from '@/../static/images/common/closeCross.svg';
|
||||||
import MenuIcon from '@/../static/images/navigation/menu.svg';
|
import MenuIcon from '@/../static/images/navigation/menu.svg';
|
||||||
|
import ProjectIcon from '@/../static/images/navigation/project.svg';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@ -169,6 +193,13 @@ const user = computed((): User => {
|
|||||||
return usersStore.state.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.
|
* Toggles account dropdown visibility.
|
||||||
*/
|
*/
|
||||||
@ -279,13 +310,28 @@ function sendDocsEvent(): void {
|
|||||||
min-height: 37px;
|
min-height: 37px;
|
||||||
width: 207px;
|
width: 207px;
|
||||||
height: 37px;
|
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 {
|
&__actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
&__docs {
|
&__button {
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
box-shadow: 0 0 20px rgb(0 0 0 / 4%);
|
box-shadow: 0 0 20px rgb(0 0 0 / 4%);
|
||||||
|
|
||||||
@ -316,8 +362,6 @@ function sendDocsEvent(): void {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
@ -343,21 +387,22 @@ function sendDocsEvent(): void {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 4rem;
|
top: 4rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding-bottom: 8px;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background: white;
|
background: white;
|
||||||
|
border-bottom: 1px solid var(--c-grey-2);
|
||||||
|
|
||||||
&__item-container {
|
&__item-container {
|
||||||
padding: 14px 32px;
|
padding: 14px 32px;
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -381,9 +426,9 @@ function sendDocsEvent(): void {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__border {
|
&__border {
|
||||||
margin: 0 32px 16px;
|
margin: 8px 32px;
|
||||||
border: 0.5px solid var(--c-grey-2);
|
height: 1px;
|
||||||
width: calc(100% - 48px);
|
background-color: var(--c-grey-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user