JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: add My Projects button to All Projects Dashboard

Browse Source 
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:
Jeremy Wharton 2023-06-26 23:36:42 -05:00 committed by Storj Robot
parent 30d0094c43
commit 7d44f99ce6
2 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/common/VButton.vue
View File

@ -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()));

65
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -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);
}
}
}