From 51e01b60b1c592aed1974ed79d01e1d27a3cdc00 Mon Sep 17 00:00:00 2001 From: Bo Robbrecht Date: Mon, 15 Jul 2024 14:55:09 +0200 Subject: [PATCH 1/6] Made skeleton header; Working on header tabs --- loama/index.html | 5 +- loama/package.json | 1 + loama/pnpm-lock.yaml | 124 +++++++++++++++++++++++++++++ loama/src/App.vue | 68 ++++++++++++++-- loama/src/assets/loama.svg | 78 ++++++++++++++++++ loama/src/assets/logo.svg | 1 - loama/src/components/Header.vue | 56 +++++++++++++ loama/src/components/HeaderTab.vue | 21 +++++ loama/src/views/HomeView.vue | 4 + loama/vite.config.ts | 2 + 10 files changed, 353 insertions(+), 7 deletions(-) create mode 100644 loama/src/assets/loama.svg delete mode 100644 loama/src/assets/logo.svg create mode 100644 loama/src/components/Header.vue create mode 100644 loama/src/components/HeaderTab.vue diff --git a/loama/index.html b/loama/index.html index a888544..6d49077 100644 --- a/loama/index.html +++ b/loama/index.html @@ -4,7 +4,10 @@ - Vite App + + + + Loama
diff --git a/loama/package.json b/loama/package.json index 718440c..a469244 100644 --- a/loama/package.json +++ b/loama/package.json @@ -15,6 +15,7 @@ "dependencies": { "@inrupt/solid-client-authn-browser": "^2.2.4", "loama-controller": "link:../controller", + "vite-svg-loader": "^5.1.0", "vue": "^3.4.29", "vue-router": "^4.3.3" }, diff --git a/loama/pnpm-lock.yaml b/loama/pnpm-lock.yaml index fcf3da7..09a4bd3 100644 --- a/loama/pnpm-lock.yaml +++ b/loama/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: loama-controller: specifier: link:../controller version: link:../controller + vite-svg-loader: + specifier: ^5.1.0 + version: 5.1.0(vue@3.4.31(typescript@5.4.5)) vue: specifier: ^3.4.29 version: 3.4.31(typescript@5.4.5) @@ -551,6 +554,10 @@ packages: '@rushstack/eslint-patch@1.10.3': resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==} + '@trysound/sax@0.2.0': + resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} + engines: {node: '>=10.13.0'} + '@tsconfig/node20@20.1.4': resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==} @@ -828,6 +835,10 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + computeds@0.0.1: resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} @@ -851,11 +862,30 @@ packages: crypto-js@4.2.0: resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==} + css-select@5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + + css-tree@2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + + css-tree@2.3.1: + resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + + css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true + csso@5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} @@ -894,6 +924,19 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + + domutils@3.1.0: + resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} + electron-to-chromium@1.4.820: resolution: {integrity: sha512-kK/4O/YunacfboFEk/BDf7VO1HoPmDudLTJAU9NmXIOSjsV7qVIX3OrI4REZo0VmdqhcpUcncQc6N8Q3aEXlHg==} @@ -1224,6 +1267,12 @@ packages: magic-string@0.30.10: resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} + mdn-data@2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + + mdn-data@2.0.30: + resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + memorystream@0.3.1: resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} @@ -1494,6 +1543,11 @@ packages: svg-tags@1.0.0: resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + svgo@3.3.2: + resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==} + engines: {node: '>=14.0.0'} + hasBin: true + synckit@0.8.8: resolution: {integrity: sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==} engines: {node: ^14.18.0 || >=16.0.0} @@ -1584,6 +1638,11 @@ packages: peerDependencies: vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 + vite-svg-loader@5.1.0: + resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==} + peerDependencies: + vue: '>=3.2.13' + vite@5.3.3: resolution: {integrity: sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==} engines: {node: ^18.0.0 || >=20.0.0} @@ -2128,6 +2187,8 @@ snapshots: '@rushstack/eslint-patch@1.10.3': {} + '@trysound/sax@0.2.0': {} + '@tsconfig/node20@20.1.4': {} '@types/estree@1.0.5': {} @@ -2475,6 +2536,8 @@ snapshots: color-name@1.1.4: {} + commander@7.2.0: {} + computeds@0.0.1: {} concat-map@0.0.1: {} @@ -2495,8 +2558,32 @@ snapshots: crypto-js@4.2.0: {} + css-select@5.1.0: + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.1.0 + nth-check: 2.1.1 + + css-tree@2.2.1: + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.2.0 + + css-tree@2.3.1: + dependencies: + mdn-data: 2.0.30 + source-map-js: 1.2.0 + + css-what@6.1.0: {} + cssesc@3.0.0: {} + csso@5.0.5: + dependencies: + css-tree: 2.2.1 + csstype@3.1.3: {} de-indent@1.0.2: {} @@ -2524,6 +2611,24 @@ snapshots: dependencies: esutils: 2.0.3 + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + + domutils@3.1.0: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + electron-to-chromium@1.4.820: {} entities@4.5.0: {} @@ -2872,6 +2977,10 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 + mdn-data@2.0.28: {} + + mdn-data@2.0.30: {} + memorystream@0.3.1: {} merge-stream@2.0.0: {} @@ -3109,6 +3218,16 @@ snapshots: svg-tags@1.0.0: {} + svgo@3.3.2: + dependencies: + '@trysound/sax': 0.2.0 + commander: 7.2.0 + css-select: 5.1.0 + css-tree: 2.3.1 + css-what: 6.1.0 + csso: 5.0.5 + picocolors: 1.0.1 + synckit@0.8.8: dependencies: '@pkgr/core': 0.1.1 @@ -3207,6 +3326,11 @@ snapshots: transitivePeerDependencies: - supports-color + vite-svg-loader@5.1.0(vue@3.4.31(typescript@5.4.5)): + dependencies: + svgo: 3.3.2 + vue: 3.4.31(typescript@5.4.5) + vite@5.3.3(@types/node@20.14.10): dependencies: esbuild: 0.21.5 diff --git a/loama/src/App.vue b/loama/src/App.vue index 79cb595..1b451b1 100644 --- a/loama/src/App.vue +++ b/loama/src/App.vue @@ -1,12 +1,70 @@ - + diff --git a/loama/src/assets/loama.svg b/loama/src/assets/loama.svg new file mode 100644 index 0000000..58446fb --- /dev/null +++ b/loama/src/assets/loama.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/loama/src/assets/logo.svg b/loama/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/loama/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/loama/src/components/Header.vue b/loama/src/components/Header.vue new file mode 100644 index 0000000..3efc933 --- /dev/null +++ b/loama/src/components/Header.vue @@ -0,0 +1,56 @@ + + + + + \ No newline at end of file diff --git a/loama/src/components/HeaderTab.vue b/loama/src/components/HeaderTab.vue new file mode 100644 index 0000000..d2c76f5 --- /dev/null +++ b/loama/src/components/HeaderTab.vue @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/loama/src/views/HomeView.vue b/loama/src/views/HomeView.vue index 307cffb..828580d 100644 --- a/loama/src/views/HomeView.vue +++ b/loama/src/views/HomeView.vue @@ -1,4 +1,7 @@ \ No newline at end of file diff --git a/loama/src/store.ts b/loama/src/store.ts index 7acf313..32c865f 100644 --- a/loama/src/store.ts +++ b/loama/src/store.ts @@ -1,4 +1,4 @@ import { getDefaultSession } from '@inrupt/solid-client-authn-browser' import { reactive } from 'vue' -export const store = reactive({ session: getDefaultSession() }) +export const store = reactive({ session: getDefaultSession(), usedPod: "" }) diff --git a/loama/src/views/HomeView.vue b/loama/src/views/HomeView.vue index 9bc90df..62c00fc 100644 --- a/loama/src/views/HomeView.vue +++ b/loama/src/views/HomeView.vue @@ -1,6 +1,6 @@ - - \ No newline at end of file + \ No newline at end of file From 0b8c4794c3dc998ab35b0050991dd65e936518a8 Mon Sep 17 00:00:00 2001 From: Bo Robbrecht Date: Tue, 16 Jul 2024 09:55:36 +0200 Subject: [PATCH 4/6] Moved signout button & functionality to header --- loama/src/components/Header.vue | 11 +++++++++-- loama/src/views/HomeView.vue | 10 ---------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/loama/src/components/Header.vue b/loama/src/components/Header.vue index 8adfe83..7de461a 100644 --- a/loama/src/components/Header.vue +++ b/loama/src/components/Header.vue @@ -7,18 +7,19 @@ - User profile picture + User profile picture @@ -89,6 +90,7 @@ import { ref } from 'vue'; import Loama from '../assets/loama.svg' import { store } from '@/store'; +import router from '@/router'; const props = defineProps<{ pfpSrc: string, @@ -97,6 +99,11 @@ const props = defineProps<{ const isContextMenuOpen = ref(false) console.log(store.usedPod) +const session = store.session; +async function logout() { + session.logout(); + router.push('/'); +} function showContextMenu() { isContextMenuOpen.value = !isContextMenuOpen.value } diff --git a/loama/src/views/HomeView.vue b/loama/src/views/HomeView.vue index 62c00fc..0689dd7 100644 --- a/loama/src/views/HomeView.vue +++ b/loama/src/views/HomeView.vue @@ -3,8 +3,6 @@ Files
- -
@@ -17,15 +15,7 @@ From 2575f9cb55843c40a01d63ebf0854a63ecd6becf Mon Sep 17 00:00:00 2001 From: Bo Robbrecht Date: Tue, 16 Jul 2024 11:52:01 +0200 Subject: [PATCH 5/6] Adding temp work for quick PR --- loama/src/App.vue | 15 +++++++++------ loama/src/components/HeaderTab.vue | 2 +- loama/src/views/LandingView.vue | 2 +- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/loama/src/App.vue b/loama/src/App.vue index 240eada..c461d46 100644 --- a/loama/src/App.vue +++ b/loama/src/App.vue @@ -15,12 +15,7 @@ --base-unit: 0.5rem; --base-corner: 0.5rem; } -html{ - background-color: var(--off-white); - font-family: "Raleway", sans-serif; - font-optical-sizing: auto; - font-style: normal; -} + /* Reset CSS*/ /* 1. Use a more-intuitive box-sizing model. @@ -68,4 +63,12 @@ p, h1, h2, h3, h4, h5, h6 { #root, #__next { isolation: isolate; } + +/* Global styles */ +html{ + background-color: var(--off-white); + font-family: "Raleway", sans-serif; + font-optical-sizing: auto; + font-style: normal; +} diff --git a/loama/src/components/HeaderTab.vue b/loama/src/components/HeaderTab.vue index c5fd3fd..ad4d892 100644 --- a/loama/src/components/HeaderTab.vue +++ b/loama/src/components/HeaderTab.vue @@ -1,5 +1,5 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/loama/src/components/HeaderTab.vue b/loama/src/components/HeaderTab.vue index ad4d892..be3e4de 100644 --- a/loama/src/components/HeaderTab.vue +++ b/loama/src/components/HeaderTab.vue @@ -2,6 +2,13 @@ + + - - \ No newline at end of file + \ No newline at end of file