Add toolbar

archesproject · Mar 12, 2024 · 5c6182e · 5c6182e
1 parent c0ae8d7
commit 5c6182e
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 22 deletions.
diff --git a/arches_rdm/src/App.vue b/arches_rdm/src/App.vue
@@ -23,3 +23,9 @@ const isAuthenticated = ref(false);
         v-model="isAuthenticated"
     />
 </template>
+
+<style>
+body {
+    margin: 0;
+}
+</style>
diff --git a/arches_rdm/src/components/DetailPane.vue b/arches_rdm/src/components/DetailPane.vue
@@ -12,7 +12,7 @@ const props: { node: TreeNode } = defineProps(["node"]);
                 :class="node.icon"
                 aria-hidden="true"
             />
-            <h3>{{ node.label }}</h3>
+            <h2>{{ node.label }}</h2>
             <span class="item-type">{{ node.iconLabel }}</span>
         </span>
     </div>
@@ -32,7 +32,7 @@ const props: { node: TreeNode } = defineProps(["node"]);
     border-bottom: 1px solid;
     width: 80%;
 }
-h3 {
+h2 {
     font-size: 1rem;
     margin: 0;
 }

diff --git a/arches_rdm/src/components/HomePage.vue b/arches_rdm/src/components/HomePage.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
 
+import Button from "primevue/button";
 import ProgressSpinner from "primevue/progressspinner";
 import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
@@ -10,34 +12,80 @@ import DetailPane from "@/components/DetailPane.vue";
 
 import type { TreeNode } from "primevue/tree/Tree";
 
+const { $gettext } = useGettext();
+
 const selectedNode: Ref<TreeNode> = ref({});
+const isAuthenticated = defineModel();
+
+const signOut = () => {
+    // TODO(jtw): implement
+    isAuthenticated.value = false;
+};
 </script>
 
 <template>
-    <Splitter>
-        <SplitterPanel
-            :size="45"
-            :min-size="20"
-        >
-            <Suspense>
-                <ConceptTree v-model="selectedNode" />
-                <template #fallback>
-                    <ProgressSpinner style="display: flex" />
-                </template>
-            </Suspense>
-        </SplitterPanel>
-        <SplitterPanel
-            :size="55"
-            :min-size="20"
-        >
-            <DetailPane v-if="Object.keys(selectedNode).length" :node="selectedNode" />
-        </SplitterPanel>
-    </Splitter>
+    <main>
+        <div class="header">
+            <h1>{{ $gettext('LINGO') }}</h1>
+            <Button
+                @click="signOut"
+                @keyup:enter="signOut"
+            >
+                {{ $gettext('Sign out') }}
+            </Button>
+        </div>
+        <Splitter>
+            <SplitterPanel
+                :size="45"
+                :min-size="20"
+            >
+                <Suspense>
+                    <ConceptTree v-model="selectedNode" />
+                    <template #fallback>
+                        <ProgressSpinner style="display: flex" />
+                    </template>
+                </Suspense>
+            </SplitterPanel>
+            <SplitterPanel
+                :size="55"
+                :min-size="20"
+            >
+                <DetailPane v-if="Object.keys(selectedNode).length" :node="selectedNode" />
+            </SplitterPanel>
+        </Splitter>
+    </main>
 </template>
 
 <style scoped>
+main {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    background: linear-gradient(to right, #3F51B5, gray);
+}
+
+.header button {
+    color: black;
+    background: #f4f4f4;
+    height: 2rem;
+    align-self: center;
+    margin-right: 0.5rem;
+}
+
+h1 {
+    font-size: 1rem;
+    padding: 1rem;
+    margin: 0;
+    color: white;
+}
+
 .p-splitter {
     border: 0;
-    height: 100vh;
+    flex-grow: 1;
 }
 </style>