(skywalking-booster-ui) branch main updated: fix: change log widget and loading mask style (#340)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new 02c57248 fix: change log widget and loading mask style (#340)
02c57248 is described below

commit 02c572485967a8ee41cb63d649d5141e9ca5e721
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Fri Nov 17 13:16:48 2023 +0800

    fix: change log widget and loading mask style (#340)
---
 src/styles/theme.scss                                   | 4 ++++
 src/views/dashboard/related/log/LogTable/LogDetail.vue  | 6 ++----
 src/views/dashboard/related/log/LogTable/LogService.vue | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 56e8fe13..e41085c3 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -157,6 +157,10 @@ $active-background: var(--el-color-primary);
 $font-size-smaller: 12px;
 $font-size-normal: 14px;
 
+.el-loading-mask {
+  background-color: var(--theme-background);
+}
+
 .el-menu {
   --el-menu-item-height: 50px;
 }
diff --git a/src/views/dashboard/related/log/LogTable/LogDetail.vue b/src/views/dashboard/related/log/LogTable/LogDetail.vue
index 3cb92193..cf6def6f 100644
--- a/src/views/dashboard/related/log/LogTable/LogDetail.vue
+++ b/src/views/dashboard/related/log/LogTable/LogDetail.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
         {{ dateFormat(currentLog[item.label]) }}
       </span>
       <textarea
-        class="content mb-10"
+        class="content mb-10 g-sm-8"
         :readonly="true"
         v-else-if="item.label === 'content'"
         :value="contentFormat(item.label)"
@@ -66,13 +66,11 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .content {
-    max-width: 700px;
-    min-width: 500px;
     min-height: 500px;
     border: none;
     outline: none;
     color: $font-color;
     overflow: auto;
-    padding: 5px;
+    background-color: var(--el-dialog-bg-color);
   }
 </style>
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue b/src/views/dashboard/related/log/LogTable/LogService.vue
index 61cb4ffb..cfcfab1f 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -25,9 +25,9 @@ limitations under the License. -->
         {{ dateFormat(data.timestamp) }}
       </span>
       <span v-else-if="item.label === 'tags'" :class="level.toLowerCase()"> > </span>
-      <el-tooltip v-else-if="item.label === 'traceId'" content="Trace Link">
+      <el-tooltip v-else-if="item.label === 'traceId' && !noLink" content="Trace Link">
         <span :class="noLink ? '' : 'blue'">
-          <Icon v-if="!noLink" iconName="merge" />
+          <Icon v-if="data[item.label]" iconName="merge" />
         </span>
       </el-tooltip>
       <span v-else>{{ data[item.label] }}</span>