UI: Initial styling on footer popup

web/app/src/assets/base.css

@@ -69,8 +69,8 @@
   --color-worker-status-testing: hsl(166 100% 46%);
   --color-worker-status-offline: var(--color-status-canceled);
 
-  --color-connection-lost-text: hsl(17, 65%, 65%);
+  --color-connection-lost-text: hsl(0, 60%, 75%);
-  --color-connection-lost-bg: hsl(17, 65%, 20%);
+  --color-connection-lost-bg: hsl(0, 80%, 40%);
 }
 
 html,
@@ -233,15 +233,14 @@ dl dd:empty {
   border-color: transparent;
 }
 
-footer {
+.window-footer {
   align-items: center;
+  background-color: var(--color-background-column);
   color: var(--color-text-muted);
   display: flex;
   font-size: var(--font-size-sm);
   grid-area: footer;
   padding: var(--spacer-sm);
-
-  background-color: var(--color-background-column);
 }
 
 .btn-bar {
@@ -444,55 +443,6 @@ footer.window-footer {
   cursor: pointer;
 }
 
-section.footer-popup {
-  position: absolute;
-  bottom: var(--grid-gap);
-  left: var(--grid-gap);
-  right: var(--grid-gap);
-  height: 20vh;
-
-  z-index: 42;
-  padding: 0.2rem 0.5rem;
-
-  background-color: var(--color-background-column);
-  border-radius: 0.3rem;
-  border: thin solid var(--color-border);
-
-  box-shadow: 0 0 2rem black;
-}
-
-section.footer-popup header {
-  display: flex;
-}
-
-section.footer-popup header h3 {
-  margin: 0 auto 0 0;
-}
-
-section.footer-popup button.footer-tab {
-  border: none;
-  margin-right: 2rem;
-}
-section.footer-popup button.footer-tab.active-tab {
-  color: var(--color-accent-text);
-  background-color: var(--color-accent-background);
-}
-
-section.footer-popup .tabulator-tableholder {
-  /* Force a visible scroll bar, so that the notification history table always
-   * has the same available width. Without this, Tabulator won't properly act on
-   * the reduction in width when the scrollbar appears, and will show a
-   * horizontal scrollbar as well. */
-  overflow-y: scroll;
-}
-
-section.footer-popup .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
-  font-size: var(--font-size);
-  font-weight: normal;
-  color: var(--color-text-hint);
-  user-select: none;
-}
-
 span.state-transition-arrow {
   font-weight: bold;
   font-size: 110%;

web/app/src/assets/tabulator.css

@@ -306,13 +306,14 @@
 }
 
 .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
-  color: #ccc;
+  align-items: center;
-  display: inline-block;
+  color: var(--color-text-hint);
-  font-size: 20px;
+  cursor: default;
-  font-weight: bold;
+  display: flex;
-  padding: 10px;
+  font-size: var(--font-size-sm);
-  text-align: center;
+  grid-area: footer;
-  white-space: normal;
+  justify-content: center;
+  padding: var(--spacer-sm);
 }
 
 .tabulator .tabulator-tableholder .tabulator-table {

web/app/src/components/footer/FooterPopup.vue

@@ -16,13 +16,104 @@ watch(currentTab, async (newTab) => {
 </script>
 
 <template>
-  <section class="footer-popup">
+  <footer>
-    <header>
+    <nav>
-      <button :class='["footer-tab", {"active-tab": currentTab == "NotificationList"}]' @click="currentTab = 'NotificationList'">Notifications</button>
+      <ul>
-      <button :class='["footer-tab", {"active-tab": currentTab == "TaskLog"}]' @click="currentTab = 'TaskLog'">Task Log</button>
+        <li
+          :class='["footer-tab", {"active": currentTab == "NotificationList"}]'
+          @click="currentTab = 'NotificationList'">
+            Notifications
+        </li>
+        <li
+          :class='["footer-tab", {"active": currentTab == "TaskLog"}]'
+          @click="currentTab = 'TaskLog'">
+            Task Log
+        </li>
         <connection-status />
-      <button class='close' @click="emit('clickClose')" title="Close Pop-over">X</button>
+        <li
-    </header>
+          class="collapse"
+          @click="emit('clickClose')"
+          title="Collapse">
+          &#10005;
+        </li>
+      </ul>
+    </nav>
     <component :is="tabs[currentTab]" class="tab"></component>
-  </section>
+  </footer>
 </template>
+
+<style scoped>
+footer {
+  background-color: var(--color-background-column);
+  border-radius: var(--border-radius);
+  bottom: var(--grid-gap);
+  box-shadow: 0 0 5rem rgba(0, 0, 0, .66), 0 0 1.33rem rgba(0, 0, 0, .66);
+  left: var(--grid-gap);
+  padding: var(--spacer-sm);
+  position: fixed;
+  right: var(--grid-gap);
+}
+
+footer nav {
+  margin-bottom: var(--spacer-sm);
+}
+
+footer nav ul {
+  align-items: center;
+  display: flex;
+  gap: var(--spacer);
+  list-style: none;
+}
+
+footer nav ul li {
+  border-bottom: var(--border-width) solid transparent;
+  color: var(--color-text-hint);
+  cursor: pointer;
+  padding: var(--spacer-sm) 0;
+  transition: border-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
+  user-select: none;
+}
+
+footer nav ul li:hover {
+  border-color: var(--color-text);
+  color: var(--color-text);
+}
+
+footer nav ul li.active {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.collapse {
+  border: none;
+  flex: 1;
+  text-align: right;
+  font-size: 1.5rem;
+  padding: 0 var(--spacer-sm) 0;
+}
+
+
+footer button.footer-tab {
+  border: none;
+  margin-right: 1rem;
+}
+footer button.footer-tab.active-tab {
+  color: var(--color-accent-text);
+  background-color: var(--color-accent-background);
+}
+
+footer .tabulator-tableholder {
+  /* Force a visible scroll bar, so that the notification history table always
+   * has the same available width. Without this, Tabulator won't properly act on
+   * the reduction in width when the scrollbar appears, and will show a
+   * horizontal scrollbar as well. */
+  overflow-y: scroll;
+}
+
+footer .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
+  color: var(--color-text-hint);
+  font-size: var(--font-size);
+  font-weight: normal;
+  user-select: none;
+}
+</style>