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

web/satellite: update Vuetify proof of concept

Browse Source 
The changes as of storj/vuetify-storj@c801fe6 have been pulled into the
Vuetify proof of concept.

Change-Id: I3db208836cff21287052615d36258fcf2d4c6169
This commit is contained in:
Jeremy Wharton 2023-07-13 00:03:34 -05:00 committed by Storj Robot
parent 5234727886
commit 95761908b5
94 changed files with 4639 additions and 1117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/satellite/index-vuetify.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACDVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////8nbP8obf8pbf8qbv8rb/8sb/8tcP8ucf8vcf8vcv8xc/8zdP81df81dv82dv83d/84eP85eP86ef87ev89e/8+fP8/fP9Aff9Bfv9Cfv9Df/9EgP9FgP9Ggf9Hgv9Jg/9LhP9Mhf9Nhv9Oh/9Ph/9RiP9Rif9Sif9Ui/9Vi/9WjP9Xjf9Yjf9aj/9dkf9ekf9ilP9jlf9llv9nl/9omP9rmv9sm/9tnP9vnf9wnv9yn/91of92ov93o/94o/98pv9/qP+Bqf+Cqv+Eq/+FrP+Hrf+Irv+Jr/+Kr/+Msf+Nsv+Stf+Ttf+Ttv+Utv+Vt/+WuP+XuP+Zuf+Zuv+hv/+kwf+lwv+mwv+nw/+oxP+pxP+pxf+qxf+rxv+yy/+0zP+1zf+3zv+4z/+60P+70f+90v+/0/+/1P/B1f/D1v/E1//F1//F2P/G2P/H2f/I2v/J2v/K2//L3P/P3v/Q3//R4P/S4P/V4v/V4//W4//X5P/Y5P/b5v/b5//c5//d6P/e6f/f6f/g6v/h6//j7P/k7f/l7f/m7v/q8f/r8f/u8//w9f/x9f/x9v/z9//0+P/2+f/3+f/3+v/4+v/5+//6/P/8/f/9/v/+/v////9uCbVDAAAAFXRSTlMABAU4Ozw9PpSWl5ilp6ip4+Tl/P6nIcp/AAAAAWJLR0SuuWuTpwAAAh5JREFUOMtjYGBgYOcXEl6HAYSF+FgZQICJex1OwMkEVIAi3+Xh1ozM5wKaj8xfpBwcITsbWYSNgR+JtzpJYvU6jbAVSEK8DEIITpOZqnxItISWfgVCTJAB7v4ZXpKRC9uMNCqXJci6TID7hQFMrV2zJE7abTKQFesDJGb7SYTOX7sGLAVWUKCgrGZcDeaDFaxb12alqC6XDlMwTyKnRLJ1HbKCddNEc0skJkAVdEssXatRiKqgVmLlatUqqILVpuaOEnLJy4GsIhONuHlAOldVwtJWcwnMDb2i4dPKdHVKV3uqRCdYqU9psVDOmh0vUQN35FTRhevWLU+V0FeZBdTtpSQRvgAoKtuMqmBdpKxvKYjXJ+o+cx0WBRPFO6ABHuesMheLghIdePiutc7AoqBLchZchVMSFgUr9HTS8sEgL1C0E1XBRNGUeeV6OlFONjbqSjY2Nv7mKjnzMyXqYQrW2OsYS8smLkOE5OpsFSkdQ6PlUAU9EgtXq6MFdZ3EkpVKNVAFc8TKW6QbURVMFK1slOyGuSFdUkLOoQtZwSRXaRmpKLgj1y1eMjdIImguTMHCCAnvGcuXQhIMPMl1O8hnrOy31GtfnaNi3oRIcohEu7ZY20DZK0DGTCV7NVKi5UVK40vDJVatU/dfgCTEw8AsgsSdLx+TKjUdOeMAsycnMr/BzrIcmc8ByrycuDMvByM4f7PyCmLL/gK8LEBJALYsGEdXEyupAAAAAElFTkSuQmCC" type="image/x-icon">
<link rel="dns-prefetch" href="https://js.stripe.com">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Storj DCS</title>
</head>
<body>
<div id="app"></div>

90
web/satellite/vite.config-vuetify.js
View File

@ -1,85 +1,55 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { resolve } from 'path';
// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';
import vitePluginRequire from 'vite-plugin-require';
import svgLoader from 'vite-svg-loader';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
const productionBrotliExtensions = ['js', 'css', 'ttf', 'woff', 'woff2'];
const plugins = [
// https://vitejs.dev/config/
export default defineConfig({
base: '/static/dist_vuetify_poc',
plugins: [
vue({
template: { transformAssetUrls }
}),
svgLoader({
svgoConfig: {
plugins: [{ name: 'removeViewBox', fn: () => {} }],
},
}),
vitePluginRequire(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
styles: {
configFile: 'vuetify-poc/src/styles/settings.scss',
},
}),
];
if (process.env.NODE_ENV === 'production') {
plugins.push(viteCompression({
algorithm: 'brotliCompress',
threshold: 1024,
ext: '.br',
filter: new RegExp('\\.(' + productionBrotliExtensions.join('|') + ')$'),
}));
}
if (process.env['STORJ_DEBUG_BUNDLE_SIZE']) {
plugins.push(visualizer({
open: true,
brotliSize: true,
filename: 'analyse.html', // will be saved in project's root
}));
}
export default defineConfig(() => {
return {
base: '/static/dist_vuetify_poc',
plugins,
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': resolve(__dirname, './src'),
'@poc': resolve(__dirname, './vuetify-poc/src'),
'stream': 'stream-browserify',
'util': 'util/',
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)),
},
extensions: ['.js', '.ts', '.svg', '.vue', '.mjs'],
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
build: {
outDir: resolve(__dirname, 'dist_vuetify_poc'),
outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)),
emptyOutDir: true,
rollupOptions: {
input: {
'vuetify-poc': resolve(__dirname, './index-vuetify.html'),
},
external: [
/satellite\/src\/views/,
/satellite\/src\/components/,
/satellite\/src\/router/,
],
'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)),
},
},
optimizeDeps: {
exclude: ['* > vuetify/lib/components'],
},
define: {
'process.env': {},
},
};
});
server: {
port: 3000,
}
})

2
web/satellite/vuetify-poc/src/App.vue
View File

@ -2,9 +2,7 @@
// See LICENSE for copying information.
<template>
<div id="app">
<router-view />
</div>
</template>
<script setup lang="ts">

3
web/satellite/vuetify-poc/src/assets/icon-arrow-down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5335 14.5335C10.2461 14.821 9.78432 14.828 9.48835 14.5546L9.46647 14.5335L1.221 6.28806C0.926335 5.9934 0.926335 5.51566 1.221 5.221C1.50847 4.93352 1.9702 4.92651 2.26617 5.19996L2.28806 5.221L9.99991 12.933L17.7119 5.221C17.9994 4.93352 18.4611 4.92651 18.7571 5.19996L18.779 5.221C19.0665 5.50847 19.0735 5.9702 18.8 6.26617L18.779 6.28806L10.5335 14.5335Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 493 B

3
web/satellite/vuetify-poc/src/assets/icon-arrow-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9809 3.39991L11.0028 3.42094L14.9791 7.39723C15.2665 7.68463 15.2735 8.14625 15.0001 8.44216L14.9791 8.46404L11.0028 12.4403C10.7082 12.7349 10.2306 12.7349 9.93596 12.4403C9.64856 12.1529 9.64155 11.6913 9.91493 11.3954L9.93596 11.3735L12.6243 8.68493L1.55435 8.68498C1.13774 8.68498 0.800003 8.34725 0.800003 7.93063C0.800003 7.52418 1.12146 7.19281 1.52401 7.17688L1.55435 7.17628L12.6243 7.17623L9.93596 4.48775C9.64856 4.20034 9.64155 3.73872 9.91493 3.44282L9.93596 3.42094C10.2234 3.13353 10.685 3.12652 10.9809 3.39991Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

4
web/satellite/vuetify-poc/src/assets/icon-audio-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M23.0565 6.96903C23.1425 7.03306 23.2123 7.11631 23.2603 7.21212C23.3084 7.30794 23.3334 7.41367 23.3333 7.52086V19.8959C23.3334 19.92 23.3321 19.9442 23.3297 19.9683C23.3649 20.692 23.1542 21.4064 22.7317 21.995C22.3093 22.5837 21.7 23.0121 21.0031 23.2103C20.3061 23.4086 19.5626 23.3651 18.8935 23.087C18.2245 22.8089 17.6693 22.3124 17.3183 21.6785C16.9673 21.0446 16.8413 20.3106 16.9606 19.5959C17.08 18.8812 17.4378 18.228 17.9757 17.7425C18.5137 17.2571 19.2001 16.9681 19.9232 16.9225C20.6464 16.8769 21.3637 17.0774 21.9583 17.4914V12.1115L14.1667 14.449V21.7292C14.1667 21.7534 14.1655 21.7776 14.163 21.8016C14.1983 22.5253 13.9875 23.2397 13.5651 23.8284C13.1426 24.4171 12.5333 24.8454 11.8364 25.0437C11.1395 25.242 10.3959 25.1985 9.72688 24.9203C9.05781 24.6422 8.50259 24.1458 8.15162 23.5118C7.80065 22.8779 7.67459 22.1439 7.79397 21.4292C7.91335 20.7145 8.27113 20.0613 8.80907 19.5759C9.34701 19.0905 10.0334 18.8014 10.7566 18.7558C11.4797 18.7102 12.197 18.9108 12.7917 19.3248V10.2709C12.7917 10.1231 12.8393 9.97933 12.9275 9.86078C13.0157 9.74224 13.1397 9.65524 13.2812 9.6127L22.4478 6.8627C22.5505 6.8317 22.6591 6.82517 22.7648 6.84363C22.8705 6.8621 22.9704 6.90504 23.0565 6.96903ZM14.1667 13.0135L21.9583 10.676V8.44486L14.1667 10.7824V13.0135ZM10.9583 20.125C10.4721 20.125 10.0058 20.3182 9.66196 20.662C9.31814 21.0058 9.12499 21.4721 9.12499 21.9584C9.12499 22.4446 9.31814 22.9109 9.66196 23.2547C10.0058 23.5985 10.4721 23.7917 10.9583 23.7917C11.4446 23.7917 11.9109 23.5985 12.2547 23.2547C12.5985 22.9109 12.7917 22.4446 12.7917 21.9584C12.7917 21.4721 12.5985 21.0058 12.2547 20.662C11.9109 20.3182 11.4446 20.125 10.9583 20.125ZM18.2917 20.125C18.2917 20.6113 18.4848 21.0776 18.8286 21.4214C19.1724 21.7652 19.6388 21.9584 20.125 21.9584C20.6112 21.9584 21.0775 21.7652 21.4214 21.4214C21.7652 21.0776 21.9583 20.6113 21.9583 20.125C21.9583 19.6388 21.7652 19.1725 21.4214 18.8287C21.0775 18.4848 20.6112 18.2917 20.125 18.2917C19.6388 18.2917 19.1724 18.4848 18.8286 18.8287C18.4848 19.1725 18.2917 19.6388 18.2917 20.125Z" fill="#FF8A00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

5
web/satellite/vuetify-poc/src/assets/icon-audio-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#FFA800" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#FFA800" stroke-opacity="0.2"/>
<path d="M23.0565 6.96903C23.1425 7.03306 23.2123 7.11631 23.2603 7.21212C23.3084 7.30794 23.3334 7.41367 23.3333 7.52086V19.8959C23.3334 19.92 23.3321 19.9442 23.3297 19.9683C23.3649 20.692 23.1542 21.4064 22.7317 21.995C22.3093 22.5837 21.7 23.0121 21.0031 23.2103C20.3061 23.4086 19.5626 23.3651 18.8936 23.087C18.2245 22.8089 17.6693 22.3124 17.3183 21.6785C16.9673 21.0446 16.8413 20.3106 16.9606 19.5959C17.08 18.8812 17.4378 18.228 17.9757 17.7425C18.5137 17.2571 19.2001 16.9681 19.9232 16.9225C20.6464 16.8769 21.3637 17.0774 21.9583 17.4914V12.1115L14.1667 14.449V21.7292C14.1667 21.7534 14.1655 21.7776 14.163 21.8016C14.1983 22.5253 13.9875 23.2397 13.5651 23.8284C13.1426 24.4171 12.5333 24.8454 11.8364 25.0437C11.1395 25.242 10.396 25.1985 9.72688 24.9203C9.05782 24.6422 8.5026 24.1458 8.15163 23.5118C7.80066 22.8779 7.6746 22.1439 7.79398 21.4292C7.91336 20.7145 8.27114 20.0613 8.80908 19.5759C9.34702 19.0905 10.0334 18.8014 10.7566 18.7558C11.4797 18.7102 12.197 18.9108 12.7917 19.3248V10.2709C12.7917 10.1231 12.8393 9.97933 12.9275 9.86078C13.0157 9.74224 13.1397 9.65524 13.2812 9.6127L22.4478 6.8627C22.5505 6.8317 22.6591 6.82517 22.7648 6.84363C22.8705 6.8621 22.9704 6.90504 23.0565 6.96903V6.96903ZM14.1667 13.0135L21.9583 10.676V8.44486L14.1667 10.7824V13.0135ZM10.9583 20.125C10.4721 20.125 10.0058 20.3182 9.66197 20.662C9.31815 21.0058 9.125 21.4721 9.125 21.9584C9.125 22.4446 9.31815 22.9109 9.66197 23.2547C10.0058 23.5985 10.4721 23.7917 10.9583 23.7917C11.4446 23.7917 11.9109 23.5985 12.2547 23.2547C12.5985 22.9109 12.7917 22.4446 12.7917 21.9584C12.7917 21.4721 12.5985 21.0058 12.2547 20.662C11.9109 20.3182 11.4446 20.125 10.9583 20.125ZM18.2917 20.125C18.2917 20.6113 18.4848 21.0776 18.8286 21.4214C19.1725 21.7652 19.6388 21.9584 20.125 21.9584C20.6112 21.9584 21.0775 21.7652 21.4214 21.4214C21.7652 21.0776 21.9583 20.6113 21.9583 20.125C21.9583 19.6388 21.7652 19.1725 21.4214 18.8287C21.0775 18.4848 20.6112 18.2917 20.125 18.2917C19.6388 18.2917 19.1725 18.4848 18.8286 18.8287C18.4848 19.1725 18.2917 19.6388 18.2917 20.125Z" fill="#FFA800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

5
web/satellite/vuetify-poc/src/assets/icon-back-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#537CFF" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#537CFF" stroke-opacity="0.2"/>
<path d="M11.6989 16.4802C11.4402 16.2215 11.4339 15.8059 11.68 15.5395L11.6989 15.5198L19.1198 8.09892C19.385 7.83373 19.815 7.83373 20.0802 8.09892C20.3389 8.35765 20.3452 8.77321 20.0991 9.03958L20.0802 9.05928L13.1393 15.9999L20.0802 22.9408C20.3389 23.1995 20.3452 23.6151 20.0991 23.8814L20.0802 23.9011C19.8215 24.1599 19.4059 24.1662 19.1395 23.9201L19.1198 23.9011L11.6989 16.4802Z" fill="#537CFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 678 B

6
web/satellite/vuetify-poc/src/assets/icon-bucket-color.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M10 12L16 13.2L22 12L20 22.5L18.5 23L16 23.4L13.5 23L12 22.5L10 12Z" fill="#D7E8FF"/>
<ellipse cx="16" cy="11" rx="6" ry="2" fill="white"/>
<path d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8318 23.2006 10.7863 22.0841L10.7858 22.0638L8.84465 11.066C8.8228 10.9882 8.80882 10.9095 8.80303 10.8299L8.79999 10.8122L8.80189 10.8123C8.80062 10.7903 8.79999 10.7682 8.79999 10.746C8.79999 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2961 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5651 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0527 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2961 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.3549 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9576 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9576 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z" fill="#0149FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
web/satellite/vuetify-poc/src/assets/icon-bucket-tonal.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#0149FF" fill-opacity="0.05"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#0149FF" stroke-opacity="0.2"/>
<path d="M10 12L16 13.2L22 12L20 22.5L18.5 23L16 23.4L13.5 23L12 22.5L10 12Z" fill="#0149FF" fill-opacity="0.2"/>
<path d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z" fill="#0149FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

3
web/satellite/vuetify-poc/src/assets/icon-check-color.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0566 3.47049C14.4084 3.82234 14.417 4.38746 14.0823 4.74971L14.0566 4.77649L7.13827 11.6948C7.00266 11.8304 6.8361 11.9169 6.66103 11.9539C6.35998 12.0545 6.01478 11.991 5.76673 11.7589L5.75596 11.7487L1.87048 7.86338C1.50984 7.50274 1.50984 6.91803 1.87048 6.55739C2.22232 6.20555 2.78744 6.19696 3.14969 6.53165L3.17647 6.55739L6.42021 9.80089L12.7506 3.47049C13.1112 3.10985 13.696 3.10985 14.0566 3.47049Z" fill="#00D36E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 544 B

3
web/satellite/vuetify-poc/src/assets/icon-close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8429 1.15699C17.1857 1.49977 17.1857 2.05553 16.8429 2.39831L10.2412 8.99979L16.7865 15.5451C17.1293 15.8878 17.1293 16.4436 16.7865 16.7864C16.4437 17.1292 15.888 17.1292 15.5452 16.7864L8.99991 10.2411L2.39844 16.8428C2.05565 17.1856 1.49989 17.1856 1.15711 16.8428C0.814329 16.5 0.814329 15.9443 1.15711 15.6015L7.7587 8.99968L1.21353 2.45474C0.870753 2.11195 0.870753 1.5562 1.21353 1.21341C1.55632 0.870631 2.11208 0.870631 2.45486 1.21341L9.00002 7.75835L15.6016 1.15699C15.9444 0.814207 16.5002 0.814207 16.8429 1.15699Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 700 B

3
web/satellite/vuetify-poc/src/assets/icon-download.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6275 16.4385L11.5989 16.4109L6.51469 11.3268C6.1286 10.9407 6.1286 10.3147 6.51469 9.92861C6.89136 9.55194 7.49635 9.54276 7.88416 9.90105L7.91283 9.92861L11.3423 13.3582V2.18835C11.3423 1.64234 11.785 1.19971 12.331 1.19971C12.8637 1.19971 13.298 1.62101 13.3188 2.14858L13.3196 2.18835V13.2924L16.683 9.92861C17.0597 9.55194 17.6647 9.54276 18.0525 9.90105L18.0812 9.92861C18.4579 10.3053 18.467 10.9103 18.1087 11.2981L18.0812 11.3268L12.997 16.4109C12.6203 16.7876 12.0153 16.7968 11.6275 16.4385ZM23.3012 20.8529C23.3012 21.399 22.8585 21.8416 22.3125 21.8416H2.71949C2.17348 21.8416 1.73085 21.399 1.73085 20.8529C1.73085 20.3069 2.17348 19.8643 2.71949 19.8643H22.3125C22.8585 19.8643 23.3012 20.3069 23.3012 20.8529ZM2.68981 21.7665C2.1438 21.7665 1.70117 21.3239 1.70117 20.7779V16.8233C1.70117 16.2773 2.1438 15.8347 2.68981 15.8347C3.23582 15.8347 3.67845 16.2773 3.67845 16.8233V20.7779C3.67845 21.3239 3.23582 21.7665 2.68981 21.7665ZM22.2829 21.7665C21.7368 21.7665 21.2942 21.3239 21.2942 20.7779V16.8233C21.2942 16.2773 21.7368 15.8347 22.2829 15.8347C22.8289 15.8347 23.2715 16.2773 23.2715 16.8233V20.7779C23.2715 21.3239 22.8289 21.7665 22.2829 21.7665Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
web/satellite/vuetify-poc/src/assets/icon-dropdown.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.26677 7.26676C5.12303 7.4105 4.89216 7.41401 4.74418 7.27728L4.73323 7.26676L0.610498 3.14403C0.463168 2.9967 0.463168 2.75783 0.610498 2.6105C0.754235 2.46676 0.985101 2.46325 1.13309 2.59998L1.14403 2.6105L4.99996 6.46651L8.85597 2.6105C8.99971 2.46676 9.23057 2.46326 9.37856 2.59998L9.3895 2.6105C9.53324 2.75423 9.53674 2.9851 9.40002 3.13309L9.3895 3.14403L5.26677 7.26676Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 513 B

4
web/satellite/vuetify-poc/src/assets/icon-file-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 865 B

5
web/satellite/vuetify-poc/src/assets/icon-file-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#929FB1" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#929FB1" stroke-opacity="0.2"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="#929FB1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 945 B

3
web/satellite/vuetify-poc/src/assets/icon-file.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.85066 0.900024C10.2768 0.900024 10.6854 1.06929 10.9867 1.37057L15.2161 5.5999C15.5174 5.9012 15.6867 6.30985 15.6867 6.73596V14.5562C15.6867 15.9611 14.5478 17.1 13.1429 17.1H5.2438C3.8389 17.1 2.70001 15.9611 2.70001 14.5562V3.44392C2.70001 2.03902 3.8389 0.900024 5.2438 0.900024H9.85066ZM9.19322 2.37274H5.2438C4.66346 2.37274 4.19087 2.83442 4.17324 3.41055L4.17273 3.44392V14.5562C4.17273 15.1366 4.63434 15.6092 5.21044 15.6268L5.2438 15.6273H13.1429C13.7233 15.6273 14.1959 15.1657 14.2135 14.5896L14.214 14.5562V7.39337L9.92972 7.39348C9.53296 7.39348 9.20949 7.07968 9.19394 6.68673L9.19336 6.65712L9.19322 2.37274ZM13.4542 5.92065L10.6659 3.13253L10.6661 5.92076L13.4542 5.92065Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

6
web/satellite/vuetify-poc/src/assets/icon-folder-color.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M14.0921 8.8388C14.262 8.87058 14.413 8.92335 14.5657 9.00432L14.6141 9.03075C14.7479 9.10599 14.8815 9.20167 15.1907 9.45465L17.3211 11.1977H20.4951C21.7484 11.1977 22.2029 11.3282 22.6611 11.5732C23.1193 11.8183 23.4788 12.1778 23.7239 12.636L23.7502 12.686C23.9782 13.1283 24.0994 13.5943 24.0994 14.802V19.492C24.0994 20.984 23.9441 21.5251 23.6523 22.0705C23.3606 22.616 22.9326 23.044 22.3871 23.3358L22.3325 23.3645L22.2787 23.3918C21.775 23.6428 21.2218 23.778 19.8812 23.7828H12.1902C10.6982 23.7828 10.1572 23.6275 9.61172 23.3358C9.06626 23.044 8.63819 22.616 8.34647 22.0705L8.31776 22.0159C8.04929 21.497 7.90446 20.9534 7.89941 19.5658V11.9103C7.89941 11.1539 8.02131 10.6527 8.25099 10.2185C8.48068 9.78435 8.81814 9.44241 9.24927 9.20702C9.68039 8.97163 10.1798 8.84313 10.9362 8.83315L13.4141 8.80067L13.5404 8.80017C13.8263 8.80057 13.9533 8.81284 14.0921 8.8388ZM13.4743 10.2729L13.3421 10.2743L10.9556 10.3058L10.8486 10.3081C10.4171 10.322 10.1653 10.3848 9.95501 10.4996C9.77753 10.5965 9.64736 10.7284 9.5528 10.9072C9.43831 11.1236 9.37872 11.3828 9.37266 11.832C9.3761 11.856 9.37825 11.8801 9.37921 11.9044L9.37979 11.9341C9.37979 12.4966 9.82707 12.9547 10.3854 12.9721L10.4184 12.9726H13.8832C13.947 12.9726 14.0092 12.9544 14.0627 12.9204L14.0851 12.9049L15.6423 11.7271L14.179 10.53C14.0019 10.3863 13.9389 10.3408 13.889 10.3127L13.8757 10.3054C13.8545 10.2942 13.8449 10.2908 13.8213 10.2864L13.7903 10.2815L13.7691 10.279C13.7162 10.2738 13.6365 10.2717 13.4743 10.2729Z" fill="#FFC600"/>
<path d="M14.0921 8.8388C14.262 8.87058 14.413 8.92335 14.5657 9.00432L14.6141 9.03075C14.7479 9.10599 14.8815 9.20167 15.1907 9.45465L17.3211 11.1977H20.4951C21.7484 11.1977 22.2029 11.3282 22.6611 11.5732C23.1193 11.8183 23.4788 12.1778 23.7239 12.636L23.7502 12.686C23.9782 13.1283 24.0994 13.5943 24.0994 14.802V19.492C24.0994 20.984 23.9441 21.5251 23.6523 22.0705C23.3606 22.616 22.9326 23.044 22.3871 23.3358L22.3325 23.3645L22.2787 23.3918C21.775 23.6428 21.2218 23.778 19.8812 23.7828H12.1902C10.6982 23.7828 10.1572 23.6275 9.61172 23.3358C9.06626 23.044 8.63819 22.616 8.34647 22.0705L8.31776 22.0159C8.04929 21.497 7.90446 20.9534 7.89941 19.5658V11.9103C7.89941 11.1539 8.02131 10.6527 8.25099 10.2185C8.48068 9.78435 8.81814 9.44241 9.24927 9.20702C9.68039 8.97163 10.1798 8.84313 10.9362 8.83315L13.4141 8.80067L13.5404 8.80017C13.8263 8.80057 13.9533 8.81284 14.0921 8.8388ZM14.9734 14.0796C14.6731 14.3066 14.3099 14.434 13.9345 14.4446L13.8832 14.4454H10.4184C10.045 14.4454 9.69062 14.3639 9.3721 14.2177V19.5606L9.37361 19.7417L9.37541 19.8619C9.39131 20.7189 9.4664 21.0417 9.64514 21.376C9.7996 21.6648 10.0174 21.8826 10.3063 22.0371L10.3482 22.059L10.3931 22.0812C10.7164 22.2359 11.0763 22.2997 11.9497 22.3089L12.1902 22.3101L19.9319 22.3098C20.9739 22.3046 21.3292 22.2314 21.6926 22.0371C21.9814 21.8826 22.1992 21.6648 22.3537 21.376L22.3756 21.334L22.3978 21.2891C22.5525 20.9659 22.6163 20.6059 22.6255 19.7325L22.6267 19.492V14.802C22.6267 13.8816 22.574 13.6087 22.4252 13.3306C22.3174 13.129 22.1681 12.9797 21.9665 12.8719L21.9317 12.8538C21.6703 12.7218 21.3896 12.6726 20.5518 12.6705L16.8367 12.6704L14.9734 14.0796Z" fill="white"/>
<path d="M14.0921 8.8388C14.262 8.87058 14.413 8.92335 14.5657 9.00432L14.6141 9.03075C14.7479 9.10599 14.8815 9.20167 15.1907 9.45465L17.3211 11.1977H20.4951C21.7484 11.1977 22.2029 11.3282 22.6611 11.5732C23.1193 11.8183 23.4788 12.1778 23.7239 12.636L23.7502 12.686C23.9782 13.1283 24.0994 13.5943 24.0994 14.802V19.492C24.0994 20.984 23.9441 21.5251 23.6523 22.0705C23.3606 22.616 22.9326 23.044 22.3871 23.3358L22.3325 23.3645L22.2787 23.3918C21.775 23.6428 21.2218 23.778 19.8812 23.7828H12.1902C10.6982 23.7828 10.1572 23.6275 9.61172 23.3358C9.06626 23.044 8.63819 22.616 8.34647 22.0705L8.31776 22.0159C8.04929 21.497 7.90446 20.9534 7.89941 19.5658V11.9103C7.89941 11.1539 8.02131 10.6527 8.25099 10.2185C8.48068 9.78435 8.81814 9.44241 9.24927 9.20702C9.68039 8.97163 10.1798 8.84313 10.9362 8.83315L13.4141 8.80067L13.5404 8.80017C13.8263 8.80057 13.9533 8.81284 14.0921 8.8388ZM14.9734 14.0796C14.6731 14.3066 14.3099 14.434 13.9345 14.4446L13.8832 14.4454H10.4184C10.045 14.4454 9.69062 14.3639 9.3721 14.2177V19.5606L9.37361 19.7417L9.37541 19.8619C9.39131 20.7189 9.4664 21.0417 9.64514 21.376C9.7996 21.6648 10.0174 21.8826 10.3063 22.0371L10.3482 22.059L10.3931 22.0812C10.7164 22.2359 11.0763 22.2997 11.9497 22.3089L12.1902 22.3101L19.9319 22.3098C20.9739 22.3046 21.3292 22.2314 21.6926 22.0371C21.9814 21.8826 22.1992 21.6648 22.3537 21.376L22.3756 21.334L22.3978 21.2891C22.5525 20.9659 22.6163 20.6059 22.6255 19.7325L22.6267 19.492V14.802C22.6267 13.8816 22.574 13.6087 22.4252 13.3306C22.3174 13.129 22.1681 12.9797 21.9665 12.8719L21.9317 12.8538C21.6703 12.7218 21.3896 12.6726 20.5518 12.6705L16.8367 12.6704L14.9734 14.0796ZM13.4743 10.2729L13.3421 10.2743L10.9556 10.3058L10.8486 10.3081C10.4171 10.322 10.1653 10.3848 9.95501 10.4996C9.77753 10.5965 9.64736 10.7284 9.5528 10.9072C9.43831 11.1236 9.37872 11.3828 9.37266 11.832C9.3761 11.856 9.37825 11.8801 9.37921 11.9044L9.37979 11.9341C9.37979 12.4966 9.82707 12.9547 10.3854 12.9721L10.4184 12.9726H13.8832C13.947 12.9726 14.0092 12.9544 14.0627 12.9204L14.0851 12.9049L15.6423 11.7271L14.179 10.53C14.0019 10.3863 13.9389 10.3408 13.889 10.3127L13.8757 10.3054C13.8545 10.2942 13.8449 10.2908 13.8213 10.2864L13.7903 10.2815L13.7691 10.279C13.7162 10.2738 13.6365 10.2717 13.4743 10.2729Z" fill="#FFA800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

