From dff45f78e29a9791525eafbd104e1fe725ed4356 Mon Sep 17 00:00:00 2001
From: zhangzhicheng007 <zhangzhicheng@kaihong.com>
Date: Fri, 3 Mar 2023 11:35:19 +0800
Subject: [PATCH] fix: improve service-gen ux

Signed-off-by: zhangzhicheng007 <zhangzhicheng@kaihong.com>
---
 hdc/service/service-gen/src/tools/common.js   |   3 +-
 .../service_vs_plugin/src/extension.js        |   6 +
 .../src/images/file_black.png                 | Bin 0 -> 5084 bytes
 .../service_vs_plugin/src/vs_plugin_view.html | 144 +++++++++---------
 4 files changed, 83 insertions(+), 70 deletions(-)
 create mode 100644 hdc/service/service_vs_plugin/src/images/file_black.png

diff --git a/hdc/service/service-gen/src/tools/common.js b/hdc/service/service-gen/src/tools/common.js
index e176ca5d..d241e6b2 100755
--- a/hdc/service/service-gen/src/tools/common.js
+++ b/hdc/service/service-gen/src/tools/common.js
@@ -36,7 +36,8 @@ const DATA_R_MAP = new Map(
 const TYPE_DEF_MAP = new Map(
     [["ErrCode", "int32_t"], ["char", "int8_t"], ["short", "int16_t"], ["int", "int32_t"], ["long", "int64_t"],
     ["unsigned char", "uint8_t"], ["unsigned short", "uint16_t"], ["unsigned int", "uint32_t"], 
-    ["unsigned long", "uint64_t"]
+    ["unsigned long", "uint64_t"], ["double_t", "double"], ["float_t", "float"], ["size_t", "double"],
+    ["long long", "double"], ["long double", "double"]
 ]);
 
 // remote消息中vector变量类型名(key)与对应的写parcel方法名(value)的映射（参考parcel.h）
diff --git a/hdc/service/service_vs_plugin/src/extension.js b/hdc/service/service_vs_plugin/src/extension.js
index b2e77b2b..5a3b2b6f 100755
--- a/hdc/service/service_vs_plugin/src/extension.js
+++ b/hdc/service/service_vs_plugin/src/extension.js
@@ -45,6 +45,12 @@ function activate(context) {
 	} else if (platform == 'Linux') {
 		exeFilePath = __dirname + "/service-gen-linux";
 	}
+	vscode.window.onDidChangeActiveColorTheme(colorTheme => {
+		var result = {
+			msg: "colorThemeChanged"
+		}
+		globalPanel.webview.postMessage(result);
+	});
 }
 
 function executorService(name, genDir, serviceId) {
diff --git a/hdc/service/service_vs_plugin/src/images/file_black.png b/hdc/service/service_vs_plugin/src/images/file_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd54e8a66190cee967d71270a1375952c59c4ccb
GIT binary patch
literal 5084
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

literal 0
HcmV?d00001

diff --git a/hdc/service/service_vs_plugin/src/vs_plugin_view.html b/hdc/service/service_vs_plugin/src/vs_plugin_view.html
index af14b662..1d82681c 100755
--- a/hdc/service/service_vs_plugin/src/vs_plugin_view.html
+++ b/hdc/service/service_vs_plugin/src/vs_plugin_view.html
@@ -2,51 +2,49 @@
 <html lang="en" style="width: 100%; height: 100%;">
 <head>
     <meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Napi</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Napi</title>
 </head>
 <style type="text/css">
-        body {
-			background-color: #000000;
-			margin:0 auto;
-			font-family: Consolas, sans-serif;
-		}
-        a  {
-			text-decoration: none;
-		}
+    body {
+        background-color: var(--vscode-editor-background, #000000);
+        margin:0 auto;
+        font-family: "Microsoft YaHei";
+        opacity: 0.9;
+    }
+    a  {
+        text-decoration: none;
+    }
 
-		button.button {
-			background-color: #ffffff;
-            font-family: Consolas, sans-serif;
-            font-size: 16px;
-            border-radius: 3px;
-            border-color: #C4C4C4;
-            align-self: center;
-            border: 1px solid #C4C4C4;
-            outline: none;
-			width: 100px; 
-			height:24px
-		}
+    button.button {
+        background-color: #ffffff;
+        font-family: Consolas, sans-serif;
+        font-size: 16px;
+        border-radius: 3px;
+        border-color: #C4C4C4;
+        align-self: center;
+        border: 1px solid #C4C4C4;
+        outline: none;
+        width: 100px; 
+        height:24px
+    }
 
-		button.button:hover {
-			background: #4B97D9;
-			color: #fff;
-			border: 0px;
-			font-family: Consolas, sans-serif;
-            font-size: 16px;
-			width: 100px; 
-			height: 24px
-		}
+    input.text {
+        width: 250px; 
+        vertical-align:middle;
 
-		input.text:focus {
-			outline: 2px solid #4B97D9;
-  			border: 0px;
-        }
+        background-color: var(--vscode-editor-background, #000000);
+        color: var(--vscode-editor-foreground, #ffffff);
+        border-radius: 6px;
+        border: 1px solid #555555;
+        opacity: 0.9;
+        height: 24px;
+    }
+    input.text:hover {
+        outline: none;
+        border-color: var(--vscode-focusBorder, #272727);
+    }
 
-		input.text {
-			outline: 2px solid #C4C4C4;
-			border: 0px;
-		}
     .tabs{
         position: relative;
         height: 800px;
@@ -71,23 +69,7 @@
         color: #333333;
         background: white;
     }
-    input.text {
-		width: 250px;
-        height: 18px; 
-        vertical-align:middle;
-		}
-    .content{
-        position: absolute;
-        top: 61px;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: black;
-        padding: 20px 20px;
-        border: 0px solid #ccc;
-        max-height: 800px;
-        overflow: scroll;
-    }
+
     [type=radio]:checked ~ label{
         color: white;
         background: #3288e9;
@@ -103,17 +85,17 @@
     let vscode = acquireVsCodeApi();
 
     function sendParamMsg() {
-		var fileNames = document.getElementById("hFilePath").value;
-		var genDir = document.getElementById("genHResultDir").value;
+        var fileNames = document.getElementById("hFilePath").value;
+        var genDir = document.getElementById("genHResultDir").value;
         var serviceId = document.getElementById("serviceID").value;
-		var result = {
-			msg: "param",
-			fileNames: fileNames,
-			genDir: genDir,
+        var result = {
+            msg: "param",
+            fileNames: fileNames,
+            genDir: genDir,
             serviceId: serviceId,
-		}
-		vscode.postMessage(result);
-	}
+        }
+        vscode.postMessage(result);
+    }
     function selectHFilePath() {
         var fileNames = document.getElementById("hFilePath").value;
         var result = {
@@ -148,6 +130,8 @@
             fillInputDir(path);
         } else if(message == "selectHResultDir") {
             document.getElementById("genHResultDir").value = path;
+        } else if (message == "colorThemeChanged") {
+            reloadFileImgPic();
         }
         else {
             console.log("param is error");
@@ -194,7 +178,27 @@
             document.getElementById("error").innerHTML="";
         }
     }
+    function isDarkColor(colorArr) {
+        let grayLevel = colorArr[0] * 0.299 + colorArr[1] * 0.587 + colorArr[2] * 0.114;
+        return grayLevel < 192;
+    }
+
+    function reloadFileImgPic() {
+        var bodyobj = document.getElementsByTagName("body")[0];
+        var bgStyle = document.defaultView.getComputedStyle(bodyobj, null);  
+        var bgColor = bgStyle.getPropertyValue("background-color").match(/\d{1,3}/g); 
+        var isDarkBackground = true;
+        if (bgColor) { 
+            isDarkBackground = isDarkColor(bgColor);
+        }
 
+        var fileImgPng = isDarkBackground ? "file.png" : "file_black.png"
+        var currentFileImgPath = document.getElementById("hFilePathImg").src;
+        var fileImgPath = currentFileImgPath.substr(0, currentFileImgPath.lastIndexOf("/") + 1);
+        fileImgPath += fileImgPng;
+        document.getElementById("hFilePathImg").src = fileImgPath;
+        document.getElementById("genHResultDirImg").src = fileImgPath;
+    }
 </script>
 
 <body>
@@ -208,7 +212,7 @@
                         <td width="110px">.h文件选择*:</td>
                         <td width="340px">
                             <input class="text" type="text" id="hFilePath" onchange="inputChange()" onporpertychange="inputChange() ">
-                            <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;"
+                            <img id="hFilePathImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;"
                                 onclick="selectHFilePath()">
                         </td>
                     </tr>
@@ -217,7 +221,7 @@
                         <td>输出路径选择:</td>
                         <td>
                             <input class="text" accept="text" id="genHResultDir">
-                            <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;"
+                            <img id="genHResultDirImg" src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;"
                                 onclick="selectPath('selectHResultDir')">
                         </td>
                     </tr>
@@ -257,5 +261,7 @@
         </div>
     </div>
 </body>
-
-</html>
\ No newline at end of file
+</html>
+<script>
+    reloadFileImgPic();
+</script>
\ No newline at end of file
-- 
Gitee