[skywalking-booster-ui] branch main updated: fix: calculate string width to set Tabs name width (#286)

[wusheng]

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 1ba56ca0 fix: calculate string width to set Tabs name width (#286)
1ba56ca0 is described below

commit 1ba56ca0cdf85820893d8e74078f1293af16c1c6
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Tue Jun 20 18:04:41 2023 +0800

    fix: calculate string width to set Tabs name width (#286)
---
 src/views/dashboard/controls/Tab.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/views/dashboard/controls/Tab.vue 
b/src/views/dashboard/controls/Tab.vue
index 6f7f807d..94148e07 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -28,6 +28,7 @@ limitations under the License. -->
           class="tab-name"
           :readonly="isNaN(editTabIndex) && !canEditTabName"
           :class="{ view: !canEditTabName }"
+          :style="{ width: getStringWidth(child.name) + 'px' }"
         />
         <Icon
           v-show="activeTabIndex === idx"
@@ -202,6 +203,16 @@ limitations under the License. -->
         const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === 
props.data.i);
         
dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
       }
+      function getStringWidth(s: string) {
+        const dom = document.createElement("span");
+        dom.style.display = "inline-block";
+        dom.textContent = s;
+        document.body.appendChild(dom);
+        const width = dom.clientWidth;
+
+        document.body.removeChild(dom);
+        return width + 10;
+      }
       function copyLink() {
         let path = "";
         if (route.params.activeTabIndex === undefined) {
@@ -254,6 +265,7 @@ limitations under the License. -->
         removeTab,
         clickTabs,
         copyLink,
+        getStringWidth,
         ...toRefs(props),
         activeTabWidget,
         dashboardStore,
@@ -275,6 +287,7 @@ limitations under the License. -->
     overflow-x: auto;
     white-space: nowrap;
     overflow-y: hidden;
+    padding: 0 10px;
 
     span {
       display: inline-block;
@@ -285,16 +298,15 @@ limitations under the License. -->
     }
 
     .tab-name {
-      max-width: 130px;
+      max-width: 150px;
       height: 20px;
       line-height: 20px;
       outline: none;
       color: #333;
       font-style: normal;
-      margin-right: 5px;
       overflow: hidden;
       text-overflow: ellipsis;
-      text-align: center;
+      margin-right: 20px;
     }
 
     .tab-icons {