Merge pull request #39 from TrickfireRobotics/aaron/navbar-icon-redesign

Navbar Redesign with Icons
TrickfireRobotics · Nov 16, 2024 · 24626b0 · 24626b0
2 parents 9640031 + 19c175b
commit 24626b0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 31 deletions.
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -10,6 +10,8 @@ import HomeIcon from 'vue-material-design-icons/Home.vue';
 import CameraIcon from 'vue-material-design-icons/Camera.vue';
 import TuneIcon from 'vue-material-design-icons/Tune.vue';
 import BugIcon from 'vue-material-design-icons/Bug.vue';
+import PowerPlugIcon from 'vue-material-design-icons/PowerPlug.vue';
+import ControllerIcon from 'vue-material-design-icons/ControllerClassic.vue';
 import { useRoslibStore } from '../store/useRoslib';
 import { useControllerStore } from '../store/useController';
 
@@ -91,32 +93,43 @@ const pageIconArr: PageIcon = [
       <h4>{{ pageIcon.label }}</h4>
       <component :is="pageIcon.icon" class="page-icon" :title="pageIcon.helperText" />
     </RouterLink>
-    <div class="container">
-      <h4 id="status">WebSocket</h4>
-      <div
-        class="circle"
+    <div
+      class="container indicator-container"
+      :title="`Websocket: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`"
+    >
+      <h4 id="status">WS</h4>
+      <component
+        :is="PowerPlugIcon"
+        class="page-icon"
         :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
-      ></div>
+      />
     </div>
-    <div class="container">
-      <h4 id="status">Camera Feed</h4>
-      <div
-        class="circle"
+    <div
+      class="container indicator-container"
+      :title="`Camera: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`"
+    >
+      <h4 id="status">CAM</h4>
+      <component
+        :is="CameraIcon"
+        class="page-icon"
         :class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
-      ></div>
+      />
     </div>
-    <div class="container">
-      <h4 id="status">Controller Connected</h4>
-      <div
-        class="circle"
+    <div
+      class="container indicator-container"
+      :title="`Controller: ${controller.isGamepadConnected ? `Connected` : `Disconnected`}`"
+    >
+      <h4 id="status">CTRL</h4>
+      <component
+        :is="ControllerIcon"
+        class="page-icon"
         :class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"
-      ></div>
+      />
+    </div>
+    <div class="container indicator-container">
+      <h4 id="status">Ping</h4>
+      <h4>{{ roslib.latency + 'ms' }}</h4>
     </div>
-    <!-- TODO Implement Latency -->
-    <!-- <div class="container">
-      <h4>Ping</h4>
-      <p>{{ `${latency}ms` }}</p>
-    </div> -->
   </nav>
 </template>
 
@@ -125,7 +138,6 @@ nav {
   padding: 0rem 1rem;
   grid-area: nav;
   display: flex;
-  gap: 5px;
   align-items: center;
   height: var(--nav-bar-size);
   background-color: var(--black);
@@ -145,10 +157,12 @@ nav {
     background-color: var(--light-grey);
   }
   .navbar-tab {
-    margin: 0;
     padding: 0 0.3rem;
     min-width: 4rem;
   }
+  .navbar-tab:not(.current-page):hover {
+    background-color: hsl(0, 0%, 16%);
+  }
   #logo {
     max-width: 100%;
     max-height: 4rem;
@@ -163,19 +177,16 @@ nav {
     align-items: center;
     justify-content: center;
   }
-  .circle {
-    border-radius: 50%;
-    background-color: inherit;
-    height: 22px;
-    width: 22px;
-    border: 2px black solid;
-    border-radius: 50%;
+  .indicator-container {
+    min-width: max-content;
+    padding: 0 1.5rem;
+    background-color: hsl(240, 20%, 20%);
   }
   .red {
-    background-color: var(--error);
+    color: var(--error);
   }
   .green {
-    background-color: var(--correct);
+    color: var(--correct);
   }
 }
 </style>
diff --git a/src/store/useRoslib.ts b/src/store/useRoslib.ts
@@ -10,6 +10,7 @@ const SECONDS_TO_TIMESTAMP = 1000;
 export const useRoslibStore = defineStore('roslib', () => {
   const ros = new ROSLIB.Ros({ url: undefined });
   const isWebSocketConnected = ref<boolean>(false);
+  const latency = ref<number>(0);
   const stop = { value: false };
 
   /**
@@ -107,6 +108,7 @@ export const useRoslibStore = defineStore('roslib', () => {
   return {
     ros,
     isWebSocketConnected,
+    latency,
     stop,
     init,
     heartbeatPub,