Merge pull request #44 from osoc24/38-ama-create-header-component

Header Component
osoc24 · Jul 17, 2024 · 828ce85 · 828ce85
2 parents e5a81d0 + 69f001d
commit 828ce85
Show file tree

Hide file tree

Showing 12 changed files with 292 additions and 143 deletions.
diff --git a/loama/package.json b/loama/package.json
@@ -19,6 +19,7 @@
   "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903",
   "dependencies": {
     "@inrupt/solid-client-authn-browser": "^2.2.4",
+    "@phosphor-icons/vue": "^2.2.1",
     "loama-controller": "link:../controller",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.29",

diff --git a/loama/pnpm-lock.yaml b/loama/pnpm-lock.yaml
diff --git a/loama/src/App.vue b/loama/src/App.vue
@@ -11,7 +11,7 @@
   --solid-purple: #7C4DFF;
   --off-white: #F7F7F7;
   --off-black: #170D33;
-  --lama-gray: #F7F7F7;
+  --lama-gray: #DADADA;
   --base-unit: 0.5rem;
   --base-corner: 0.5rem;
 }
@@ -70,5 +70,19 @@ html{
   font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
+  color: var(--off-black);
+  font-size: var(--base-unit)*2;
 }
+
+select {
+  padding: var(--base-unit);
+  border-radius: var(--base-corner);
+  background-color: var(--off-white);
+  border: 0.125rem solid var(--off-black);
+}
+
+select:active {
+  border-color: var(--solid-purple);
+}
+
 </style>
diff --git a/loama/src/components/Header.vue b/loama/src/components/Header.vue
diff --git a/loama/src/components/LoButton.vue b/loama/src/components/LoButton.vue
@@ -0,0 +1,63 @@
+<template>
+    <button :class="classList">
+        <component :v-if="leftIcon" :is="leftIcon" :size="24"/>
+        <span><slot></slot></span>
+        <component :v-if="rightIcon" :is="rightIcon" :size="24"/>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+    /**
+     * The icon to display on the left side of the button. Should be a Phosphor icon from the `@phosphor-icons/vue` package.
+     */
+    leftIcon?: Object,
+    /**
+     * The icon to display on the right side of the button. Should be a Phosphor icon from the `@phosphor-icons/vue` package.
+     */
+    rightIcon?: Object,
+    /**
+     * The variant of the button; defaults to primary.
+     */
+    variant?: "primary" | "secondary"
+}>(), {
+    variant: "primary"
+})
+
+const classList = computed(() => {
+    return {
+        primary: props.variant === "primary",
+        secondary: props.variant === "secondary"
+    }
+})
+</script>
+
+<style scoped>
+button {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    padding: var(--base-unit);
+    gap: var(--base-unit);
+    border-radius: var(--base-corner);
+    height: fit-content;
+    border: none;
+}
+
+.primary {
+    background-color: var(--solid-purple);
+    color: var(--off-white);
+}
+
+.secondary {
+    background-color: var(--solid-white);
+    color: var(--off-black);
+    border: 0.25rem solid var(--solid-purple);
+}
+</style>
diff --git a/loama/src/components/PodList.vue b/loama/src/components/PodList.vue
@@ -1,31 +1,7 @@
 <template>
     <div>
         <h2>Pods:</h2>
-        <template v-for="pod in pods" :key="pod.pod">
-            <h4>{{ pod.pod }}</h4>
-            <table>
-                <thead>
-                    <th>URL</th>
-                    <th>Properties</th>
-                    <th>Access Modes</th>
-                </thead>
-                <tbody>
-                    <tr v-for="thing in pod.things" :key="thing.url">
-                        <td>{{ thing.url }}</td>
-                        <td>
-                            <ul>
-                                <li v-for="property in thing.properties" :key="property">{{ property }}</li>
-                            </ul>
-                        </td>
-                        <td>
-                            {{ thing.accessModes }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <h4>{{ `${pod.pod}index.json` }}</h4>
-            {{ indexFile }}
-        </template>
+
         <button @click="addReadmePermissions">Add README permissions</button>
         <button @click="removeReadmePermissions">Revoke README permissions</button>
     </div>
@@ -39,7 +15,6 @@ import { Permission } from "loama-controller/dist/types";
 import { ref } from "vue";
 
 const pods = await listPods(store.session as Session);
-
 const indexFile = ref(await getOrCreateIndex(store.session as Session, pods[0])); // .then((index) => addPermissions(store.session, index, ["example.com"], true, [Permission.Read]))
 
 // const pods = [await listPod(store.session, "https://css12.onto-deside.ilabt.imec.be/osoc5/")]

diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
@@ -0,0 +1,110 @@
+<template>
+    <header>
+        <div class="wordmark">
+            <Loama />
+            <span>Loama</span>
+        </div>
+        <nav>
+            <slot></slot>
+            <LoButton :rightIcon="PhShareFat" class="share">Share access</LoButton>
+        </nav>
+        <img :src="pfpSrc" alt="User profile picture" @click="toggleContextMenu" />
+        <Suspense>
+            <HeaderContextMenu class="menu" :class="{ hidden: isContextMenuHidden }" @click="toggleContextMenu" />
+            <template #fallback>
+                Loading context menu...
+            </template>
+        </Suspense>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Loama from '../../assets/loama.svg'
+import LoButton from '../LoButton.vue'
+import HeaderContextMenu from './HeaderContextMenu.vue'
+import { PhShareFat } from '@phosphor-icons/vue';
+defineProps<{
+    pfpSrc: string,
+}>()
+
+const isContextMenuHidden = ref(true)
+
+
+function toggleContextMenu() {
+    isContextMenuHidden.value = !isContextMenuHidden.value
+}
+
+</script>
+
+<style scoped>
+header,
+.wordmark,
+nav {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.wordmark,
+img {
+    margin-bottom: calc(var(--base-unit));
+}
+
+header,
+img {
+    border: 0.25rem solid var(--solid-purple);
+}
+
+header {
+    width: 100%;
+    gap: calc(var(--base-unit)*5);
+    border-radius: 0 0 var(--base-corner) var(--base-corner);
+    border-bottom: 0.5rem solid var(--solid-purple);
+    border-top: 0;
+    padding: calc(var(--base-unit)*3) calc(var(--base-unit)*6) 0 calc(var(--base-unit)*3);
+}
+
+.wordmark>span {
+    font-family: "JetBrains Mono";
+    font-size: calc(var(--base-unit)*6);
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    color: var(--solid-purple);
+    text-transform: uppercase;
+}
+
+nav {
+    flex-grow: 1;
+    align-items: end;
+}
+
+.share {
+    align-self: center;
+    margin-left: auto;
+}
+
+svg {
+    width: calc(var(--base-unit)*8);
+    height: calc(var(--base-unit)*8);
+}
+
+img {
+    border-radius: 100%;
+    width: calc(var(--base-unit)*8);
+}
+
+.hidden {
+    display: none;
+}
+
+.menu {
+    position: absolute;
+    right: var(--base-unit);
+    top: calc(var(--base-unit)*14);
+    min-width: fit-content;
+    min-height: fit-content;
+    max-width: 25vw;
+    max-height: 50vw;
+}
+</style>