6
web/satellite/vuetify-poc/src/assets/icon-folder-tonal.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#FFA800" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#FFA800" stroke-opacity="0.2"/>
<path d="M14.0921 8.8388C14.262 8.87058 14.413 8.92335 14.5657 9.00432L14.6141 9.03075C14.7479 9.10599 14.8815 9.20167 15.1907 9.45465L17.3211 11.1977H20.4951C21.7484 11.1977 22.2029 11.3282 22.6611 11.5732C23.1193 11.8183 23.4788 12.1778 23.7239 12.636L23.7502 12.686C23.9782 13.1283 24.0994 13.5943 24.0994 14.802V19.492C24.0994 20.984 23.9441 21.5251 23.6523 22.0705C23.3606 22.616 22.9326 23.044 22.3871 23.3358L22.3325 23.3645L22.2787 23.3918C21.775 23.6428 21.2218 23.778 19.8812 23.7828H12.1902C10.6982 23.7828 10.1572 23.6275 9.61172 23.3358C9.06626 23.044 8.63819 22.616 8.34647 22.0705L8.31776 22.0159C8.04929 21.497 7.90446 20.9534 7.89941 19.5658V11.9103C7.89941 11.1539 8.02131 10.6527 8.25099 10.2185C8.48068 9.78435 8.81814 9.44241 9.24927 9.20702C9.68039 8.97163 10.1798 8.84313 10.9362 8.83315L13.4141 8.80067L13.5404 8.80017C13.8263 8.80057 13.9533 8.81284 14.0921 8.8388ZM13.4743 10.2729L13.3421 10.2743L10.9556 10.3058L10.8486 10.3081C10.4171 10.322 10.1653 10.3848 9.95501 10.4996C9.77753 10.5965 9.64736 10.7284 9.5528 10.9072C9.43831 11.1236 9.37872 11.3828 9.37266 11.832C9.3761 11.856 9.37825 11.8801 9.37921 11.9044L9.37979 11.9341C9.37979 12.4966 9.82707 12.9547 10.3854 12.9721L10.4184 12.9726H13.8832C13.947 12.9726 14.0092 12.9544 14.0627 12.9204L14.0851 12.9049L15.6423 11.7271L14.179 10.53C14.0019 10.3863 13.9389 10.3408 13.889 10.3127L13.8757 10.3054C13.8545 10.2942 13.8449 10.2908 13.8213 10.2864L13.7903 10.2815L13.7691 10.279C13.7162 10.2738 13.6365 10.2717 13.4743 10.2729Z" fill="#FFC600" fill-opacity="0.5"/>
<path d="M14.0921 8.8388C14.262 8.87058 14.413 8.92335 14.5657 9.00432L14.6141 9.03075C14.7479 9.10599 14.8815 9.20167 15.1907 9.45465L17.3211 11.1977H20.4951C21.7484 11.1977 22.2029 11.3282 22.6611 11.5732C23.1193 11.8183 23.4788 12.1778 23.7239 12.636L23.7502 12.686C23.9782 13.1283 24.0994 13.5943 24.0994 14.802V19.492C24.0994 20.984 23.9441 21.5251 23.6523 22.0705C23.3606 22.616 22.9326 23.044 22.3871 23.3358L22.3325 23.3645L22.2787 23.3918C21.775 23.6428 21.2218 23.778 19.8812 23.7828H12.1902C10.6982 23.7828 10.1572 23.6275 9.61172 23.3358C9.06626 23.044 8.63819 22.616 8.34647 22.0705L8.31776 22.0159C8.04929 21.497 7.90446 20.9534 7.89941 19.5658V11.9103C7.89941 11.1539 8.02131 10.6527 8.25099 10.2185C8.48068 9.78435 8.81814 9.44241 9.24927 9.20702C9.68039 8.97163 10.1798 8.84313 10.9362 8.83315L13.4141 8.80067L13.5404 8.80017C13.8263 8.80057 13.9533 8.81284 14.0921 8.8388ZM14.9734 14.0796C14.6731 14.3066 14.3099 14.434 13.9345 14.4446L13.8832 14.4454H10.4184C10.045 14.4454 9.69062 14.3639 9.3721 14.2177V19.5606L9.37361 19.7417L9.37541 19.8619C9.39131 20.7189 9.4664 21.0417 9.64514 21.376C9.7996 21.6648 10.0174 21.8826 10.3063 22.0371L10.3482 22.059L10.3931 22.0812C10.7164 22.2359 11.0763 22.2997 11.9497 22.3089L12.1902 22.3101L19.9319 22.3098C20.9739 22.3046 21.3292 22.2314 21.6926 22.0371C21.9814 21.8826 22.1992 21.6648 22.3537 21.376L22.3756 21.334L22.3978 21.2891C22.5525 20.9659 22.6163 20.6059 22.6255 19.7325L22.6267 19.492V14.802C22.6267 13.8816 22.574 13.6087 22.4252 13.3306C22.3174 13.129 22.1681 12.9797 21.9665 12.8719L21.9317 12.8538C21.6703 12.7218 21.3896 12.6726 20.5518 12.6705L16.8367 12.6704L14.9734 14.0796ZM13.4743 10.2729L13.3421 10.2743L10.9556 10.3058L10.8486 10.3081C10.4171 10.322 10.1653 10.3848 9.95501 10.4996C9.77753 10.5965 9.64736 10.7284 9.5528 10.9072C9.43831 11.1236 9.37872 11.3828 9.37266 11.832C9.3761 11.856 9.37825 11.8801 9.37921 11.9044L9.37979 11.9341C9.37979 12.4966 9.82707 12.9547 10.3854 12.9721L10.4184 12.9726H13.8832C13.947 12.9726 14.0092 12.9544 14.0627 12.9204L14.0851 12.9049L15.6423 11.7271L14.179 10.53C14.0019 10.3863 13.9389 10.3408 13.889 10.3127L13.8757 10.3054C13.8545 10.2942 13.8449 10.2908 13.8213 10.2864L13.7903 10.2815L13.7691 10.279C13.7162 10.2738 13.6365 10.2717 13.4743 10.2729Z" fill="#FFA800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

3
web/satellite/vuetify-poc/src/assets/icon-geo-distribution.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 1.2002C15.9833 1.2002 19.0814 2.84925 21.0563 5.40926C20.6658 5.24878 20.2382 5.1602 19.79 5.1602C19.2217 5.1602 18.6868 5.30251 18.2187 5.55344C18.2762 5.51368 18.3349 5.47577 18.395 5.43974C16.8329 4.03495 14.7663 3.1802 12.5 3.1802C10.5465 3.1802 8.74137 3.81525 7.27976 4.89018L9.34995 4.8902C11.3879 4.8902 13.04 6.54226 13.04 8.58019C13.04 10.5973 11.4214 12.2364 9.41221 12.2697L9.34995 12.2702H7.72995C7.23289 12.2702 6.82995 12.6731 6.82995 13.1702C6.82995 13.6542 7.21197 14.0489 7.69091 14.0694L7.72995 14.0702H8.04495C9.78967 14.0702 11.2078 15.4687 11.2394 17.2058L11.24 17.3102C11.24 18.6106 10.4739 19.732 9.36842 20.2479C10.3415 20.6178 11.3971 20.8202 12.5 20.8202C13.5225 20.8202 14.5044 20.6462 15.4177 20.3262C14.1228 19.7533 13.2193 18.4573 13.2193 16.9502C13.2193 14.9331 14.8378 13.294 16.847 13.2607L16.9093 13.2602H20.3293C20.8263 13.2602 21.2293 12.8573 21.2293 12.3602C21.2293 12.0662 21.0883 11.805 20.8702 11.6408C21.8908 11.2912 22.6876 10.4595 22.9891 9.41746C23.1922 10.245 23.3 11.11 23.3 12.0002C23.3 17.9649 18.4646 22.8002 12.5 22.8002C6.53528 22.8002 1.69995 17.9649 1.69995 12.0002C1.69995 6.03552 6.53528 1.2002 12.5 1.2002ZM20.716 15.2144L20.6685 15.2204C20.5756 15.2313 20.4814 15.2378 20.386 15.2396L20.3293 15.2402H16.9093C15.9649 15.2402 15.1993 16.0058 15.1993 16.9502C15.1993 17.8783 15.9387 18.6337 16.8606 18.6595L16.9093 18.6602L18.2825 18.6603C19.3497 17.7329 20.1917 16.5534 20.716 15.2144ZM9.34995 6.8702L5.32447 6.8702C4.28927 8.31559 3.67995 10.0867 3.67995 12.0002C3.67995 14.6103 4.81368 16.9555 6.61555 18.5704L7.99995 18.5702C8.68133 18.5702 9.23639 18.0293 9.25922 17.3535L9.25995 17.3102V17.2652C9.25995 16.6084 8.73888 16.0734 8.08761 16.0509L8.04495 16.0502H7.72995C6.13937 16.0502 4.84995 14.7608 4.84995 13.1702C4.84995 11.5986 6.10885 10.3209 7.67327 10.2907L7.72995 10.2902H9.34995C10.2944 10.2902 11.06 9.5246 11.06 8.58019C11.06 7.65207 10.3205 6.89665 9.39864 6.87087L9.34995 6.8702ZM19.7279 6.51134C20.8214 6.51134 21.7079 7.39781 21.7079 8.49134C21.7079 9.58486 20.8214 10.4713 19.7279 10.4713C18.6344 10.4713 17.7479 9.58486 17.7479 8.49134C17.7479 7.39781 18.6344 6.51134 19.7279 6.51134Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
web/satellite/vuetify-poc/src/assets/icon-image-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M17.7533 7L18.0235 7.00105C20.34 7.01951 21.2206 7.28039 22.1081 7.75504C23.0293 8.24771 23.7523 8.97068 24.245 9.89189L24.2806 9.95931C24.7443 10.8472 24.9936 11.7648 25 14.1541V17.7533C25 20.0455 24.7829 21.0087 24.3728 21.8574C24.3441 21.9599 24.2948 22.0579 24.2251 22.145L24.245 22.1081C23.7523 23.0293 23.0293 23.7523 22.1081 24.245L22.0407 24.2806C21.1526 24.7444 20.2349 24.9937 17.8448 25H14.2467C11.7269 25 10.8131 24.7376 9.89189 24.245C8.97068 23.7523 8.24771 23.0293 7.75504 22.1081L7.7194 22.0407C7.2556 21.1526 7.00628 20.2349 7 17.8448V14.2467C7 11.7269 7.26237 10.8131 7.75504 9.89189C8.24771 8.97068 8.97068 8.24771 9.89189 7.75504L9.95931 7.7194C10.8472 7.25567 11.7648 7.00636 14.1541 7H17.7533ZM10.8382 15.3679L8.63621 16.8954L8.63636 17.8406L8.63807 18.1028C8.65498 19.8298 8.798 20.5566 9.14866 21.2423L9.16607 21.276L9.198 21.3364C9.53816 21.9724 10.0276 22.4618 10.6636 22.802L10.7322 22.838C11.4523 23.2086 12.1867 23.3506 13.9827 23.3628L14.2466 23.3636H17.8406L18.1028 23.3619C18.1338 23.3616 18.1646 23.3613 18.195 23.3609L10.8382 15.3679ZM19.1338 18.3973L17.2838 19.9546L20.2649 23.1937C20.6482 23.1133 20.949 23.0013 21.2423 22.8513L21.276 22.8339L21.3364 22.802C21.8252 22.5406 22.2274 22.191 22.5418 21.7545L19.1338 18.3973ZM17.8429 8.63636H14.2467C12.2971 8.63636 11.5103 8.7717 10.7904 9.13215L10.724 9.16607L10.6636 9.198C10.0276 9.53816 9.53816 10.0276 9.198 10.6636L9.16201 10.7322C8.79141 11.4523 8.64937 12.1867 8.63723 13.9827L8.63636 14.2466L8.63621 14.9038L10.4912 13.617C10.8167 13.3912 11.2554 13.4318 11.534 13.7085L11.5596 13.7352L12.7035 14.9781C13.2093 12.7526 15.1918 11.0909 17.562 11.0909C20.3153 11.0909 22.5455 13.3332 22.5455 16.097C22.5455 17.0388 22.2854 17.9441 21.8021 18.7285L23.2207 20.1265C23.3138 19.6162 23.3564 18.9644 23.3628 18.0172L23.3636 17.7533V14.2467C23.3636 12.2971 23.2283 11.5103 22.8678 10.7904L22.8339 10.724L22.802 10.6636C22.4618 10.0276 21.9724 9.53816 21.3364 9.198L21.2678 9.16201C20.5248 8.77964 19.7667 8.64058 17.8429 8.63636ZM17.562 12.7273C15.7144 12.7273 14.2149 14.235 14.2149 16.097C14.2149 16.2921 14.2313 16.4846 14.2635 16.6734L16.1745 18.7494L18.6503 16.6653C18.9636 16.4015 19.4217 16.4111 19.7236 16.6822L19.7514 16.7084L20.5903 17.5347C20.7988 17.0907 20.9091 16.6027 20.9091 16.097C20.9091 14.235 19.4095 12.7273 17.562 12.7273Z" fill="#7B61FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

5
web/satellite/vuetify-poc/src/assets/icon-image-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#7B61FF" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#7B61FF" stroke-opacity="0.2"/>
<path d="M17.7533 7L18.0235 7.00105C20.34 7.01951 21.2206 7.28039 22.1081 7.75504C23.0293 8.24771 23.7523 8.97068 24.245 9.89189L24.2806 9.95931C24.7443 10.8472 24.9936 11.7648 25 14.1541V17.7533C25 20.0455 24.7829 21.0087 24.3728 21.8574C24.3441 21.9599 24.2948 22.0579 24.2251 22.145L24.245 22.1081C23.7523 23.0293 23.0293 23.7523 22.1081 24.245L22.0407 24.2806C21.1526 24.7444 20.2349 24.9937 17.8448 25H14.2467C11.7269 25 10.8131 24.7376 9.89189 24.245C8.97068 23.7523 8.24771 23.0293 7.75504 22.1081L7.7194 22.0407C7.2556 21.1526 7.00628 20.2349 7 17.8448V14.2467C7 11.7269 7.26237 10.8131 7.75504 9.89189C8.24771 8.97068 8.97068 8.24771 9.89189 7.75504L9.95931 7.7194C10.8472 7.25567 11.7648 7.00636 14.1541 7H17.7533ZM10.8382 15.3679L8.63621 16.8954L8.63636 17.8406L8.63807 18.1028C8.65498 19.8298 8.798 20.5566 9.14866 21.2423L9.16607 21.276L9.198 21.3364C9.53816 21.9724 10.0276 22.4618 10.6636 22.802L10.7322 22.838C11.4523 23.2086 12.1867 23.3506 13.9827 23.3628L14.2466 23.3636H17.8406L18.1028 23.3619C18.1338 23.3616 18.1646 23.3613 18.195 23.3609L10.8382 15.3679ZM19.1338 18.3973L17.2838 19.9546L20.2649 23.1937C20.6482 23.1133 20.949 23.0013 21.2423 22.8513L21.276 22.8339L21.3364 22.802C21.8252 22.5406 22.2274 22.191 22.5418 21.7545L19.1338 18.3973ZM17.8429 8.63636H14.2467C12.2971 8.63636 11.5103 8.7717 10.7904 9.13215L10.724 9.16607L10.6636 9.198C10.0276 9.53816 9.53816 10.0276 9.198 10.6636L9.16201 10.7322C8.79141 11.4523 8.64937 12.1867 8.63723 13.9827L8.63636 14.2466L8.63621 14.9038L10.4912 13.617C10.8167 13.3912 11.2554 13.4318 11.534 13.7085L11.5596 13.7352L12.7035 14.9781C13.2093 12.7526 15.1918 11.0909 17.562 11.0909C20.3153 11.0909 22.5455 13.3332 22.5455 16.097C22.5455 17.0388 22.2854 17.9441 21.8021 18.7285L23.2207 20.1265C23.3138 19.6162 23.3564 18.9644 23.3628 18.0172L23.3636 17.7533V14.2467C23.3636 12.2971 23.2283 11.5103 22.8678 10.7904L22.8339 10.724L22.802 10.6636C22.4618 10.0276 21.9724 9.53816 21.3364 9.198L21.2678 9.16201C20.5248 8.77964 19.7667 8.64058 17.8429 8.63636ZM17.562 12.7273C15.7144 12.7273 14.2149 14.235 14.2149 16.097C14.2149 16.2921 14.2313 16.4846 14.2635 16.6734L16.1745 18.7494L18.6503 16.6653C18.9636 16.4015 19.4217 16.4111 19.7236 16.6822L19.7514 16.7084L20.5903 17.5347C20.7988 17.0907 20.9091 16.6027 20.9091 16.097C20.9091 14.235 19.4095 12.7273 17.562 12.7273Z" fill="#7B61FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

3
web/satellite/vuetify-poc/src/assets/icon-more.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0007 16C12.5312 16 13.0399 16.2107 13.4149 16.5858C13.79 16.9609 14.0007 17.4696 14.0007 18C14.0007 18.5304 13.79 19.0391 13.4149 19.4142C13.0399 19.7893 12.5312 20 12.0007 20C11.4703 20 10.9616 19.7893 10.5865 19.4142C10.2114 19.0391 10.0007 18.5304 10.0007 18C10.0007 17.4696 10.2114 16.9609 10.5865 16.5858C10.9616 16.2107 11.4703 16 12.0007 16ZM12.0007 10C12.5312 10 13.0399 10.2107 13.4149 10.5858C13.79 10.9609 14.0007 11.4696 14.0007 12C14.0007 12.5304 13.79 13.0391 13.4149 13.4142C13.0399 13.7893 12.5312 14 12.0007 14C11.4703 14 10.9616 13.7893 10.5865 13.4142C10.2114 13.0391 10.0007 12.5304 10.0007 12C10.0007 11.4696 10.2114 10.9609 10.5865 10.5858C10.9616 10.2107 11.4703 10 12.0007 10ZM12.0007 4C12.5312 4 13.0399 4.21071 13.4149 4.58579C13.79 4.96086 14.0007 5.46957 14.0007 6C14.0007 6.53043 13.79 7.03914 13.4149 7.41421C13.0399 7.78929 12.5312 8 12.0007 8C11.4703 8 10.9616 7.78929 10.5865 7.41421C10.2114 7.03914 10.0007 6.53043 10.0007 6C10.0007 5.46957 10.2114 4.96086 10.5865 4.58579C10.9616 4.21071 11.4703 4 12.0007 4Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

7
web/satellite/vuetify-poc/src/assets/icon-pdf-color.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="#FF458B"/>
<path d="M12 20V17H13.3211C13.5482 17 13.747 17.0439 13.9173 17.1318C14.0877 17.2197 14.2202 17.3433 14.3149 17.5024C14.4095 17.6616 14.4568 17.8477 14.4568 18.0605C14.4568 18.2754 14.408 18.4614 14.3104 18.6187C14.2137 18.7759 14.0777 18.897 13.9024 18.9819C13.728 19.0669 13.5243 19.1094 13.2912 19.1094H12.5021V18.4766H13.1238C13.2214 18.4766 13.3046 18.46 13.3734 18.4268C13.4431 18.3926 13.4964 18.3442 13.5333 18.2817C13.5711 18.2192 13.5901 18.1455 13.5901 18.0605C13.5901 17.9746 13.5711 17.9014 13.5333 17.8408C13.4964 17.7793 13.4431 17.7324 13.3734 17.7002C13.3046 17.667 13.2214 17.6504 13.1238 17.6504H12.8309V20H12Z" fill="#FF458B"/>
<path d="M15.9393 20H14.7617V17H15.9273C16.2422 17 16.5141 17.0601 16.7433 17.1802C16.9734 17.2993 17.1508 17.4712 17.2753 17.6958C17.4008 17.9194 17.4636 18.1875 17.4636 18.5C17.4636 18.8125 17.4013 19.0811 17.2768 19.3057C17.1523 19.5293 16.9759 19.7012 16.7478 19.8213C16.5196 19.9404 16.2501 20 15.9393 20ZM15.5926 19.3086H15.9094C16.0608 19.3086 16.1899 19.2847 16.2965 19.2368C16.4041 19.189 16.4857 19.1064 16.5415 18.9893C16.5983 18.8721 16.6267 18.709 16.6267 18.5C16.6267 18.291 16.5978 18.1279 16.54 18.0107C16.4833 17.8936 16.3996 17.811 16.289 17.7632C16.1794 17.7153 16.0449 17.6914 15.8855 17.6914H15.5926V19.3086Z" fill="#FF458B"/>
<path d="M17.848 20V17H20V17.6563H18.6789V18.1719H19.8685V18.8281H18.6789V20H17.848Z" fill="#FF458B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

8
web/satellite/vuetify-poc/src/assets/icon-pdf-tonal.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#FF458B" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#FF458B" stroke-opacity="0.2"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="#FF458B"/>
<path d="M12 20V17H13.3211C13.5482 17 13.747 17.0439 13.9173 17.1318C14.0877 17.2197 14.2202 17.3433 14.3149 17.5024C14.4095 17.6616 14.4568 17.8477 14.4568 18.0605C14.4568 18.2754 14.408 18.4614 14.3104 18.6187C14.2137 18.7759 14.0777 18.897 13.9024 18.9819C13.728 19.0669 13.5243 19.1094 13.2912 19.1094H12.5021V18.4766H13.1238C13.2214 18.4766 13.3046 18.46 13.3734 18.4268C13.4431 18.3926 13.4964 18.3442 13.5333 18.2817C13.5711 18.2192 13.5901 18.1455 13.5901 18.0605C13.5901 17.9746 13.5711 17.9014 13.5333 17.8408C13.4964 17.7793 13.4431 17.7324 13.3734 17.7002C13.3046 17.667 13.2214 17.6504 13.1238 17.6504H12.8309V20H12Z" fill="#FF458B"/>
<path d="M15.9393 20H14.7617V17H15.9273C16.2422 17 16.5141 17.0601 16.7433 17.1802C16.9734 17.2993 17.1508 17.4712 17.2753 17.6958C17.4008 17.9194 17.4636 18.1875 17.4636 18.5C17.4636 18.8125 17.4013 19.0811 17.2768 19.3057C17.1523 19.5293 16.9759 19.7012 16.7478 19.8213C16.5196 19.9404 16.2501 20 15.9393 20ZM15.5926 19.3086H15.9094C16.0608 19.3086 16.1899 19.2847 16.2965 19.2368C16.4041 19.189 16.4857 19.1064 16.5415 18.9893C16.5983 18.8721 16.6267 18.709 16.6267 18.5C16.6267 18.291 16.5978 18.1279 16.54 18.0107C16.4833 17.8936 16.3996 17.811 16.289 17.7632C16.1794 17.7153 16.0449 17.6914 15.8855 17.6914H15.5926V19.3086Z" fill="#FF458B"/>
<path d="M17.848 20V17H20V17.6563H18.6789V18.1719H19.8685V18.8281H18.6789V20H17.848Z" fill="#FF458B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

4
web/satellite/vuetify-poc/src/assets/icon-project-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z" fill="#0149FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 948 B

5
web/satellite/vuetify-poc/src/assets/icon-project-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#0149FF" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#0149FF" stroke-opacity="0.2"/>
<path d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z" fill="#0149FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
web/satellite/vuetify-poc/src/assets/icon-share.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.20117 14.1995L1.20192 13.8995C1.21761 11.4028 1.48327 10.1109 2.17965 8.79708C2.51549 8.16345 2.9345 7.59632 3.4308 7.10432C3.8117 6.72672 4.42659 6.72939 4.80419 7.11029C5.18179 7.49119 5.17912 8.10608 4.79822 8.48368C4.44227 8.83655 4.14045 9.24506 3.89577 9.70668C3.35305 10.7306 3.14982 11.7445 3.1436 14.0311L3.14345 14.1966L3.14471 14.4135C3.16287 16.4729 3.35598 17.4639 3.83047 18.4033L3.89577 18.5293C4.3707 19.4253 5.06134 20.1222 5.94808 20.6007L6.04599 20.6525C7.02552 21.1596 8.03348 21.3511 10.2219 21.3573L13.7123 21.3574L14.0314 21.3551C15.9637 21.3315 16.9252 21.1423 17.8232 20.6909L17.9193 20.6416L17.996 20.6007C18.8827 20.1222 19.5733 19.4253 20.0483 18.5293C20.591 17.5054 20.7942 16.4915 20.8004 14.2049L20.8006 14.0394L20.7993 13.8225C20.7812 11.7631 20.5881 10.7721 20.1136 9.83268L20.0483 9.70668C19.8381 9.31013 19.5857 8.95278 19.2932 8.63627C18.9291 8.24241 18.9533 7.62799 19.3471 7.26393C19.741 6.89987 20.3554 6.92403 20.7195 7.31789C21.0976 7.72702 21.426 8.18297 21.7036 8.68499L21.7668 8.80165L21.8122 8.8884C22.4509 10.1257 22.7101 11.3783 22.7401 13.6775L22.7429 14.0365L22.7421 14.3365C22.7264 16.8332 22.4608 18.1251 21.7644 19.4389C21.1272 20.6411 20.194 21.5975 19.0103 22.2595L18.9137 22.3125L18.8277 22.3583L18.7026 22.4227C17.4921 23.0324 16.2328 23.2761 13.9546 23.2982L13.7152 23.2997H10.3324L10.089 23.2989C7.61354 23.2828 6.33012 23.0139 5.02571 22.31C3.83296 21.6664 2.88514 20.7248 2.22974 19.5316L2.17724 19.4343L2.13187 19.3476C1.46062 18.0474 1.20855 16.7302 1.20117 14.1995ZM7.55025 5.75795L7.57732 5.72979L11.323 1.98415C11.693 1.61414 12.2873 1.60512 12.6682 1.95707L12.6964 1.98415L16.442 5.72979C16.8213 6.10904 16.8213 6.72394 16.442 7.10319C16.072 7.4732 15.4777 7.48222 15.0968 7.13027L15.0686 7.10319L12.9484 4.98288V15.955C12.9484 16.4914 12.5136 16.9262 11.9772 16.9262C11.454 16.9262 11.0273 16.5123 11.0068 15.9941L11.0061 15.955V5.0475L8.95072 7.10319C8.58072 7.4732 7.98643 7.48222 7.60548 7.13027L7.57732 7.10319C7.20732 6.73319 7.19829 6.1389 7.55025 5.75795Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

