From 69e28e3723ca5014fea4d6761349830a28bc9621 Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Mon, 24 Jan 2022 00:50:09 -0500
Subject: [PATCH] Move jump to context button to the left, make it visible only
 on hover, and change icon

Other Changes:
- Update the colors of jump to context button for dark and light themes
- Add a tooltip that appears after hovering jump to context button for half a second
- Vertically align lines to accomodate the jump to context button making the line slightly bigger when visible
---
 assets/components.d.ts          | 10 ++++++++-
 assets/components/LogViewer.vue | 40 ++++++++++++++++++++++++---------
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index b2f5542f3be..94e4ca0931d 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -6,7 +6,6 @@ declare module "vue" {
   export interface GlobalComponents {
     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"];
     FuzzySearchModal: typeof import("./components/FuzzySearchModal.vue")["default"];
@@ -16,7 +15,16 @@ declare module "vue" {
     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"];
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
index d6c344bb3ad..d4751c2781a 100644
--- a/assets/components/LogViewer.vue
+++ b/assets/components/LogViewer.vue
@@ -7,17 +7,19 @@
       :data-key="item.key"
       :class="item.selected ? 'selected' : ''"
     >
-      <div>
+      <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>
+      </div>
+      <div class="line">
         <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
         <span class="text" v-html="colorize(item.message)"></span>
       </div>
-      <div class="line-options" v-if="isSearching()">
-        <o-button variant="primary" inverted size="small" type="button" class="jump" @click="jumpToLine">
-          <span class="icon">
-            <cil-find-in-page />
-          </span>
-        </o-button>
-      </div>
     </li>
   </ul>
 </template>
@@ -84,18 +86,34 @@ const jumpToLine = async (e) => {
       color: hsl(141, 53%, 53%);
     }
     &.selected {
-      background-color: white;
+      background-color: var(--menu-item-active-background-color);
       color: black;
+
+      & .jump {
+        color: var(--menu-item-hover-color) !important;
+      }
     }
     &.selected > .date {
       background-color: white;
     }
+    & > .line {
+      margin: auto 0;
+    }
     & > .line-options {
-      flex: 1;
       display: flex;
       flex-direction: row-reverse;
-      & > .jump {
+      margin-right: 1em;
+      & .jump {
+        padding: 0;
+        background-color: rgba(0, 0, 0, 0);
+        color: var(--menu-item-hover-background-color);
+        border: none;
         cursor: pointer;
+        opacity: 0;
+
+        &:hover {
+          opacity: 1;
+        }
       }
     }
   }