From 09ed637ee54dccea1a0288ffe2004f986b455dc9 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 7 Aug 2023 22:23:47 +0200
Subject: [PATCH] Add header to pipeline log and always show buttons (#2140)

Fixes:
https://github.com/woodpecker-ci/woodpecker/issues/1314#issuecomment-1649213999
(4.)


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/8544c683-b856-4938-bb8c-7cd9db0c2de9)

![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/53f7ec27-a0fd-4803-8bb4-e89e9ced3601)

That both buttons are shown in the screenshot is only for demonstration.
---
 web/src/assets/locales/en.json                |  1 +
 .../components/repo/pipeline/PipelineLog.vue  | 39 +++++++++++--------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index bbb791cd9..1c3df7631 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -241,6 +241,7 @@
       "exit_code": "Exit Code {exitCode}",
       "loading": "Loading…",
       "pipeline": "Pipeline #{pipelineId}",
+      "log_title": "Step Logs",
       "log_download_error": "There was an error while downloading the log file",
       "actions": {
         "cancel": "Cancel",
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 55d36fb90..23ae5c043 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -13,22 +13,27 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div v-show="showActions" class="absolute top-0 right-0 z-40 mt-4 mr-6 hidden md:flex">
-        <Button
-          v-if="step?.end_time !== undefined"
-          :is-loading="downloadInProgress"
-          :title="$t('repo.pipeline.actions.log_download')"
-          start-icon="download"
-          @click="download"
-        />
-        <Button
-          v-if="step?.end_time === undefined"
-          :title="
-            autoScroll ? $t('repo.pipeline.actions.log_auto_scroll_off') : $t('repo.pipeline.actions.log_auto_scroll')
-          "
-          :start-icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'"
-          @click="autoScroll = !autoScroll"
-        />
+      <div class="flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+        <span class="text-base font-bold text-wp-code-text-alt-100">{{ $t('repo.pipeline.log_title') }}</span>
+        <div class="flex flex-row items-center ml-auto gap-x-2">
+          <IconButton
+            v-if="step?.end_time !== undefined"
+            :is-loading="downloadInProgress"
+            :title="$t('repo.pipeline.actions.log_download')"
+            class="!hover:bg-white !hover:bg-opacity-10"
+            icon="download"
+            @click="download"
+          />
+          <IconButton
+            v-if="step?.end_time === undefined"
+            :title="
+              autoScroll ? $t('repo.pipeline.actions.log_auto_scroll_off') : $t('repo.pipeline.actions.log_auto_scroll')
+            "
+            class="!hover:bg-white !hover:bg-opacity-10"
+            :icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'"
+            @click="autoScroll = !autoScroll"
+          />
+        </div>
       </div>
 
       <div
@@ -100,8 +105,8 @@ import { computed, inject, nextTick, onMounted, Ref, ref, toRef, watch } from 'v
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import IconButton from '~/components/atomic/IconButton.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';