4
web/satellite/vuetify-poc/src/assets/icon-spreadsheet-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M20.0916 9C19.6844 9 19.3524 9.32205 19.3365 9.72533L19.3359 9.75573L19.3359 21.9504H18.2673L18.2672 14.2901C18.2672 13.8829 17.9451 13.5509 17.5418 13.535L17.5115 13.5344H14.5267C14.1195 13.5344 13.7875 13.8564 13.7716 14.2597L13.771 14.2901L13.771 21.9504H12.6336V18.9618C12.6336 18.5546 12.3115 18.2227 11.9083 18.2067L11.8779 18.2061H8.89312C8.48592 18.2061 8.15395 18.5282 8.13799 18.9314L8.13739 18.9618L8.13744 21.9504H7.75573C7.33835 21.9504 7 22.2887 7 22.7061C7 23.1133 7.32205 23.4453 7.72533 23.4612L7.75573 23.4618H24.2443C24.6617 23.4618 25 23.1235 25 22.7061C25 22.2989 24.678 21.9669 24.2747 21.951L24.2443 21.9504H23.8321V9.75573C23.8321 9.34853 23.51 9.01655 23.1067 9.0006L23.0763 9H20.0916ZM9.64889 21.9504V19.7176H11.1221V21.9504H9.64889ZM15.2825 15.0458H16.7557L16.7559 21.9504H15.2825V15.0458ZM20.8474 10.5115H22.3206V21.9504H20.8474V10.5115Z" fill="#00AC26"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
web/satellite/vuetify-poc/src/assets/icon-spreadsheet-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#00AC26" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#00AC26" stroke-opacity="0.2"/>
<path d="M20.0916 9C19.6844 9 19.3524 9.32205 19.3365 9.72533L19.3359 9.75573L19.3359 21.9504H18.2673L18.2672 14.2901C18.2672 13.8829 17.9451 13.5509 17.5418 13.535L17.5115 13.5344H14.5267C14.1195 13.5344 13.7875 13.8564 13.7716 14.2597L13.771 14.2901L13.771 21.9504H12.6336V18.9618C12.6336 18.5546 12.3115 18.2227 11.9083 18.2067L11.8779 18.2061H8.89312C8.48592 18.2061 8.15395 18.5282 8.13799 18.9314L8.13739 18.9618L8.13744 21.9504H7.75573C7.33835 21.9504 7 22.2887 7 22.7061C7 23.1133 7.32205 23.4453 7.72533 23.4612L7.75573 23.4618H24.2443C24.6617 23.4618 25 23.1235 25 22.7061C25 22.2989 24.678 21.9669 24.2747 21.951L24.2443 21.9504H23.8321V9.75573C23.8321 9.34853 23.51 9.01655 23.1067 9.0006L23.0763 9H20.0916ZM9.64889 21.9504V19.7176H11.1221V21.9504H9.64889ZM15.2825 15.0458H16.7557L16.7559 21.9504H15.2825V15.0458ZM20.8474 10.5115H22.3206V21.9504H20.8474V10.5115Z" fill="#00AC26"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
web/satellite/vuetify-poc/src/assets/icon-text-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M21.6978 10.0002C22.5965 10.0048 23.0675 10.0999 23.5573 10.3618C24.0213 10.61 24.39 10.9787 24.6382 11.4427C24.9068 11.945 25 12.4276 25 13.3722V19.2433C24.9952 20.142 24.9001 20.613 24.6382 21.1027C24.39 21.5668 24.0213 21.9354 23.5573 22.1836C23.0801 22.4388 22.6207 22.5357 21.7661 22.5447L21.6278 22.5455H10.3722C9.42764 22.5455 8.94504 22.4523 8.44271 22.1836C7.97867 21.9354 7.61001 21.5668 7.36184 21.1027C7.10663 20.6255 7.00976 20.1661 7.00071 19.3116L7 19.1733V13.3722C7 12.4276 7.0932 11.945 7.36184 11.4427C7.61001 10.9787 7.97867 10.61 8.44271 10.3618C8.94504 10.0932 9.42764 10 10.3722 10L21.6978 10.0002ZM15.1818 11.5L10.3164 11.5001C9.67852 11.5025 9.42696 11.5463 9.19156 11.6632L9.15011 11.6846C8.94748 11.7929 8.79293 11.9475 8.68456 12.1501C8.54802 12.4054 8.5 12.6541 8.5 13.3722V19.229C8.50245 19.8679 8.54645 20.1193 8.66373 20.355L8.68456 20.3953C8.79293 20.598 8.94748 20.7525 9.15011 20.8609C9.40542 20.9974 9.65409 21.0455 10.3722 21.0455H15.1818V11.5ZM21.6836 11.5001L16.6818 11.5V21.0453L21.6836 21.0454C22.3031 21.0431 22.5582 21.0016 22.7881 20.8922L22.8096 20.8817L22.8499 20.8609C23.0525 20.7525 23.2071 20.598 23.3154 20.3953C23.452 20.14 23.5 19.8914 23.5 19.1733L23.4999 13.3164C23.4975 12.6785 23.4537 12.427 23.3368 12.1916L23.3154 12.1501C23.2071 11.9475 23.0525 11.7929 22.8499 11.6846L22.8279 11.673L22.8096 11.6637C22.7902 11.6541 22.7707 11.6449 22.7509 11.6363C22.7489 11.6354 22.7469 11.6345 22.7449 11.6337L22.7509 11.6363C22.7455 11.6339 22.7401 11.6316 22.7347 11.6293L22.7449 11.6337C22.7362 11.6299 22.7273 11.6262 22.7184 11.6226L22.7347 11.6293C22.7269 11.626 22.7191 11.6228 22.7112 11.6197L22.7184 11.6226C22.7137 11.6207 22.7089 11.6188 22.7042 11.617L22.7112 11.6197C22.6963 11.6138 22.6812 11.6082 22.6658 11.6028C22.6632 11.6019 22.6606 11.601 22.6579 11.6001L22.6658 11.6028C22.6565 11.5995 22.6471 11.5964 22.6376 11.5933C22.6084 11.5839 22.5779 11.5753 22.5457 11.5674C22.5413 11.5664 22.5368 11.5653 22.5324 11.5643L22.5457 11.5674C22.536 11.5651 22.5262 11.5628 22.5162 11.5606L22.5324 11.5643C22.5237 11.5623 22.5149 11.5603 22.506 11.5584L22.5162 11.5606C22.5072 11.5586 22.498 11.5567 22.4886 11.5548L22.506 11.5584C22.4978 11.5566 22.4895 11.5549 22.4811 11.5533L22.4886 11.5548C22.4616 11.5493 22.4333 11.5443 22.4035 11.5397C22.398 11.5388 22.3924 11.538 22.3867 11.5372L22.4035 11.5397C22.3942 11.5383 22.3847 11.5369 22.3751 11.5355L22.3867 11.5372C22.3607 11.5334 22.3336 11.5299 22.3051 11.5268C22.2955 11.5257 22.2856 11.5247 22.2756 11.5237C22.2617 11.5223 22.2476 11.5209 22.2331 11.5197C22.2153 11.5181 22.1969 11.5167 22.1781 11.5153C22.1724 11.5149 22.1667 11.5145 22.161 11.5141L22.1781 11.5153C22.1644 11.5143 22.1504 11.5134 22.1361 11.5125L22.161 11.5141C22.1481 11.5132 22.1351 11.5124 22.1217 11.5116L22.1361 11.5125C22.1241 11.5117 22.1118 11.511 22.0993 11.5104L22.1217 11.5116C22.0908 11.5098 22.0587 11.5082 22.0251 11.5068C22.0238 11.5068 22.0224 11.5067 22.021 11.5067L22.0251 11.5068C22.0121 11.5063 21.9989 11.5058 21.9855 11.5053L22.021 11.5067C21.9721 11.5047 21.9202 11.5032 21.8649 11.5021C21.8404 11.5016 21.8152 11.5012 21.7894 11.5009L21.6836 11.5001ZM13 17.9773C13.4142 17.9773 13.75 18.3131 13.75 18.7273C13.75 19.1314 13.4304 19.4608 13.0302 19.4767L13 19.4773H10.5455C10.1312 19.4773 9.79545 19.1415 9.79545 18.7273C9.79545 18.3232 10.1151 17.9937 10.5153 17.9779L10.5455 17.9773H13ZM20.5682 17.9773C20.9824 17.9773 21.3182 18.3131 21.3182 18.7273C21.3182 19.1314 20.9986 19.4608 20.5983 19.4767L20.5682 19.4773H18.7955C18.3812 19.4773 18.0455 19.1415 18.0455 18.7273C18.0455 18.3232 18.3651 17.9937 18.7653 17.9779L18.7955 17.9773H20.5682ZM13 15.5227C13.4142 15.5227 13.75 15.8585 13.75 16.2727C13.75 16.6768 13.4304 17.0063 13.0302 17.0221L13 17.0227H10.5455C10.1312 17.0227 9.79545 16.6869 9.79545 16.2727C9.79545 15.8686 10.1151 15.5392 10.5153 15.5233L10.5455 15.5227H13ZM21.25 15.5227C21.6642 15.5227 22 15.8585 22 16.2727C22 16.6768 21.6804 17.0063 21.2802 17.0221L21.25 17.0227H18.7955C18.3812 17.0227 18.0455 16.6869 18.0455 16.2727C18.0455 15.8686 18.3651 15.5392 18.7653 15.5233L18.7955 15.5227H21.25ZM13 13.0682C13.4142 13.0682 13.75 13.404 13.75 13.8182C13.75 14.2223 13.4304 14.5518 13.0302 14.5676L13 14.5682H10.5455C10.1312 14.5682 9.79545 14.2324 9.79545 13.8182C9.79545 13.4141 10.1151 13.0846 10.5153 13.0688L10.5455 13.0682H13ZM21.25 13.0682C21.6642 13.0682 22 13.404 22 13.8182C22 14.2223 21.6804 14.5518 21.2802 14.5676L21.25 14.5682H18.7955C18.3812 14.5682 18.0455 14.2324 18.0455 13.8182C18.0455 13.4141 18.3651 13.0846 18.7653 13.0688L18.7955 13.0682H21.25Z" fill="#537CFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

5
web/satellite/vuetify-poc/src/assets/icon-text-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#537CFF" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#537CFF" stroke-opacity="0.2"/>
<path d="M21.6978 10.0002C22.5965 10.0048 23.0675 10.0999 23.5573 10.3618C24.0213 10.61 24.39 10.9787 24.6382 11.4427C24.9068 11.945 25 12.4276 25 13.3722V19.2433C24.9952 20.142 24.9001 20.613 24.6382 21.1027C24.39 21.5668 24.0213 21.9354 23.5573 22.1836C23.0801 22.4388 22.6207 22.5357 21.7661 22.5447L21.6278 22.5455H10.3722C9.42764 22.5455 8.94504 22.4523 8.44271 22.1836C7.97867 21.9354 7.61001 21.5668 7.36184 21.1027C7.10663 20.6255 7.00976 20.1661 7.00071 19.3116L7 19.1733V13.3722C7 12.4276 7.0932 11.945 7.36184 11.4427C7.61001 10.9787 7.97867 10.61 8.44271 10.3618C8.94504 10.0932 9.42764 10 10.3722 10L21.6978 10.0002ZM15.1818 11.5L10.3164 11.5001C9.67852 11.5025 9.42696 11.5463 9.19156 11.6632L9.15011 11.6846C8.94748 11.7929 8.79293 11.9475 8.68456 12.1501C8.54802 12.4054 8.5 12.6541 8.5 13.3722V19.229C8.50245 19.8679 8.54645 20.1193 8.66373 20.355L8.68456 20.3953C8.79293 20.598 8.94748 20.7525 9.15011 20.8609C9.40542 20.9974 9.65409 21.0455 10.3722 21.0455H15.1818V11.5ZM21.6836 11.5001L16.6818 11.5V21.0453L21.6836 21.0454C22.3031 21.0431 22.5582 21.0016 22.7881 20.8922L22.8096 20.8817L22.8499 20.8609C23.0525 20.7525 23.2071 20.598 23.3154 20.3953C23.452 20.14 23.5 19.8914 23.5 19.1733L23.4999 13.3164C23.4975 12.6785 23.4537 12.427 23.3368 12.1916L23.3154 12.1501C23.2071 11.9475 23.0525 11.7929 22.8499 11.6846L22.8279 11.673L22.8096 11.6637C22.7902 11.6541 22.7707 11.6449 22.7509 11.6363C22.7489 11.6354 22.7469 11.6345 22.7449 11.6337L22.7509 11.6363C22.7455 11.6339 22.7401 11.6316 22.7347 11.6293L22.7449 11.6337C22.7362 11.6299 22.7273 11.6262 22.7184 11.6226L22.7347 11.6293C22.7269 11.626 22.7191 11.6228 22.7111 11.6197L22.7184 11.6226C22.7137 11.6207 22.7089 11.6188 22.7042 11.617L22.7111 11.6197C22.6963 11.6138 22.6812 11.6082 22.6658 11.6028C22.6632 11.6019 22.6606 11.601 22.6579 11.6001L22.6658 11.6028C22.6565 11.5995 22.6471 11.5964 22.6376 11.5933C22.6084 11.5839 22.5779 11.5753 22.5457 11.5674C22.5413 11.5664 22.5368 11.5653 22.5324 11.5643L22.5457 11.5674C22.536 11.5651 22.5262 11.5628 22.5162 11.5606L22.5324 11.5643C22.5237 11.5623 22.5149 11.5603 22.506 11.5584L22.5162 11.5606C22.5072 11.5586 22.498 11.5567 22.4886 11.5548L22.506 11.5584C22.4978 11.5566 22.4895 11.5549 22.4811 11.5533L22.4886 11.5548C22.4616 11.5493 22.4333 11.5443 22.4035 11.5397C22.398 11.5388 22.3924 11.538 22.3867 11.5372L22.4035 11.5397C22.3942 11.5383 22.3847 11.5369 22.3751 11.5355L22.3867 11.5372C22.3607 11.5334 22.3336 11.5299 22.3051 11.5268C22.2955 11.5257 22.2856 11.5247 22.2756 11.5237C22.2617 11.5223 22.2476 11.5209 22.2331 11.5197C22.2153 11.5181 22.1969 11.5167 22.1781 11.5153C22.1724 11.5149 22.1667 11.5145 22.161 11.5141L22.1781 11.5153C22.1644 11.5143 22.1504 11.5134 22.1361 11.5125L22.161 11.5141C22.1481 11.5132 22.1351 11.5124 22.1217 11.5116L22.1361 11.5125C22.1241 11.5117 22.1118 11.511 22.0993 11.5104L22.1217 11.5116C22.0908 11.5098 22.0587 11.5082 22.0251 11.5068C22.0238 11.5068 22.0224 11.5067 22.021 11.5067L22.0251 11.5068C22.0121 11.5063 21.9989 11.5058 21.9855 11.5053L22.021 11.5067C21.9721 11.5047 21.9202 11.5032 21.8649 11.5021C21.8404 11.5016 21.8152 11.5012 21.7894 11.5009L21.6836 11.5001ZM13 17.9773C13.4142 17.9773 13.75 18.3131 13.75 18.7273C13.75 19.1314 13.4304 19.4608 13.0302 19.4767L13 19.4773H10.5455C10.1312 19.4773 9.79545 19.1415 9.79545 18.7273C9.79545 18.3232 10.1151 17.9937 10.5153 17.9779L10.5455 17.9773H13ZM20.5682 17.9773C20.9824 17.9773 21.3182 18.3131 21.3182 18.7273C21.3182 19.1314 20.9986 19.4608 20.5983 19.4767L20.5682 19.4773H18.7955C18.3812 19.4773 18.0455 19.1415 18.0455 18.7273C18.0455 18.3232 18.3651 17.9937 18.7653 17.9779L18.7955 17.9773H20.5682ZM13 15.5227C13.4142 15.5227 13.75 15.8585 13.75 16.2727C13.75 16.6768 13.4304 17.0063 13.0302 17.0221L13 17.0227H10.5455C10.1312 17.0227 9.79545 16.6869 9.79545 16.2727C9.79545 15.8686 10.1151 15.5392 10.5153 15.5233L10.5455 15.5227H13ZM21.25 15.5227C21.6642 15.5227 22 15.8585 22 16.2727C22 16.6768 21.6804 17.0063 21.2802 17.0221L21.25 17.0227H18.7955C18.3812 17.0227 18.0455 16.6869 18.0455 16.2727C18.0455 15.8686 18.3651 15.5392 18.7653 15.5233L18.7955 15.5227H21.25ZM13 13.0682C13.4142 13.0682 13.75 13.404 13.75 13.8182C13.75 14.2223 13.4304 14.5518 13.0302 14.5676L13 14.5682H10.5455C10.1312 14.5682 9.79545 14.2324 9.79545 13.8182C9.79545 13.4141 10.1151 13.0846 10.5153 13.0688L10.5455 13.0682H13ZM21.25 13.0682C21.6642 13.0682 22 13.404 22 13.8182C22 14.2223 21.6804 14.5518 21.2802 14.5676L21.25 14.5682H18.7955C18.3812 14.5682 18.0455 14.2324 18.0455 13.8182C18.0455 13.4141 18.3651 13.0846 18.7653 13.0688L18.7955 13.0682H21.25Z" fill="#537CFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

4
web/satellite/vuetify-poc/src/assets/icon-user-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
web/satellite/vuetify-poc/src/assets/icon-user.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
web/satellite/vuetify-poc/src/assets/icon-video-color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M17.7533 7L18.0235 7.00105C20.34 7.01951 21.2206 7.28039 22.1081 7.75504C23.0293 8.24771 23.7523 8.97068 24.245 9.89189L24.2806 9.95931C24.7443 10.8472 24.9936 11.7648 25 14.1541V17.7533C25 20.2731 24.7376 21.1869 24.245 22.1081C23.7523 23.0293 23.0293 23.7523 22.1081 24.245L22.0407 24.2806C21.1526 24.7444 20.2349 24.9937 17.8448 25H14.2467C11.7269 25 10.8131 24.7376 9.89189 24.245C8.97068 23.7523 8.24771 23.0293 7.75504 22.1081L7.7194 22.0407C7.2556 21.1526 7.00628 20.2349 7 17.8448V14.2467C7 11.7269 7.26237 10.8131 7.75504 9.89189C8.24771 8.97068 8.97068 8.24771 9.89189 7.75504L9.95931 7.7194C10.8472 7.25567 11.7648 7.00636 14.1541 7H17.7533ZM17.8429 8.63636H14.2467C12.2971 8.63636 11.5103 8.7717 10.7904 9.13215L10.724 9.16607L10.6636 9.198C10.0276 9.53816 9.53816 10.0276 9.198 10.6636L9.16201 10.7322C8.79141 11.4523 8.64937 12.1867 8.63723 13.9827L8.63636 14.2466V17.8406L8.63807 18.1028C8.65498 19.8298 8.798 20.5566 9.14866 21.2423L9.16607 21.276L9.198 21.3364C9.53816 21.9724 10.0276 22.4618 10.6636 22.802L10.7322 22.838C11.4523 23.2086 12.1867 23.3506 13.9827 23.3628L14.2466 23.3636H17.8406L18.1028 23.3619C19.8298 23.345 20.5566 23.202 21.2423 22.8513L21.276 22.8339L21.3364 22.802C21.9724 22.4618 22.4618 21.9724 22.802 21.3364L22.838 21.2678C23.2086 20.5477 23.3506 19.8133 23.3628 18.0172L23.3636 17.7533V14.2467C23.3636 12.2971 23.2283 11.5103 22.8678 10.7904L22.8339 10.724L22.802 10.6636C22.4618 10.0276 21.9724 9.53816 21.3364 9.198L21.2678 9.16201C20.5248 8.77964 19.7667 8.64058 17.8429 8.63636ZM13.0248 12.281C13.0248 11.6252 13.7577 11.2359 14.301 11.6031L19.8052 15.3221C20.2853 15.6465 20.2853 16.3535 19.8052 16.6779L14.301 20.3969C13.7577 20.7641 13.0248 20.3748 13.0248 19.719V12.281ZM14.6612 13.8213V18.1786L17.8855 16L14.6612 13.8213Z" fill="#FF1313"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

5
web/satellite/vuetify-poc/src/assets/icon-video-tonal.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#FF1313" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#FF1313" stroke-opacity="0.2"/>
<path d="M17.7533 7L18.0235 7.00105C20.34 7.01951 21.2206 7.28039 22.1081 7.75504C23.0293 8.24771 23.7523 8.97068 24.245 9.89189L24.2806 9.95931C24.7443 10.8472 24.9936 11.7648 25 14.1541V17.7533C25 20.2731 24.7376 21.1869 24.245 22.1081C23.7523 23.0293 23.0293 23.7523 22.1081 24.245L22.0407 24.2806C21.1526 24.7444 20.2349 24.9937 17.8448 25H14.2467C11.7269 25 10.8131 24.7376 9.89189 24.245C8.97068 23.7523 8.24771 23.0293 7.75504 22.1081L7.7194 22.0407C7.2556 21.1526 7.00628 20.2349 7 17.8448V14.2467C7 11.7269 7.26237 10.8131 7.75504 9.89189C8.24771 8.97068 8.97068 8.24771 9.89189 7.75504L9.95931 7.7194C10.8472 7.25567 11.7648 7.00636 14.1541 7H17.7533ZM17.8429 8.63636H14.2467C12.2971 8.63636 11.5103 8.7717 10.7904 9.13215L10.724 9.16607L10.6636 9.198C10.0276 9.53816 9.53816 10.0276 9.198 10.6636L9.16201 10.7322C8.79141 11.4523 8.64937 12.1867 8.63723 13.9827L8.63636 14.2466V17.8406L8.63807 18.1028C8.65498 19.8298 8.798 20.5566 9.14866 21.2423L9.16607 21.276L9.198 21.3364C9.53816 21.9724 10.0276 22.4618 10.6636 22.802L10.7322 22.838C11.4523 23.2086 12.1867 23.3506 13.9827 23.3628L14.2466 23.3636H17.8406L18.1028 23.3619C19.8298 23.345 20.5566 23.202 21.2423 22.8513L21.276 22.8339L21.3364 22.802C21.9724 22.4618 22.4618 21.9724 22.802 21.3364L22.838 21.2678C23.2086 20.5477 23.3506 19.8133 23.3628 18.0172L23.3636 17.7533V14.2467C23.3636 12.2971 23.2283 11.5103 22.8678 10.7904L22.8339 10.724L22.802 10.6636C22.4618 10.0276 21.9724 9.53816 21.3364 9.198L21.2678 9.16201C20.5248 8.77964 19.7667 8.64058 17.8429 8.63636ZM13.0248 12.281C13.0248 11.6252 13.7577 11.2359 14.301 11.6031L19.8052 15.3221C20.2853 15.6465 20.2853 16.3535 19.8052 16.6779L14.301 20.3969C13.7577 20.7641 13.0248 20.3748 13.0248 19.719V12.281ZM14.6612 13.8213V18.1786L17.8855 16L14.6612 13.8213Z" fill="#FF1313"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

15
web/satellite/vuetify-poc/src/assets/icon-zip-color.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="white" stroke="#EBEEF1"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="#FF8A00"/>
<path d="M12.4998 20.0545V19.5952L13.9435 17.6682H12.5058V17H14.9995V17.4594L13.5558 19.3864H14.9935V20.0545H12.4998Z" fill="#FF8A00"/>
<path d="M16.607 17V20.0545H15.7777V17H16.607Z" fill="#FF8A00"/>
<path d="M17.3908 20.0545V17H18.7093C18.936 17 19.1344 17.0447 19.3044 17.1342C19.4744 17.2237 19.6067 17.3495 19.7011 17.5116C19.7956 17.6737 19.8428 17.8631 19.8428 18.0798C19.8428 18.2986 19.7941 18.488 19.6967 18.6481C19.6002 18.8082 19.4645 18.9315 19.2895 19.018C19.1155 19.1045 18.9121 19.1477 18.6795 19.1477H17.892V18.5034H18.5124C18.6099 18.5034 18.6929 18.4865 18.7615 18.4527C18.8311 18.4179 18.8843 18.3687 18.9211 18.305C18.9589 18.2414 18.9778 18.1663 18.9778 18.0798C18.9778 17.9923 18.9589 17.9178 18.9211 17.8561C18.8843 17.7935 18.8311 17.7457 18.7615 17.7129C18.6929 17.6791 18.6099 17.6622 18.5124 17.6622H18.2201V20.0545H17.3908Z" fill="#FF8A00"/>
<rect x="12" y="8" width="1" height="1" fill="#FF8A00"/>
<rect x="12" y="12" width="1" height="1" fill="#FF8A00"/>
<rect x="13" y="9" width="1" height="1" fill="#FFA800"/>
<rect x="13" y="11" width="1" height="1" fill="#FFA800"/>
<rect x="13" y="13" width="1" height="1" fill="#FFA800"/>
<rect x="13" y="15" width="1" height="1" fill="#FFA800"/>
<rect x="12" y="10" width="1" height="1" fill="#FF8A00"/>
<rect x="12" y="14" width="1" height="1" fill="#FF8A00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

16
web/satellite/vuetify-poc/src/assets/icon-zip-tonal.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#FF8A00" fill-opacity="0.1"/>
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#FF8A00" stroke-opacity="0.2"/>
<path d="M16.9452 7C17.4186 7 17.8726 7.18807 18.2074 7.52283L22.9068 12.2221C23.2416 12.5569 23.4297 13.0109 23.4297 13.4844V22.1736C23.4297 23.7346 22.1642 25 20.6032 25H11.8264C10.2654 25 9 23.7346 9 22.1736V9.82655C9 8.26555 10.2654 7 11.8264 7H16.9452ZM16.2147 8.63635H11.8264C11.1816 8.63635 10.6565 9.14932 10.6369 9.78948L10.6364 9.82655V22.1736C10.6364 22.8184 11.1493 23.3435 11.7894 23.3631L11.8264 23.3636H20.6032C21.2481 23.3636 21.7732 22.8507 21.7927 22.2106L21.7933 22.1736V14.2148L17.033 14.2149C16.5922 14.2149 16.2327 13.8663 16.2155 13.4297L16.2148 13.3968L16.2147 8.63635ZM20.9491 12.5785L17.851 9.48056L17.8512 12.5786L20.9491 12.5785Z" fill="#FF8A00"/>
<path d="M12.4998 20.0545V19.5952L13.9435 17.6682H12.5058V17H14.9995V17.4594L13.5558 19.3864H14.9935V20.0545H12.4998Z" fill="#FF8A00"/>
<path d="M16.607 17V20.0545H15.7777V17H16.607Z" fill="#FF8A00"/>
<path d="M17.3908 20.0545V17H18.7093C18.936 17 19.1344 17.0447 19.3044 17.1342C19.4744 17.2237 19.6067 17.3495 19.7011 17.5116C19.7956 17.6737 19.8428 17.8631 19.8428 18.0798C19.8428 18.2986 19.7941 18.488 19.6967 18.6481C19.6002 18.8082 19.4645 18.9315 19.2895 19.018C19.1155 19.1045 18.9121 19.1477 18.6795 19.1477H17.892V18.5034H18.5124C18.6099 18.5034 18.6929 18.4865 18.7615 18.4527C18.8311 18.4179 18.8843 18.3687 18.9211 18.305C18.9589 18.2414 18.9778 18.1663 18.9778 18.0798C18.9778 17.9923 18.9589 17.9178 18.9211 17.8561C18.8843 17.7935 18.8311 17.7457 18.7615 17.7129C18.6929 17.6791 18.6099 17.6622 18.5124 17.6622H18.2201V20.0545H17.3908Z" fill="#FF8A00"/>
<rect x="12" y="8" width="1" height="1" fill="#FF8A00"/>
<rect x="12" y="12" width="1" height="1" fill="#FF8A00"/>
<rect x="13" y="9" width="1" height="1" fill="#FFA800"/>
<rect x="13" y="11" width="1" height="1" fill="#FFA800"/>
<rect x="13" y="13" width="1" height="1" fill="#FFA800"/>
<rect x="13" y="15" width="1" height="1" fill="#FFA800"/>
<rect x="12" y="10" width="1" height="1" fill="#FF8A00"/>
<rect x="12" y="14" width="1" height="1" fill="#FF8A00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
web/satellite/vuetify-poc/src/assets/logo-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

