Skip to content

Commit

Permalink
web/satellite/vuetify-poc: ui updates and improvements (#6576)
Browse files Browse the repository at this point in the history 
Updating common components and dialogs.
Updating the new browser card view.
Updating the file preview.
Updating usage per project.
Updating tooltips and messaging.
Icons update.
Themes and styling updates.
  • Loading branch information
@boshevski
boshevski committed Dec 6, 2023
1 parent 463cf89 commit e5c8b30
Show file tree
Hide file tree
Showing 32 changed files with 312 additions and 181 deletions.
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="outlined" :border="true" rounded="xlg">
<v-text-field
v-model="search"
label="Search"
Expand Down
38 changes: 22 additions & 16 deletions web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
View file
Expand Up @@ -13,20 +13,21 @@
flat
hide-details
clearable
density="comfortable"
density="compact"
rounded="lg"
/>
</v-col>
<v-col cols="auto">
<v-menu>
<template #activator="{ props: sortProps }">
<v-btn
variant="tonal"
color="primary"
variant="outlined"
color="default"
prepend-icon="mdi-sort"
append-icon="mdi-chevron-down"
v-bind="sortProps"
>
Sort by {{ sortKey }}
<span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
</v-btn>
</template>
<v-list>
Expand All @@ -45,15 +46,17 @@
v-model="sortOrder"
density="comfortable"
variant="outlined"
color="primary"
rounded="lg"
color="default"
rounded="xl"
class="pa-1"
border
mandatory
>
<v-btn value="asc">
<v-icon>mdi-arrow-up</v-icon>
<v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
<v-icon>mdi-sort-ascending</v-icon>
</v-btn>
<v-btn value="desc">
<v-icon>mdi-arrow-down</v-icon>
<v-btn size="small" value="desc" title="Descending" variant="text" rounded="xl">
<v-icon>mdi-sort-descending</v-icon>
</v-btn>
</v-btn-toggle>
</v-col>
Expand Down Expand Up @@ -89,13 +92,14 @@
<div class="d-flex align-center py-5">
<v-menu>
<template #activator="{ props: limitProps }">
<span class="text-subtitle-2 mr-2">Items per page:</span>
<v-btn
variant="tonal"
color="primary"
variant="outlined"
color="default"
append-icon="mdi-chevron-down"
v-bind="limitProps"
>
{{ cursor.limit }} files per page
{{ cursor.limit }}
</v-btn>
</template>
<v-list>
Expand All @@ -110,13 +114,14 @@

<v-spacer />

<span class="mr-4">
<span class="mr-4 text-medium-emphasis">
Page {{ cursor.page }} of {{ lastPage }}
</span>
<v-btn
icon
size="small"
variant="tonal"
variant="outlined"
color="default"
:disabled="cursor.page === 1"
@click="() => onPageChange(cursor.page - 1)"
>
Expand All @@ -125,7 +130,8 @@
<v-btn
icon
size="small"
variant="tonal"
variant="outlined"
color="default"
class="ml-2"
:disabled="cursor.page === lastPage"
@click="() => onPageChange(cursor.page + 1)"
Expand Down
21 changes: 18 additions & 3 deletions web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
View file
Expand Up @@ -5,25 +5,40 @@
<div class="text-no-wrap" :class="alignClass">
<v-btn
v-if="file.type !== 'folder'"
variant="outlined"
variant="text"
color="default"
size="small"
class="mr-1 text-caption"
density="comfortable"
title="Download"
icon
:loading="isDownloading"
@click="onDownloadClick"
>
<icon-download />
<v-tooltip activator="parent" location="start">Download</v-tooltip>
<!-- <v-tooltip activator="parent" location="start">Download</v-tooltip> -->
</v-btn>

<v-btn
variant="outlined"
variant="text"
color="default"
size="small"
class="mr-1 text-caption"
density="comfortable"
title="Share"
icon
@click="emit('shareClick')"
>
<icon-share bold />
</v-btn>

<v-btn
variant="text"
color="default"
size="small"
class="mr-1 text-caption"
density="comfortable"
title="More Actions"
icon
>
<v-icon icon="mdi-dots-horizontal" />
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="outlined" :border="true" rounded="xlg">
<v-text-field
v-model="search"
label="Search"
Expand Down Expand Up @@ -39,7 +39,7 @@
<v-data-table-row v-bind="rowProps">
<template #item.name="{ item }: ItemSlotProps">
<v-btn
class="rounded-lg w-100 px-1 justify-start font-weight-bold"
class="rounded-lg w-100 px-1 ml-n1 justify-start font-weight-bold"
variant="text"
height="40"
color="default"
Expand Down
7 changes: 4 additions & 3 deletions web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="outlined" :border="true" rounded="xlg">
<v-text-field
v-model="search"
label="Search"
Expand All @@ -25,6 +25,7 @@
:search="search"
:loading="areBucketsFetching"
:items-length="page.totalCount"
items-per-page-text="Buckets per page"
:items-per-page-options="tableSizeOptions(page.totalCount)"
no-data-text="No buckets found"
hover
Expand All @@ -34,7 +35,7 @@
>
<template #item.name="{ item }">
<v-btn
class="rounded-lg w-100 px-1 justify-start"
class="rounded-lg w-100 px-1 ml-n1 justify-start"
variant="text"
height="40"
color="default"
Expand Down Expand Up @@ -91,7 +92,7 @@
<icon-bucket size="18" />
</template>
<v-list-item-title class="ml-3">
View Bucket Details
Bucket Details
</v-list-item-title>
</v-list-item>
<v-list-item rounded-lg link @click="() => showShareBucketDialog(item.raw.name)">
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
View file
Expand Up @@ -2,15 +2,15 @@
// See LICENSE for copying information.

<template>
<v-card :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
<v-card :subtitle="subtitle" variant="outlined" :border="true" rounded="xlg" :to="to">
<template #title>
<v-card-title class="d-flex align-center">
<component :is="iconComponent" v-if="icon" v-bind="iconProps" class="mr-2" width="16" height="16" />
{{ title }}
</v-card-title>
</template>
<v-card-text>
<v-chip rounded color="default" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
<v-chip rounded color="default" variant="tonal" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
</v-card>
</template>
Expand Down
82 changes: 38 additions & 44 deletions web/satellite/vuetify-poc/src/components/FileCard.vue
View file
Expand Up @@ -2,52 +2,52 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="outlined" rounded="lg">
<div class="h-100 d-flex flex-column justify-space-between">
<v-img
v-if="objectPreviewUrl && previewType === PreviewType.Image"
:src="objectPreviewUrl"
alt="preview"
height="200px"
cover
@click="emit('previewClick', item.browserObject)"
/>
<div
v-else
class="d-flex flex-column justify-center align-center file-icon-container"
@click="emit('previewClick', item.browserObject)"
>
<img
:src="item.typeInfo.icon"
:alt="item.typeInfo.title + 'icon'"
:aria-roledescription="item.typeInfo.title + 'icon'"
height="100"
<a role="button" class="h-100" @click="emit('previewClick', item.browserObject)">
<v-img
v-if="objectPreviewUrl && previewType === PreviewType.Image"
:src="objectPreviewUrl"
class="bg-light card-preview-img h-100"
alt="preview"
:aspect-ratio="1/1"
cover
/>
<div
v-else
class="d-flex h-100 bg-light flex-column justify-center align-center file-icon-container card-preview-icon"
:aspect-ratio="1/1"
>
</div>

<v-card-item>
<img
:src="item.typeInfo.icon"
:alt="item.typeInfo.title + 'icon'"
:aria-roledescription="item.typeInfo.title + 'icon'"
height="52"
>
</div>
</a>

<browser-row-actions
class="pl-3 pt-3"
:file="item.browserObject"
align="left"
@preview-click="emit('previewClick', item.browserObject)"
@delete-file-click="emit('deleteFileClick', item.browserObject)"
@share-click="emit('shareClick', item.browserObject)"
/>
<v-card-item class="pt-0">
<v-card-title>
<a class="link" @click="emit('previewClick', item.browserObject)">
<small :title="item.browserObject.Key">
{{ item.browserObject.Key }}
</a>
</small>
</v-card-title>
<v-card-subtitle>
<!-- <v-card-subtitle class="text-caption">
{{ item.browserObject.type === 'folder' ? '&nbsp;': getFormattedSize(item.browserObject) }}
</v-card-subtitle>
<v-card-subtitle>
</v-card-subtitle> -->
<v-card-subtitle class="text-caption">
{{ item.browserObject.type === 'folder' ? '&nbsp;': getFormattedDate(item.browserObject) }}
</v-card-subtitle>
</v-card-item>
<v-card-text class="flex-grow-0">
<v-divider class="mt-1 mb-4" />
<browser-row-actions
:file="item.browserObject"
align="left"
@preview-click="emit('previewClick', item.browserObject)"
@delete-file-click="emit('deleteFileClick', item.browserObject)"
@share-click="emit('shareClick', item.browserObject)"
/>
</v-card-text>
</div>
</v-card>
</template>
Expand Down Expand Up @@ -157,10 +157,4 @@ function getFormattedDate(file: BrowserObject): string {
const date = file.LastModified;
return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
}
</script>

<style scoped lang="scss">
.file-icon-container {
height: 200px;
}
</style>
</script>
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/ProjectCard.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="outlined" :border="true" rounded="xlg">
<div class="h-100 d-flex flex-column justify-space-between">
<v-card-item>
<div class="d-flex justify-space-between">
Expand Down
8 changes: 5 additions & 3 deletions web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-card variant="outlined" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
Expand All @@ -21,14 +21,16 @@
:sort-by="sortBy"
:headers="headers"
:items="items"
items-per-page="10"
items-per-page-text="Projects per page"
:search="search"
no-data-text="No results found"
item-key="path"
>
<template #item.name="{ item }">
<v-btn
v-if="item.raw.role !== ProjectRole.Invited"
class="rounded-lg pl-1 pr-4 justify-start font-weight-bold"
class="rounded-lg pl-1 pr-4 ml-n1 justify-start font-weight-bold"
variant="text"
height="40"
color="default"
Expand All @@ -38,7 +40,7 @@
<img src="../assets/icon-project-tonal.svg" alt="Project" class="mr-3">
{{ item.raw.name }}
</v-btn>
<div v-else class="pl-1 pr-4 d-flex align-center justify-start font-weight-bold">
<div v-else class="pl-1 pr-4 ml-n1 d-flex align-center justify-start font-weight-bold">
<img src="../assets/icon-project-tonal.svg" alt="Project" class="mr-3">
<span class="text-no-wrap">{{ item.raw.name }}</span>
</div>
Expand Down
5 changes: 3 additions & 2 deletions web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="outlined" :border="true" rounded="xlg">
<v-row align="center" class="ma-0">
<v-col v-if="selectedMembers.length" class="pa-0" cols="auto">
<v-btn
Expand Down Expand Up @@ -41,6 +41,7 @@
:items="projectMembers"
:loading="isLoading"
:items-length="page.totalCount"
items-per-page-text="Accounts per page"
:items-per-page-options="tableSizeOptions(page.totalCount)"
no-data-text="No results found"
item-value="email"
Expand Down Expand Up @@ -74,7 +75,7 @@
>
<v-icon icon="mdi-dots-horizontal" />
<v-menu activator="parent">
<v-list class="py-2">
<v-list class="pa-1">
<v-list-item
density="comfortable"
link
Expand Down

0 comments on commit e5c8b30

Please sign in to comment.