From 94de10d54c45d09cc6f8bbc4de95c09de2a64b6a Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Sun, 30 Jan 2022 19:49:44 -0500
Subject: [PATCH] Change Jump to Context menu to be a dropdown menu

I extracted the dropdown portion of the LogActionsToolbar into a separate DropdownMenu component so that it can be reused for Jump to Context.

Other Changes:
- Remove unused style in LogActionsToolbar
---
 assets/components.d.ts                  |  60 ++++++-------
 assets/components/DropdownMenu.vue      |  27 ++++++
 assets/components/LogActionsToolbar.vue | 108 ++++++++----------------
 assets/components/LogViewer.vue         |  21 +++--
 4 files changed, 109 insertions(+), 107 deletions(-)
 create mode 100644 assets/components/DropdownMenu.vue

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 94e4ca09..301833e3 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -2,36 +2,38 @@
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-    CarbonCaretDown: typeof import("~icons/carbon/caret-down")["default"];
-    CilColumns: typeof import("~icons/cil/columns")["default"];
-    ContainerStat: typeof import("./components/ContainerStat.vue")["default"];
-    ContainerTitle: typeof import("./components/ContainerTitle.vue")["default"];
-    FuzzySearchModal: typeof import("./components/FuzzySearchModal.vue")["default"];
-    InfiniteLoader: typeof import("./components/InfiniteLoader.vue")["default"];
-    LogActionsToolbar: typeof import("./components/LogActionsToolbar.vue")["default"];
-    LogContainer: typeof import("./components/LogContainer.vue")["default"];
-    LogEventSource: typeof import("./components/LogEventSource.vue")["default"];
-    LogViewer: typeof import("./components/LogViewer.vue")["default"];
-    LogViewerWithSource: typeof import("./components/LogViewerWithSource.vue")["default"];
-    MdiDotsVertical: typeof import("~icons/mdi/dots-vertical")["default"];
-    MdiLightChevronDoubleDown: typeof import("~icons/mdi-light/chevron-double-down")["default"];
-    MdiLightChevronLeft: typeof import("~icons/mdi-light/chevron-left")["default"];
-    MdiLightChevronRight: typeof import("~icons/mdi-light/chevron-right")["default"];
-    MdiLightCog: typeof import("~icons/mdi-light/cog")["default"];
-    MdiLightMagnify: typeof import("~icons/mdi-light/magnify")["default"];
-    MobileMenu: typeof import("./components/MobileMenu.vue")["default"];
-    OcticonContainer24: typeof import("~icons/octicon/container24")["default"];
-    OcticonDownload24: typeof import("~icons/octicon/download24")["default"];
-    OcticonTrash24: typeof import("~icons/octicon/trash24")["default"];
-    PastTime: typeof import("./components/PastTime.vue")["default"];
-    RelativeTime: typeof import("./components/RelativeTime.vue")["default"];
-    ScrollableView: typeof import("./components/ScrollableView.vue")["default"];
-    ScrollProgress: typeof import("./components/ScrollProgress.vue")["default"];
-    Search: typeof import("./components/Search.vue")["default"];
-    SideMenu: typeof import("./components/SideMenu.vue")["default"];
+    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    CilColumns: typeof import('~icons/cil/columns')['default']
+    CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
+    ContainerStat: typeof import('./components/ContainerStat.vue')['default']
+    ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
+    DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
+    FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
+    InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
+    LogActionsToolbar: typeof import('./components/LogActionsToolbar.vue')['default']
+    LogContainer: typeof import('./components/LogContainer.vue')['default']
+    LogEventSource: typeof import('./components/LogEventSource.vue')['default']
+    LogViewer: typeof import('./components/LogViewer.vue')['default']
+    LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
+    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
+    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
+    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
+    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
+    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
+    MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
+    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
+    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
+    PastTime: typeof import('./components/PastTime.vue')['default']
+    RelativeTime: typeof import('./components/RelativeTime.vue')['default']
+    ScrollableView: typeof import('./components/ScrollableView.vue')['default']
+    ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
+    Search: typeof import('./components/Search.vue')['default']
+    SideMenu: typeof import('./components/SideMenu.vue')['default']
   }
 }
 