8
web/satellite/vuetify-poc/src/assets/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 37 KiB

106
web/satellite/vuetify-poc/src/components/AccessTableComponent.vue Normal file
View File

@ -0,0 +1,106 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="accesses"
:search="search"
class="elevation-1"
show-select
hover
>
<template v-slot:item.name="{ item }">
<v-list-item class="font-weight-bold pl-0">
{{ item.columns.name }}
</v-list-item>
</template>
<template v-slot:item.status="{ item }">
<v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
{{ item.raw.status }}
</v-chip>
</template>
</v-data-table>
</v-card>
</template>
<script>
export default {
name: 'AccessTableComponent',
data () {
return {
search: '',
selected: [],
sortBy: [{ key: 'date', order: 'asc' }],
headers: [
{
title: 'Name',
align: 'start',
key: 'name',
},
{ title: 'Type', key: 'type' },
{ title: 'Status', key: 'status' },
{ title: 'Permissions', key: 'permissions' },
{ title: 'Date Created', key: 'date' },
],
accesses: [
{
name: 'Backup',
date: '02 Mar 2023',
type: 'Access Grant',
permissions: 'All',
status: 'Active',
},
{
name: 'S3 Test',
date: '03 Mar 2023',
type: 'S3 Credentials',
permissions: 'Read, Write',
status: 'Expired',
},
{
name: 'CLI Demo',
date: '04 Mar 2023',
type: 'CLI Access',
permissions: 'Read, Write, List',
status: 'Active',
},
{
name: 'Sharing',
date: '08 Mar 2023',
type: 'Access Grant',
permissions: 'Read, Delete',
status: 'Active',
},
{
name: 'Sync Int',
date: '12 Mar 2023',
type: 'S3 Credentials',
permissions: 'All',
status: 'Expired',
},
],
}
},
computed: {
getColor() {
return (role) => {
if (role === 'Owner') return 'purple2'
if (role === 'Invited') return 'warning'
return 'green'
}
}
},
}
</script>

16
web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue Normal file
View File

@ -0,0 +1,16 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-breadcrumbs :items="['Buckets', 'Demo']" active-class="font-weight-bold" class="pa-0">
<template v-slot:divider>
<img src="@poc/assets/icon-right.svg" alt="Breadcrumbs separator" width="10"/>
</template>
</v-breadcrumbs>
</template>
<!-- <script>
export default {
props: ['title']
}
</script> -->

85
web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue Normal file
View File

@ -0,0 +1,85 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-dialog
v-model="dialog"
activator="parent"
width="auto"
min-width="400px"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
New Folder
</v-card-title>
</template>
<template v-slot:append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="dialog = false"
></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider></v-divider>
<v-form v-model="valid" class="pa-8 pb-3">
<v-row>
<v-col
cols="12"
>
<v-text-field
v-model="folder"
variant="outlined"
:rules="folderRules"
label="Enter Folder Name"
required
autofocus
>
</v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading">Create Folder</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data() {
return {
dialog: false,
folder: '',
folderRules: [
value => {
if (value) return true
return 'Folder name is required.'
},
],
}
}
}
</script>

154
web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue Normal file
View File

@ -0,0 +1,154 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-snackbar
:model-value="snackbar"
vertical
:timeout="4000"
color="default"
elevation="24"
rounded="lg"
class="upload-snackbar"
>
<v-row>
<v-col>
<v-expansion-panels theme="dark">
<v-expansion-panel
color="default"
rounded="lg"
>
<v-expansion-panel-title color="">
<span>Uploading 3 items</span>
</v-expansion-panel-title>
<v-progress-linear
rounded
model-value="73"
height="6"
color="success"
class="mt-1"
>
</v-progress-linear>
<v-expansion-panel-text>
<v-row class="pt-2">
<v-col cols="10">
<p class="text-medium-emphasis">4 seconds left...</p>
</v-col>
<v-col cols="2">
<v-tooltip text="Cancel all uploads">
<template v-slot:activator="{ props }">
<v-icon
v-bind="props"
icon="mdi-close-circle"
@click="snackbar = false"
></v-icon>
</template>
</v-tooltip>
</v-col>
</v-row>
</v-expansion-panel-text>
<v-divider></v-divider>
<v-expansion-panel-text>
<v-row class="pt-2">
<v-col cols="10">
<p>Image.jpg</p>
</v-col>
<v-col cols="2">
<v-tooltip text="Uploading...">
<template v-slot:activator="{ props }">
<v-progress-circular
v-bind="props"
:size="20"
color="secondary"
model-value="20"
></v-progress-circular>
</template>
</v-tooltip>
</v-col>
</v-row>
</v-expansion-panel-text>
<v-divider></v-divider>
<v-expansion-panel-text>
<v-row class="pt-2">
<v-col cols="10">
<p>Video.mp4</p>
</v-col>
<v-col cols="2">
<v-tooltip text="Upload complete">
<template v-slot:activator="{ props }">
<v-icon
v-bind="props"
icon="mdi-checkbox-marked-circle"
color="success"
></v-icon>
</template>
</v-tooltip>
</v-col>
</v-row>
</v-expansion-panel-text>
<v-divider></v-divider>
<v-expansion-panel-text>
<v-row class="pt-2">
<v-col cols="10">
<p>Text.pdf</p>
</v-col>
<v-col cols="2">
<v-tooltip text="Upload failed">
<template v-slot:activator="{ props }">
<v-icon
v-bind="props"
icon="mdi-information"
color="warning"
></v-icon>
</template>
</v-tooltip>
</v-col>
</v-row>
</v-expansion-panel-text>
<v-divider></v-divider>
<v-expansion-panel-text>
<v-row class="pt-2">
<v-col cols="10">
<p>Bigvideo.mov</p>
</v-col>
<v-col cols="2">
<v-tooltip text="File is too big">
<template v-slot:activator="{ props }">
<v-icon
v-bind="props"
icon="mdi-cancel"
color="error2"
></v-icon>
</template>
</v-tooltip>
</v-col>
</v-row>
</v-expansion-panel-text>
<v-divider></v-divider>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
</v-snackbar>
</template>
<script>
export default {
props: {
snackbar: {
required: true
}
},
};
</script>

299
web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue Normal file
View File

@ -0,0 +1,299 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="files"
:search="search"
class="elevation-1"
@item-click="handleItemClick"
item-key="path"
show-select
>
<template v-slot:item.name="{ item }">
<v-list-item class="rounded-lg font-weight-bold pl-1" link @click="previewFile()">
<template v-slot:prepend>
<!-- Filetype icons -->
<img :src="getIconPath(item.raw.icon)" alt="Item icon" class="mr-3">
</template>
{{ item.columns.name }}
</v-list-item>
</template>
</v-data-table>
<v-dialog transition="fade-transition" v-model="previewDialog" class="preview-dialog" fullscreen theme="dark">
<v-card class="preview-card">
<v-carousel hide-delimiters show-arrows="hover" height="100vh"
>
<template v-slot:prev="{ props }">
<v-btn
color="default"
@click="props.onClick"
class="rounded-circle"
icon
>
<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_24843_332342)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.30725 8.23141C0.276805 7.67914 0.528501 7.04398 1.03164 6.54085L6.84563 0.726856C7.64837 -0.0758889 8.78719 -0.238577 9.38925 0.363481C9.99131 0.96554 9.82862 2.10436 9.02587 2.9071L3.71149 8.22148L9.02681 13.5368C9.82955 14.3395 9.99224 15.4784 9.39018 16.0804C8.78812 16.6825 7.6493 16.5198 6.84656 15.717L1.03257 9.90305C0.535173 9.40565 0.283513 8.77923 0.30725 8.23141Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_24843_332342">
<rect width="17.0002" height="10" fill="white" transform="translate(10) rotate(90)"/>
</clipPath>
</defs>
</svg>
</v-btn>
</template>
<template v-slot:next="{ props }">
<v-btn
color="default"
@click="props.onClick"
class="rounded-circle"
icon
>
<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_24843_332338)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69263 8.23141C9.72307 7.67914 9.47138 7.04398 8.96824 6.54085L3.15425 0.726856C2.35151 -0.0758889 1.21269 -0.238577 0.61063 0.363481C0.00857207 0.96554 0.17126 2.10436 0.974005 2.9071L6.28838 8.22148L0.973072 13.5368C0.170328 14.3395 0.00763934 15.4784 0.609698 16.0804C1.21176 16.6825 2.35057 16.5198 3.15332 15.717L8.96731 9.90305C9.46471 9.40565 9.71637 8.77923 9.69263 8.23141Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_24843_332338">
<rect width="17.0002" height="10" fill="white" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0 0)"/>
</clipPath>
</defs>
</svg>
</v-btn>
</template>
<v-toolbar
color="rgba(0, 0, 0, 0.3)"
theme="dark"
>
<!-- <v-img src="../assets/logo-white.svg" height="30" width="160" class="ml-3" alt="Storj Logo"/> -->
<v-toolbar-title>
Image.jpg
</v-toolbar-title>
<template v-slot:append>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-download.svg" width="22" alt="Download">
<v-tooltip
activator="parent"
location="bottom"
>Download</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-share.svg" width="22" alt="Share">
<v-tooltip
activator="parent"
location="bottom"
>Share</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-geo-distribution.svg" width="22" alt="Geographic Distribution">
<v-tooltip
activator="parent"
location="bottom"
>Geographic Distribution</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-more.svg" width="22" alt="More">
<v-tooltip
activator="parent"
location="bottom"
>More</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white" @click="previewDialog = false">
<img src="@poc/assets/icon-close.svg" width="18" alt="Close">
<v-tooltip
activator="parent"
location="bottom"
>Close</v-tooltip>
</v-btn>
<!-- <v-btn icon="$close" color="white" size="small" @click="previewDialog = false"></v-btn> -->
</template>
</v-toolbar>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
</v-card>
</v-dialog>
</v-card>
</template>
<script>
import folderIcon from '@poc/assets/icon-folder-tonal.svg'
import pdfIcon from '@poc/assets/icon-pdf-tonal.svg'
import imageIcon from '@poc/assets/icon-image-tonal.svg'
import videoIcon from '@poc/assets/icon-video-tonal.svg'
import audioIcon from '@poc/assets/icon-audio-tonal.svg'
import textIcon from '@poc/assets/icon-text-tonal.svg'
import zipIcon from '@poc/assets/icon-zip-tonal.svg'
import spreadsheetIcon from '@poc/assets/icon-spreadsheet-tonal.svg'
import fileIcon from '@poc/assets/icon-file-tonal.svg'
export default {
data() {
return {
icons: {
folder: folderIcon,
pdf: pdfIcon,
image: imageIcon,
video: videoIcon,
audio: audioIcon,
text: textIcon,
zip: zipIcon,
spreadsheet: spreadsheetIcon,
file: fileIcon,
},
// https://vuetifyjs.com/en/components/windows/
window: 0,
// length of the window or slider
length: 3,
// preview dialog
previewDialog: false,
// preview items
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
],
// search in the table
search: '',
selected: [],
sortBy: [{ key: 'name', order: 'asc' }],
headers: [
{
title: 'Name',
align: 'start',
key: 'name',
},
{ title: 'Type', key:'type'},
{ title: 'Size', key: 'size' },
{ title: 'Date', key: 'date' },
],
files: [
{
name: 'Be The Cloud',
path: 'folder-1',
type: 'Folder',
size: '2 GB',
date: '02 Mar 2023',
icon: 'folder',
},
{
name: 'Folder',
path: 'folder-2',
type: 'Folder',
size: '458 MB',
date: '21 Apr 2023',
icon: 'folder',
},
{
name: 'Presentation.pdf',
path: 'Presentation.pdf',
type: 'PDF',
size: '150 KB',
date: '24 Mar 2023',
icon: 'pdf',
},
{
name: 'Image.jpg',
path: 'image.jpg',
type: 'JPG',
size: '500 KB',
date: '12 Mar 2023',
icon: 'image',
},
{
name: 'Video.mp4',
path: 'video.mp4',
type: 'MP4',
size: '3 MB',
date: '01 Apr 2023',
icon: 'video',
},
{
name: 'Song.mp3',
path: 'Song.mp3',
type: 'MP3',
size: '8 MB',
date: '22 May 2023',
icon: 'audio',
},
{
name: 'Text.txt',
path: 'text.txt',
type: 'TXT',
size: '2 KB',
date: '21 May 2023',
icon: 'text',
},
{
name: 'NewArchive.zip',
path: 'newarchive.zip',
type: 'ZIP',
size: '21 GB',
date: '20 May 2023',
icon: 'zip',
},
{
name: 'Table.csv',
path: 'table.csv',
type: 'CSV',
size: '3 MB',
date: '20 May 2023',
icon: 'spreadsheet',
},
{
name: 'Map-export.json',
path: 'map-export.json',
type: 'JSON',
size: '1 MB',
date: '23 May 2023',
icon: 'file',
},
],
};
},
methods: {
previewFile(file) {
// Implement logic to fetch the file content for preview or generate a URL for preview
// Then, open the preview dialog
this.previewDialog = true;
},
getIconPath(icon) {
return this.icons[icon] || this.icons['file'];
},
},
};
</script>

47
web/satellite/vuetify-poc/src/components/BucketsDataTable.vue Normal file
View File

@ -0,0 +1,47 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="buckets"
:search="search"
class="elevation-1"
show-select
>
<template v-slot:item.name="{ item }">
<v-list-item class="rounded-lg font-weight-bold pl-1" link router-link to="/bucket">
<template v-slot:prepend>
<img src="../assets/icon-bucket-tonal.svg" alt="Bucket" class="mr-3">
</template>
{{ item.columns.name }}
</v-list-item>
</template>
</v-data-table>
</v-card>
</template>
<script>
export default {
props: ['headers', 'buckets'],
data () {
return {
search: '',
selected: [],
sortBy: [{ key: 'date', order: 'asc' }],
}
},
}
</script>

16
web/satellite/vuetify-poc/src/components/CardStatsComponent.vue Normal file
View File

@ -0,0 +1,16 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
</v-card>
</template>
<script>
export default {
props: ['title', 'subtitle', 'data']
}
</script>

218
web/satellite/vuetify-poc/src/components/Dashboard.vue
View File

@ -1,218 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container class="fill-height">
<v-responsive class="fill-height my-3 mx-lg-3">
<h1 class="text-h5 font-weight-bold mb-3">Project overview</h1>
<p>Your {{ limits.objectCount }} files are stored in {{ limits.segmentCount }} segments around the world.</p>
<div class="py-4" />
<v-row class="d-flex align-center justify-center">
<v-col cols="12" sm="6" md="4" lg="2">
<v-card title="Files" subtitle="All project files" variant="flat" :border="true" class="rounded-lg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">{{ limits.objectCount }}</v-chip>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<v-card title="Segments" subtitle="All file pieces" variant="flat" :border="true" class="rounded-lg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">{{ limits.segmentCount }}</v-chip>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<v-card title="Buckets" subtitle="Create bucket ➔" variant="flat" :border="true" class="rounded-lg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">{{ bucketsCount }}</v-chip>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<v-card title="Access" subtitle="New access ➔" variant="flat" :border="true" class="rounded-lg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">{{ accessGrantsCount }}</v-chip>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<v-card title="Team" subtitle="Invite member ➔" variant="flat" :border="true" class="rounded-lg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">{{ teamSize }}</v-chip>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<v-card title="Billing" subtitle="Free account" variant="flat" :border="true" class="rounded-lg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">Free</v-chip>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row class="d-flex align-center justify-center">
<v-col cols="12" md="6">
<v-card title="Storage" variant="flat" :border="true" class="rounded-lg">
<v-card-item class="py-1">
<v-progress-linear color="success" model-value="40" rounded height="6">
</v-progress-linear>
</v-card-item>
<v-card-item>
<v-row>
<v-col>
<h4>10 GB Used</h4>
<p><small>Limit: 25GB</small></p>
</v-col>
<v-col>
<h4 class="text-right">15 GB Available</h4>
<p class="text-right"><small>Need more?</small></p>
</v-col>
</v-row>
</v-card-item>
</v-card>
</v-col>
<v-col cols="12" md="6">
<v-card title="Download" variant="flat" :border="true" class="rounded-lg">
<v-card-item class="py-1">
<v-progress-linear color="success" model-value="60" rounded height="6" />
</v-card-item>
<v-card-item>
<v-row>
<v-col>
<h4>15 GB Used</h4>
<p><small>Limit: 25GB per month</small></p>
</v-col>
<v-col>
<h4 class="text-right">10 GB Available</h4>
<p class="text-right"><small>Need more?</small></p>
</v-col>
</v-row>
</v-card-item>
</v-card>
</v-col>
</v-row>
<v-row class="d-flex align-center justify-center">
<v-col cols="12" sm="6">
<v-card title="Segments" variant="flat" :border="true" class="rounded-lg">
<v-card-item class="py-1">
<v-progress-linear color="success" model-value="12" rounded height="6" />
</v-card-item>
<v-card-item>
<v-row>
<v-col>
<h4>1,234 Used</h4>
<p><small>Limit: 10,000</small></p>
</v-col>
<v-col>
<h4 class="text-right">8,765 Available</h4>
<p class="text-right"><small>Need more?</small></p>
</v-col>
</v-row>
</v-card-item>
</v-card>
</v-col>
<v-col cols="12" sm="6">
<v-card title="Free Tier" variant="flat" :border="true" class="rounded-lg">
<v-card-item class="py-1">
<v-progress-linear color="success" model-value="50" rounded height="6" />
</v-card-item>
<v-card-item>
<v-row>
<v-col>
<h4>50% Used</h4>
<p><small>Limit: $1.65</small></p>
</v-col>
<v-col>
<h4 class="text-right">50% Available</h4>
<p class="text-right"><small>Add a card</small></p>
</v-col>
</v-row>
</v-card-item>
</v-card>
</v-col>
</v-row>
</v-responsive>
</v-container>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { Project, ProjectLimits } from '@/types/projects';
const projectsStore = useProjectsStore();
const pmStore = useProjectMembersStore();
const agStore = useAccessGrantsStore();
const billingStore = useBillingStore();
const bucketsStore = useBucketsStore();
/**
* Returns current limits from store.
*/
const limits = computed((): ProjectLimits => {
return projectsStore.state.currentLimits;
});
/**
* Get selected project from store.
*/
const selectedProject = computed((): Project => {
return projectsStore.state.selectedProject;
});
/**
* Returns current team size from store.
*/
const teamSize = computed((): number => {
return pmStore.state.page.totalCount;
});
/**
* Returns access grants count from store.
*/
const accessGrantsCount = computed((): number => {
return agStore.state.page.totalCount;
});
/**
* Returns access grants count from store.
*/
const bucketsCount = computed((): number => {
return bucketsStore.state.page.totalCount;
});
/**
* Lifecycle hook after initial render.
* Fetches project limits.
*/
onMounted(async (): Promise<void> => {
const projectID = selectedProject.value.id;
const FIRST_PAGE = 1;
try {
await Promise.all([
projectsStore.getProjectLimits(projectID),
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, projectID),
agStore.getAccessGrants(FIRST_PAGE, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
]);
} catch (error) { /* empty */ }
});
</script>

12
web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue Normal file
View File

@ -0,0 +1,12 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<p class="text-medium-emphasis">{{ subtitle }} <a href="{{ link }}" target="_blank" class="link">Learn More</a></p>
</template>
<script>
export default {
props: ['subtitle', 'link']
}
</script>

12
web/satellite/vuetify-poc/src/components/PageTitleComponent.vue Normal file
View File

@ -0,0 +1,12 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<h1 class="text-h5 font-weight-bold my-3">{{ title }}</h1>
</template>
<script>
export default {
props: ['title']
}
</script>

115
web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue Normal file
View File

@ -0,0 +1,115 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="files"
:search="search"
class="elevation-1"
@item-click="handleItemClick"
item-key="path"
>
<template v-slot:item.name="{ item }">
<v-list-item class="rounded-lg font-weight-bold pl-1" link router-link to="/dashboard">
<template v-slot:prepend>
<img src="../assets/icon-project-tonal.svg" alt="Bucket" class="mr-3">
<!-- Project Icon -->
<!-- <v-chip :color="getColor(item.raw.role)" variant="tonal" size="small" class="ml-2 mr-2" rounded>
<svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z"/>
</svg>
</v-chip> -->
</template>
{{ item.columns.name }}
</v-list-item>
</template>
<template v-slot:item.role="{ item }">
<v-chip :color="getColor(item.raw.role)" rounded="xl" size="small" class="font-weight-bold">
{{ item.raw.role }}
</v-chip>
</template>
<template v-slot:item.actions="{ item }">
<v-btn size="small" link router-link to="/dashboard">
{{ item.raw.actions }}
</v-btn>
</template>
</v-data-table>
</v-card>
</template>
<script>
export default {
data() {
return {
// search in the table
search: '',
selected: [],
sortBy: [{ key: 'name', order: 'asc' }],
headers: [
{
title: 'Project',
align: 'start',
key: 'name',
},
{ title: 'Role', key:'role'},
{ title: 'Members', key: 'size' },
{ title: 'Date Added', key: 'date' },
{ title: 'Actions', key: 'actions' },
],
files: [
{
name: 'My First Project',
role: 'Owner',
size: '1',
date: '02 Mar 2023',
actions: 'Open Project',
},
{
name: 'Storj Labs',
role: 'Member',
size: '23',
date: '21 Apr 2023',
actions: 'Open Project',
},
{
name: 'Invitation Project',
role: 'Invited',
size: '15',
date: '24 Mar 2023',
actions: 'Join Project',
},
],
};
},
computed: {
getColor() {
return (role) => {
if (role === 'Owner') return 'purple2'
if (role === 'Invited') return 'warning'
return 'green'
}
}
},
};
</script>

199
web/satellite/vuetify-poc/src/components/Team.vue
View File

@ -1,199 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container class="fill-height">
<v-responsive class="fill-height my-3 mx-lg-3">
<h1 class="text-h5 font-weight-bold mb-3">Team</h1>
<p>Manage the team of this project. <a href="https://docs.storj.io/dcs/users" target="_blank" class="link">Learn More</a></p>
<v-btn
color="primary"
class="mt-4 mb-8"
>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" class="mr-1" xmlns="http://www.w3.org/2000/svg">
<path d="M11.706 3.59998C13.56 3.59998 15.0629 5.10292 15.0629 6.9569C15.0629 7.90694 14.6654 8.79086 13.9894 9.41778L13.9419 9.46077L13.975 9.47516C15.2884 10.0527 16.3478 11.1049 16.9302 12.4334L16.9594 12.5011L16.9873 12.5683L17.0261 12.6651C17.0749 12.7964 17.0999 12.9354 17.0999 13.0756C17.0999 13.7014 16.6112 14.2154 15.9889 14.2517L15.9555 14.2532L15.9218 14.2537H7.46736C7.31149 14.2537 7.15705 14.2239 7.01235 14.166C6.38496 13.9147 6.08009 13.2024 6.33177 12.574C6.89889 11.1806 7.98433 10.0758 9.34077 9.47758L9.4077 9.44857L9.44125 9.43448L9.40493 9.40101C9.29824 9.30057 9.19818 9.19324 9.10543 9.07976L9.05066 9.01094L9.03417 8.98902L9.0049 9.02722C8.68761 9.43175 8.28058 9.76003 7.81582 9.98362L7.75487 10.0122L7.70102 10.0361L7.64881 10.0627C7.31336 10.228 6.94881 10.3264 6.57429 10.3525L6.50396 10.3566L6.43734 10.3588L6.37503 10.3595L6.31812 10.3591L6.26293 10.3594C4.61058 10.3796 3.12361 11.3273 2.39647 12.7824L2.37142 12.8333L2.34737 12.8835L4.47011 12.8836C4.82977 12.8836 5.12469 13.1608 5.15295 13.5131L5.15462 13.5411L5.15517 13.5687C5.15517 13.9378 4.86324 14.2387 4.49766 14.2532L4.47011 14.2537H2.12363C1.44778 14.2537 0.899902 13.7058 0.899902 13.03C0.899902 12.9088 0.917894 12.7885 0.954094 12.6703L0.970724 12.6198L0.98803 12.574C1.55513 11.1807 2.64051 10.0759 3.9969 9.47763L4.06383 9.44862L4.0972 9.4346L4.09132 9.42921C3.43537 8.82693 3.03867 7.98456 3.00735 7.07365L3.00583 7.01415L3.00535 6.9569C3.00535 5.10292 4.50829 3.59998 6.36227 3.59998C7.40659 3.59998 8.36889 4.08075 8.9975 4.87697L9.03417 4.92428L9.03625 4.92154C9.64136 4.12812 10.5729 3.63601 11.5924 3.60188L11.6491 3.60045L11.706 3.59998ZM11.6607 10.359L11.6067 10.3594C9.93605 10.3798 8.43442 11.3484 7.71632 12.8309L7.69118 12.8835H15.63L15.6286 12.8802C14.9368 11.4062 13.4748 10.4259 11.8323 10.3624L11.7749 10.3606L11.7188 10.3595L11.6607 10.359ZM11.706 4.97008C10.6087 4.97008 9.7192 5.85961 9.7192 6.9569C9.7192 8.05419 10.6087 8.94372 11.706 8.94372C12.8033 8.94372 13.6928 8.05419 13.6928 6.9569C13.6928 5.85961 12.8033 4.97008 11.706 4.97008ZM6.36227 4.97008C5.26498 4.97008 4.37545 5.85961 4.37545 6.9569C4.37545 8.05419 5.26498 8.94372 6.36227 8.94372C7.45956 8.94372 8.34909 8.05419 8.34909 6.9569C8.34909 5.85961 7.45956 4.97008 6.36227 4.97008Z" fill="currentColor" />
</svg>
Add Members
<v-dialog
v-model="dialog"
activator="parent"
width="auto"
min-width="400px"
transition="fade-transition"
>
<v-card class="rounded-lg">
<v-sheet>
<v-card-item>
<template #prepend>
<v-card-title class="font-weight-bold ml-3">
Add Members
</v-card-title>
</template>
<template #append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="dialog = false"
/>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-form v-model="valid" class="pa-7 pb-4">
<v-row>
<v-col>
<p>Invite team members to join you in this project.</p>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
>
<v-text-field
v-model="email"
variant="outlined"
:rules="emailRules"
label="Enter e-mail"
hint="Members will have read & write permissions."
required
autofocus
class="mt-2"
/>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block @click="onAddUsersClick" :loading="isLoading">Send Invite</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-btn>
<v-card variant="flat" :border="true" class="rounded-lg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
/>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="projectMembers.map(m => m.user)"
:search="search"
class="elevation-1"
show-select="true"
hover="true"
>
<template #name="{ item }">
<v-list-item class="font-weight-bold pl-0">
{{ item.value.fullName }}
</v-list-item>
</template>
</v-data-table>
</v-card>
</v-responsive>
</v-container>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { ProjectMember } from '@/types/projectMembers';
const pmStore = useProjectMembersStore();
const projectsStore = useProjectsStore();
const isLoading = ref<boolean>(false);
const dialog = ref<boolean>(false);
const valid = ref<boolean>(false);
const search = ref<string>('');
const email = ref<string>('');
const selected = ref([]);
const sortBy = ref([{ key: 'date', order: 'asc' }]);
const emailRules = ref([
value => {
if (value) return true;
return 'E-mail is requred.';
},
value => {
if (/.+@.+\..+/.test(value)) return true;
return 'E-mail must be valid.';
},
]);
const headers = ref([
{
title: 'Name',
align: 'start',
key: 'fullName',
},
{ title: 'Email', key: 'email' },
]);
const selectedProjectID = computed((): string => projectsStore.state.selectedProject.id);
/**
* Returns team members of current page from store.
* With project owner pinned to top
*/
const projectMembers = computed((): ProjectMember[] => {
const projectMembers = pmStore.state.page.projectMembers;
const projectOwner = projectMembers.find((member) => member.user.id === projectsStore.state.selectedProject.ownerId);
const projectMembersToReturn = projectMembers.filter((member) => member.user.id !== projectsStore.state.selectedProject.ownerId);
// if the project owner exists, place at the front of the members list
projectOwner && projectMembersToReturn.unshift(projectOwner);
return projectMembersToReturn;
});
/**
* Tries to add users related to entered emails list to current project.
*/
async function onAddUsersClick(): Promise<void> {
if (isLoading.value) return;
isLoading.value = true;
try {
await pmStore.addProjectMembers([email.value], projectsStore.state.selectedProject.id);
} catch (_) {
isLoading.value = false;
return;
}
try {
await pmStore.getProjectMembers(1, projectsStore.state.selectedProject.id);
} catch (error) { /* empty */ }
dialog.value = false;
isLoading.value = false;
}
onMounted(() => {
pmStore.getProjectMembers(1, selectedProjectID.value);
});
</script>

