diff --git a/web/satellite/vuetify-poc/src/assets/icon-trash.svg b/web/satellite/vuetify-poc/src/assets/icon-trash.svg new file mode 100644 index 000000000..0265889d1 --- /dev/null +++ b/web/satellite/vuetify-poc/src/assets/icon-trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue index 4fa89e63e..257093566 100644 --- a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue +++ b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue @@ -22,9 +22,9 @@ hover > - - {{ item.columns.name }} - + + {{ item.raw.name }} + @@ -37,7 +37,7 @@ diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue index 1dbdb363b..f0eff8caf 100644 --- a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue +++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue @@ -12,39 +12,97 @@ /> - - - - - - - {{ item.columns.name }} - + + + + {{ item.raw.name }} + + - + {{ item.raw.role }} + + {{ getFormattedDate(item.raw.createdAt) }} + + - - {{ item.raw.actions }} - + + + Join Project + + Open Project + + + + + + + + + + + + Project Settings + + + + + + + + + + + Invite Members + + + + + + + + + Decline + + + + + + @@ -52,51 +110,81 @@ diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue index 85c3714e4..12387da71 100644 --- a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue +++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue @@ -22,15 +22,12 @@ hover > - - - {{ item.columns.name }} - + + {{ item.raw.name }} + - + {{ item.raw.role }} @@ -40,12 +37,13 @@ diff --git a/web/satellite/vuetify-poc/src/layouts/default/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue index 1ae68ca62..85ebe8669 100644 --- a/web/satellite/vuetify-poc/src/layouts/default/Default.vue +++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue @@ -11,7 +11,7 @@ diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss index 2d79a146f..ebb750c06 100644 --- a/web/satellite/vuetify-poc/src/styles/styles.scss +++ b/web/satellite/vuetify-poc/src/styles/styles.scss @@ -226,12 +226,6 @@ letter-spacing: 1px; } -// Table content -.v-list-item__content { - white-space: nowrap; - overflow: visible; -} - // Table Footer .v-data-table-footer { font-size: 14px; @@ -270,6 +264,7 @@ table { .link:hover { color: rgb(var(--v-theme-secondary)); background-size: 100% 1px; + cursor: pointer; } @@ -287,4 +282,4 @@ table { // Upload Snackbar .upload-snackbar .v-snackbar__content { padding: 2px; -} \ No newline at end of file +} diff --git a/web/satellite/vuetify-poc/src/types/projects.ts b/web/satellite/vuetify-poc/src/types/projects.ts new file mode 100644 index 000000000..13b176909 --- /dev/null +++ b/web/satellite/vuetify-poc/src/types/projects.ts @@ -0,0 +1,33 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + +import { ProjectRole } from '@/types/projectMembers'; + +/** + * ProjectItemModel represents the view model for project items in the all projects dashboard. + */ +export class ProjectItemModel { + public constructor( + public id: string, + public name: string, + public description: string, + public role: ProjectItemRole, + public memberCount: number | null, + public createdAt: Date, + ) {} +} + +/** + * ProjectItemRole represents the role of a user for a project item. + */ +export type ProjectItemRole = Exclude; + +/** + * PROJECT_ROLE_COLORS defines what colors project role tags should use. + */ +export const PROJECT_ROLE_COLORS: Record = { + [ProjectRole.Member]: 'green', + [ProjectRole.Owner]: 'purple2', + [ProjectRole.Invited]: 'warning', + [ProjectRole.InviteExpired]: 'error', +}; diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue index 4f6236afa..4c6aa234a 100644 --- a/web/satellite/vuetify-poc/src/views/Billing.vue +++ b/web/satellite/vuetify-poc/src/views/Billing.vue @@ -178,12 +178,9 @@ hover > - - - {{ item.columns.date }} - + + {{ item.raw.date }} + @@ -215,12 +212,9 @@ hover > - - - {{ item.columns.date }} - + + {{ item.raw.date }} + @@ -267,7 +261,6 @@ import { VExpansionPanels, VExpansionPanel, VTextField, - VListItem, } from 'vuetify/components'; import { VDataTable } from 'vuetify/labs/components'; diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue index 268fed1f8..146e1eed1 100644 --- a/web/satellite/vuetify-poc/src/views/Bucket.vue +++ b/web/satellite/vuetify-poc/src/views/Bucket.vue @@ -43,7 +43,7 @@ import PageTitleComponent from '@poc/components/PageTitleComponent.vue'; import BrowserBreadcrumbsComponent from '@poc/components/BrowserBreadcrumbsComponent.vue'; import BrowserSnackbarComponent from '@poc/components/BrowserSnackbarComponent.vue'; import BrowserTableComponent from '@poc/components/BrowserTableComponent.vue'; -import BrowserNewFolderDialog from '@poc/components/BrowserNewFolderDialog.vue'; +import BrowserNewFolderDialog from '@poc/components/dialogs/BrowserNewFolderDialog.vue'; import IconUpload from '@poc/components/icons/IconUpload.vue'; import IconFolder from '@poc/components/icons/IconFolder.vue'; diff --git a/web/satellite/vuetify-poc/src/views/Projects.vue b/web/satellite/vuetify-poc/src/views/Projects.vue index 3fc7d4fb4..6e13e8944 100644 --- a/web/satellite/vuetify-poc/src/views/Projects.vue +++ b/web/satellite/vuetify-poc/src/views/Projects.vue @@ -117,181 +117,89 @@ - + + - - - - + + - - - - - - - Cards - - - - - - - - - - - Table - - - + + + + + + + + Cards + + + + + + + + + + + Table + + + + - - - - - - - Owner - - - - - - - - - - - - - - - - Project Settings - - - - - - - - - - - - Invite Members - - - - - - - - My first project - - - Project Description - - - - - Open Project - - - - - - - - Member - - Storj Labs - - - Shared team project - - - - - Open Project - - - - - - - - Invited - - Invitation Project - - - Example invitation. - - - - - Join Project - Decline - - - - - - - - Project - - Welcome - - - Create a project to get started. - - - - - Create Project - - - + + - + - + - + + + + + + + + + + +
Project Description
Shared team project
Example invitation.
Create a project to get started.