-export {};
+export { }
diff --git a/assets/components/DropdownMenu.vue b/assets/components/DropdownMenu.vue
new file mode 100644
index 00000000..8d62aafa
--- /dev/null
+++ b/assets/components/DropdownMenu.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="dropdown is-hoverable">
+    <div class="dropdown-trigger">
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <mdi-dots-vertical />
+        </span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.is-top .dropdown-menu {
+  top: 0;
+}
+.is-small {
+  transform: scale(75%);
+}
+</style>
diff --git a/assets/components/LogActionsToolbar.vue b/assets/components/LogActionsToolbar.vue
index 1ba1e16b..42e82b50 100644
--- a/assets/components/LogActionsToolbar.vue
+++ b/assets/components/LogActionsToolbar.vue
@@ -1,54 +1,43 @@
 <template>
-  <div class="dropdown is-right is-hoverable">
-    <div class="dropdown-trigger">
-      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-        <span class="icon">
-          <mdi-dots-vertical />
-        </span>
-      </button>
-    </div>
-    <div class="dropdown-menu" id="dropdown-menu" role="menu">
-      <div class="dropdown-content">
-        <a class="dropdown-item" @click="onClearClicked">
-          <div class="level is-justify-content-start">
-            <div class="level-left">
-              <div class="level-item">
-                <octicon-trash-24 class="mr-4" />
-              </div>
-            </div>
-            <div class="level-right">
-              <div class="level-item">Clear</div>
-            </div>
+  <dropdown-menu class="is-right">
+    <a class="dropdown-item" @click="onClearClicked">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <octicon-trash-24 class="mr-4" />
           </div>
-        </a>
-        <a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
-          <div class="level is-justify-content-start">
-            <div class="level-left">
-              <div class="level-item">
-                <octicon-download-24 class="mr-4" />
-              </div>
-            </div>
-            <div class="level-right">
-              <div class="level-item">Download</div>
-            </div>
-          </div>
-        </a>
-        <hr class="dropdown-divider" />
-        <a class="dropdown-item" @click="showSearch = true">
-          <div class="level is-justify-content-start">
-            <div class="level-left">
-              <div class="level-item">
-                <mdi-light-magnify class="mr-4" />
-              </div>
-            </div>
-            <div class="level-right">
-              <div class="level-item">Search</div>
-            </div>
-          </div>
-        </a>
+        </div>
+        <div class="level-right">
+          <div class="level-item">Clear</div>
+        </div>
       </div>
-    </div>
-  </div>
+    </a>
+    <a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <octicon-download-24 class="mr-4" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">Download</div>
+        </div>
+      </div>
+    </a>
+    <hr class="dropdown-divider" />
+    <a class="dropdown-item" @click="showSearch = true">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <mdi-light-magnify class="mr-4" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">Search</div>
+        </div>
+      </div>
+    </a>
+  </dropdown-menu>
 </template>
 
 <script lang="ts" setup>
@@ -94,27 +83,4 @@ onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
     border-color: var(--primary-color);
   }
 }
-
-.toolbar {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 200px;
-  background-color: var(--action-toolbar-background-color);
-  border-radius: 8em;
-  margin-top: 0.5em;
-
-  & > div {
-    margin: 0 2em;
-    padding: 0.5em 0;
-  }
-
-  .button {
-    background-color: rgba(0, 0, 0, 0) !important;
-
-    &.is-small {
-      font-size: 0.65rem;
-    }
-  }
-}
 </style>
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
index d4751c27..42b124e7 100644
--- a/assets/components/LogViewer.vue
+++ b/assets/components/LogViewer.vue
@@ -8,13 +8,20 @@
       :class="item.selected ? 'selected' : ''"
     >
       <div class="line-options" v-if="isSearching()">
-        <o-tooltip label="Jump to context" position="right" delay="500">
-          <button class="jump" @click="jumpToLine">
-            <span class="icon">
-              <mdi-dots-vertical />
-            </span>
-          </button>
-        </o-tooltip>
+        <dropdown-menu class="is-top is-small">
+          <a class="dropdown-item" @click="jumpToLine">
+            <div class="level is-justify-content-start">
+              <div class="level-left">
+                <div class="level-item">
+                  <cil-find-in-page class="mr-4" />
+                </div>
+              </div>
+              <div class="level-right">
+                <div class="level-item">Jump to Context</div>
+              </div>
+            </div>
+          </a>
+        </dropdown-menu>
       </div>
       <div class="line">
         <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>