104
web/satellite/vuetify-poc/src/components/TeamTableComponent.vue Normal file
View File

@ -0,0 +1,104 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="projectMembers"
:search="search"
class="elevation-1"
show-select
hover
>
<template v-slot:item.name="{ item }">
<v-list-item class="font-weight-bold pl-0">
<!-- <template v-slot:prepend>
<img src="../assets/icon-user-color.svg" alt="Dashboard" class="mr-3">
</template> -->
{{ item.columns.name }}
</v-list-item>
</template>
<template v-slot:item.role="{ item }">
<v-chip :color="roleColors.get(item.raw.role)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
{{ item.raw.role }}
</v-chip>
</template>
</v-data-table>
</v-card>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { ProjectInvitationItemModel, ProjectRole } from '@/types/projectMembers';
const pmStore = useProjectMembersStore();
const projectsStore = useProjectsStore();
const search = ref<string>('');
const selected = ref([]);
const sortBy = ref([{ key: 'date', order: 'asc' }]);
const headers = ref([
{
title: 'Name',
align: 'start',
key: 'name',
},
{ title: 'Email', key: 'email' },
{ title: 'Role', key: 'role' },
{ title: 'Date Added', key: 'date' },
]);
const roleColors = new Map<ProjectRole, string>([
[ProjectRole.Member, 'green'],
[ProjectRole.Owner, 'purple2'],
[ProjectRole.Invited, 'warning'],
[ProjectRole.InviteExpired, 'error'],
]);
/**
* Returns team members of current page from store.
* With project owner pinned to top
*/
const projectMembers = computed(() => {
const projectMembers = pmStore.state.page.getAllItems();
const projectOwner = projectMembers.find((member) => member.getUserID() === projectsStore.state.selectedProject.ownerId);
const projectMembersToReturn = projectMembers.filter((member) => member.getUserID() !== projectsStore.state.selectedProject.ownerId);
// if the project owner exists, place at the front of the members list
projectOwner && projectMembersToReturn.unshift(projectOwner);
return projectMembersToReturn.map(member => {
let role = ProjectRole.Member;
if (member.getUserID() === projectOwner?.getUserID()) {
role = ProjectRole.Owner;
} else if (member.isPending()) {
if ((member as ProjectInvitationItemModel).expired) {
role = ProjectRole.InviteExpired;
} else {
role = ProjectRole.Invited;
}
}
return {
name: member.getName(),
email: member.getEmail(),
role,
date: member.getJoinDate().toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' }),
};
});
});
</script>

28
web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue Normal file
View File

@ -0,0 +1,28 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
<v-card-item>
<v-progress-linear color="success" :model-value="progress" rounded height="6"></v-progress-linear>
</v-card-item>
<v-card-item>
<v-row>
<v-col>
<h4>{{ used }}</h4>
<p class="text-medium-emphasis"><small>{{ limit }}</small></p>
</v-col>
<v-col>
<h4 class="text-right">{{ available }}</h4>
<p class="text-right text-medium-emphasis"><small>{{ cta }}</small></p>
</v-col>
</v-row>
</v-card-item>
</v-card>
</template>
<script>
export default {
props: ['title', 'progress', 'used', 'limit', 'available', 'cta']
}
</script>

22
web/satellite/vuetify-poc/src/components/icons/IconAccess.vue Normal file
View File

@ -0,0 +1,22 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Access Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8283L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.21041 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141ZM8.65636 3.58979L8.59185 3.65326L8.54502 3.70055L8.49571 3.75161C7.15718 5.15496 6.66574 7.15205 7.17887 8.99879L7.19964 9.07161L7.39804 9.73358L2.27364 14.8581L2.08255 17.9173L5.14189 17.7262L10.2653 12.603L10.9161 12.7967L10.9825 12.8158C12.8841 13.3491 14.9337 12.8211 16.3423 11.4126C18.4837 9.27111 18.4837 5.79915 16.3423 3.65771C14.2222 1.53768 10.7982 1.51648 8.65636 3.58979ZM12.882 5.52457C13.322 5.08455 14.0354 5.08455 14.4754 5.52457C14.9154 5.96459 14.9154 6.67801 14.4754 7.11803C14.0354 7.55805 13.322 7.55805 12.882 7.11803C12.4419 6.67801 12.4419 5.96459 12.882 5.52457Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

24
web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue Normal file
View File

@ -0,0 +1,24 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- All Projects Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.33455 11.8182L2 10L5.33455 8.18182" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" :stroke="color" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Browse Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M7.41528 1.5L7.47416 1.50022C7.74772 1.5021 7.90752 1.51534 8.08726 1.54897C8.31459 1.59149 8.5204 1.66343 8.72982 1.77453L8.7863 1.80539C8.94923 1.89702 9.10215 2.00659 9.3826 2.23375L11.5641 4.01833L14.7994 4.01839C15.9959 4.023 16.5892 4.13696 17.1909 4.45057L17.2293 4.47085C17.7963 4.7741 18.2443 5.22205 18.5492 5.79226L18.5785 5.84813C18.8702 6.41362 18.9854 6.98502 18.9988 8.07466L19 8.22651V13.3036C18.9951 14.7512 18.8568 15.444 18.4724 16.1629C18.1201 16.8216 17.6002 17.3415 16.9386 17.6953L16.875 17.7287L16.8151 17.7591C16.1749 18.0782 15.5026 18.2062 14.2384 18.2203L14.0773 18.2215H5.99905C4.55062 18.2215 3.8431 18.095 3.13841 17.7354L3.0586 17.6937C2.39991 17.3415 1.88002 16.8216 1.5262 16.16L1.49445 16.0996C1.1502 15.4342 1.01556 14.7633 1.00116 13.4595L1 13.2999V5.25889C1 4.42193 1.1328 3.80687 1.42641 3.25184C1.71281 2.71041 2.13655 2.28105 2.67415 1.98753C3.22526 1.68663 3.83851 1.54572 4.67544 1.53468L7.28265 1.50052L7.41528 1.5ZM9.14621 6.62625C8.90655 6.80284 8.61945 6.90263 8.32276 6.91317L8.27031 6.9141L1.98424 6.91396L1.98438 13.2982C1.98871 14.4884 2.08071 15.0462 2.32046 15.5502L2.33564 15.5816L2.36716 15.6442L2.39578 15.6986C2.65631 16.1858 3.03569 16.5652 3.52283 16.8257C4.09289 17.1306 4.64457 17.2371 5.99905 17.2371H14.0755C15.3047 17.2327 15.8648 17.1328 16.3727 16.8798L16.4229 16.8543L16.4773 16.8257C16.9644 16.5652 17.3438 16.1858 17.6043 15.6986C17.9092 15.1286 18.0157 14.5769 18.0157 13.2224V8.22839C18.0118 7.22984 17.9345 6.77393 17.7342 6.36017L17.7054 6.30266L17.6795 6.25331C17.468 5.85783 17.1605 5.5504 16.7651 5.3389C16.2992 5.08974 15.8481 5.00262 14.7222 5.00262L11.3497 5.00257L9.14621 6.62625ZM7.41761 2.48438L7.29103 2.48486L4.68838 2.51898C4.00304 2.52802 3.54608 2.63302 3.14588 2.85152C2.77781 3.05248 2.49263 3.34144 2.29655 3.71213C2.08334 4.11518 1.98438 4.57348 1.98438 5.25889L1.98424 5.92958L8.27031 5.92972C8.3637 5.92972 8.45492 5.90315 8.53344 5.85347L8.56227 5.83377L10.4911 4.41236L8.839 3.06056C8.59588 2.86164 8.46697 2.76383 8.36672 2.70071L8.35189 2.69149L8.30933 2.66647L8.26352 2.64144C8.14711 2.57971 8.03578 2.54079 7.90626 2.51657C7.80285 2.49722 7.70913 2.48815 7.53803 2.48535L7.41761 2.48438Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconBucket.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Bucket Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18679 17.8839 4.21129 17.8825 4.23573L17.8846 4.23576L17.8812 4.25647C17.8747 4.34405 17.8594 4.43074 17.8354 4.51639L17.2448 7.86246L17.9754 8.59315C19.4245 10.0422 19.4378 12.3818 18.0009 13.8187C17.4404 14.3792 16.7425 14.7191 16.0136 14.8391L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04971 4.51801C2.02531 4.43125 2.00973 4.34344 2.00333 4.2547L2 4.23576L2.0021 4.23573C2.0007 4.21129 2 4.18679 2 4.16222C2 2.41577 5.5559 1 9.94232 1ZM16.5417 5.92227C15.1162 6.76791 12.6925 7.32444 9.94232 7.32444C7.19224 7.32444 4.76862 6.76794 3.34307 5.92236L5.07 15.708L5.23576 16.7077L5.24057 16.7148C5.26274 16.7549 5.30682 16.8087 5.37589 16.8715C5.56623 17.0445 5.87973 17.225 6.29249 17.3864C7.23129 17.7535 8.53735 17.9704 9.94232 17.9704C11.3555 17.9704 12.6685 17.7509 13.6079 17.3802C14.0199 17.2176 14.331 17.0363 14.5174 16.8636C14.5757 16.8096 14.6149 16.7629 14.6373 16.7265L14.6486 16.7072C14.6484 16.707 14.6488 16.707 14.6486 16.7072L14.6504 16.639L14.9642 14.8612C14.1844 14.7668 13.4269 14.4248 12.8191 13.8363L12.7754 13.7932L9.52478 10.5426C9.32375 10.3416 9.32375 10.0156 9.52478 9.81461C9.71912 9.62028 10.0302 9.6138 10.2323 9.79518L10.2528 9.81461L13.5034 13.0652C13.9635 13.5253 14.5466 13.7854 15.1434 13.8453L16.5417 5.92227ZM17.0264 9.10014L16.2081 13.7368C16.5984 13.6141 16.9648 13.3988 17.2729 13.0907C18.2944 12.0692 18.2964 10.4074 17.282 9.35635L17.2474 9.32116L17.0264 9.10014ZM9.94232 2.02956C7.93079 2.02956 6.05766 2.345 4.70709 2.88273L4.58604 2.93209C3.53715 3.37015 3.02956 3.85899 3.02956 4.16222C3.02956 4.4769 3.57618 4.99144 4.70709 5.44172C6.05766 5.97944 7.93079 6.29488 9.94232 6.29488C11.9539 6.29488 13.827 5.97944 15.1775 5.44172L15.2986 5.39235C16.3475 4.95429 16.8551 4.46546 16.8551 4.16222C16.8551 3.84754 16.3085 3.333 15.1775 2.88273C13.827 2.345 11.9539 2.02956 9.94232 2.02956Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Dashboard Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M10 3C14.9697 3 19 6.99704 19 11.9297C19 13.7318 18.4604 15.4552 17.4661 16.9176L17.3197 17.133H2.68034L2.53386 16.9176C1.53963 15.4552 1 13.7318 1 11.9297C1 6.99704 5.03035 3 10 3ZM10 3.98438C5.57218 3.98438 1.98438 7.54253 1.98438 11.9297C1.98438 13.4365 2.40794 14.8797 3.19314 16.1276L3.20669 16.1487H16.7935L16.8069 16.1276C17.5754 14.9062 17.9974 13.4978 18.015 12.0258L18.0156 11.9297C18.0156 7.54253 14.4278 3.98438 10 3.98438ZM14.3021 8.69557C14.3027 8.69619 14.3033 8.69682 14.3039 8.69744C14.4917 8.89459 14.4849 9.20638 14.2887 9.39518L10.3376 13.1983C10.1428 13.3858 9.83289 13.3799 9.64538 13.1851C9.64478 13.1844 9.64419 13.1838 9.64359 13.1832C9.45583 12.986 9.46261 12.6743 9.65876 12.4855L13.6099 8.68235C13.8047 8.49484 14.1146 8.50076 14.3021 8.69557Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconDocs.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Docs Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M15.5038 3.5L15.6357 3.50052C16.7522 3.50953 17.1768 3.63538 17.6048 3.86427C18.0492 4.10196 18.398 4.45077 18.6357 4.89521L18.6622 4.94557C18.8785 5.3658 18.9955 5.80899 19 6.92946V12.5492C19 13.765 18.8734 14.2058 18.6357 14.6502C18.398 15.0947 18.0492 15.4435 17.6048 15.6812L17.5544 15.7076C17.1342 15.924 16.691 16.0409 15.5705 16.0453L4.49621 16.0455C3.2805 16.0455 2.83965 15.9189 2.39521 15.6812C1.95077 15.4435 1.60196 15.0947 1.36427 14.6502L1.33832 14.6008C1.12163 14.1803 1.00455 13.7373 1 12.616V6.99621C1 5.7805 1.12658 5.33965 1.36427 4.89521C1.60196 4.45077 1.95077 4.10196 2.39521 3.86427L2.44462 3.83832C2.86513 3.62163 3.30814 3.50455 4.42946 3.50013L15.5038 3.5ZM9.45455 4.45455H4.49621C3.53192 4.45455 3.19328 4.51994 2.84537 4.706C2.56728 4.85473 2.35473 5.06728 2.206 5.34537L2.1829 5.38979C2.02572 5.701 1.96302 6.0264 1.95536 6.81904L1.95455 6.99621V12.5492C1.95455 13.5135 2.01994 13.8522 2.206 14.2001C2.35473 14.4782 2.56728 14.6907 2.84537 14.8395L2.88979 14.8626C3.201 15.0197 3.5264 15.0824 4.31903 15.0901L4.4962 15.0909H9.45455V4.45455ZM15.5645 4.45455H10.4091V15.0908L15.5668 15.0908L15.7428 15.0892C16.5293 15.078 16.836 15.0098 17.1546 14.8395C17.4327 14.6907 17.6453 14.4782 17.794 14.2001L17.8171 14.1557C17.9743 13.8445 18.037 13.5191 18.0446 12.7264L18.0455 12.5493V6.93323L18.0438 6.75718C18.0325 5.97074 17.9644 5.66396 17.794 5.34537C17.6453 5.06728 17.4327 4.85473 17.1546 4.706L17.1102 4.6829C16.7842 4.51824 16.4426 4.45726 15.5645 4.45455ZM7.34091 11.75C7.6045 11.75 7.81818 11.9637 7.81818 12.2273C7.81818 12.4821 7.61851 12.6902 7.3671 12.7038L7.34091 12.7045H4.20455C3.94096 12.7045 3.72727 12.4909 3.72727 12.2273C3.72727 11.9725 3.92695 11.7643 4.17836 11.7507L4.20455 11.75H7.34091ZM14.9773 11.75C15.2409 11.75 15.4545 11.9637 15.4545 12.2273C15.4545 12.4821 15.2549 12.6902 15.0035 12.7038L14.9773 12.7045H12.5909C12.3273 12.7045 12.1136 12.4909 12.1136 12.2273C12.1136 11.9725 12.3133 11.7643 12.5647 11.7507L12.5909 11.75H14.9773ZM7.34091 9.29545C7.6045 9.29545 7.81818 9.50914 7.81818 9.77273C7.81818 10.0275 7.61851 10.2357 7.3671 10.2493L7.34091 10.25H4.20455C3.94096 10.25 3.72727 10.0363 3.72727 9.77273C3.72727 9.51792 3.92695 9.30976 4.17836 9.29616L4.20455 9.29545H7.34091ZM15.7273 9.29545C15.9909 9.29545 16.2045 9.50914 16.2045 9.77273C16.2045 10.0275 16.0049 10.2357 15.7535 10.2493L15.7273 10.25H12.5909C12.3273 10.25 12.1136 10.0363 12.1136 9.77273C12.1136 9.51792 12.3133 9.30976 12.5647 9.29616L12.5909 9.29545H15.7273ZM7.34091 6.77273C7.6045 6.77273 7.81818 6.98641 7.81818 7.25C7.81818 7.5048 7.61851 7.71297 7.3671 7.72657L7.34091 7.72727H4.20455C3.94096 7.72727 3.72727 7.51359 3.72727 7.25C3.72727 6.9952 3.92695 6.78703 4.17836 6.77343L4.20455 6.77273H7.34091ZM15.7273 6.77273C15.9909 6.77273 16.2045 6.98641 16.2045 7.25C16.2045 7.5048 16.0049 7.71297 15.7535 7.72657L15.7273 7.72727H12.5909C12.3273 7.72727 12.1136 7.51359 12.1136 7.25C12.1136 6.9952 12.3133 6.78703 12.5647 6.77343L12.5909 6.77273H15.7273Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconFolder.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Folder Icon -->
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M5.51579 1.42995C5.64791 1.45467 5.76533 1.49571 5.88408 1.55868L5.92177 1.57924C6.02581 1.63776 6.12977 1.71218 6.37025 1.90894L8.02722 3.26464H10.4959C11.4707 3.26464 11.8242 3.36613 12.1805 3.55672C12.5369 3.74731 12.8166 4.02698 13.0071 4.38335L13.0276 4.42224C13.205 4.76624 13.2992 5.12863 13.2992 6.06796V9.71578C13.2992 10.8762 13.1784 11.297 12.9515 11.7213C12.7246 12.1455 12.3917 12.4785 11.9674 12.7054L11.925 12.7277L11.8831 12.749C11.4913 12.9442 11.061 13.0493 10.0184 13.0531H4.03651C2.87606 13.0531 2.45525 12.9322 2.03101 12.7054C1.60677 12.4785 1.27382 12.1455 1.04693 11.7213L1.0246 11.6788C0.815788 11.2752 0.703142 10.8524 0.699219 9.77319V3.81887C0.699219 3.23054 0.79403 2.84079 0.972671 2.50309C1.15131 2.16538 1.41378 1.89942 1.7491 1.71634C2.08442 1.53326 2.47289 1.43332 3.06116 1.42555L4.98843 1.40029L5.08663 1.3999C5.30902 1.40021 5.40783 1.40975 5.51579 1.42995ZM6.2012 5.5061C5.96768 5.68269 5.68514 5.78176 5.39314 5.79004L5.35327 5.79061H2.65841C2.36799 5.79061 2.09238 5.72723 1.84465 5.61354V9.76913L1.84581 9.91L1.84722 10.0035C1.85958 10.67 1.91799 10.9211 2.05701 11.1811C2.17714 11.4057 2.34658 11.5751 2.57121 11.6953L2.60382 11.7123L2.63876 11.7296C2.89018 11.8499 3.17013 11.8995 3.84943 11.9067L4.03651 11.9076L10.0578 11.9074C10.8683 11.9034 11.1446 11.8464 11.4272 11.6953C11.6519 11.5751 11.8213 11.4057 11.9414 11.1811L11.9585 11.1485L11.9757 11.1135C12.0961 10.8621 12.1457 10.5822 12.1528 9.90286L12.1538 9.71578V6.06796C12.1538 5.35216 12.1128 5.13991 11.9971 4.92354C11.9132 4.76679 11.7971 4.65063 11.6403 4.5668L11.6133 4.55272C11.4099 4.45002 11.1916 4.41176 10.54 4.41015L7.65046 4.41005L6.2012 5.5061ZM5.03525 2.54534L4.9324 2.54642L3.07627 2.57091L2.99301 2.57277C2.65746 2.58357 2.46155 2.63242 2.29802 2.72171C2.15997 2.79708 2.05873 2.89966 1.98519 3.03869C1.89614 3.20703 1.84979 3.40862 1.84507 3.75802C1.84775 3.77664 1.84942 3.79537 1.85017 3.81433L1.85063 3.83737C1.85063 4.27492 2.19851 4.63121 2.63277 4.64475L2.65841 4.64515H5.35327C5.40287 4.64515 5.45128 4.63099 5.49289 4.60455L5.51029 4.59247L6.7215 3.67643L5.58338 2.74533C5.44557 2.63356 5.39663 2.59821 5.35781 2.57632L5.34742 2.57064C5.33097 2.56192 5.32347 2.5593 5.30517 2.55587L5.28102 2.55202L5.26452 2.55013C5.22336 2.54607 5.16144 2.54445 5.03525 2.54534Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconForum.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Forum Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M4.7112 2.63846L4.63903 2.67652C3.79151 3.13007 3.12923 3.79254 2.67588 4.64023C2.22856 5.47665 1.96883 6.35545 1.96883 8.60961V17.1858L6.55054 14.1193H11.8132C13.3736 14.1193 14.3707 13.8644 15.2162 13.4123C16.0643 12.9587 16.727 12.296 17.1806 11.4479C17.6327 10.6024 17.8876 9.60524 17.8876 8.04492V8.04321C17.8876 6.48289 17.6327 5.48573 17.1806 4.64023C16.727 3.79214 16.0643 3.12944 15.2162 2.67588C14.3707 2.2237 13.3736 1.96883 11.8132 1.96883H8.60961C6.41451 1.96883 5.52547 2.21533 4.7112 2.63846ZM4.26303 1.77952C5.26909 1.25646 6.33187 1 8.60961 1H11.8132C13.4901 1 14.6536 1.2763 15.6731 1.82155C16.69 2.36541 17.491 3.1664 18.0349 4.18334C18.5801 5.20287 18.8564 6.36636 18.8564 8.04321V8.04492C18.8564 9.72177 18.5801 10.8853 18.0349 11.9048C17.491 12.9217 16.69 13.7227 15.6731 14.2666C14.6536 14.8118 13.4901 15.0881 11.8132 15.0881H6.84484L1 19V8.60961C1 6.26723 1.27144 5.21195 1.82155 4.18334C2.36541 3.1664 3.1664 2.36541 4.18334 1.82155L4.18456 1.82089L4.26176 1.78018L4.26303 1.77952Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconNew.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- New Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 1.99213C5.57737 1.99213 1.99213 5.57737 1.99213 10C1.99213 14.4226 5.57737 18.0079 10 18.0079C14.4226 18.0079 18.0079 14.4226 18.0079 10C18.0079 5.57737 14.4226 1.99213 10 1.99213ZM10 6.38583C10.2648 6.38583 10.4812 6.59336 10.4953 6.85467L10.4961 6.88189V9.5038L13.1181 9.50394C13.3921 9.50394 13.6142 9.72603 13.6142 10C13.6142 10.2648 13.4066 10.4812 13.1453 10.4953L13.1181 10.4961L10.4961 10.4959V13.1181C10.4961 13.3921 10.274 13.6142 10 13.6142C9.73516 13.6142 9.5188 13.4066 9.50467 13.1453L9.50394 13.1181V10.4959L6.88189 10.4961C6.60792 10.4961 6.38583 10.274 6.38583 10C6.38583 9.73516 6.59336 9.5188 6.85467 9.50467L6.88189 9.50394L9.50394 9.5038V6.88189C9.50394 6.60792 9.72603 6.38583 10 6.38583Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Passphrase Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M9.80992 1C13.0962 1 15.7603 3.66409 15.7603 6.95041L15.7604 8.74016C15.945 8.79445 16.0973 8.86276 16.25 8.94443C16.6864 9.1778 17.0288 9.52026 17.2622 9.95662L17.2897 10.009C17.5053 10.4288 17.6198 10.8736 17.6198 12.0194V15.5674C17.6198 16.761 17.4956 17.1938 17.2622 17.6302C17.0288 18.0665 16.6864 18.409 16.25 18.6424L16.1976 18.6698C15.7778 18.8855 15.3331 19 14.1872 19H5.43264C4.23904 19 3.80621 18.8757 3.36984 18.6424C2.93348 18.409 2.59102 18.0665 2.35765 17.6302L2.33017 17.5778C2.11454 17.158 2 16.7132 2 15.5674V12.0194L2.0006 11.8798C2.01012 10.7912 2.13361 10.3755 2.35765 9.95662C2.59102 9.52026 2.93348 9.1778 3.36984 8.94443L3.42224 8.91695C3.5578 8.84731 3.69597 8.78822 3.8595 8.74013L3.8595 6.95041C3.8595 3.66409 6.52359 1 9.80992 1ZM14.2497 9.62819L5.43264 9.6281C4.50161 9.6281 4.18536 9.68917 3.86093 9.86268C3.60604 9.999 3.41222 10.1928 3.2759 10.4477L3.25293 10.492C3.10811 10.78 3.04978 11.0839 3.04219 11.8374L3.04132 12.0194V15.5674C3.04132 16.4984 3.10239 16.8146 3.2759 17.1391C3.41222 17.394 3.60604 17.5878 3.86093 17.7241L3.90518 17.7471C4.208 17.8993 4.52829 17.956 5.37011 17.9586H14.2497L14.4303 17.9571C15.1768 17.9464 15.4645 17.8816 15.7589 17.7241C16.0138 17.5878 16.2076 17.394 16.3439 17.1391L16.3669 17.0948C16.5192 16.792 16.5758 16.4717 16.5784 15.6299V11.9569L16.5769 11.7763C16.5662 11.0298 16.5014 10.7421 16.3439 10.4477C16.2076 10.1928 16.0138 9.999 15.7589 9.86268L15.7147 9.83971C15.4118 9.68746 15.0915 9.63081 14.2497 9.62819ZM9.80992 12.157C10.4261 12.157 10.9256 12.6565 10.9256 13.2727C10.9256 13.7008 10.6845 14.0726 10.3307 14.2597L10.3306 15.281C10.3306 15.5685 10.0975 15.8017 9.80992 15.8017C9.53195 15.8017 9.30486 15.5838 9.29003 15.3096L9.28926 15.281L9.28925 14.2597C8.93537 14.0727 8.69421 13.7009 8.69421 13.2727C8.69421 12.6565 9.19373 12.157 9.80992 12.157ZM9.80992 2.04132C7.12581 2.04132 4.94484 4.19546 4.90148 6.86923L4.90083 6.95041V8.58678H14.719V6.95041C14.719 4.26631 12.5649 2.08533 9.8911 2.04198L9.80992 2.04132Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconProject.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Project Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconResources.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Resources Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M15.2372 1H4.49616C3.11757 1 2 2.11757 2 3.49616V17.8654C2 18.1764 2.12765 18.4737 2.3531 18.6879C2.80739 19.1196 3.52555 19.1012 3.95717 18.6469L9.59251 12.7156C9.59695 12.711 9.60151 12.7064 9.60619 12.702C9.75761 12.5581 9.997 12.5642 10.1409 12.7156L15.7762 18.6469C15.9904 18.8723 16.2878 19 16.5988 19C17.2254 19 17.7334 18.492 17.7334 17.8654V3.49616C17.7334 2.11757 16.6158 1 15.2372 1ZM4.49616 2.05898H15.2372C16.031 2.05898 16.6744 2.70243 16.6744 3.49616V17.8654C16.6744 17.9072 16.6405 17.941 16.5988 17.941C16.578 17.941 16.5582 17.9325 16.5439 17.9175L10.9086 11.9862C10.3619 11.4108 9.4522 11.3875 8.87677 11.9342C8.859 11.9511 8.84167 11.9685 8.82479 11.9862L3.18946 17.9175C3.16068 17.9478 3.1128 17.949 3.08252 17.9202C3.06749 17.9059 3.05898 17.8861 3.05898 17.8654V3.49616C3.05898 2.70243 3.70243 2.05898 4.49616 2.05898Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconSettings.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Settings Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconSupport.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Support Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M3 1.79302C3 1.21459 3.59804 0.834834 4.1184 1.07137L4.14619 1.08464L16.8182 7.42064C17.3915 7.70729 17.4017 8.51596 16.8489 8.82126L16.8182 8.83741L4.14619 15.1734C4.10071 15.1962 4.05453 15.2141 4.00811 15.2275L4.008 18.496C4.008 18.7744 3.78235 19 3.504 19C3.23493 19 3.0151 18.7891 3.00075 18.5237L3 18.496V1.79302ZM4.008 2.14235V14.1155L15.9812 8.12901L4.008 2.14235Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

