web/satellite/vuetify-poc: ui updates and improvements (#6576)
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.
This commit is contained in:
Tome Boshevski
andriikotko
parent
88a78262b1
commit
5767191bfc
@ -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"
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
flat
|
||||
hide-details
|
||||
clearable
|
||||
density="comfortable"
|
||||
density="compact"
|
||||
rounded="lg"
|
||||
/>
|
||||
</v-col>
|
||||
@ -21,12 +21,13 @@
|
||||
<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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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)"
|
||||
>
|
||||
@ -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)"
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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"
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
@ -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
|
||||
@ -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"
|
||||
@ -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)">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// 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" />
|
||||
@ -10,7 +10,7 @@
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<img
|
||||
:src="item.typeInfo.icon"
|
||||
:alt="item.typeInfo.title + 'icon'"
|
||||
:aria-roledescription="item.typeInfo.title + 'icon'"
|
||||
height="52"
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<v-card-item>
|
||||
<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' ? ' ': getFormattedSize(item.browserObject) }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle>
|
||||
</v-card-subtitle> -->
|
||||
<v-card-subtitle class="text-caption">
|
||||
{{ item.browserObject.type === 'folder' ? ' ': 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>
|
||||
@ -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,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">
|
||||
|
||||
@ -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"
|
||||
@ -21,6 +21,8 @@
|
||||
: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"
|
||||
@ -28,7 +30,7 @@
|
||||
<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"
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
@ -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"
|
||||
@ -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
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<v-card :border="true" rounded="xlg">
|
||||
<v-card :border="true" rounded="xlg" variant="flat">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Search"
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card :title="title" variant="outlined" :border="true" rounded="xlg">
|
||||
<template #title>
|
||||
<v-card-title class="d-flex align-center">
|
||||
<component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" />
|
||||
<component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" bold />
|
||||
{{ title }}
|
||||
</v-card-title>
|
||||
</template>
|
||||
@ -20,7 +20,7 @@
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h4 class="text-right">{{ available }}</h4>
|
||||
<p class="text-cursor-pointer text-right text-medium-emphasis" @click="emit('ctaClick')"><small>{{ cta }}</small></p>
|
||||
<p class="text-right text-medium-emphasis"><a class="link" role="button" @click="emit('ctaClick')"><small>{{ cta }}</small></a></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-table density="comfortable">
|
||||
<v-expansion-panel-text class="pt-4 pb-2">
|
||||
<v-table density="comfortable" class="border rounded-lg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">
|
||||
@ -40,30 +40,53 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="[partner, charge] in partnerCharges"
|
||||
:key="partner"
|
||||
>
|
||||
<tr v-for="[partner, charge] in partnerCharges" :key="partner">
|
||||
<td>
|
||||
<p>Storage <span class="d-none d-md-inline">({{ getStoragePrice(partner) }} per Gigabyte-Month)</span></p>
|
||||
<p>Download <span class="d-none d-md-inline">({{ getEgressPrice(partner) }} per GB)</span></p>
|
||||
<p>Segments <span class="d-none d-md-inline">({{ getSegmentPrice(partner) }} per Segment-Month)</span></p>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell"><p v-for="i in 3" :key="i">{{ getPeriod(charge) }}</p></td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<p>{{ getPeriod(charge) }}</p>
|
||||
</td>
|
||||
<td class="d-none d-sm-table-cell">
|
||||
<p>{{ getStorageFormatted(charge) }} Gigabyte-month</p>
|
||||
<p>{{ getEgressAmountAndDimension(charge) }}</p>
|
||||
<p>{{ getSegmentCountFormatted(charge) }} Segment-month</p>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<p>{{ centsToDollars(charge.storagePrice) }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-for="[partner, charge] in partnerCharges" :key="partner">
|
||||
<td>
|
||||
<p>Download <span class="d-none d-md-inline">({{ getEgressPrice(partner) }} per GB)</span></p>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<p>{{ getPeriod(charge) }}</p>
|
||||
</td>
|
||||
<td class="d-none d-sm-table-cell">
|
||||
<p>{{ getEgressAmountAndDimension(charge) }}</p>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<p>{{ centsToDollars(charge.egressPrice) }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-for="[partner, charge] in partnerCharges" :key="partner">
|
||||
<td>
|
||||
<p>Segments <span class="d-none d-md-inline">({{ getSegmentPrice(partner) }} per Segment-Month)</span></p>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<p>{{ getPeriod(charge) }}</p>
|
||||
</td>
|
||||
<td class="d-none d-sm-table-cell">
|
||||
<p>{{ getSegmentCountFormatted(charge) }} Segment-month</p>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<p>{{ centsToDollars(charge.segmentPrice) }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<v-btn class="mt-4 ml-4" variant="outlined" color="default" size="small" @click="downloadReport">
|
||||
<v-btn class="mt-4" variant="outlined" color="default" size="small" @click="downloadReport">
|
||||
Download Report
|
||||
</v-btn>
|
||||
</v-expansion-panel-text>
|
||||
|
||||
@ -40,46 +40,26 @@
|
||||
<v-divider />
|
||||
|
||||
<v-card-item class="pl-7">
|
||||
<template #prepend>
|
||||
<img class="d-block" src="@poc/assets/icon-bookmark-circle.svg" alt="bookmark">
|
||||
</template>
|
||||
|
||||
<h4>Name</h4>
|
||||
<p>{{ bucket.name }}</p>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-item class="pl-7">
|
||||
<template #prepend>
|
||||
<img class="d-block" src="@poc/assets/icon-file-circle.svg" alt="file">
|
||||
</template>
|
||||
|
||||
<h4>Objects</h4>
|
||||
<h4>Files</h4>
|
||||
<p>{{ bucket.objectCount.toLocaleString() }}</p>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-item class="pl-7">
|
||||
<template #prepend>
|
||||
<img class="d-block" src="@poc/assets/icon-globe-circle.svg" alt="globe">
|
||||
</template>
|
||||
|
||||
<h4>Segments</h4>
|
||||
<p>{{ bucket.segmentCount.toLocaleString() }}</p>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-item class="pl-7">
|
||||
<template #prepend>
|
||||
<img class="d-block" src="@poc/assets/icon-calendar-circle.svg" alt="calendar">
|
||||
</template>
|
||||
|
||||
<h4>Date Created</h4>
|
||||
<p>{{ bucket.since.toUTCString() }}</p>
|
||||
</v-card-item>
|
||||
|
||||
<v-card-item class="mb-4 pl-7">
|
||||
<template #prepend>
|
||||
<img class="d-block" src="@poc/assets/icon-clock-circle.svg" alt="clock">
|
||||
</template>
|
||||
|
||||
<h4>Last Updated</h4>
|
||||
<p>{{ bucket.before.toUTCString() }}</p>
|
||||
</v-card-item>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
color="rgba(0, 0, 0, 0.3)"
|
||||
theme="dark"
|
||||
>
|
||||
<v-toolbar-title>
|
||||
<v-toolbar-title class="text-subtitle-2">
|
||||
{{ fileName }}
|
||||
</v-toolbar-title>
|
||||
<template #append>
|
||||
|
||||
@ -40,13 +40,12 @@
|
||||
<div class="pa-7 share-dialog__content" :class="{ 'share-dialog__content--loading': isLoading }">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-alert type="info">
|
||||
Sharing a {{ shareText.toLowerCase() }} will create a publicly shareable URL.
|
||||
Anyone with this link will be able to access your shared {{ shareText.toLowerCase() }}.
|
||||
<v-alert type="info" variant="tonal">
|
||||
Public link sharing. Allows anyone with the link to view your shared {{ shareText.toLowerCase() }}.
|
||||
</v-alert>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 font-weight-bold mb-4">Share via</p>
|
||||
<p class="text-subtitle-2 font-weight-bold mb-3">Share via</p>
|
||||
<v-chip-group class="ma-n2">
|
||||
<v-chip
|
||||
v-for="opt in ShareOptions"
|
||||
@ -67,8 +66,8 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<p class="text-subtitle-2 font-weight-bold mb-2">Copy link</p>
|
||||
<v-textarea :model-value="link" variant="solo-filled" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-body-2">
|
||||
<p class="text-subtitle-2 font-weight-bold mb-2">Shared link</p>
|
||||
<v-textarea :model-value="link" variant="solo-filled" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-caption">
|
||||
<template #append-inner>
|
||||
<input-copy-button :value="link" />
|
||||
</template>
|
||||
@ -83,7 +82,7 @@
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-btn variant="outlined" color="default" block :disabled="isLoading" @click="model = false">
|
||||
Cancel
|
||||
Close
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div v-if="isLoading" class="w-100 h-100 d-flex align-center justify-center mt-n16">
|
||||
<div v-if="isLoading" class="w-100 h-100 d-flex align-center justify-center">
|
||||
<v-progress-circular indeterminate />
|
||||
</div>
|
||||
<v-container v-else-if="!isError" class="w-100 max-h-100 overflow-auto">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<v-container v-if="isLoading" class="fill-height flex-column justify-center align-center mt-n16">
|
||||
<v-container v-if="isLoading" class="fill-height flex-column justify-center align-center">
|
||||
<v-progress-circular indeterminate />
|
||||
</v-container>
|
||||
<text-file-preview v-else-if="previewType === PreviewType.Text" :src="objectPreviewUrl">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="h-100 w-100 mt-n16 d-flex flex-column align-center justify-center">
|
||||
<div class="h-100 w-100 d-flex flex-column align-center justify-center">
|
||||
<p class="mb-5">{{ file?.Key || '' }}</p>
|
||||
<p class="text-h5 mb-5 font-weight-bold">No preview available</p>
|
||||
<v-btn
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
:theme="isDark ? 'dark' : 'light'"
|
||||
:color="isDark ? 'rgba(0, 0, 0, 0.3)' : undefined"
|
||||
:border="isDark"
|
||||
class="w-100 pa-4 mx-auto break-word"
|
||||
class="w-100 pa-7 rounded-lg mx-auto break-word"
|
||||
max-width="calc(100% - 144px)"
|
||||
min-height="100%"
|
||||
>
|
||||
|
||||
@ -10,19 +10,22 @@
|
||||
color="default"
|
||||
icon="mdi-check-circle-outline"
|
||||
size="small"
|
||||
class="mr-3 text-disabled"
|
||||
class="text-disabled pl-2 mr-n3"
|
||||
/>
|
||||
<v-icon
|
||||
v-else
|
||||
color="primary"
|
||||
icon="mdi-check-circle-outline"
|
||||
size="small"
|
||||
class="mr-3 opacity-100"
|
||||
class="opacity-100 pl-2 mr-n3"
|
||||
/>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ title }}
|
||||
<v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="parent">
|
||||
<v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="props">
|
||||
<template #activator="{ props }">
|
||||
<v-icon v-bind="props" size="16" icon="mdi-information-outline" />
|
||||
</template>
|
||||
<slot name="moreInfo" />
|
||||
</v-tooltip>
|
||||
</v-list-item-title>
|
||||
|
||||
@ -41,13 +41,14 @@
|
||||
</InfoBullet>
|
||||
<InfoBullet is-pro title="Segments" :info="segmentInfo">
|
||||
<template #moreInfo>
|
||||
Read more about segment fees in the
|
||||
<a
|
||||
class="link"
|
||||
href="https://docs.storj.io/dcs/billing-payment-and-accounts-1/pricing/billing-and-payment"
|
||||
href="https://docs.storj.io/dcs/pricing#per-segment-fee"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn more about segments
|
||||
documentation
|
||||
</a>
|
||||
</template>
|
||||
</InfoBullet>
|
||||
|
||||
@ -118,9 +118,9 @@
|
||||
|
||||
<v-list-item class="py-2 rounded-lg">
|
||||
<template #prepend>
|
||||
<icon-region size="18" />
|
||||
<icon-satellite size="18" />
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
|
||||
<v-list-item-title class="text-body-2 ml-3">Satellite</v-list-item-title>
|
||||
<v-list-item-subtitle class="ml-3">
|
||||
{{ satelliteName }}
|
||||
</v-list-item-subtitle>
|
||||
@ -201,7 +201,7 @@ import IconCard from '@poc/components/icons/IconCard.vue';
|
||||
import IconUpgrade from '@poc/components/icons/IconUpgrade.vue';
|
||||
import IconSettings from '@poc/components/icons/IconSettings.vue';
|
||||
import IconLogout from '@poc/components/icons/IconLogout.vue';
|
||||
import IconRegion from '@poc/components/icons/IconRegion.vue';
|
||||
import IconSatellite from '@poc/components/icons/IconSatellite.vue';
|
||||
|
||||
const activeTheme = ref<number>(0);
|
||||
const theme = useTheme();
|
||||
|
||||
@ -19,6 +19,7 @@ export const THEME_OPTIONS: ThemeOptions = {
|
||||
warning: '#FF7F00',
|
||||
error: '#FF0149',
|
||||
purple: '#7B61FF',
|
||||
blue7: '#090920',
|
||||
blue6: '#091c45',
|
||||
blue5: '#0218A7',
|
||||
blue4: '#0059D0',
|
||||
@ -40,6 +41,7 @@ export const THEME_OPTIONS: ThemeOptions = {
|
||||
error: '#FF0149',
|
||||
surface: '#090920',
|
||||
purple: '#A18EFF',
|
||||
blue7: '#090920',
|
||||
blue6: '#091c45',
|
||||
blue5: '#2196f3',
|
||||
blue4: '#0059D0',
|
||||
@ -48,7 +50,6 @@ export const THEME_OPTIONS: ThemeOptions = {
|
||||
yellow2: '#FFB701',
|
||||
orange: '#FFA800',
|
||||
warning: '#FF8A00',
|
||||
// green: '#00B150',
|
||||
green: '#00e366',
|
||||
purple2: '#A18EFF',
|
||||
},
|
||||
|
||||
@ -66,6 +66,7 @@ export default createVuetify({
|
||||
},
|
||||
VCheckbox: {
|
||||
color: 'primary',
|
||||
class: 'ml-n1',
|
||||
},
|
||||
VAlert: {
|
||||
rounded: 'xlg',
|
||||
@ -73,8 +74,8 @@ export default createVuetify({
|
||||
VChip: {
|
||||
rounded: 'lg',
|
||||
},
|
||||
// VTable: {
|
||||
// elevation: 0,
|
||||
// },
|
||||
VRadio: {
|
||||
color: 'primary',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -12,17 +12,26 @@ body {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// Global theme
|
||||
.v-theme {
|
||||
--v-medium-emphasis-opacity: 0.7;
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
.v-theme--light {
|
||||
--v-border-color: 0, 0, 0;
|
||||
--v-theme-overlay-multiplier: 0.75 !important;
|
||||
--v-border-opacity: 0.07 !important;
|
||||
// --v-theme-on-background: var(--v-theme-blue6) !important;
|
||||
--v-theme-on-background: var(--v-theme-blue7) !important;
|
||||
--v-theme-on-surface: var(--v-theme-blue7) !important;
|
||||
}
|
||||
|
||||
// Dark Theme
|
||||
.v-theme--dark {
|
||||
--v-theme-overlay-multiplier: 0.75 !important;
|
||||
--v-border-opacity: 0.07 !important;
|
||||
--v-theme-on-surface-variant: 70,70,70 !important;
|
||||
}
|
||||
|
||||
// Nav
|
||||
@ -75,10 +84,15 @@ body {
|
||||
border-color: #a9b0b979;
|
||||
}
|
||||
|
||||
|
||||
// Button focus style
|
||||
.v-btn:focus:active {
|
||||
box-shadow: currentColor 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
|
||||
}
|
||||
// Button focus style for tabs and toggles
|
||||
.v-tabs .v-btn:focus:active, .v-btn-group .v-btn:focus:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
.v-btn--size-default {
|
||||
@ -91,8 +105,7 @@ body {
|
||||
--v-btn-height: 48px;
|
||||
}
|
||||
|
||||
|
||||
// Menu border
|
||||
// Menu
|
||||
.v-menu > .v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-sheet, .v-menu > .v-overlay__content > .v-list {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
|
||||
@ -109,6 +122,20 @@ body {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
// Select Input Menu
|
||||
.v-select__content {
|
||||
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.v-select__content .v-list {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
// List
|
||||
.v-list {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
// Card Light Theme
|
||||
.v-card.v-theme--light {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
@ -121,6 +148,9 @@ body {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
.v-card--variant-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Cards Padding
|
||||
.v-card-item {
|
||||
@ -190,6 +220,11 @@ body {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
// Table Fonts
|
||||
table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Table content
|
||||
.v-list-item__content {
|
||||
white-space: nowrap;
|
||||
@ -203,26 +238,38 @@ body {
|
||||
.v-data-table-footer {
|
||||
border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-data-table-footer .v-field__field {
|
||||
height: 2.25rem;
|
||||
}
|
||||
.v-data-table-footer .v-field {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.v-data-table-footer .v-field__input {
|
||||
padding-top: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Table Fonts
|
||||
table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Table Pagination
|
||||
.v-data-table-footer {
|
||||
justify-content: space-between !important;
|
||||
padding: 12px 18px !important;
|
||||
}
|
||||
.v-data-table-footer .v-field__outline__start, .v-data-table-footer .v-field__outline__end {
|
||||
border-color: rgba(var(--v-theme-on-background),0.1) !important;
|
||||
}
|
||||
.v-data-table-footer__pagination .v-btn {
|
||||
width: auto;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: rgb(var(--v-theme-on-background)) !important;
|
||||
}
|
||||
.v-data-table-footer__items-per-page {
|
||||
padding-inline-end: 8px !important;
|
||||
}
|
||||
.v-data-table-footer__items-per-page>span {
|
||||
color: rgba(var(--v-theme-on-background),0.5);
|
||||
padding-inline-end: 12px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
.v-data-table-footer__info {
|
||||
display: flex;
|
||||
background: rgba(var(--v-theme-on-background),0.02);
|
||||
color: rgba(var(--v-theme-on-background),0.5);
|
||||
padding: 4px 16px !important;
|
||||
border-radius: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// Search styles
|
||||
@ -362,4 +409,59 @@ table {
|
||||
// Opacity
|
||||
.opacity-100 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Light background
|
||||
.bg-light {
|
||||
background-color: rgba(var(--v-theme-on-background), 0.02);
|
||||
}
|
||||
|
||||
// Preview Dialog
|
||||
.preview-card {
|
||||
background: rgb(9 9 9) !important;
|
||||
}
|
||||
|
||||
// Preview Slider Buttons
|
||||
.v-window__controls .v-btn {
|
||||
border: 1px solid rgba(var(--v-border-color), 0.1);
|
||||
transition: all 0.1s ease-in-out;
|
||||
background: transparent;
|
||||
}
|
||||
.v-window__controls .v-btn:hover {
|
||||
border: 1px solid rgba(var(--v-border-color), 0.3);
|
||||
}
|
||||
|
||||
// Card Preview Img
|
||||
.card-preview-img {
|
||||
transition: transform 0.15s ease-in-out;
|
||||
border-bottom: 1px solid rgba(var(--v-theme-on-background), 0.02);
|
||||
}
|
||||
.card-preview-img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
// Card Preview Icon
|
||||
.card-preview-icon {
|
||||
min-height: 240px;
|
||||
border-bottom: 1px solid rgba(var(--v-theme-on-background), 0.02);
|
||||
}
|
||||
.card-preview-icon img {
|
||||
border-radius: 10%;
|
||||
}
|
||||
.card-preview-icon, .card-preview-icon img {
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
.card-preview-icon:hover {
|
||||
background: none;
|
||||
border-bottom-color: rgba(var(--v-theme-on-background), 0.04);
|
||||
}
|
||||
.card-preview-icon:hover img {
|
||||
transform: scale(1.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.v-theme--light .card-preview-icon:hover img {
|
||||
background-color: rgb(var(--v-theme-blue6));
|
||||
}
|
||||
.v-theme--dark .card-preview-icon:hover img {
|
||||
background-color: rgb(var(--v-theme-on-background));
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-card variant="flat" :border="true" color="default" class="mt-2 mb-6 rounded">
|
||||
<v-card variant="outlined" :border="true" color="default" class="mt-2 mb-6 rounded">
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
color="default"
|
||||
@ -53,7 +53,7 @@
|
||||
<div v-if="isLoading" class="pb-2 text-center">
|
||||
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
||||
</div>
|
||||
<v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
|
||||
<v-chip v-else rounded color="green" variant="tonal" class="font-weight-bold mb-2">
|
||||
{{ centsToDollars(priceSummary) }}
|
||||
</v-chip>
|
||||
<v-divider class="my-4" />
|
||||
@ -68,7 +68,7 @@
|
||||
<div v-if="isLoading" class="pb-2 text-center">
|
||||
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
||||
</div>
|
||||
<v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
|
||||
<v-chip v-else rounded color="green" variant="tonal" class="font-weight-bold mb-2">
|
||||
{{ formattedTokenBalance }}
|
||||
</v-chip>
|
||||
<v-divider class="my-4" />
|
||||
@ -85,6 +85,7 @@
|
||||
class="d-flex align-center justify-center"
|
||||
height="200"
|
||||
rounded="xlg"
|
||||
variant="flat"
|
||||
>
|
||||
<v-progress-circular color="primary" size="48" indeterminate />
|
||||
</v-card>
|
||||
@ -94,11 +95,12 @@
|
||||
height="100%"
|
||||
:subtitle="`${isCouponActive ? 'Active' : 'Expired'} / ${couponExpiration}`"
|
||||
rounded="xlg"
|
||||
variant="flat"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-chip
|
||||
:color="isCouponActive ? 'green' : 'error'"
|
||||
variant="outlined"
|
||||
variant="flat"
|
||||
class="font-weight-bold mb-2"
|
||||
rounded
|
||||
>
|
||||
@ -109,7 +111,7 @@
|
||||
|
||||
<v-btn
|
||||
v-if="couponCodeBillingUIEnabled"
|
||||
variant="outlined"
|
||||
variant="flat"
|
||||
color="default"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
@ -128,7 +130,7 @@
|
||||
rounded="xlg"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-chip rounded color="green" variant="outlined" class="font-weight-bold mb-2">
|
||||
<v-chip rounded color="green" variant="flat" class="font-weight-bold mb-2">
|
||||
No Coupon
|
||||
</v-chip>
|
||||
|
||||
@ -151,7 +153,7 @@
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card title="Detailed Usage Report" subtitle="Get a complete usage report for all your projects." border>
|
||||
<v-card title="Detailed Usage Report" subtitle="Get a complete usage report for all your projects." border variant="flat">
|
||||
<v-card-text>
|
||||
<v-btn variant="outlined" color="default" size="small" @click="downloadReport">
|
||||
Download Report
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
Cards
|
||||
</v-btn>
|
||||
</template>
|
||||
Using cards will preview images, which will add up to your Download.
|
||||
Card view shows image previews using download bandwidth.
|
||||
</v-tooltip>
|
||||
<v-btn
|
||||
size="small"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
<v-container class="pb-10">
|
||||
<low-token-balance-banner
|
||||
v-if="isLowBalance && billingEnabled"
|
||||
cta-label="Go to billing"
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
<v-row class="d-flex align-center justify-center mt-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card ref="chartContainer" class="pb-4" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card ref="chartContainer" class="pb-4" variant="outlined" :border="true" rounded="xlg">
|
||||
<template #title>
|
||||
<v-card-title class="d-flex align-center">
|
||||
<IconCloud class="mr-2" width="16" height="16" />
|
||||
@ -113,7 +113,7 @@
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="pb-4" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card class="pb-4" variant="outlined" :border="true" rounded="xlg">
|
||||
<template #title>
|
||||
<v-card-title class="d-flex align-center justify-space-between">
|
||||
<v-row class="ma-0 align-center">
|
||||
@ -121,15 +121,13 @@
|
||||
Download
|
||||
</v-row>
|
||||
<v-row class="ma-0 align-center justify-end">
|
||||
<v-badge dot inline color="#929fb1" />
|
||||
<v-card-text class="pa-0 mx-2 flex-0-0">Download</v-card-text>
|
||||
<v-tooltip width="250" location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-icon v-bind="props" size="20" icon="mdi-information-outline" />
|
||||
<v-icon v-bind="props" size="16" icon="mdi-information-outline" />
|
||||
</template>
|
||||
<template #default>
|
||||
<p>
|
||||
The most recent data points may change as traffic moves from "allocated" to "settled".
|
||||
The most recent data may change as download moves from "allocated" to "settled".
|
||||
<a
|
||||
class="link"
|
||||
href="https://docs.storj.io/dcs/pricing#bandwidth-fee"
|
||||
@ -195,10 +193,12 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-col class="pa-0 mt-6" cols="12">
|
||||
<v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
|
||||
<buckets-data-table />
|
||||
</v-col>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
|
||||
<buckets-data-table />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<edit-project-limit-dialog v-model="isEditLimitDialogShown" :limit-type="limitToChange" />
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<v-container class="fill-height">
|
||||
<v-row align="top" justify="center">
|
||||
<v-col cols="12" sm="9" md="7" lg="5">
|
||||
<v-card v-if="!isMFARequired" title="Log into your account" rounded="xlg" class="pa-2 pa-sm-7">
|
||||
<v-card-item>
|
||||
<v-card v-if="!isMFARequired" title="Login to your Storj account" rounded="xlg" class="pa-2 pa-sm-7">
|
||||
<v-card-text>
|
||||
<v-alert
|
||||
v-if="captchaError"
|
||||
variant="tonal"
|
||||
@ -14,6 +14,7 @@
|
||||
text="HCaptcha is required"
|
||||
rounded="lg"
|
||||
density="comfortable"
|
||||
class="mt-2 mb-3"
|
||||
border
|
||||
/>
|
||||
<v-alert
|
||||
@ -24,6 +25,7 @@
|
||||
:text="isActivatedError ? 'This account has already been verified.' : 'Account verified.'"
|
||||
rounded="lg"
|
||||
density="comfortable"
|
||||
class="mt-2 mb-3"
|
||||
border
|
||||
/>
|
||||
<v-alert
|
||||
@ -34,6 +36,7 @@
|
||||
text="The invite link you used has expired or is invalid."
|
||||
rounded="lg"
|
||||
density="comfortable"
|
||||
class="mt-2 mb-3"
|
||||
border
|
||||
/>
|
||||
<v-alert
|
||||
@ -46,10 +49,9 @@
|
||||
further instructions."
|
||||
rounded="lg"
|
||||
density="comfortable"
|
||||
class="mt-2 mb-3"
|
||||
border
|
||||
/>
|
||||
</v-card-item>
|
||||
<v-card-text>
|
||||
<v-form v-model="formValid" class="pt-4" @submit.prevent>
|
||||
<v-select
|
||||
v-model="satellite"
|
||||
|
||||
@ -14,11 +14,9 @@
|
||||
label="Satellite"
|
||||
:items="items"
|
||||
item-title="satellite"
|
||||
:hint="`Recommended for ${select.hint}.`"
|
||||
persistent-hint
|
||||
return-object
|
||||
chips
|
||||
class="mt-3 mb-5"
|
||||
class="mt-3 mb-2"
|
||||
/>
|
||||
<v-text-field
|
||||
label="Email address"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user