Messing around with the navbar

datalab-org · Aug 4, 2024 · 493b915 · 493b915
1 parent 58fe611
commit 493b915
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 53 deletions.
diff --git a/webapp/src/components/FormattedItemName.vue b/webapp/src/components/FormattedItemName.vue
@@ -8,6 +8,7 @@
       @click.meta.stop="enableModifiedClick ? openEditPageInNewTab() : null"
       @click.ctrl.stop="enableModifiedClick ? openEditPageInNewTab() : null"
     >
+      <span v-if="showType" class="item-type-label">&lt;{{ navbarName }}&gt;</span>
       {{ item_id }}
     </span>
     {{ shortenedName }}
@@ -30,6 +31,7 @@ export default {
   props: {
     item_id: { type: String, required: true },
     itemType: { type: String, required: true },
+    showType: { type: Boolean, default: false },
     selecting: {
       type: Boolean,
       default: false,
@@ -60,6 +62,9 @@ export default {
     badgeColor() {
       return itemTypes[this.itemType]?.lightColor || "LightGrey";
     },
+    navbarName() {
+      return itemTypes[this.itemType]?.navbarName || this.itemType;
+    },
     shortenedName() {
       if (this.maxLength && this.maxLength < this.name.length) {
         return this.name.substring(0, this.maxLength) + "...";
@@ -82,6 +87,12 @@ export default {
   border: 2px solid transparent;
 }
 
+.item-type-label {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: monospace;
+}
+
 .formatted-item-name.clickable:hover {
   border: 2px solid rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 2px gray;

diff --git a/webapp/src/main.js b/webapp/src/main.js
@@ -13,8 +13,10 @@ import {
   faSave,
   faPen,
   faCode,
+  faCubes,
   faEnvelope,
   faCog,
+  faHome,
   faUsersCog,
   faChevronRight,
   faArrowUp,
@@ -51,6 +53,8 @@ library.add(
   faSave,
   faPen,
   faCode,
+  faCubes,
+  faHome,
   faEnvelope,
   faCog,
   faUsersCog,

diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
@@ -1,62 +1,74 @@
 <template>
   <div id="topScrollPoint"></div>
-  <nav
-    class="navbar navbar-expand sticky-top navbar-dark py-0 editor-navbar"
-    :style="{ backgroundColor: navbarColor }"
-  >
-    <span class="navbar-brand clickable" @click="scrollToID($event, 'topScrollPoint')"
-      >{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
-      <FormattedItemName :item_id="item_id" :item-type="itemType" />
-    </span>
-    <div class="navbar-nav">
-      <a class="nav-item nav-link" href="/">Home</a>
-      <div class="nav-item dropdown">
-        <a
-          id="navbarDropdown"
-          class="nav-link dropdown-toggle ml-2"
-          role="button"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
-          @click="isMenuDropdownVisible = !isMenuDropdownVisible"
-        >
-          Add a block
+  <div>
+    <nav
+      class="navbar navbar-expand-md sticky-top navbar-dark py-0 editor-navbar"
+      :style="{ backgroundColor: navbarColor }"
+    >
+      <div v-show="false" class="navbar-nav"><LoginDetails /></div>
+      <span class="navbar-brand clickable" @click="scrollToID($event, 'topScrollPoint')">
+        {{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
+        <FormattedItemName :item_id="item_id" :item-type="itemType" />
+      </span>
+      <div class="navbar-nav">
+        <a class="nav-item nav-link" href="/">
+          <font-awesome-icon icon="home" fixed-width />
         </a>
-        <div
-          v-show="isMenuDropdownVisible"
-          class="dropdown-menu"
-          style="display: block"
-          aria-labelledby="navbarDropdown"
-        >
-          <template v-for="blockInfo in blocksInfos" :key="blockInfo.id">
-            <span v-if="blockInfo.id !== 'notsupported'" @click="newBlock($event, blockInfo.id)">
-              <StyledBlockHelp :block-info="blockInfo.attributes" />
-            </span>
-          </template>
+        <div class="nav-item dropdown">
+          <a
+            id="navbarDropdown"
+            class="nav-link dropdown-toggle"
+            role="button"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            @click="isMenuDropdownVisible = !isMenuDropdownVisible"
+          >
+            <font-awesome-icon icon="cubes" fixed-width />
+          </a>
+          <div
+            v-show="isMenuDropdownVisible"
+            class="dropdown-menu"
+            style="display: block"
+            aria-labelledby="navbarDropdown"
+          >
+            <template v-for="blockInfo in blocksInfos" :key="blockInfo.id">
+              <span v-if="blockInfo.id !== 'notsupported'" @click="newBlock($event, blockInfo.id)">
+                <StyledBlockHelp :block-info="blockInfo.attributes" />
+              </span>
+            </template>
+          </div>
         </div>
+        <a class="nav-item nav-link" :href="itemApiUrl" target="_blank">
+          <font-awesome-icon icon="code" fixed-width />
+        </a>
       </div>
-      <a class="nav-item nav-link" :href="itemApiUrl" target="_blank">
-        <font-awesome-icon icon="code" fixed-width /> View JSON
-      </a>
-    </div>
-    <div class="navbar-nav ml-auto">
-      <span v-if="itemDataLoaded && !savedStatus" class="navbar-text unsaved-warning">
-        Unsaved changes
-      </span>
-      <span v-if="itemDataLoaded && lastModified" class="navbar-text small mx-2"
-        ><i>Last saved: {{ lastModified }}</i></span
-      >
-      <font-awesome-icon
-        icon="save"
-        fixed-width
-        class="nav-item nav-link navbar-icon"
-        @click="saveSample"
-      />
-    </div>
-  </nav>
+      <div class="navbar-nav ml-auto">
+        <span v-if="itemDataLoaded && !savedStatus" class="navbar-text unsaved-warning">
+          Unsaved changes
+        </span>
+        <span v-if="itemDataLoaded && lastModified" class="navbar-text small mx-2"
+          ><i>Last saved: {{ lastModified }}</i></span
+        >
+        <a class="nav-item nav-link">
+          <font-awesome-icon
+            icon="save"
+            fixed-width
+            class="nav-item nav-link navbar-icon"
+            @click="saveSample"
+          />
+        </a>
+      </div>
+    </nav>
+  </div>
 
+  <div v-if="!itemDataLoaded" class="container">
+    <div class="mx-auto p-10 text-center">
+      <font-awesome-icon icon="spinner" class="fa-spin" fixed-width size="2x" />
+    </div>
+  </div>
   <!-- Item-type header information goes here -->
-  <div class="editor-body">
+  <div v-else class="editor-body">
     <component :is="itemTypeEntry?.itemInformationComponent" :item_id="item_id" />
 
     <FileList :item_id="item_id" :file_ids="file_ids" :stored_files="stored_files" />
@@ -101,6 +113,7 @@ import {
   updateBlockFromServer,
   getBlocksInfos,
 } from "@/server_fetch_utils";
+import LoginDetails from "@/components/LoginDetails";
 import FormattedItemName from "@/components/FormattedItemName";
 
 import setupUppy from "@/file_upload.js";
@@ -119,6 +132,7 @@ export default {
     TinyMceInline,
     SelectableFileTree,
     FileList,
+    LoginDetails,
     FileSelectModal,
     FormattedItemName,
     StyledBlockHelp,
@@ -324,8 +338,9 @@ label,
 }
 
 .nav-link:hover {
-  background-color: black;
   color: white;
+  text-decoration: underline wavy;
+  text-underline-offset: 0.2em;
 }
 
 .navbar-icon {