21
web/satellite/vuetify-poc/src/components/icons/IconTeam.vue Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Team Icon -->
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M6.59292 2.93258C7.47745 2.04805 8.70097 1.5 10.0515 1.5C11.402 1.5 12.6255 2.04805 13.51 2.93258C14.3946 3.81711 14.9426 5.04064 14.9426 6.39114C14.9426 7.74164 14.3946 8.96517 13.51 9.8497C12.6255 10.7342 11.402 11.2823 10.0515 11.2823C8.70097 11.2823 7.47745 10.7342 6.59292 9.8497C5.70838 8.96517 5.16033 7.74164 5.16033 6.39114C5.16033 5.04064 5.70838 3.81711 6.59292 2.93258ZM10.0515 2.57814C8.9984 2.57814 8.04588 3.00434 7.35528 3.69494C6.66467 4.38555 6.23848 5.33806 6.23848 6.39114C6.23848 7.44422 6.66467 8.39673 7.35528 9.08734C8.04588 9.77795 8.9984 10.2041 10.0515 10.2041C11.1046 10.2041 12.0571 9.77795 12.7477 9.08734C13.4383 8.39673 13.8645 7.44422 13.8645 6.39114C13.8645 5.33806 13.4383 4.38555 12.7477 3.69494C12.0571 3.00434 11.1046 2.57814 10.0515 2.57814ZM9.96087 11.7423L10.0947 11.7433L10.0966 11.7433C11.9281 11.7697 13.66 12.3299 15.1558 13.2961C16.6886 14.2862 17.9725 15.7011 18.8722 17.4074L18.879 17.4202L18.885 17.4333C18.9481 17.5702 19 17.7282 19 17.9137C19 18.2083 18.8799 18.476 18.6873 18.6686C18.4947 18.8612 18.227 18.9813 17.9324 18.9813H2.18398C1.98449 18.9813 1.78824 18.9309 1.61346 18.8348C1.32713 18.6773 1.13129 18.4177 1.04705 18.1275C0.962982 17.838 0.989049 17.5146 1.14566 17.2287L1.14651 17.2271L1.20211 17.1272L1.20277 17.126C2.13132 15.4766 3.42591 14.117 4.95689 13.1758C6.4453 12.2607 8.15595 11.7427 9.9589 11.7423H9.96087ZM9.95726 12.8205C8.36486 12.8212 6.84891 13.2782 5.52155 14.0942C4.15437 14.9348 2.98599 16.1566 2.14294 17.6537L2.14227 17.6549L2.09123 17.7467L2.09073 17.7476C2.07712 17.773 2.07477 17.8005 2.08243 17.8269C2.09021 17.8537 2.10731 17.8759 2.13302 17.8901C2.14863 17.8987 2.16615 17.9032 2.18396 17.9032H17.914C17.9131 17.9009 17.912 17.8984 17.9109 17.8958C17.0938 16.352 15.9367 15.0841 14.5708 14.2017C13.2357 13.3393 11.7002 12.8451 10.083 12.8214L10.0811 12.8214L9.95913 12.8205L9.95726 12.8205Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

20
web/satellite/vuetify-poc/src/components/icons/IconUpload.vue Normal file
View File

@ -0,0 +1,20 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- Upload Icon -->
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
<path :fill="color" d="M7.28436 0.852711L7.30105 0.868755L10.2606 3.82831C10.4854 4.05305 10.4854 4.41744 10.2606 4.64219C10.0413 4.86145 9.68917 4.8668 9.46342 4.65823L9.44673 4.64219L7.45038 2.6458V9.14788C7.45038 9.46572 7.19272 9.72338 6.87489 9.72338C6.5648 9.72338 6.31199 9.47813 6.29984 9.17103L6.29939 9.14788V2.6841L4.3415 4.64219C4.12224 4.86145 3.77006 4.8668 3.54431 4.65823L3.52762 4.64219C3.30836 4.42292 3.30301 4.07075 3.51158 3.845L3.52762 3.82831L6.48718 0.868755C6.70644 0.64949 7.05862 0.644143 7.28436 0.852711ZM13.2992 12.1406C13.2992 12.4584 13.0416 12.7161 12.7237 12.7161H1.3184C1.00056 12.7161 0.742899 12.4584 0.742899 12.1406C0.742899 11.8227 1.00056 11.5651 1.3184 11.5651H12.7237C13.0416 11.5651 13.2992 11.8227 13.2992 12.1406ZM1.27472 12.6724C0.956878 12.6724 0.699219 12.4147 0.699219 12.0969V9.79489C0.699219 9.47705 0.956878 9.21939 1.27472 9.21939C1.59256 9.21939 1.85021 9.47705 1.85021 9.79489V12.0969C1.85021 12.4147 1.59256 12.6724 1.27472 12.6724ZM12.68 12.6724C12.3622 12.6724 12.1045 12.4147 12.1045 12.0969V9.79489C12.1045 9.47705 12.3622 9.21939 12.68 9.21939C12.9979 9.21939 13.2555 9.47705 13.2555 9.79489V12.0969C13.2555 12.4147 12.9979 12.6724 12.68 12.6724Z"/>
</svg>
</template>
<script>
export default {
props: {
color: {
type: String,
default: 'currentColor'
}
}
}
</script>

311
web/satellite/vuetify-poc/src/layouts/AppBar.vue
View File

@ -1,311 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-app-bar :elevation="0" :border="true">
<v-app-bar-nav-icon variant="text" color="light" class="ml-2" size="x-small" density="comfortable" @click.stop="drawer = !drawer" />
<v-app-bar-title class="ml-1">
<v-img v-if="theme.global.current.value.dark" :src="LogoWhite" width="180" alt="Storj Logo" />
<v-img v-else :src="Logo" width="180" alt="Storj Logo" />
</v-app-bar-title>
<template #append>
<v-menu offset-y width="200">
<template #activator="{ props }">
<!-- Theme Toggle Light/Dark Mode -->
<v-btn-toggle v-model="activeTheme" mandatory>
<v-btn icon="mdi-weather-sunny" size="small" rounded="xl" @click="() => toggleTheme('light')" />
<v-btn icon="mdi-weather-night" size="small" rounded="xl" @click="() => toggleTheme('dark')" />
</v-btn-toggle>
<!-- My Account Dropdown Button -->
<v-btn v-bind="props" variant="text" color="light" class="ml-4 mr-1 font-weight-medium">
<template #prepend>
<img :src="AccountIcon" alt="Account">
</template>
My Account
</v-btn>
</template>
<!-- My Account Menu -->
<v-list>
<v-list-item class="pt-2 pb-4 border-b">
<template #prepend>
<img :src="SatelliteIcon" alt="Region" class="mr-3">
</template>
<v-list-item-title class="text-body-2">Region</v-list-item-title>
<v-list-item-subtitle>
North America 1
</v-list-item-subtitle>
</v-list-item>
<v-list-item link>
<template #prepend>
<img :src="UpgradeIcon" alt="Upgrade" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Upgrade
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/account-settings">
<template #prepend>
<img :src="SettingsIcon" alt="Account Settings" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Settings
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/billing">
<template #prepend>
<img :src="CardIcon" alt="Billing" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Billing
</v-list-item-title>
</v-list-item>
<v-list-item link>
<template #prepend>
<img :src="LogoutIcon" alt="Log Out" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Sign Out
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
class="py-1"
>
<v-sheet>
<v-list>
<v-list-item link class="py-2">
<v-menu activator="parent" location="end" transition="scale-transition">
<v-card min-width="300">
<v-list>
<v-list-item link>
<template #prepend>
<img :src="ProjectsIcon" alt="All Projects" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
View all projects
</v-list-item-title>
</v-list-item>
<v-divider />
<v-list-item link>
<template #prepend>
<img :src="PlusIcon" alt="New Project" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Create new project
</v-list-item-title>
</v-list-item>
<v-divider />
<v-list-item link>
<template #prepend>
<img :src="LockIcon" alt="Passphrase" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Manage Passphrase
</v-list-item-title>
</v-list-item>
</v-list>
</v-card>
</v-menu>
<template #prepend>
<img :src="ProjectIcon" alt="Project" class="mr-3">
</template>
<v-list-item-title link class="text-body-2">
Project
</v-list-item-title>
<v-list-item-subtitle>
My first project
</v-list-item-subtitle>
<template #append>
<img :src="RightIcon" alt="Project" width="10">
</template>
</v-list-item>
<v-divider class="my-2" />
<v-list-item link router-link to="/dashboard" class="py-3">
<template #prepend>
<img :src="DashboardIcon" alt="Dashboard" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Overview
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/buckets">
<template #prepend>
<img :src="BucketIcon" alt="Buckets" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Buckets
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/bucket">
<template #prepend>
<img :src="FolderIcon" alt="Demo Bucket" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Browse
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/access">
<template #prepend>
<img :src="AccessIcon" alt="Access" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Access
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/team">
<template #prepend>
<img :src="TeamIcon" alt="Team" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Team
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-list-item link>
<v-menu activator="parent" location="end" transition="scale-transition">
<v-card min-width="300">
<v-list>
<v-list-item link class="py-3">
<template #prepend>
<img :src="DocsIcon" alt="Docs" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Docs
</v-list-item-title>
<v-list-item-subtitle>
<small>Read the documentation.</small>
</v-list-item-subtitle>
</v-list-item>
<v-divider />
<v-list-item link class="py-3">
<template #prepend>
<img :src="ForumIcon" alt="Forum" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Forum
</v-list-item-title>
<v-list-item-subtitle>
<small>Join our global community.</small>
</v-list-item-subtitle>
</v-list-item>
<v-divider />
<v-list-item link class="py-3">
<template #prepend>
<img :src="SupportIcon" alt="Support" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Support
</v-list-item-title>
<v-list-item-subtitle>
<small>Get support for Storj.</small>
</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-card>
</v-menu>
<template #prepend>
<img :src="ResourcesIcon" alt="Resources" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Resources
</v-list-item-title>
<template #append>
<img :src="RightIcon" alt="Project" width="10">
</template>
</v-list-item>
<v-list-item link>
<template #prepend>
<img :src="QuickstartIcon" alt="Quickstart" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Quickstart
</v-list-item-title>
<template #append>
<img :src="RightIcon" alt="Project" width="10">
</template>
</v-list-item>
<v-divider class="my-2" />
<v-list-item link router-link to="/design-library">
<template #prepend>
<img :src="BookmarkIcon" alt="Design Library" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Design Library
</v-list-item-title>
</v-list-item>
</v-list>
</v-sheet>
</v-navigation-drawer>
</template>
<script setup lang="ts">
import { onBeforeMount, ref, watch } from 'vue';
import { useTheme } from 'vuetify';
import Logo from '@poc/assets/logo.svg?url';
import LogoWhite from '@poc/assets/logo-white.svg?url';
import AccountIcon from '@poc/assets/icon-account.svg?url';
import SatelliteIcon from '@poc/assets/icon-satellite.svg?url';
import UpgradeIcon from '@poc/assets/icon-upgrade.svg?url';
import SettingsIcon from '@poc/assets/icon-settings.svg?url';
import CardIcon from '@poc/assets/icon-card.svg?url';
import LogoutIcon from '@poc/assets/icon-logout.svg?url';
import ProjectsIcon from '@poc/assets/icon-projects.svg?url';
import PlusIcon from '@poc/assets/icon-plus.svg?url';
import LockIcon from '@poc/assets/icon-lock.svg?url';
import ProjectIcon from '@poc/assets/icon-project.svg?url';
import RightIcon from '@poc/assets/icon-right.svg?url';
import QuickstartIcon from '@poc/assets/icon-quickstart.svg?url';
import BookmarkIcon from '@poc/assets/icon-bookmark.svg?url';
import DashboardIcon from '@poc/assets/icon-dashboard.svg?url';
import BucketIcon from '@poc/assets/icon-bucket.svg?url';
import FolderIcon from '@poc/assets/icon-folder.svg?url';
import AccessIcon from '@poc/assets/icon-access.svg?url';
import TeamIcon from '@poc/assets/icon-team.svg?url';
import DocsIcon from '@poc/assets/icon-docs.svg?url';
import ForumIcon from '@poc/assets/icon-forum.svg?url';
import SupportIcon from '@poc/assets/icon-support.svg?url';
import ResourcesIcon from '@poc/assets/icon-resources.svg?url';
const theme = useTheme();
const drawer = ref<boolean>(true);
const menu = ref<boolean>(false);
const activeTheme = ref<number | null>(null);
function toggleTheme(newTheme) {
if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
return;
}
theme.global.name.value = newTheme;
}
watch(() => theme.global.current.value.dark, (newVal) => {
activeTheme.value = newVal ? 1 : 0;
});
onBeforeMount(() => {
activeTheme.value = theme.global.current.value.dark ? 1 : 0;
});
</script>

16
web/satellite/vuetify-poc/src/layouts/default/Account.vue Normal file
View File

@ -0,0 +1,16 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-app>
<default-bar />
<account-nav />
<default-view />
</v-app>
</template>
<script setup>
import DefaultBar from './AppBar.vue'
import AccountNav from './AccountNav.vue'
import DefaultView from './View.vue'
</script>

91
web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue Normal file
View File

@ -0,0 +1,91 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-navigation-drawer
v-model="drawer"
class="py-1"
>
<v-sheet>
<v-list class="px-2" color="default" variant="flat">
<!-- Project -->
<v-list-item class="pa-4 rounded-lg" link router-link to="/dashboard" >
<template v-slot:prepend>
<img src="@poc/assets/icon-back-tonal.svg" alt="Project">
<!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
</svg> -->
</template>
<v-list-item-title link class="text-body-2 ml-3">
Go back
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- All Projects -->
<v-list-item class="pa-4 rounded-lg" link router-link to="/projects" >
<template v-slot:prepend>
<!-- <img src="@poc/assets/icon-prosject.svg" alt="Project" class="mr-3"> -->
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.33455 11.8182L2 10L5.33455 8.18182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
</svg> -->
</template>
<v-list-item-title link class="text-body-2 ml-3">
All Projects
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/account-settings" class="my-1 py-3" rounded="lg">
<template v-slot:prepend>
<!-- <img src="@poc/assets/icon-settings.svg" alt="Account Settings" class="mr-3"> -->
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z" fill="currentColor"/>
</svg>
</template>
<v-list-item-title class="text-body-2 ml-3">
Account Settings
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/billing" class="my-1" rounded="lg">
<template v-slot:prepend>
<!-- <img src="@poc/assets/icon-card.svg" alt="Billing" class="mr-3"> -->
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5674 3L15.707 3.0006C16.7956 3.01012 17.2112 3.13361 17.6302 3.35765C18.0665 3.59102 18.409 3.93348 18.6424 4.36984L18.6698 4.42224C18.8855 4.84205 19 5.28678 19 6.43264V12.807C19 14.0006 18.8757 14.4335 18.6424 14.8698C18.409 15.3062 18.0665 15.6486 17.6302 15.882L17.5778 15.9095C17.158 16.1251 16.7132 16.2397 15.5674 16.2397H4.43264C3.23904 16.2397 2.80621 16.1154 2.36984 15.882C1.93348 15.6486 1.59102 15.3062 1.35765 14.8698L1.33017 14.8174C1.11454 14.3976 1 13.9529 1 12.807V6.43264L1.0006 6.29301C1.01012 5.2044 1.13361 4.78875 1.35765 4.36984C1.59102 3.93348 1.93348 3.59102 2.36984 3.35765L2.42224 3.33017C2.84205 3.11454 3.28678 3 4.43264 3H15.5674ZM17.9585 9.39669H2.04132L2.04142 12.8696C2.04416 13.7524 2.10634 14.0617 2.2759 14.3787C2.41222 14.6336 2.60604 14.8274 2.86093 14.9638L2.90518 14.9867C3.208 15.139 3.52829 15.1956 4.37011 15.1983H15.6299L15.8105 15.1967C16.557 15.1861 16.8447 15.1212 17.1391 14.9638C17.394 14.8274 17.5878 14.6336 17.7241 14.3787L17.7471 14.3345C17.8993 14.0317 17.956 13.7114 17.9586 12.8696L17.9585 9.39669ZM15.6299 4.04132H4.43264C3.50161 4.04132 3.18536 4.10239 2.86093 4.2759C2.60604 4.41222 2.41222 4.60604 2.2759 4.86093L2.25293 4.90518C2.10811 5.19322 2.04978 5.49709 2.04219 6.25058L2.04132 6.43264V6.57025H17.9585L17.9586 6.37011L17.9571 6.18949C17.9464 5.44301 17.8816 5.15534 17.7241 4.86093C17.5878 4.60604 17.394 4.41222 17.1391 4.2759L17.0948 4.25293C16.792 4.10068 16.4717 4.04403 15.6299 4.04132Z" fill="currentColor"/>
</svg>
</template>
<v-list-item-title class="text-body-2 ml-3">
Account Billing
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
</v-list>
</v-sheet>
</v-navigation-drawer>
</template>
<script>
export default {
data: () => ({
drawer: true,
menu: false,
}),
}
</script>

14
web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-app>
<default-bar />
<default-view />
</v-app>
</template>
<script setup>
import DefaultBar from './AppBar.vue'
import DefaultView from './View.vue'
</script>

187
web/satellite/vuetify-poc/src/layouts/default/AppBar.vue Normal file
View File

@ -0,0 +1,187 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-app-bar :elevation="0">
<v-app-bar-nav-icon
variant="text"
color="default"
class="ml-1"
size="x-small"
density="comfortable"
@click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-app-bar-title class="mx-1">
<v-img
v-if="theme.global.current.value.dark"
src="@poc/assets/logo-dark.svg"
width="120"
alt="Storj Logo"
/>
<v-img
v-else
src="@poc/assets/logo.svg"
width="120"
alt="Storj Logo"
/>
</v-app-bar-title>
<template v-slot:append>
<v-menu offset-y width="200" class="rounded-xl">
<template v-slot:activator="{ props }">
<!-- Theme Toggle Light/Dark Mode -->
<v-btn-toggle
v-model="activeTheme"
mandatory
border
inset
density="comfortable"
class="pa-1"
>
<v-tooltip text="Light Theme" location="bottom">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon="mdi-weather-sunny"
size="small"
rounded="xl"
@click="toggleTheme('light')"
aria-label="Toggle Light Theme"
>
</v-btn>
</template>
</v-tooltip>
<v-tooltip text="Dark Theme" location="bottom">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon="mdi-weather-night"
size="small"
rounded="xl"
@click="toggleTheme('dark')"
aria-label="Toggle Dark Theme"
>
</v-btn>
</template>
</v-tooltip>
</v-btn-toggle>
<!-- My Account Dropdown Button -->
<v-btn
v-bind="props"
variant="outlined"
color="default"
class="ml-4 font-weight-medium"
density="comfortable"
>
<template v-slot:append>
<img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
</template>
My Account</v-btn>
</template>
<!-- My Account Menu -->
<v-list class="px-2">
<v-list-item class="py-2 rounded-lg">
<template v-slot:prepend>
<img src="@poc/assets/icon-satellite.svg" alt="Region">
</template>
<v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
<v-list-item-subtitle class="ml-3">
North America 1
</v-list-item-subtitle>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-list-item link class="my-1 rounded-lg">
<template v-slot:prepend>
<img src="@poc/assets/icon-upgrade.svg" alt="Upgrade">
</template>
<v-list-item-title class="text-body-2 ml-3">
Upgrade
</v-list-item-title>
</v-list-item>
<v-list-item link class="my-1 rounded-lg" router-link to="/billing">
<template v-slot:prepend>
<img src="@poc/assets/icon-card.svg" alt="Billing">
</template>
<v-list-item-title class="text-body-2 ml-3">
Billing
</v-list-item-title>
</v-list-item>
<v-list-item link class="my-1 rounded-lg" router-link to="/account-settings">
<template v-slot:prepend>
<img src="@poc/assets/icon-settings.svg" alt="Account Settings">
</template>
<v-list-item-title class="text-body-2 ml-3">
Settings
</v-list-item-title>
</v-list-item>
<v-list-item class="rounded-lg" link>
<template v-slot:prepend>
<img src="@poc/assets/icon-logout.svg" alt="Log Out">
</template>
<v-list-item-title class="text-body-2 ml-3">
Sign Out
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
</v-app-bar>
</template>
<script>
import { useTheme } from 'vuetify'
export default {
setup () {
const theme = useTheme()
return {
theme,
toggleTheme: (newTheme) => {
if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
return;
}
theme.global.name.value = newTheme;
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
}
}
},
data: () => ({
drawer: true,
menu: false,
activeTheme: null,
}),
watch: {
'theme.global.current.value.dark': function(newVal) {
this.activeTheme = newVal ? 1 : 0;
}
},
created() {
// Check for stored theme in localStorage. If none, default to 'light'
const storedTheme = localStorage.getItem('theme') || 'light';
this.toggleTheme(storedTheme);
this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
}
}
</script>

8
web/satellite/vuetify-poc/src/layouts/Default.vue → web/satellite/vuetify-poc/src/layouts/default/Default.vue
View File

