Merge pull request #442 from KxSystems/ee-shoelace

Port datasource to new component library
KxSystems · Oct 16, 2024 · 62bf740 · 62bf740
2 parents 2a3beb9 + 6a1f20a
commit 62bf740
Show file tree

Hide file tree

Showing 8 changed files with 1,292 additions and 624 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -964,6 +964,7 @@
     "bracketSameLine": true
   },
   "devDependencies": {
+    "@shoelace-style/shoelace": "^2.17.1",
     "@types/extract-zip": "^2.0.1",
     "@types/fs-extra": "^11.0.4",
     "@types/glob": "^8.1.0",

diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts
@@ -12,6 +12,7 @@
  */
 
 import {
+  ColorThemeKind,
   CustomTextEditorProvider,
   Disposable,
   ExtensionContext,
@@ -223,23 +224,27 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider {
   }
 
   private getWebviewContent(webview: Webview) {
-    const webviewUri = getUri(webview, this.context.extensionUri, [
-      "out",
-      "webview.js",
-    ]);
-    const nonce = getNonce();
+    const getResource = (resource: string) =>
+      getUri(webview, this.context.extensionUri, ["out", resource]);
 
     return /* html */ `
       <!DOCTYPE html>
-      <html lang="en">
+      <html lang="en" class="${
+        window.activeColorTheme.kind === ColorThemeKind.Light ||
+        window.activeColorTheme.kind === ColorThemeKind.HighContrastLight
+          ? "sl-theme-light"
+          : "sl-theme-dark"
+      }">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="${getResource("light.css")}" />
+        <link rel="stylesheet" href="${getResource("style.css")}" />
+        <script type="module" nonce="${getNonce()}" src="${getResource("webview.js")}"></script>
         <title>DataSource</title>
       </head>
       <body>
         <kdb-data-source-view></kdb-data-source-view>
-        <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
       </body>
       </html>
     `;