From 95761908b55e73d6692bb2b58c1bad0ebbcd0eae Mon Sep 17 00:00:00 2001 From: Jeremy Wharton Date: Thu, 13 Jul 2023 00:03:34 -0500 Subject: [PATCH] web/satellite: update Vuetify proof of concept The changes as of storj/vuetify-storj@c801fe6 have been pulled into the Vuetify proof of concept. Change-Id: I3db208836cff21287052615d36258fcf2d4c6169 --- web/satellite/index-vuetify.html | 10 +- web/satellite/vite.config-vuetify.js | 122 +++--- web/satellite/vuetify-poc/src/App.vue | 4 +- .../src/assets/icon-arrow-down.svg | 3 + .../src/assets/icon-arrow-right.svg | 3 + .../src/assets/icon-audio-color.svg | 4 + .../src/assets/icon-audio-tonal.svg | 5 + .../src/assets/icon-back-tonal.svg | 5 + .../src/assets/icon-bucket-color.svg | 6 + .../src/assets/icon-bucket-tonal.svg | 6 + .../src/assets/icon-check-color.svg | 3 + .../vuetify-poc/src/assets/icon-close.svg | 3 + .../vuetify-poc/src/assets/icon-download.svg | 3 + .../vuetify-poc/src/assets/icon-dropdown.svg | 3 + .../src/assets/icon-file-color.svg | 4 + .../src/assets/icon-file-tonal.svg | 5 + .../vuetify-poc/src/assets/icon-file.svg | 3 + .../src/assets/icon-folder-color.svg | 6 + .../src/assets/icon-folder-tonal.svg | 6 + .../src/assets/icon-geo-distribution.svg | 3 + .../src/assets/icon-image-color.svg | 4 + .../src/assets/icon-image-tonal.svg | 5 + .../vuetify-poc/src/assets/icon-more.svg | 3 + .../vuetify-poc/src/assets/icon-pdf-color.svg | 7 + .../vuetify-poc/src/assets/icon-pdf-tonal.svg | 8 + .../src/assets/icon-project-color.svg | 4 + .../src/assets/icon-project-tonal.svg | 5 + .../vuetify-poc/src/assets/icon-share.svg | 3 + .../src/assets/icon-spreadsheet-color.svg | 4 + .../src/assets/icon-spreadsheet-tonal.svg | 5 + .../src/assets/icon-text-color.svg | 4 + .../src/assets/icon-text-tonal.svg | 5 + .../src/assets/icon-user-color.svg | 4 + .../vuetify-poc/src/assets/icon-user.svg | 4 + .../src/assets/icon-video-color.svg | 4 + .../src/assets/icon-video-tonal.svg | 5 + .../vuetify-poc/src/assets/icon-zip-color.svg | 15 + .../vuetify-poc/src/assets/icon-zip-tonal.svg | 16 + .../vuetify-poc/src/assets/logo-dark.svg | 4 + web/satellite/vuetify-poc/src/assets/logo.svg | 8 +- .../src/components/AccessTableComponent.vue | 106 ++++++ .../BrowserBreadcrumbsComponent.vue | 16 + .../src/components/BrowserNewFolderDialog.vue | 85 +++++ .../components/BrowserSnackbarComponent.vue | 154 ++++++++ .../src/components/BrowserTableComponent.vue | 299 +++++++++++++++ .../src/components/BucketsDataTable.vue | 47 +++ .../src/components/CardStatsComponent.vue | 16 + .../vuetify-poc/src/components/Dashboard.vue | 218 ----------- .../src/components/PageSubtitleComponent.vue | 12 + .../src/components/PageTitleComponent.vue | 12 + .../src/components/ProjectsTableComponent.vue | 115 ++++++ .../vuetify-poc/src/components/Team.vue | 199 ---------- .../src/components/TeamTableComponent.vue | 104 +++++ .../src/components/UsageProgressComponent.vue | 28 ++ .../src/components/icons/IconAccess.vue | 22 ++ .../src/components/icons/IconAllProjects.vue | 24 ++ .../src/components/icons/IconBrowse.vue | 21 ++ .../src/components/icons/IconBucket.vue | 21 ++ .../src/components/icons/IconDashboard.vue | 20 + .../src/components/icons/IconDocs.vue | 21 ++ .../src/components/icons/IconFolder.vue | 20 + .../src/components/icons/IconForum.vue | 20 + .../src/components/icons/IconNew.vue | 21 ++ .../src/components/icons/IconPassphrase.vue | 21 ++ .../src/components/icons/IconProject.vue | 20 + .../src/components/icons/IconResources.vue | 20 + .../src/components/icons/IconSettings.vue | 20 + .../src/components/icons/IconSupport.vue | 21 ++ .../src/components/icons/IconTeam.vue | 21 ++ .../src/components/icons/IconUpload.vue | 20 + .../vuetify-poc/src/layouts/AppBar.vue | 311 --------------- .../src/layouts/default/Account.vue | 16 + .../src/layouts/default/AccountNav.vue | 91 +++++ .../src/layouts/default/AllProjects.vue | 14 + .../src/layouts/default/AppBar.vue | 187 +++++++++ .../src/layouts/{ => default}/Default.vue | 8 +- .../src/layouts/default/ProjectNav.vue | 287 ++++++++++++++ .../{DefaultView.vue => default/View.vue} | 10 +- web/satellite/vuetify-poc/src/main.ts | 26 +- .../vuetify-poc/src/plugins/index.ts | 28 +- .../vuetify-poc/src/plugins/vuetify.ts | 152 +++++--- .../vuetify-poc/src/plugins/webfontloader.ts | 20 +- web/satellite/vuetify-poc/src/router/index.ts | 96 +++-- .../vuetify-poc/src/styles/settings.scss | 219 ++--------- .../vuetify-poc/src/styles/styles.scss | 290 ++++++++++++++ .../vuetify-poc/src/views/Access.vue | 289 ++++++++++++++ .../vuetify-poc/src/views/AccountSettings.vue | 147 ++++++++ .../vuetify-poc/src/views/Billing.vue | 318 ++++++++++++++++ .../vuetify-poc/src/views/Bucket.vue | 68 ++++ .../vuetify-poc/src/views/Buckets.vue | 175 +++++++++ .../vuetify-poc/src/views/Dashboard.vue | 117 +++++- .../vuetify-poc/src/views/DesignLibrary.vue | 287 ++++++++++++++ .../vuetify-poc/src/views/Projects.vue | 357 ++++++++++++++++++ web/satellite/vuetify-poc/src/views/Team.vue | 175 ++++++++- 94 files changed, 4639 insertions(+), 1117 deletions(-) create mode 100644 web/satellite/vuetify-poc/src/assets/icon-arrow-down.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-arrow-right.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-audio-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-audio-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-back-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-bucket-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-bucket-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-check-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-close.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-download.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-dropdown.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-file-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-file-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-file.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-folder-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-folder-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-geo-distribution.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-image-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-image-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-more.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-pdf-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-pdf-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-project-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-project-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-share.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-spreadsheet-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-spreadsheet-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-text-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-text-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-user-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-user.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-video-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-video-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-zip-color.svg create mode 100644 web/satellite/vuetify-poc/src/assets/icon-zip-tonal.svg create mode 100644 web/satellite/vuetify-poc/src/assets/logo-dark.svg create mode 100644 web/satellite/vuetify-poc/src/components/AccessTableComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue create mode 100644 web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/BucketsDataTable.vue create mode 100644 web/satellite/vuetify-poc/src/components/CardStatsComponent.vue delete mode 100644 web/satellite/vuetify-poc/src/components/Dashboard.vue create mode 100644 web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/PageTitleComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue delete mode 100644 web/satellite/vuetify-poc/src/components/Team.vue create mode 100644 web/satellite/vuetify-poc/src/components/TeamTableComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconAccess.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconBucket.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconDocs.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconFolder.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconForum.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconNew.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconProject.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconResources.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconSettings.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconSupport.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconTeam.vue create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconUpload.vue delete mode 100644 web/satellite/vuetify-poc/src/layouts/AppBar.vue create mode 100644 web/satellite/vuetify-poc/src/layouts/default/Account.vue create mode 100644 web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue create mode 100644 web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue create mode 100644 web/satellite/vuetify-poc/src/layouts/default/AppBar.vue rename web/satellite/vuetify-poc/src/layouts/{ => default}/Default.vue (94%) create mode 100644 web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue rename web/satellite/vuetify-poc/src/layouts/{DefaultView.vue => default/View.vue} (57%) create mode 100644 web/satellite/vuetify-poc/src/styles/styles.scss create mode 100644 web/satellite/vuetify-poc/src/views/Access.vue create mode 100644 web/satellite/vuetify-poc/src/views/AccountSettings.vue create mode 100644 web/satellite/vuetify-poc/src/views/Billing.vue create mode 100644 web/satellite/vuetify-poc/src/views/Bucket.vue create mode 100644 web/satellite/vuetify-poc/src/views/Buckets.vue create mode 100644 web/satellite/vuetify-poc/src/views/DesignLibrary.vue create mode 100644 web/satellite/vuetify-poc/src/views/Projects.vue diff --git a/web/satellite/index-vuetify.html b/web/satellite/index-vuetify.html index 2f569ee29..ea5570f80 100644 --- a/web/satellite/index-vuetify.html +++ b/web/satellite/index-vuetify.html @@ -1,10 +1,10 @@ - - - - - + + + + + Storj DCS
diff --git a/web/satellite/vite.config-vuetify.js b/web/satellite/vite.config-vuetify.js index c74b3e275..d0f6ffcd8 100644 --- a/web/satellite/vite.config-vuetify.js +++ b/web/satellite/vite.config-vuetify.js @@ -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 } + 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', - }, + 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, - resolve: { - alias: { - '@': resolve(__dirname, './src'), - '@poc': resolve(__dirname, './vuetify-poc/src'), - 'stream': 'stream-browserify', - 'util': 'util/', - }, - extensions: ['.js', '.ts', '.svg', '.vue', '.mjs'], - }, - build: { - outDir: resolve(__dirname, 'dist_vuetify_poc'), - emptyOutDir: true, - rollupOptions: { - input: { - 'vuetify-poc': resolve(__dirname, './index-vuetify.html'), - }, - external: [ - /satellite\/src\/views/, - /satellite\/src\/components/, - /satellite\/src\/router/, - ], - }, - }, - optimizeDeps: { - exclude: ['* > vuetify/lib/components'], - }, - define: { - 'process.env': {}, - }, - }; -}); + ], + define: { 'process.env': {} }, + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + '@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)), + }, + extensions: [ + '.js', + '.json', + '.jsx', + '.mjs', + '.ts', + '.tsx', + '.vue', + ], + }, + build: { + outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)), + emptyOutDir: true, + rollupOptions: { + input: { + 'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)), + }, + }, + }, + server: { + port: 3000, + } +}) diff --git a/web/satellite/vuetify-poc/src/App.vue b/web/satellite/vuetify-poc/src/App.vue index 63a3a329b..f59dd344c 100644 --- a/web/satellite/vuetify-poc/src/App.vue +++ b/web/satellite/vuetify-poc/src/App.vue @@ -2,9 +2,7 @@ // See LICENSE for copying information. \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue new file mode 100644 index 000000000..aedd3a26c --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue @@ -0,0 +1,16 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue b/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue new file mode 100644 index 000000000..082f3b4df --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue @@ -0,0 +1,85 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue new file mode 100644 index 000000000..4628c1c43 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue @@ -0,0 +1,154 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue new file mode 100644 index 000000000..b5d4e5253 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue @@ -0,0 +1,299 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue new file mode 100644 index 000000000..78053b4f3 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue @@ -0,0 +1,47 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue new file mode 100644 index 000000000..5206bc2be --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue @@ -0,0 +1,16 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/Dashboard.vue b/web/satellite/vuetify-poc/src/components/Dashboard.vue deleted file mode 100644 index 60f4843c2..000000000 --- a/web/satellite/vuetify-poc/src/components/Dashboard.vue +++ /dev/null @@ -1,218 +0,0 @@ -// Copyright (C) 2023 Storj Labs, Inc. -// See LICENSE for copying information. - - - - diff --git a/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue b/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue new file mode 100644 index 000000000..512057073 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue @@ -0,0 +1,12 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue b/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue new file mode 100644 index 000000000..0b9f66f6a --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue @@ -0,0 +1,12 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue new file mode 100644 index 000000000..62ae1cb2f --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue @@ -0,0 +1,115 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/components/Team.vue b/web/satellite/vuetify-poc/src/components/Team.vue deleted file mode 100644 index bad087acf..000000000 --- a/web/satellite/vuetify-poc/src/components/Team.vue +++ /dev/null @@ -1,199 +0,0 @@ -// Copyright (C) 2023 Storj Labs, Inc. -// See LICENSE for copying information. - - - - diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue new file mode 100644 index 000000000..519accda3 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue @@ -0,0 +1,104 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue new file mode 100644 index 000000000..457fe34e6 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue @@ -0,0 +1,28 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue new file mode 100644 index 000000000..92f8d242a --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue @@ -0,0 +1,22 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue b/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue new file mode 100644 index 000000000..1820ea4f3 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue @@ -0,0 +1,24 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue b/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue new file mode 100644 index 000000000..a931cc67d --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue new file mode 100644 index 000000000..32cefae67 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue b/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue new file mode 100644 index 000000000..2cc0c257a --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue b/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue new file mode 100644 index 000000000..53fe3ba17 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue b/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue new file mode 100644 index 000000000..8897bff77 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconForum.vue b/web/satellite/vuetify-poc/src/components/icons/IconForum.vue new file mode 100644 index 000000000..adfbd7390 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconForum.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconNew.vue b/web/satellite/vuetify-poc/src/components/icons/IconNew.vue new file mode 100644 index 000000000..8b59160ab --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconNew.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue b/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue new file mode 100644 index 000000000..f98088700 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconProject.vue b/web/satellite/vuetify-poc/src/components/icons/IconProject.vue new file mode 100644 index 000000000..5025c13d6 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconProject.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconResources.vue b/web/satellite/vuetify-poc/src/components/icons/IconResources.vue new file mode 100644 index 000000000..005b2fdd2 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconResources.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue b/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue new file mode 100644 index 000000000..89ec79e78 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue b/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue new file mode 100644 index 000000000..3d706190f --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue new file mode 100644 index 000000000..9cc991f53 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue @@ -0,0 +1,21 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue b/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue new file mode 100644 index 000000000..bec0d3034 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue @@ -0,0 +1,20 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/layouts/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/AppBar.vue deleted file mode 100644 index 5e393f7a9..000000000 --- a/web/satellite/vuetify-poc/src/layouts/AppBar.vue +++ /dev/null @@ -1,311 +0,0 @@ -// Copyright (C) 2023 Storj Labs, Inc. -// See LICENSE for copying information. - - - - diff --git a/web/satellite/vuetify-poc/src/layouts/default/Account.vue b/web/satellite/vuetify-poc/src/layouts/default/Account.vue new file mode 100644 index 000000000..c429fd827 --- /dev/null +++ b/web/satellite/vuetify-poc/src/layouts/default/Account.vue @@ -0,0 +1,16 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue b/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue new file mode 100644 index 000000000..656c15c86 --- /dev/null +++ b/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue @@ -0,0 +1,91 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue new file mode 100644 index 000000000..867395baa --- /dev/null +++ b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue @@ -0,0 +1,14 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue new file mode 100644 index 000000000..06391d076 --- /dev/null +++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue @@ -0,0 +1,187 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/vuetify-poc/src/layouts/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue similarity index 94% rename from web/satellite/vuetify-poc/src/layouts/Default.vue rename to web/satellite/vuetify-poc/src/layouts/default/Default.vue index 349235dc2..67b2e7bfd 100644 --- a/web/satellite/vuetify-poc/src/layouts/Default.vue +++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue @@ -3,7 +3,8 @@ @@ -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'; diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue new file mode 100644 index 000000000..1de7a5ad9 --- /dev/null +++ b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue @@ -0,0 +1,287 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/layouts/DefaultView.vue b/web/satellite/vuetify-poc/src/layouts/default/View.vue similarity index 57% rename from web/satellite/vuetify-poc/src/layouts/DefaultView.vue rename to web/satellite/vuetify-poc/src/layouts/default/View.vue index f91dcc403..73e12e472 100644 --- a/web/satellite/vuetify-poc/src/layouts/DefaultView.vue +++ b/web/satellite/vuetify-poc/src/layouts/default/View.vue @@ -2,9 +2,11 @@ // See LICENSE for copying information. - diff --git a/web/satellite/vuetify-poc/src/main.ts b/web/satellite/vuetify-poc/src/main.ts index cab33a9ec..0e47612d9 100644 --- a/web/satellite/vuetify-poc/src/main.ts +++ b/web/satellite/vuetify-poc/src/main.ts @@ -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') diff --git a/web/satellite/vuetify-poc/src/plugins/index.ts b/web/satellite/vuetify-poc/src/plugins/index.ts index 6a3aa510c..94d6b65b1 100644 --- a/web/satellite/vuetify-poc/src/plugins/index.ts +++ b/web/satellite/vuetify-poc/src/plugins/index.ts @@ -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): void { - loadFonts(); - app - .use(vuetify) - .use(router) - .use(pinia); +export function registerPlugins (app) { + loadFonts() + app + .use(vuetify) + .use(router) + .use(pinia) } diff --git a/web/satellite/vuetify-poc/src/plugins/vuetify.ts b/web/satellite/vuetify-poc/src/plugins/vuetify.ts index 85b1bdd40..f953e5153 100644 --- a/web/satellite/vuetify-poc/src/plugins/vuetify.ts +++ b/web/satellite/vuetify-poc/src/plugins/vuetify.ts @@ -1,60 +1,110 @@ // 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, - theme: { - themes: { - light: { - colors: { - primary: '#0149FF', - secondary: '#0218A7', - info: '#537CFF', - success: '#00AC26', - warning: '#FF8A00', - error: '#FF458B', - surface: '#fff', - purple: '#7B61FF', - blue6: '#091c45', - blue5: '#0218A7', - blue4: '#0059D0', - }, - }, - dark: { - colors: { - primary: '#0149FF', - secondary: '#537CFF', - background: '#0c121d', - surface: '#0c121d', - purple: '#7B61FF', - blue6: '#091c45', - blue5: '#2196f3', - blue4: '#0059D0', - }, - }, + // Use blueprint for Material Design 2 + // blueprint: md2, + // Use blueprint for Material Design 3 + blueprint: md3, + theme: { + themes: { + light: { + colors: { + primary: '#0149FF', + secondary: '#0218A7', + info: '#537CFF', + success: '#00AC26', + warning: '#FF8A00', + error: '#FF458B', + 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: '#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', + } + }, }, - components: { - VDataTable, + }, + components: { + VDataTable, + }, + defaults: { + global: { + // ripple: false, }, - defaults: { - global: { - // ripple: false, - }, - VDataTable: { - fixedHeader: true, - noDataText: 'Results not found', - }, - VBtn: { - elevation: 0, - density: 'default', - rounded: 'lg', - }, + VDataTable: { + fixedHeader: true, + noDataText: 'Results not found', }, -}); + VBtn: { + // elevation: 1, + density: 'default', + // height: 48, + rounded: 'lg', + // textTransform: 'none', + class: 'text-capitalize font-weight-bold', + style: 'letter-spacing:0;' + }, + VTooltip: { + transition: 'fade-transition', + }, + }, +}) \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/plugins/webfontloader.ts b/web/satellite/vuetify-poc/src/plugins/webfontloader.ts index 1c89462bb..ff5a3bc7c 100644 --- a/web/satellite/vuetify-poc/src/plugins/webfontloader.ts +++ b/web/satellite/vuetify-poc/src/plugins/webfontloader.ts @@ -1,12 +1,18 @@ // Copyright (C) 2023 Storj Labs, Inc. // See LICENSE for copying information. -export async function loadFonts(): Promise { - const webFontLoader = await import('webfontloader'); +/** + * plugins/webfontloader.ts + * + * webfontloader documentation: https://github.com/typekit/webfontloader + */ - webFontLoader.load({ - google: { - families: ['Inter:400,600,800&display=swap'], - }, - }); +export async function loadFonts () { + const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader') + + webFontLoader.load({ + google: { + families: ['Inter:400,500,700&display=swap'], + }, + }) } diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts index 3e43b698f..77a3cec57 100644 --- a/web/satellite/vuetify-poc/src/router/index.ts +++ b/web/satellite/vuetify-poc/src/router/index.ts @@ -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'), - children: [ - { - path: '/dashboard', - name: 'Dashboard', - component: () => import('@poc/views/Dashboard.vue'), - }, - { - path: '/team', - name: 'Team', - component: () => import('@poc/views/Team.vue'), - }, - ], - }, -]; + { + path: '/vuetifypoc', + redirect: { path: '/projects' }, // redirect + component: () => import('@poc/layouts/default/Default.vue'), + children: [ + { + path: '/dashboard', + name: 'Dashboard', + 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(/* 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({ - history: createWebHistory(), - routes, -}); +const router = createRouter({ + history: createWebHistory(), + routes, +}) + +export default router diff --git a/web/satellite/vuetify-poc/src/styles/settings.scss b/web/satellite/vuetify-poc/src/styles/settings.scss index 557cbf130..9bb5a6c74 100644 --- a/web/satellite/vuetify-poc/src/styles/settings.scss +++ b/web/satellite/vuetify-poc/src/styles/settings.scss @@ -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', -); - -.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)); -} + // $button-text-letter-spacing: 'none', + // $button-height: 40px, +); \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss new file mode 100644 index 000000000..2d79a146f --- /dev/null +++ b/web/satellite/vuetify-poc/src/styles/styles.scss @@ -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; +} \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/views/Access.vue b/web/satellite/vuetify-poc/src/views/Access.vue new file mode 100644 index 000000000..3f90b3a3a --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/Access.vue @@ -0,0 +1,289 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue new file mode 100644 index 000000000..3163f0096 --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/AccountSettings.vue @@ -0,0 +1,147 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue new file mode 100644 index 000000000..fe5d40528 --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/Billing.vue @@ -0,0 +1,318 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + \ No newline at end of file diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue new file mode 100644 index 000000000..0f9e70930 --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/Bucket.vue @@ -0,0 +1,68 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/views/Buckets.vue b/web/satellite/vuetify-poc/src/views/Buckets.vue new file mode 100644 index 000000000..6928fb289 --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/Buckets.vue @@ -0,0 +1,175 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue index f13543130..ccee8ac66 100644 --- a/web/satellite/vuetify-poc/src/views/Dashboard.vue +++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue @@ -2,9 +2,122 @@ // See LICENSE for copying information. diff --git a/web/satellite/vuetify-poc/src/views/DesignLibrary.vue b/web/satellite/vuetify-poc/src/views/DesignLibrary.vue new file mode 100644 index 000000000..5aeee7ec9 --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/DesignLibrary.vue @@ -0,0 +1,287 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + diff --git a/web/satellite/vuetify-poc/src/views/Projects.vue b/web/satellite/vuetify-poc/src/views/Projects.vue new file mode 100644 index 000000000..9a8de20d9 --- /dev/null +++ b/web/satellite/vuetify-poc/src/views/Projects.vue @@ -0,0 +1,357 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/views/Team.vue b/web/satellite/vuetify-poc/src/views/Team.vue index 664c2af93..723f582f5 100644 --- a/web/satellite/vuetify-poc/src/views/Team.vue +++ b/web/satellite/vuetify-poc/src/views/Team.vue @@ -2,9 +2,180 @@ // See LICENSE for copying information.