@ -3,7 +3,8 @@
<template>
<v-app>
<app-bar />
<default-bar />
<ProjectNav />
<default-view />
</v-app>
</template>
@ -12,8 +13,9 @@
import { onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import AppBar from './AppBar.vue';
import DefaultView from './DefaultView.vue';
import DefaultBar from './AppBar.vue'
import ProjectNav from './ProjectNav.vue'
import DefaultView from './View.vue'
import { RouteConfig } from '@/types/router';
import { Project } from '@/types/projects';

287
web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue Normal file
View File

@ -0,0 +1,287 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-navigation-drawer
v-model="drawer"
class="py-1"
>
<v-sheet>
<v-list class="px-2" color="default" variant="flat">
<!-- Project -->
<v-list-item link class="pa-4 rounded-lg">
<v-menu activator="parent" location="end" transition="scale-transition">
<!-- Project Menu -->
<v-list class="pa-2">
<!-- My Projects -->
<v-list-item rounded="lg" link router-link to="/projects">
<template v-slot:prepend>
<!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
<IconProject/>
</template>
<v-list-item-title class="text-body-2 ml-3">
<v-chip color="purple2" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link>
My Projects
</v-chip>
</v-list-item-title>
</v-list-item>
<!-- Selected Project -->
<v-list-item link rounded="lg" active>
<template v-slot:prepend>
<img src="@poc/assets/icon-check-color.svg" alt="Selected Project">
</template>
<v-list-item-title class="text-body-2 ml-3">
My First Project
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- Shared With Me -->
<v-list-item rounded="lg" link router-link to="/projects">
<template v-slot:prepend>
<IconProject/>
</template>
<v-list-item-title class="text-body-2 ml-3">
<v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link>
Shared Projects
</v-chip>
</v-list-item-title>
</v-list-item>
<!-- Other Project -->
<v-list-item link rounded="lg">
<v-list-item-title class="text-body-2">
Storj Labs
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- Project Settings -->
<v-list-item link rounded="lg">
<template v-slot:prepend>
<IconSettings/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Project Settings
</v-list-item-title>
</v-list-item>
<!-- <v-divider class="my-2"></v-divider> -->
<!-- View All Projects -->
<v-list-item link rounded="lg" router-link to="/projects">
<template v-slot:prepend>
<IconAllProjects/>
</template>
<v-list-item-title class="text-body-2 ml-3">
View All Projects
</v-list-item-title>
</v-list-item>
<!-- Create New Project -->
<v-list-item link rounded="lg">
<template v-slot:prepend>
<IconNew />
</template>
<v-list-item-title class="text-body-2 ml-3">
Create New Project
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- Manage Passphrase -->
<v-list-item link class="mt-1" rounded="lg">
<template v-slot:prepend>
<IconPassphrase/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Manage Passphrase
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<template v-slot:prepend>
<IconProject/>
</template>
<v-list-item-title link class="text-body-2 ml-3">
Project
</v-list-item-title>
<v-list-item-subtitle class="ml-3">
My first project
</v-list-item-subtitle>
<template v-slot:append>
<img src="@poc/assets/icon-right.svg" alt="Project" width="10">
</template>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-list-item link router-link to="/dashboard" class="my-1 py-3" rounded="lg">
<template v-slot:prepend>
<IconDashboard/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Overview
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/buckets" class="my-1" rounded="lg">
<template v-slot:prepend>
<IconBucket/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Buckets
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/bucket" class="my-1" rounded="lg">
<template v-slot:prepend>
<IconBrowse/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Browse
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/access" class="my-1" rounded="lg">
<template v-slot:prepend>
<IconAccess/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Access
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/team" class="my-1" rounded="lg">
<template v-slot:prepend>
<IconTeam/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Team
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- Resources Menu -->
<v-list-item link class="rounded-lg">
<v-menu activator="parent" location="end" transition="scale-transition">
<v-list class="pa-2">
<v-list-item link class="py-3" rounded="lg">
<template v-slot:prepend>
<!-- <img src="@poc/assets/icon-docs.svg" alt="Docs"> -->
<IconDocs/>
</template>
<v-list-item-title class="text-body-2 mx-3">
Documentation
</v-list-item-title>
<v-list-item-subtitle class="mx-3">
<small>Go to the Storj docs.</small>
</v-list-item-subtitle>
</v-list-item>
<v-list-item link class="py-3" rounded="lg">
<template v-slot:prepend>
<IconForum/>
</template>
<v-list-item-title class="text-body-2 mx-3">
Community Forum
</v-list-item-title>
<v-list-item-subtitle class="mx-3">
<small>Join our global community.</small>
</v-list-item-subtitle>
</v-list-item>
<v-list-item link class="py-3" rounded="lg">
<template v-slot:prepend>
<IconSupport/>
</template>
<v-list-item-title class="text-body-2 mx-3">
Storj Support
</v-list-item-title>
<v-list-item-subtitle class="mx-3">
<small>Need help? Get support.</small>
</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-menu>
<template v-slot:prepend>
<IconResources/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Resources
</v-list-item-title>
<template v-slot:append>
<img src="@poc/assets/icon-right.svg" alt="Resources" width="10">
</template>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- <v-list-item link class="my-1" router-link to="/design-library" rounded="lg">
<template v-slot:prepend>
<img src="@poc/assets/icon-bookmark.svg" alt="Design Library" class="mr-3">
</template>
<v-list-item-title class="text-body-2">
Design Library
</v-list-item-title>
</v-list-item> -->
</v-list>
</v-sheet>
</v-navigation-drawer>
</template>
<script>
import IconProject from '@poc/components/icons/IconProject.vue';
import IconSettings from '@poc/components/icons/IconSettings.vue';
import IconAllProjects from '@poc/components/icons/IconAllProjects.vue';
import IconNew from '@poc/components/icons/IconNew.vue';
import IconPassphrase from '@poc/components/icons/IconPassphrase.vue';
import IconDashboard from '@poc/components/icons/IconDashboard.vue';
import IconBucket from '@poc/components/icons/IconBucket.vue';
import IconBrowse from '@poc/components/icons/IconBrowse.vue';
import IconAccess from '@poc/components/icons/IconAccess.vue';
import IconTeam from '@poc/components/icons/IconTeam.vue';
import IconDocs from '@poc/components/icons/IconDocs.vue';
import IconForum from '@poc/components/icons/IconForum.vue';
import IconSupport from '@poc/components/icons/IconSupport.vue';
import IconResources from '@poc/components/icons/IconResources.vue';
export default {
components: {
IconProject,
IconSettings,
IconAllProjects,
IconNew,
IconPassphrase,
IconDashboard,
IconBucket,
IconBrowse,
IconAccess,
IconTeam,
IconDocs,
IconForum,
IconSupport,
IconResources,
},
data: () => ({
drawer: true,
menu: false,
}),
}
</script>

4
web/satellite/vuetify-poc/src/layouts/DefaultView.vue → web/satellite/vuetify-poc/src/layouts/default/View.vue
View File

@ -7,4 +7,6 @@
</v-main>
</template>
<script setup lang="ts" />
<script setup>
//
</script>

26
web/satellite/vuetify-poc/src/main.ts
View File

@ -1,17 +1,27 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { createApp } from 'vue';
/**
* main.ts
*
* Bootstraps Vuetify and other plugins then mounts the App
*/
import App from './App.vue';
// Components
import App from './App.vue'
import { registerPlugins } from '@poc/plugins';
// Composables
import { createApp } from 'vue'
import './styles/settings.scss';
// Styles
import './styles/settings.scss'
// import './styles/styles.scss'
const app = createApp(App);
app.config.performance = true;
// Plugins
import { registerPlugins } from '@poc/plugins'
registerPlugins(app);
const app = createApp(App)
app.mount('#app');
registerPlugins(app)
app.mount('#app')

22
web/satellite/vuetify-poc/src/plugins/index.ts
View File

@ -1,21 +1,25 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/index.ts
*
* Automatically included in `./src/main.ts`
*/
// Plugins
import { createPinia, setActivePinia } from 'pinia';
import { App } from 'vue';
import { router } from '../router';
import { loadFonts } from './webfontloader';
import vuetify from './vuetify';
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import router from '../router'
const pinia = createPinia();
setActivePinia(pinia);
export function registerPlugins(app: App<Element>): void {
loadFonts();
export function registerPlugins (app) {
loadFonts()
app
.use(vuetify)
.use(router)
.use(pinia);
.use(pinia)
}

74
web/satellite/vuetify-poc/src/plugins/vuetify.ts
View File

@ -1,14 +1,37 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { Blueprint, createVuetify } from 'vuetify';
import { md3 } from 'vuetify/lib/blueprints/index.mjs';
import { VDataTable } from 'vuetify/lib/labs/VDataTable/index.mjs';
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles';
/**
* plugins/vuetify.ts
*
* Framework documentation: https://vuetifyjs.com`
*/
// Styles
import '@mdi/font/css/materialdesignicons.css'
// import 'vuetify/styles'
// Composables
import { createVuetify } from 'vuetify'
// Data Table
import { VDataTable } from 'vuetify/labs/VDataTable'
// Material Design 2
// import { md2 } from 'vuetify/blueprints'
// Matrial Design 3
import { md3 } from 'vuetify/blueprints'
// Storj Styles
import '../styles/styles.scss'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
blueprint: md3 as Blueprint,
// Use blueprint for Material Design 2
// blueprint: md2,
// Use blueprint for Material Design 3
blueprint: md3,
theme: {
themes: {
light: {
@ -19,24 +42,44 @@ export default createVuetify({
success: '#00AC26',
warning: '#FF8A00',
error: '#FF458B',
surface: '#fff',
error2: '#FF0149',
surface: '#FFF',
purple: '#7B61FF',
blue6: '#091c45',
blue5: '#0218A7',
blue4: '#0059D0',
blue2: '#003ACD',
yellow: '#FFC600',
yellow2: '#FFB701',
orange: '#FFA800',
green: '#00B150',
purple2: '#502EFF',
},
},
dark: {
colors: {
primary: '#0149FF',
secondary: '#537CFF',
background: '#0c121d',
surface: '#0c121d',
// background: '#010923',
// background: '#0c121d',
background: '#0d1116',
error: '#FF458B',
error2: '#FF0149',
// surface: '#010923',
// surface: '#0c121d', dark bluish
surface: '#0d1116',
purple: '#7B61FF',
blue6: '#091c45',
blue5: '#2196f3',
blue4: '#0059D0',
},
blue2: '#003ACD',
yellow: '#FFC600',
yellow2: '#FFB701',
orange: '#FFA800',
warning: '#FF8A00',
green: '#00B150',
purple2: '#7B61FF',
}
},
},
},
@ -52,9 +95,16 @@ export default createVuetify({
noDataText: 'Results not found',
},
VBtn: {
elevation: 0,
// elevation: 1,
density: 'default',
// height: 48,
rounded: 'lg',
// textTransform: 'none',
class: 'text-capitalize font-weight-bold',
style: 'letter-spacing:0;'
},
VTooltip: {
transition: 'fade-transition',
},
},
});
})

14
web/satellite/vuetify-poc/src/plugins/webfontloader.ts
View File

@ -1,12 +1,18 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
export async function loadFonts(): Promise<void> {
const webFontLoader = await import('webfontloader');
/**
* plugins/webfontloader.ts
*
* webfontloader documentation: https://github.com/typekit/webfontloader
*/
export async function loadFonts () {
const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
webFontLoader.load({
google: {
families: ['Inter:400,600,800&display=swap'],
families: ['Inter:400,500,700&display=swap'],
},
});
})
}

66
web/satellite/vuetify-poc/src/router/index.ts
View File

@ -1,29 +1,79 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import { createRouter, createWebHistory } from 'vue-router';
// Composables
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/vuetifypoc',
redirect: { path: '/dashboard' },
component: () => import('@poc/layouts/Default.vue'),
redirect: { path: '/projects' }, // redirect
component: () => import('@poc/layouts/default/Default.vue'),
children: [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@poc/views/Dashboard.vue'),
component: () => import(/* webpackChunkName: "home" */ '@poc/views/Dashboard.vue'),
},
{
path: '/buckets',
name: 'Buckets',
component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
},
{
path: '/bucket',
name: 'Bucket',
component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Bucket.vue'),
},
{
path: '/access',
name: 'Access',
component: () => import(/* webpackChunkName: "Access" */ '@poc/views/Access.vue'),
},
{
path: '/team',
name: 'Team',
component: () => import('@poc/views/Team.vue'),
component: () => import(/* webpackChunkName: "Team" */ '@poc/views/Team.vue'),
},
],
},
];
{
path: '/account',
component: () => import('@poc/layouts/default/Account.vue'),
children: [
{
path: '/billing',
name: 'Billing',
component: () => import(/* webpackChunkName: "Billing" */ '@poc/views/Billing.vue'),
},
{
path: '/account-settings',
name: 'Account Settings',
component: () => import(/* webpackChunkName: "MyAccount" */ '@poc/views/AccountSettings.vue'),
},
{
path: '/design-library',
name: 'Design Library',
component: () => import(/* webpackChunkName: "DesignLibrary" */ '@poc/views/DesignLibrary.vue'),
},
],
},
{
path: '/projects',
component: () => import('@poc/layouts/default/AllProjects.vue'),
children: [
{
path: '/projects',
name: 'Projects',
component: () => import(/* webpackChunkName: "Projects" */ '@poc/views/Projects.vue'),
},
],
},
]
export const router = createRouter({
const router = createRouter({
history: createWebHistory(),
routes,
});
})
export default router

217
web/satellite/vuetify-poc/src/styles/settings.scss
View File

@ -1,193 +1,36 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
@use 'vuetify' with (
/**
* src/styles/settings.scss
*
* Configures SASS variables and Vuetify overwrites
*/
// Warning
// Duplicated CSS
// Placing actual styles or importing a regular stylesheet
// into the settings file will cause them to be
// duplicated everywhere the file is imported.
// Only put variables, mixins, and functions in the settings file,
// styles should be placed in the main stylesheet or loaded another way.
// Use SASS https://vuetifyjs.com/en/features/sass-variables/
// @use 'vuetify' with (
// // $utilities: false,
// $color-pack: false,
// $body-font-family: 'Inter',
// );
// To obtain settings from Vuetify, you must forward its variables from within your local stylesheet
@forward 'vuetify' with (
// $utilities: false,
$color-pack: false,
$body-font-family: 'Inter',
// $button-text-letter-spacing: 'none',
// $button-height: 40px,
);
.v-theme--light {
--v-border-color: 0, 0, 0;
--v-border-opacity: 0.1;
}
.v-responsive {
// allow the shadows to appear outside the containers
overflow: visible;
}
.v-btn {
text-transform: none;
letter-spacing: 0;
font-weight: 700;
transition: all 0.2s ease 0s;
line-height: 1.5rem;
}
.v-btn.v-theme--light.bg-success {
color: #fff;
}
.v-btn--size-x-small {
--v-btn-height: 2rem;
padding-left: 12px;
padding-right: 12px;
}
.v-btn--size-small {
--v-btn-height: 2.25rem;
padding-left: 14px;
padding-right: 14px;
}
.v-btn--size-default {
--v-btn-height: 3rem;
font-size: 14px;
}
.v-btn--size-large {
--v-btn-height: 3.5rem;
padding-left: 20px;
padding-right: 20px;
}
.v-btn--size-x-large {
--v-btn-height: 4rem;
padding-left: 24px;
padding-right: 24px;
}
.v-btn--icon {
padding: 4px;
height: auto;
width: auto;
}
// Headings
.v-theme--light h1, .v-theme--light h2, .v-theme--light h3, .v-theme--light h4, .v-theme--light h5, .v-theme--light h6 {
color: #091c45;
}
.v-theme--dark h1, .v-theme--dark h2, .v-theme--dark h3, .v-theme--dark h4, .v-theme--dark h5, .v-theme--dark h6 {
color: #fff;
}
// Menu border
.v-menu > .v-overlay__content {
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 9px;
}
// Menu list item
.v-list-item--active .v-list-item-title {
font-weight: 700;
}
// Card Light Theme
.v-card.v-theme--dark {
background: #0c121d;
border-radius: 12px !important;
}
// Card Dark Theme
.v-card.v-theme--light {
border: 1px solid #d8dee3;
border-radius: 12px !important;
}
.v-card-item {
padding: 1rem;
}
// Cards Title
.v-card-item .v-card-title {
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0;
}
// Overlay behind modals/dialogs opacity and color
.v-overlay__scrim {
background: #000;
opacity: 0.75;
}
// Align the checkboxes in the tables
.v-selection-control {
contain: inherit;
}
// Make the checkbox selection square instead of rounded
.v-selection-control__input {
border-radius: 4px;
}
.v-selection-control__input::before {
border-radius: 4px;
}
// Sorting icon
.mdi-arrow-up::before, .mdi-arrow-down::before {
font-size: 16px;
font-weight: 400;
}
// Breadcrumbs
.v-breadcrumbs {
min-height: 24px;
}
.v-breadcrumbs-item {
padding: 0;
}
// Snackbar
.v-snackbar__content {
width: 100%;
}
// Table Headers
.v-data-table-header__content {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 1px;
}
// Table content
.v-list-item__content {
white-space: nowrap;
overflow: visible;
}
// Table Footer
.v-data-table-footer {
font-size: 14px;
}
.v-data-table-footer {
border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
// Table Fonts
table {
font-size: 14px;
}
// Table Pagination
.v-data-table-footer__pagination .v-btn {
width: auto;
}
// Search styles
.v-field.v-field--prepended {
--v-field-padding-start: 8px;
padding-left: 16px;
}
// Links
.link {
color: rgb(var(--v-theme-secondary));
text-decoration: none;
border-bottom: 1px solid;
}
.link:hover {
color: rgb(var(--v-theme-primary));
}

290
web/satellite/vuetify-poc/src/styles/styles.scss Normal file
View File

@ -0,0 +1,290 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* src/styles/styles.scss
*
* Storj Stylesheet
* Work in progress
*
*/
@use './settings';
// Light Theme
.v-theme--light {
--v-border-color: 0, 0, 0;
--v-border-opacity: 0.1;
--v-theme-overlay-multiplier: 0.75;
--v-border-color: #e0e0e0;
}
// Dark Theme
.v-theme--dark {
--v-theme-overlay-multiplier: 0.75;
}
.v-navigation-drawer {
// box-shadow: 0 3px 4px rgba(var(--v-theme-on-surface), 0.05) !important;
box-shadow: 15px 0 30px 0 rgba(0,0,0,.03) !important;
// box-shadow: 15px 0 30px 0 rgba(var(--v-theme-on-surface), 0.03) !important;
}
.v-app-bar.v-toolbar {
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
// box-shadow: 0 1px 3px rgba(var(--v-theme-on-surface), 0.05) !important;
box-shadow: 15px 0 30px 0 rgba(0,0,0,.03) !important;
// box-shadow: 15px 0 30px 0 rgba(var(--v-theme-on-surface), 0.03) !important;
}
// Toggle visibility class
.show {
display: block;
}
// Custom rounded class
.rounded-xlg {
border-radius: 12px !important;
}
// Success button text
.v-btn.v-theme--light.bg-success {
color: #fff;
}
// Button Shadow
.v-btn--variant-outlined, .v-btn--elevated, .v-btn--variant-flat {
box-shadow: rgba(50, 50, 93, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px !important;
// box-shadow: rgba(50, 50, 93, 0.1) 0px 0px 0px 1px inset, rgba(50, 50, 93, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px !important;
}
// .v-btn.v-theme--light {
// box-shadow: 0 1px 2px #eee;
// }
// .v-btn.v-theme--dark {
// box-shadow: 0 1px 2px #000;
// }
// Button Outlines
.v-btn.v-theme--light.text-default.v-btn--variant-outlined {
border-color: rgba(var(--v-border-color), 0.2);
// border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
.v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
border-color: #9da3a7;
// color: rgb(var(--v-theme-primary));
border-color: rgba(var(--v-border-color), 0.5);
}
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined {
border-color: #a9b0b949;
// border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined:hover {
border-color: #a9b0b979;
}
// Button focus style
.v-btn:focus {
// box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(103, 146, 244) 0px 0px 0px 3px !important;
// box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
// outline: none !important;
}
// Button Sizes
.v-btn--size-x-small {
--v-btn-height: 2rem;
padding-left: 12px;
padding-right: 12px;
}
.v-btn--size-small {
--v-btn-height: 2.25rem;
padding-left: 14px;
padding-right: 14px;
}
.v-btn--size-default {
// --v-btn-height: 2.75rem;
--v-btn-height: 3rem;
font-size: 14px;
}
.v-btn--size-large {
--v-btn-height: 3.5rem;
padding-left: 20px;
padding-right: 20px;
}
.v-btn--size-x-large {
--v-btn-height: 4rem;
padding-left: 24px;
padding-right: 24px;
}
// Button Icon
.v-btn--icon {
padding: 4px;
height: auto;
width: auto;
}
// Menu border
.v-menu > .v-overlay__content {
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 12px;
}
// Menu list item
.v-list-item--active .v-list-item-title {
font-weight: 700;
}
// Menu list item active background
// .v-list-item--variant-text .v-list-item__overlay {
// background: rgb(var(--v-border-color));
// }
// Card Light Theme
.v-card.v-theme--dark {
// background: #000b2f;
// background: #101823;
// background: #0d1116;
background: --v-theme-surface;
// box-shadow: 0 2px 2px #000b2f;
// border-bottom-width: 2px !important;
// box-shadow: 0 2px 2px #00000047;
// box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 16px -8px;
// border-color: #d9d7d7;
box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1.5px 0px !important;
}
// Card Dark Theme
.v-card.v-theme--light {
// background: #f6f7fa;
// border-bottom-width: 2px !important;
// box-shadow: 0 2px 2px #eee;
// box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 16px -8px;
// border: 1px solid #d8dee3;
border: 1px solid #e0e0e0;
// border: none;
// box-shadow: rgb(224, 224, 224) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1.5px 0px !important;
box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1.5px 0px !important;
}
// Cards Padding
.v-card-item {
padding: 1rem;
}
// Cards Title
.v-card-item .v-card-title {
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0;
}
// Overlay behind modals/dialogs opacity and color
.v-overlay__scrim {
background: #000;
opacity: 0.75;
}
// Align the checkboxes in the tables
.v-selection-control {
contain: inherit;
}
// Make the checkbox selection square instead of rounded
.v-selection-control__input {
border-radius: 8px;
}
.v-selection-control__input::before {
border-radius: 8px;
}
// Sorting icon
.mdi-arrow-up::before, .mdi-arrow-down::before {
// content: "\F005D";
font-size: 14px;
}
// Breadcrumbs
.v-breadcrumbs {
min-height: 24px;
}
.v-breadcrumbs-item {
padding: 0 !important;
}
// Snackbar
.v-snackbar__content {
width: 100%;
}
// Table Headers
.v-data-table-header__content {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 1px;
}
// Table content
.v-list-item__content {
white-space: nowrap;
overflow: visible;
}
// Table Footer
.v-data-table-footer {
font-size: 14px;
}
.v-data-table-footer {
border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
// Table Fonts
table {
font-size: 14px;
}
// Table Pagination
.v-data-table-footer__pagination .v-btn {
width: auto;
}
// Search styles
.v-field.v-field--prepended {
--v-field-padding-start: 8px;
padding-left: 16px;
}
// Links
.link {
color: rgb(var(--v-theme-primary));
text-decoration: none;
background-image: linear-gradient(currentColor,currentColor);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .15s ease;
}
.link:hover {
color: rgb(var(--v-theme-secondary));
background-size: 100% 1px;
}
// Tooltips
.v-tooltip>.v-overlay__content {
background: rgba(var(--v-theme-on-surface),0.9) !important;
color: rgb(var(--v-theme-surface)) !important;
border: 1px solid rgba(var(--v-theme-surface),0.2);
font-weight: 500;
border-radius: 20px !important;
padding: 6px 14px;
backdrop-filter: blur(12px);
}
// Upload Snackbar
.upload-snackbar .v-snackbar__content {
padding: 2px;
}

289
web/satellite/vuetify-poc/src/views/Access.vue Normal file
View File

@ -0,0 +1,289 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<PageTitleComponent title="Access"/>
<PageSubtitleComponent subtitle="Create Access Grants, S3 Credentials, and API Keys." link="https://docs.storj.io/dcs/access"/>
<v-col>
<v-row class="mt-2 mb-4">
<v-btn
>
<!-- <svg width="16" height="16" viewBox="0 0 18 18" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
<path d="M4.83987 16.8886L1.47448 17.099C1.17636 17.1176 0.919588 16.891 0.900956 16.5929C0.899551 16.5704 0.899551 16.5479 0.900956 16.5254L1.11129 13.16C1.11951 13.0285 1.17546 12.9045 1.26864 12.8114L5.58927 8.49062L5.57296 8.43619C4.98999 6.44548 5.49345 4.26201 6.96116 2.72323L7.00936 2.67328L7.05933 2.62271C9.35625 0.325796 13.0803 0.325796 15.3772 2.62271C17.6741 4.91963 17.6741 8.64366 15.3772 10.9406C13.8503 12.4674 11.6456 13.0112 9.62856 12.4455L9.56357 12.4269L9.50918 12.4107L5.18856 16.7313C5.09538 16.8244 4.97139 16.8804 4.83987 16.8886ZM2.45229 15.5477L4.38997 15.4266L9.13372 10.6827L9.58862 10.864C11.2073 11.5091 13.072 11.1424 14.3255 9.88889C16.0416 8.17281 16.0416 5.39048 14.3255 3.6744C12.6094 1.95831 9.8271 1.95831 8.11101 3.6744C6.87177 4.91364 6.49924 6.7502 7.11424 8.3559L7.13584 8.41118L7.31711 8.86605L2.57342 13.61L2.45229 15.5477ZM10.7858 7.21411C11.3666 7.79494 12.3083 7.79494 12.8892 7.21411C13.47 6.63328 13.47 5.69157 12.8892 5.11074C12.3083 4.52991 11.3666 4.52991 10.7858 5.11074C10.205 5.69157 10.205 6.63328 10.7858 7.21411Z" fill="currentColor"/>
</svg> -->
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
</svg>
New Access
<v-dialog
v-model="dialog"
activator="parent"
min-width="400px"
width="auto"
transition="fade-transition"
scrollable
>
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
<!-- <v-icon
>
<img src="../assets/icon-team.svg" alt="Team">
</v-icon> -->
{{ currentTitle }}
</v-card-title>
</template>
<template v-slot:append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="dialog = false"
></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider></v-divider>
<v-window v-model="step">
<v-window-item :value="1">
<v-form class="pa-8 pb-3">
<v-row>
<v-col cols="12">
<!-- <h4 class="mb-2">Name</h4> -->
<v-text-field
label="Access Name"
placeholder="Enter name for this access"
variant="outlined"
color="default"
autofocus
></v-text-field>
</v-col>
<v-col>
<h4 class="mb-2">Type</h4>
<v-checkbox color="primary" density="compact">
<template v-slot:label>
<span class="mx-2">Access Grant</span>
<span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor"></path></svg>
<v-tooltip activator="parent" location="top">
<span>Keys to upload, delete, and view your data. Learn more</span>
</v-tooltip>
</span>
</template>
</v-checkbox>
<v-checkbox color="primary" density="compact">
<template v-slot:label>
<span class="mx-2">S3 Credentials</span>
<span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor"></path></svg>
<v-tooltip activator="parent" location="top">
<span>Generates access key, secret key, and endpoint to use in your S3 supported application. Learn More</span>
</v-tooltip>
</span>
</template>
</v-checkbox>
<v-checkbox color="primary" density="compact">
<template v-slot:label>
<span class="mx-2">CLI Access</span>
<span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" tabindex="0"><path d="M8 15.2A7.2 7.2 0 118 .8a7.2 7.2 0 010 14.4zm0-1.32A5.88 5.88 0 108 2.12a5.88 5.88 0 000 11.76zm-.6-3.42V8.343a.66.66 0 011.32-.026V10.416c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638zm0-4.92v-.077a.66.66 0 011.32-.026v.059c0 .368-.292.67-.66.682a.639.639 0 01-.66-.638z" fill="currentColor"></path></svg>
<v-tooltip activator="parent" location="top">
<span>Create an access grant to run in the command line. Learn more</span>
</v-tooltip>
</span>
</template>
</v-checkbox>
</v-col>
</v-row>
</v-form>
</v-window-item>
<v-window-item :value="2">
<v-form class="pa-8 pb-3">
<v-row>
<v-col cols="12">
<p>Permissions</p>
<p>Buckets</p>
<p>End date</p>
</v-col>
</v-row>
</v-form>
</v-window-item>
<v-window-item :value="3">
<v-form class="pa-8 pb-3">
<v-row>
<v-col cols="12">
<v-text-field
label="Password"
type="password"
variant="outlined"
></v-text-field>
<v-text-field
label="Confirm Password"
type="password"
variant="outlined"
></v-text-field>
</v-col>
</v-row>
</v-form>
</v-window-item>
</v-window>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn
v-if="step == 1"
variant="outlined"
color="default"
block
>
Learn More
</v-btn>
<v-btn
v-if="step > 1"
variant="outlined"
color="default"
block
@click="step--"
>
Back
</v-btn>
</v-col>
<v-col>
<v-btn
v-if="step < 3"
color="primary"
variant="flat"
block
@click="step++"
>
Next
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-btn>
</v-row>
</v-col>
<AccessTableComponent/>
</v-container>
</template>
<script>
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
import AccessTableComponent from '@poc/components/AccessTableComponent.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
AccessTableComponent,
},
data () {
return {
// dialog with steps
dialog: false,
step: 1,
search: '',
selected: [],
sortBy: [{ key: 'date', order: 'asc' }],
headers: [
{
title: 'Name',
align: 'start',
key: 'name',
},
{ title: 'Type', key: 'type' },
{ title: 'Status', key: 'status' },
{ title: 'Permissions', key: 'permissions' },
{ title: 'Date Created', key: 'date' },
],
accesses: [
{
name: 'Backup',
date: '02 Mar 2023',
type: 'Access Grant',
permissions: 'All',
status: 'Active',
},
{
name: 'S3 Test',
date: '03 Mar 2023',
type: 'S3 Credentials',
permissions: 'Read, Write',
status: 'Expired',
},
{
name: 'CLI Demo',
date: '04 Mar 2023',
type: 'CLI Access',
permissions: 'Read, Write, List',
status: 'Active',
},
{
name: 'Sharing',
date: '08 Mar 2023',
type: 'Access Grant',
permissions: 'Read, Delete',
status: 'Active',
},
{
name: 'Sync Int',
date: '12 Mar 2023',
type: 'S3 Credentials',
permissions: 'All',
status: 'Expired',
},
],
}
},
computed: {
currentTitle () {
switch (this.step) {
case 1: return 'Create New Access'
case 2: return 'Permissions'
case 3: return 'Passphrase'
default: return 'Access Created'
}
},
},
methods: {
getColor (role) {
if (role == 'Active') return 'success'
else return 'warning'
},
},
}
</script>

147
web/satellite/vuetify-poc/src/views/AccountSettings.vue Normal file
View File

@ -0,0 +1,147 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<!-- <v-breadcrumbs :items="['My Account', 'Settings']" class="pl-0"></v-breadcrumbs> -->
<h1 class="text-h5 font-weight-bold mb-2">Settings</h1>
<v-card
variant="flat"
:border="true"
class="mx-auto my-6"
>
<v-list lines="three">
<v-list-subheader class="mb-2">Profile</v-list-subheader>
<v-divider></v-divider>
<v-list-item>
<v-list-item-title>Name</v-list-item-title>
<v-list-item-subtitle>
Tome Boshevski
</v-list-item-subtitle>
<template v-slot:append>
<v-list-item-action>
<v-btn variant="outlined" color="default" size="small">Edit Name</v-btn>
</v-list-item-action>
</template>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-list-item-title>Email</v-list-item-title>
<v-list-item-subtitle>
tome@storj.io
</v-list-item-subtitle>
<!-- <template v-slot:append>
<v-list-item-action>
<v-btn>Change Email</v-btn>
</v-list-item-action>
</template> -->
</v-list-item>
</v-list>
</v-card>
<v-card
variant="flat"
:border="true"
class="mx-auto my-6"
>
<v-list lines="three">
<v-list-subheader class="mb-2">Security</v-list-subheader>
<v-divider></v-divider>
<v-list-item>
<v-list-item-title>Password</v-list-item-title>
<v-list-item-subtitle>
**********
</v-list-item-subtitle>
<template v-slot:append>
<v-list-item-action>
<v-btn variant="outlined" color="default" size="small">Change Password</v-btn>
</v-list-item-action>
</template>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-list-item-title>Two-factor authentication</v-list-item-title>
<v-list-item-subtitle>
Improve account security by enabling 2FA.
</v-list-item-subtitle>
<template v-slot:append>
<v-list-item-action>
<v-btn size="small">Enable Two-factor</v-btn>
</v-list-item-action>
</template>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-list-item-title>Session Timeout</v-list-item-title>
<v-list-item-subtitle>
Set timeout to log you out for inactivity.
</v-list-item-subtitle>
<template v-slot:append>
<v-list-item-action>
<v-btn variant="outlined" color="default" size="small">Set Timeout</v-btn>
</v-list-item-action>
</template>
</v-list-item>
</v-list>
</v-card>
<v-card
variant="flat"
:border="true"
class="mx-auto my-6"
>
<v-list lines="three" select-strategy="classic">
<v-list-subheader class="mb-2">Notifications</v-list-subheader>
<v-divider></v-divider>
<v-list-item value="notifications" color="default">
<template v-slot:append="{ isActive }">
<v-list-item-action start>
<v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
</v-list-item-action>
</template>
<v-list-item-title>Product newsletter</v-list-item-title>
<v-list-item-subtitle>
Notify me about product updates.
</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-card>
</v-container>
</template>

318
web/satellite/vuetify-poc/src/views/Billing.vue Normal file
View File

@ -0,0 +1,318 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<!-- <v-breadcrumbs :items="['My Account', 'Billing']" class="pl-0"></v-breadcrumbs> -->
<h1 class="text-h5 font-weight-bold mb-6">Billing</h1>
<v-card variant="flat" :border="true" color="default" class="mb-6 rounded">
<v-tabs
v-model="tab"
color="default"
center-active
show-arrows
grow
>
<v-tab>
Overview
</v-tab>
<v-tab>
Payment Methods
</v-tab>
<v-tab>
STORJ Transactions
</v-tab>
<v-tab>
Billing History
</v-tab>
<v-tab>
Billing Information
</v-tab>
</v-tabs>
</v-card>
<v-window v-model="tab">
<v-window-item>
<v-row>
<v-col cols="12" sm="4">
<v-card title="Total Cost" subtitle="Estimated for June 2023" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$24</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" color="default" size="small" class="mr-2">View Billing History</v-btn>
<!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">Payment Methods</v-btn> -->
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="4">
<v-card title="STORJ Token Balance" subtitle="Your STORJ Token Wallet" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$5,284</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
<!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">View Transactions</v-btn> -->
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="4">
<v-card title="Coupon / Free Usage" subtitle="Active / No Expiration" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mb-2">$1.65 off</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add Coupon</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col>
<h4 class="mt-4">Costs per project</h4>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card rounded="lg" variant="flat" :border="true" class="mb-4">
<v-expansion-panels>
<v-expansion-panel
title="My First Project"
text="Costs..."
rounded="lg"
>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
<v-card rounded="lg" variant="flat" :border="true" class="mb-4">
<v-expansion-panels>
<v-expansion-panel
title="Storj Labs"
text="Costs..."
rounded="lg"
>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
<v-card rounded="lg" variant="flat" :border="true" class="mb-4">
<v-expansion-panels>
<v-expansion-panel
title="Pictures"
text="Costs..."
rounded="lg"
>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
</v-col>
</v-row>
</v-window-item>
<v-window-item>
<v-row>
<v-col cols="12" sm="4">
<v-card title="STORJ Token" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">STORJ</v-chip>
<!-- <v-chip rounded color="success" variant="tonal" class="font-weight-bold mr-2">Primary</v-chip> -->
<v-divider class="my-4"></v-divider>
<p>Deposit Address</p>
<v-chip rounded color="default" variant="text" class="font-weight-bold mt-2 pl-0">0x0683 . . . 2759</v-chip>
<v-divider class="my-4"></v-divider>
<p>Total Balance</p>
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">$5,284</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="flat" color="success" size="small" class="mr-2">+ Add STORJ Tokens</v-btn>
<v-btn variant="outlined" color="default" size="small" class="mr-2">View Transactions</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="4">
<v-card title="Credit Card" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2">Visa</v-chip>
<!-- <v-chip rounded color="primary" variant="tonal" class="font-weight-bold mr-2">Default</v-chip> -->
<v-divider class="my-4"></v-divider>
<p>Card Number</p>
<v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">**** **** **** 2759</v-chip>
<v-divider class="my-4"></v-divider>
<p>Exp. Date</p>
<v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">12/27</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" color="default" size="small" class="mr-2">Edit</v-btn>
<v-btn variant="outlined" color="default" size="small" class="mr-2">Remove</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="4">
<v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<!-- <v-chip rounded color="info" variant="tonal" class="font-weight-bold mr-2">Visa</v-chip> -->
<v-btn variant="outlined" color="default" size="small" class="mr-2">+ Add New Card</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-window-item>
<v-window-item>
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="invoices"
:search="search"
class="elevation-1"
show-select
hover
>
<template v-slot:item.date="{ item }">
<v-list-item class="font-weight-bold pl-0">
<!-- <template v-slot:prepend>
<img src="../assets/icon-user-color.svg" alt="Dashboard" class="mr-3">
</template> -->
{{ item.columns.date }}
</v-list-item>
</template>
<template v-slot:item.status="{ item }">
<v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
{{ item.raw.status }}
</v-chip>
</template>
</v-data-table>
</v-card>
</v-window-item>
<v-window-item>
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-data-table
v-model="selected"
v-model:sort-by="sortBy"
:headers="headers"
:items="invoices"
:search="search"
class="elevation-1"
show-select
hover
>
<template v-slot:item.date="{ item }">
<v-list-item class="font-weight-bold pl-0">
<!-- <template v-slot:prepend>
<img src="../assets/icon-user-color.svg" alt="Dashboard" class="mr-3">
</template> -->
{{ item.columns.date }}
</v-list-item>
</template>
<template v-slot:item.status="{ item }">
<v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
{{ item.raw.status }}
</v-chip>
</template>
</v-data-table>
</v-card>
</v-window-item>
<v-window-item>
<v-row>
<v-col cols="12" sm="4">
<v-card title="Billing Information" subtitle="Add info for your invoices." variant="flat" :border="true" rounded="xlg">
<v-card-text>
<!-- <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold mb-2">$0</v-chip> -->
<p>You can add personal or company info, billing email, and VAT.</p>
<v-divider class="my-4"></v-divider>
<v-btn color="primary" size="small">+ Add Billing Information</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-container>
</template>
<!-- <script>
export default {
data () {
return {
tab: 'Overview',
}
},
}
</script> -->
<script>
export default {
data () {
return {
tab: 'Overview',
search: '',
selected: [],
sortBy: [{ key: 'date', order: 'asc' }],
headers: [
{ title: 'Date', key: 'date' },
{ title: 'Amount', key: 'amount' },
{ title: 'Status', key: 'status' },
{ title: 'Invoice', key: 'invoice' },
],
invoices: [
{
date: 'Jun 2023',
status: 'Pending',
amount: '$23',
invoice: 'Invoice',
},
{
date: 'May 2023',
status: 'Unpaid',
amount: '$821',
invoice: 'Invoice',
},
{
date: 'Apr 2023',
status: 'Paid',
amount: '$9,345',
invoice: 'Invoice',
},
],
}
},
methods: {
getColor (status) {
if (status == 'Paid') return 'success'
if (status == 'Pending') return 'warning'
else return 'error'
},
},
}
</script>

68
web/satellite/vuetify-poc/src/views/Bucket.vue Normal file
View File

@ -0,0 +1,68 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<PageTitleComponent title="Browse Files"/>
<BrowserBreadcrumbsComponent/>
<v-col>
<v-row class="mt-2 mb-4">
<v-btn
color="primary"
min-width="120"
@click="snackbar = true"
>
<BrowserSnackbarComponent :snackbar="snackbar" />
<IconUpload/>
Upload
</v-btn>
<v-btn
variant="outlined"
color="default"
class="mx-4"
>
<IconFolder/>
New Folder
<BrowserNewFolderDialog/>
</v-btn>
</v-row>
</v-col>
<BrowserTableComponent/>
</v-container>
</template>
<script>
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 IconUpload from '@poc/components/icons/IconUpload.vue';
import IconFolder from '@poc/components/icons/IconFolder.vue';
export default {
components: {
PageTitleComponent,
BrowserBreadcrumbsComponent,
BrowserSnackbarComponent,
BrowserTableComponent,
BrowserNewFolderDialog,
IconUpload,
IconFolder
},
data() {
return {
// upload snackbar
snackbar: false,
}
}
};
</script>

175
web/satellite/vuetify-poc/src/views/Buckets.vue Normal file
View File

@ -0,0 +1,175 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<PageTitleComponent title="Buckets"/>
<PageSubtitleComponent subtitle="Buckets are storage containers for your data." link="https://docs.storj.io/dcs/buckets"/>
<v-row class="mt-2 mb-4">
<v-col>
<v-btn
color="primary"
>
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
</svg>
New Bucket
<v-dialog
v-model="dialog"
activator="parent"
width="auto"
min-width="400px"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot: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>
</template>
<template v-slot:append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="dialog = false"
></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider></v-divider>
<v-form v-model="valid" class="pa-8 pb-3">
<v-row>
<v-col>
<p>Buckets are used to store and organize your files.</p>
<v-text-field
v-model="bucketName"
variant="outlined"
:rules="bucketNameRules"
label="Enter bucket name"
hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
required
autofocus
class="mt-8 mb-3"
></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading">
Create Bucket
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-btn>
</v-col>
</v-row>
<BucketsDataTable :headers="headers" :buckets="buckets" />
</v-container>
</template>
<script>
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
import BucketsDataTable from '@poc/components/BucketsDataTable.vue'
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
BucketsDataTable,
},
data () {
return {
// New bucket dialog
dialog: false,
bucketName: '',
bucketNameRules: [
value => {
if (value) return true
return 'Bucket name is requred.'
},
value => {
if (/^[a-z0-9-.]+$/.test(value)) {
return true
} else {
if (/[A-Z]/.test(value)) {
return 'Uppercase characters are not allowed.';
}
if (/\s/.test(value)) {
return 'Spaces are not allowed.';
}
if (/[^a-zA-Z0-9-.]/.test(value)) {
return 'Other characters are not allowed.';
}
}
},
],
headers: [
{
title: 'Name',
align: 'start',
key: 'name',
},
{ title: 'Files', key: 'files' },
{ title: 'Storage', key: 'storage' },
{ title: 'Bandwidth', key: 'bandwidth' },
{ title: 'Date Created', key: 'date' },
],
buckets: [
{
name: 'Demo',
date: '02 Mar 2023',
files: '4,210',
bandwidth: '481 MB',
storage: '32 GB',
},
{
name: 'Photos',
date: '03 Mar 2023',
files: '92,155',
bandwidth: '2.0 GB',
storage: '5.2 GB',
},
{
name: 'Videos',
date: '04 Mar 2023',
files: '24',
bandwidth: '102 MB',
storage: '1.7 TB',
},
],
}
},
}
</script>

