Skip to content

Commit

Permalink
web/satellite/vuetify-poc: ui ux updates (#6612)
Browse files Browse the repository at this point in the history 
Updating:
Project Settings page
Edit Limits dialogs
Account Settings page
Add Storj Tokens dialog
Create New Bucket dialog
Dashboard
Buckets table
Browser Snackbar
Browser Card View
Stylesheet
  • Loading branch information
@boshevski
boshevski committed Dec 21, 2023
1 parent f5880a9 commit e22163c
Show file tree
Hide file tree
Showing 18 changed files with 446 additions and 432 deletions.
2 changes: 1 addition & 1 deletion web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
View file
Expand Up @@ -116,7 +116,7 @@ const accessNameToDelete = ref<string>('');
const headers = [
{
title: 'Name',
title: 'Access Name',
align: 'start',
key: 'name',
},
Expand Down
223 changes: 113 additions & 110 deletions web/satellite/vuetify-poc/src/components/BrowserCardViewComponent.vue
View file
Expand Up @@ -2,66 +2,65 @@
// See LICENSE for copying information.

<template>
<v-row align="center" class="mb-3">
<v-col>
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
variant="solo-filled"
flat
hide-details
clearable
density="compact"
rounded="lg"
@update:modelValue="analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS)"
/>
</v-col>
<v-col cols="auto">
<v-menu>
<template #activator="{ props: sortProps }">
<v-btn
variant="outlined"
color="default"
prepend-icon="mdi-sort"
append-icon="mdi-chevron-down"
v-bind="sortProps"
>
<span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
<v-card class="pa-2 mb-7">
<v-row align="center">
<v-col>
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
variant="solo-filled"
flat
hide-details
clearable
density="comfortable"
rounded="lg"
@update:modelValue="analyticsStore.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS)"
/>
</v-col>
<v-col cols="auto">
<v-menu>
<template #activator="{ props: sortProps }">
<v-btn
variant="text"
color="default"
prepend-icon="mdi-sort"
append-icon="mdi-chevron-down"
v-bind="sortProps"
class="mr-2"
>
<span class="text-body-2">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(key, index) in sortKeys"
:key="index"
:title="key"
@click="() => sortKey = key.toLowerCase()"
/>
</v-list>
</v-menu>
<v-btn-toggle
v-model="sortOrder"
density="comfortable"
variant="outlined"
color="default"
rounded="xl"
class="pa-1"
mandatory
>
<v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
<v-icon>mdi-sort-ascending</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(key, index) in sortKeys"
:key="index"
:title="key"
@click="() => sortKey = key.toLowerCase()"
/>
</v-list>
</v-menu>
</v-col>

<v-col cols="auto">
<v-btn-toggle
v-model="sortOrder"
density="comfortable"
variant="outlined"
color="default"
rounded="xl"
class="pa-1"
border
mandatory
>
<v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
<v-icon>mdi-sort-ascending</v-icon>
</v-btn>
<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>
</v-row>
<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>
</v-row>
</v-card>

<v-data-iterator
:page="cursor.page"
Expand All @@ -72,7 +71,9 @@
:loading="isFetching"
>
<template #no-data>
<div class="d-flex justify-center">No results found</div>
<div class="d-flex justify-center">
<p class="text-body-2">No data found.</p>
</div>
</template>

<template #default="fileProps">
Expand All @@ -90,56 +91,58 @@
</template>

<template #footer>
<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="outlined"
color="default"
append-icon="mdi-chevron-down"
v-bind="limitProps"
>
{{ cursor.limit }}
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(number, index) in tableSizeOptions(totalObjectCount, true)"
:key="index"
:title="number.title"
@click="() => onLimitChange(number.value)"
/>
</v-list>
</v-menu>

<v-spacer />

<span class="mr-4 text-medium-emphasis">
Page {{ cursor.page }} of {{ lastPage }}
</span>
<v-btn
icon
size="small"
variant="outlined"
color="default"
:disabled="cursor.page === 1"
@click="() => onPageChange(cursor.page - 1)"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-btn
icon
size="small"
variant="outlined"
color="default"
class="ml-2"
:disabled="cursor.page === lastPage"
@click="() => onPageChange(cursor.page + 1)"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</div>
<v-card class="pa-2 my-6">
<div class="d-flex align-center">
<v-menu>
<template #activator="{ props: limitProps }">
<v-btn
variant="text"
color="default"
append-icon="mdi-chevron-down"
v-bind="limitProps"
>
<span class="text-caption text-medium-emphasis mr-2">Items per page:</span>
{{ cursor.limit }}
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(number, index) in tableSizeOptions(totalObjectCount, true)"
:key="index"
:title="number.title"
@click="() => onLimitChange(number.value)"
/>
</v-list>
</v-menu>

<v-spacer />

<span class="mr-4 text-caption text-medium-emphasis">
Page {{ cursor.page }} of {{ lastPage }}
</span>
<v-btn
icon
size="small"
variant="text"
color="default"
:disabled="cursor.page === 1"
@click="() => onPageChange(cursor.page - 1)"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-btn
icon
size="small"
variant="text"
color="default"
class="ml-2"
:disabled="cursor.page === lastPage"
@click="() => onPageChange(cursor.page + 1)"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</div>
</v-card>
</template>
</v-data-iterator>
<file-preview-dialog v-model="previewDialog" />
Expand Down
3 changes: 1 addition & 2 deletions web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
View file
Expand Up @@ -23,7 +23,7 @@
<v-expansion-panel-title color="">
<span>{{ statusLabel }}</span>
<template v-if="isClosable" #actions>
<v-icon icon="mdi-close" @click="closeDialog" />
<v-btn variant="outlined" color="default" size="x-small" icon="mdi-close" title="Close" @click="closeDialog" />
</template>
</v-expansion-panel-title>
<v-progress-linear
Expand All @@ -33,7 +33,6 @@
:model-value="progress"
height="6"
color="success"
class="mt-1"
/>
<v-expansion-panel-text v-if="!isClosable && objectsInProgress.length > 1">
<v-row justify="space-between" class="pt-2">
Expand Down
6 changes: 3 additions & 3 deletions web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
View file
Expand Up @@ -208,15 +208,15 @@ const isTableSortable = computed<boolean>(() => {
const headers = computed<DataTableHeader[]>(() => {
const hdrs: DataTableHeader[] = [
{
title: 'Name',
title: 'Bucket',
align: 'start',
key: 'name',
sortable: isTableSortable.value,
},
{ title: 'Storage', key: 'storage', sortable: isTableSortable.value },
{ title: 'Download', key: 'egress', sortable: isTableSortable.value },
{ title: 'Files', key: 'objectCount', sortable: isTableSortable.value },
{ title: 'Segments', key: 'segmentCount', sortable: isTableSortable.value },
{ title: 'Storage', key: 'storage', sortable: isTableSortable.value },
{ title: 'Download', key: 'egress', sortable: isTableSortable.value },
{ title: 'Date Created', key: 'since', sortable: isTableSortable.value },
{ title: '', key: 'actions', width: '0', sortable: false },
];
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/vuetify-poc/src/components/PasswordInputEyeIcons.vue
View file
Expand Up @@ -2,7 +2,7 @@
// See LICENSE for copying information.

<template>
<v-tooltip v-if="isVisible" :text="`Hide ${type}`" location="top">
<v-tooltip v-if="isVisible" :text="`Hide ${type}`" location="top" theme="dark">
<template #activator="{ props }">
<v-icon
v-bind="props"
Expand All @@ -11,7 +11,7 @@
/>
</template>
</v-tooltip>
<v-tooltip v-else :text="`Show ${type}`" location="top">
<v-tooltip v-else :text="`Show ${type}`" location="top" theme="dark">
<template #activator="{ props }">
<v-icon
v-bind="props"
Expand Down
21 changes: 15 additions & 6 deletions web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
View file
Expand Up @@ -5,20 +5,29 @@
<v-dialog
v-model="model"
width="auto"
min-width="400px"
min-width="320px"
max-width="450px"
transition="fade-transition"
>
<v-card ref="innerContent" rounded="xlg">
<v-sheet>
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-card-title class="font-weight-bold">
<!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
Create New Bucket
</v-card-title>
<v-sheet
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"
>
<img src="@poc/assets/icon-bucket.svg" alt="Bucket icon">
</v-sheet>
</template>

<v-card-title class="font-weight-bold">
<!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
New Bucket
</v-card-title>

<template #append>
<v-btn
icon="$close"
Expand All @@ -36,7 +45,7 @@
<v-form v-model="formValid" class="pa-7 pb-3" @submit.prevent="onCreate">
<v-row>
<v-col>
<p>Buckets are used to store and organize your files.</p>
<p>Buckets are used to store and organize your files. Enter a bucket name using lowercase characters.</p>
<v-text-field
v-model="bucketName"
variant="outlined"
Expand Down

0 comments on commit e22163c

Please sign in to comment.