117
web/satellite/vuetify-poc/src/views/Dashboard.vue
View File

@ -2,9 +2,122 @@
// See LICENSE for copying information.
<template>
<Dashboard />
<v-container>
<PageTitleComponent title="Project Overview"/>
<PageSubtitleComponent :subtitle="`Your ${limits.objectCount.toLocaleString()} files are stored in ${limits.segmentCount.toLocaleString()} segments around the world.`"/>
<v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Segments" subtitle="All file pieces" :data="limits.segmentCount.toLocaleString()" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Buckets" subtitle="Project buckets" :data="bucketsCount.toLocaleString()" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Team" subtitle="Project members" :data="teamSize" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Billing" subtitle="Free account" data="Free" />
</v-col>
</v-row>
<v-row class="d-flex align-center justify-center">
<v-col cols="12" md="6">
<UsageProgressComponent title="Storage" progress="40" used="10 GB Used" limit="Limit: 25GB" available="15 GB Available" cta="Need more?"/>
</v-col>
<v-col cols="12" md="6">
<UsageProgressComponent title="Download" progress="60" used="15 GB Used" limit="Limit: 25GB per month" available="10 GB Available" cta="Need more?"/>
</v-col>
<v-col cols="12" md="6">
<UsageProgressComponent title="Segments" progress="12" used="1,235 Used" limit="Limit: 10,000" available="8,765 Available" cta="Learn more"/>
</v-col>
<v-col cols="12" md="6">
<UsageProgressComponent title="Free Tier" progress="50" used="10 GB Used" limit="Limit: $1.65" available="50% Available" cta="Upgrade to Pro"/>
</v-col>
</v-row>
</v-container>
</template>
<script setup lang="ts">
import Dashboard from '@poc/components/Dashboard.vue';
import { computed, onMounted } from 'vue';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { Project, ProjectLimits } from '@/types/projects';
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
import CardStatsComponent from '@poc/components/CardStatsComponent.vue';
import UsageProgressComponent from '@poc/components/UsageProgressComponent.vue';
const projectsStore = useProjectsStore();
const pmStore = useProjectMembersStore();
const agStore = useAccessGrantsStore();
const billingStore = useBillingStore();
const bucketsStore = useBucketsStore();
/**
* Returns current limits from store.
*/
const limits = computed((): ProjectLimits => {
return projectsStore.state.currentLimits;
});
/**
* Get selected project from store.
*/
const selectedProject = computed((): Project => {
return projectsStore.state.selectedProject;
});
/**
* Returns current team size from store.
*/
const teamSize = computed((): number => {
return pmStore.state.page.totalCount;
});
/**
* Returns access grants count from store.
*/
const accessGrantsCount = computed((): number => {
return agStore.state.page.totalCount;
});
/**
* Returns access grants count from store.
*/
const bucketsCount = computed((): number => {
return bucketsStore.state.page.totalCount;
});
/**
* Lifecycle hook after initial render.
* Fetches project limits.
*/
onMounted(async (): Promise<void> => {
const projectID = selectedProject.value.id;
const FIRST_PAGE = 1;
try {
await Promise.all([
projectsStore.getProjectLimits(projectID),
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, projectID),
agStore.getAccessGrants(FIRST_PAGE, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
]);
} catch (error) { /* empty */ }
});
</script>

287
web/satellite/vuetify-poc/src/views/DesignLibrary.vue Normal file
View File

@ -0,0 +1,287 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<v-row class="my-4">
<v-col>
<h1>Design Library</h1>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Variants</h3>
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
<v-btn>
Default Variant
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn variant="outlined">
Outlined Variant
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn variant="tonal">
Tonal Variant
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn variant="text">
Text Variant
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn variant="plain">
Plain Variant
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn disabled>
Disabled
</v-btn>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Colors</h3>
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
<v-btn>
Primary Color
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn color="secondary">
Secondary
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn color="success">
Success
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn color="warning">
Warning
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn color="error">
Error
</v-btn>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Icons</h3>
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
<v-btn icon="mdi-vuetify" size="small">
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn prepend-icon="mdi-vuetify" variant="tonal">
Prepend
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn append-icon="mdi-vuetify" variant="outlined" color="secondary">
Append Outlined Secondary
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn
prepend-icon="mdi-vuetify"
append-icon="mdi-vuetify"
>
Prepend & Append
</v-btn>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Sizes</h3>
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
<v-btn size="x-small" variant="tonal">Extra small Button</v-btn>
</v-col>
<v-col cols="auto">
<v-btn size="small" variant="outlined">Small Button</v-btn>
</v-col>
<v-col cols="auto">
<v-btn>Regular Button</v-btn>
</v-col>
<v-col cols="auto">
<v-btn size="large" variant="outlined" color="warning">Large Outlined Warning</v-btn>
</v-col>
<v-col cols="auto">
<v-btn size="x-large" variant="tonal" color="secondary">X-Large Button</v-btn>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Blocks</h3>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col>
<v-btn block>Block Button Default</v-btn>
</v-col>
<v-col>
<v-btn variant="tonal" color="secondary" block>Block Tonal Secondary</v-btn>
</v-col>
<v-col>
<v-btn variant="tonal" color="error" block>Block Tonal Error</v-btn>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Loading</h3>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card
max-width="450"
rounded="lg"
title="Wanna try loading?"
text="Example of loading button."
:border="true"
>
<template v-slot:actions>
<v-btn height="48">
No Thanks
</v-btn>
<v-btn
:loading="loading"
class="flex-grow-1"
height="48"
variant="tonal"
rounded="lg"
@click="load"
>
Yes, let's go
</v-btn>
</template>
</v-card>
</v-col>
</v-row>
<v-row class="mt-10">
<v-col>
<h3>Button Group</h3>
</v-col>
</v-row>
<v-row>
<v-col>
<v-card
max-width="450"
rounded="lg"
text="How satisfied are you with developing using Vuetify?"
title="Rate your experience"
variant="flat"
:border="true"
>
<template v-slot:append>
<div class="me-n2">
<v-btn
icon="$close"
variant="plain"
></v-btn>
</div>
</template>
<v-item-group
v-model="model"
class="d-flex justify-sm-space-between px-6 pt-2 pb-6"
>
<v-item
v-for="n in 5"
:key="n"
>
<template v-slot:default="{ toggle }">
<v-btn
:icon="`mdi-numeric-${n}`"
:active="model != null && model + 1 >= n"
border
height="40"
variant="text"
width="40"
@click="toggle"
></v-btn>
</template>
</v-item>
</v-item-group>
</v-card>
</v-col>
</v-row>
<v-row class="my-10"></v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
loading: false,
model: null,
}),
methods: {
load () {
this.loading = true
setTimeout(() => (this.loading = false), 3000)
},
},
}
</script>

357
web/satellite/vuetify-poc/src/views/Projects.vue Normal file
View File

@ -0,0 +1,357 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-container>
<PageTitleComponent title="My Projects"/>
<!-- <PageSubtitleComponent subtitle="Projects are where you and your team can upload and manage data, view usage statistics and billing."/> -->
<v-row>
<v-col>
<v-btn
class="mr-3"
color="default"
variant="outlined"
density="comfortable"
>
<svg width="14" height="14" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
</svg>
<!-- <IconNew class="mr-2" width="12px"/> -->
Create Project
<v-dialog
v-model="dialog"
activator="parent"
width="auto"
min-width="400px"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
<!-- <v-icon
>
<img src="../assets/icon-project.svg" alt="Project">
</v-icon> -->
Create New Project
</v-card-title>
</template>
<template v-slot:append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="dialog = false"
></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7 pb-4">
<v-row>
<v-col>
<p>Enter project name (max 20 characters).</p>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
>
<v-text-field
v-model="name"
variant="outlined"
:rules="nameRules"
label="Project Name"
class="mt-2"
required
autofocus
counter
maxlength="20"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn variant="text" size="small" class="mb-4" color="default">+ Add Description (Optional)</v-btn>
</v-col>
</v-row>
<!-- <v-row>
<v-col
cols="12"
>
<v-text-field
v-model="description"
variant="outlined"
label="Project Description (Optional)"
class="mt-2"
multiple
></v-text-field>
</v-col>
</v-row> -->
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading">Create Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-btn>
</v-col>
<v-spacer></v-spacer>
<v-col class="text-right">
<!-- Projects Card/Table View -->
<v-btn-toggle
v-model="activeView"
mandatory
border
inset
density="comfortable"
class="pa-1"
>
<v-btn
size="small"
rounded="xl"
@click="toggleView('cards')"
active-class="active"
:active="activeView === 'cards'"
aria-label="Toggle Cards View"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6.99902" y="6.99951" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
<rect x="6.99902" y="13.0005" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
<rect x="12.999" y="6.99951" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
<rect x="12.999" y="13.0005" width="4.0003" height="4.0003" rx="1" fill="currentColor"/>
</svg>
Cards
</v-btn>
<v-btn
size="small"
rounded="xl"
@click="toggleView('table')"
active-class="active"
:active="activeView === 'table'"
aria-label="Toggle Table View"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 8C9 8.55228 8.55228 9 8 9V9C7.44772 9 7 8.55228 7 8V8C7 7.44772 7.44772 7 8 7V7C8.55228 7 9 7.44772 9 8V8Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.5523 8.55228 13 8 13V13C7.44772 13 7 12.5523 7 12V12C7 11.4477 7.44772 11 8 11V11C8.55228 11 9 11.4477 9 12V12Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C9 16.5523 8.55228 17 8 17V17C7.44772 17 7 16.5523 7 16V16C7 15.4477 7.44772 15 8 15V15C8.55228 15 9 15.4477 9 16V16Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 8C18 8.55228 17.5523 9 17 9H11C10.4477 9 10 8.55228 10 8V8C10 7.44772 10.4477 7 11 7H17C17.5523 7 18 7.44772 18 8V8Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 12.5523 17.5523 13 17 13H11C10.4477 13 10 12.5523 10 12V12C10 11.4477 10.4477 11 11 11H17C17.5523 11 18 11.4477 18 12V12Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 16C18 16.5523 17.5523 17 17 17H11C10.4477 17 10 16.5523 10 16V16C10 15.4477 10.4477 15 11 15H17C17.5523 15 18 15.4477 18 16V16Z" fill="currentColor"/>
</svg>
Table
</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
<v-row v-if="activeView === 'cards'">
<!-- Card view -->
<v-col cols="12" sm="6" md="4" lg="3">
<v-card variant="flat" :border="true" rounded="xlg">
<v-card-item>
<div class="d-flex justify-space-between">
<v-chip rounded color="purple2" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Owner</v-chip>
<!-- <v-btn color="default" variant="text" size="small" icon="mdi-dots-vertical">
</v-btn> -->
<v-btn color="default" variant="text" size="small">
<v-icon icon="mdi-dots-vertical"></v-icon>
<v-menu activator="parent" location="end" transition="scale-transition">
<!-- Project Menu -->
<v-list class="pa-2">
<!-- Project Settings -->
<v-list-item link rounded="lg">
<template v-slot:prepend>
<IconSettings />
</template>
<v-list-item-title class="text-body-2 ml-3">
Project Settings
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<!-- Invite Members -->
<v-list-item link class="mt-1" rounded="lg">
<template v-slot:prepend>
<IconTeam/>
</template>
<v-list-item-title class="text-body-2 ml-3">
Invite Members
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn>
</div>
<v-card-title>
<router-link class="link" to="/dashboard">My first project</router-link>
</v-card-title>
<v-card-subtitle>
<p>Project Description</p>
</v-card-subtitle>
</v-card-item>
<v-card-text>
<v-divider class="mt-1 mb-4"></v-divider>
<v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Open Project</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="3">
<v-card variant="flat" :border="true" rounded="xlg">
<v-card-item>
<v-chip rounded color="green" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Member</v-chip>
<v-card-title>
<router-link class="link" to="/dashboard">Storj Labs</router-link>
</v-card-title>
<v-card-subtitle>
<p>Shared team project</p>
</v-card-subtitle>
</v-card-item>
<v-card-text>
<v-divider class="mt-1 mb-4"></v-divider>
<v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Open Project</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="3">
<v-card variant="flat" :border="true" rounded="xlg">
<v-card-item>
<v-chip rounded color="warning" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Invited</v-chip>
<v-card-title>
Invitation Project
</v-card-title>
<v-card-subtitle>
<p>Example invitation.</p>
</v-card-subtitle>
</v-card-item>
<v-card-text>
<v-divider class="mt-1 mb-4"></v-divider>
<v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Join Project</v-btn>
<v-btn variant="outlined" color="default" size="small" class="mr-2">Decline</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4" lg="3">
<v-card variant="flat" :border="true" rounded="xlg">
<v-card-item>
<v-chip rounded color="primary" variant="tonal" class="font-weight-bold my-2" size="small"><IconProject width="12px" class="mr-1"></IconProject>Project</v-chip>
<v-card-title>
Welcome
</v-card-title>
<v-card-subtitle>
<p>Create a project to get started.</p>
</v-card-subtitle>
</v-card-item>
<v-card-text>
<v-divider class="mt-1 mb-4"></v-divider>
<v-btn color="primary" size="small" class="mr-2" link router-link to="/dashboard">Create Project</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row v-else-if="activeView === 'table'">
<!-- Table view -->
<v-col>
<ProjectsTableComponent/>
</v-col>
</v-row>
<v-row>
</v-row>
</v-container>
</template>
<script>
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
import ProjectsTableComponent from '@poc/components/ProjectsTableComponent.vue';
import IconNew from '@poc/components/icons/IconNew.vue';
import IconProject from '@poc/components/icons/IconProject.vue';
import IconSettings from '@poc/components/icons/IconSettings.vue';
import IconTeam from '@poc/components/icons/IconTeam.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
ProjectsTableComponent,
IconNew,
IconProject,
IconSettings,
IconTeam,
},
data() {
return {
menu: false,
dialog: false,
valid: false,
search: '',
name: '',
description: '',
activeView: localStorage.getItem('activeView') || 'cards',
nameRules: [
value => {
if (value) return true;
return 'Project name is required.';
},
value => {
if (value?.length <= 100) return true;
return 'Name must be less than 100 characters.';
},
],
};
},
methods: {
toggleView(view) {
this.activeView = view;
localStorage.setItem('activeView', view);
},
},
};
</script>

175
web/satellite/vuetify-poc/src/views/Team.vue
View File

@ -2,9 +2,180 @@
// See LICENSE for copying information.
<template>
<Team />
<v-container>
<PageTitleComponent title="Team"/>
<PageSubtitleComponent subtitle="Invite people and manage the team of this project." link="https://docs.storj.io/dcs/users"/>
<v-col>
<v-row class="mt-2 mb-4">
<v-btn>
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor"/>
</svg>
Add Members
<v-dialog
v-model="dialog"
activator="parent"
width="auto"
min-width="400px"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
<!-- <v-icon>
<img src="../assets/icon-team.svg" alt="Team">
</v-icon> -->
Add Members
</v-card-title>
</template>
<!-- <v-btn
class="text-none text-subtitle-1"
color="#5865f2"
size="small"
variant="flat"
>
+ Add More
</v-btn> -->
<template v-slot:append>
<v-btn
icon="$close"
variant="text"
size="small"
color="default"
@click="dialog = false"
></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7 pb-4">
<v-row>
<v-col>
<p>Invite team members to join you in this project.</p>
<!-- <v-divider class="my-6"></v-divider> -->
<!-- <p>Use only lowercase letters and numbers, no spaces.</p> -->
<!-- <v-chip prepend-icon="mdi-information" color="info" rounded="xl">
Members will have read & write permissions.
</v-chip> -->
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
>
<v-text-field
v-model="email"
variant="outlined"
:rules="emailRules"
label="Enter e-mail"
hint="Members will have read & write permissions."
required
autofocus
class="mt-2"
></v-text-field>
</v-col>
</v-row>
<!-- <v-row>
<v-col>
<v-btn variant="text" class="mb-4">+ Add More</v-btn>
</v-col>
</v-row> -->
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block @click="onAddUsersClick" :loading="isLoading">Send Invite</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-btn>
</v-row>
</v-col>
<TeamTableComponent/>
</v-container>
</template>
<script setup lang="ts">
import Team from '@poc/components/Team.vue';
import { computed, onMounted, ref } from 'vue';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@poc/components/PageSubtitleComponent.vue';
import TeamTableComponent from '@poc/components/TeamTableComponent.vue';
const pmStore = useProjectMembersStore();
const projectsStore = useProjectsStore();
const isLoading = ref<boolean>(false);
const dialog = ref<boolean>(false);
const valid = ref<boolean>(false);
const email = ref<string>('');
const emailRules = ref([
value => {
if (value) return true;
return 'E-mail is requred.';
},
value => {
if (/.+@.+\..+/.test(value)) return true;
return 'E-mail must be valid.';
},
]);
const selectedProjectID = computed((): string => projectsStore.state.selectedProject.id);
/**
* Tries to add users related to entered emails list to current project.
*/
async function onAddUsersClick(): Promise<void> {
if (isLoading.value) return;
isLoading.value = true;
try {
await pmStore.inviteMembers([email.value], selectedProjectID.value);
} catch (_) {
isLoading.value = false;
return;
}
try {
await pmStore.getProjectMembers(1, selectedProjectID.value);
} catch (error) { /* empty */ }
dialog.value = false;
isLoading.value = false;
}
onMounted(() => {
pmStore.getProjectMembers(1, selectedProjectID.value);
});
</script>