From 8ef53d59825c4c19128618801bb9a6fe95378c3a Mon Sep 17 00:00:00 2001
From: Phillip Kruger <phillip.kruger@gmail.com>
Date: Thu, 2 May 2024 14:13:45 +1000
Subject: [PATCH] Dev UI: Small cosmetic update to Web depenendency locator
 screen

Signed-off-by: Phillip Kruger <phillip.kruger@gmail.com>
---
 .../qwc-web-dependency-locator-libraries.js   | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/extensions/web-dependency-locator/deployment/src/main/resources/dev-ui/qwc-web-dependency-locator-libraries.js b/extensions/web-dependency-locator/deployment/src/main/resources/dev-ui/qwc-web-dependency-locator-libraries.js
index c74d9fc1261f9..4a60b957acf0c 100644
--- a/extensions/web-dependency-locator/deployment/src/main/resources/dev-ui/qwc-web-dependency-locator-libraries.js
+++ b/extensions/web-dependency-locator/deployment/src/main/resources/dev-ui/qwc-web-dependency-locator-libraries.js
@@ -1,6 +1,5 @@
 import {LitElement, html, css} from 'lit';
 import {webDependencyLibraries} from 'build-time-data';
-import '@vaadin/tabsheet';
 import '@vaadin/tabs';
 import '@vaadin/grid';
 import '@vaadin/icon';
@@ -13,37 +12,48 @@ import {columnBodyRenderer} from '@vaadin/grid/lit.js';
 export class QwcWebDependencyLocatorLibraries extends LitElement {
 
     static styles = css`
+        :host {
+            display: flex;
+            height: 100%;
+            padding: 10px;
+            gap: 20px;
+        }
         .full-height {
             height: 100%;
         }
+        .tabcontent {
+            height: 100%;
+            width: 100%;
+        }
     `;
 
     static properties = {
         _webDependencyLibraries: {},
+        _selectedWebDependency: {state: true}
     };
 
     constructor() {
         super();
         this._webDependencyLibraries = webDependencyLibraries;
+        this._selectedWebDependency = this._webDependencyLibraries[0];
     }
 
     render() {
         return html`
-            <vaadin-tabsheet class="full-height">
-                <vaadin-tabs slot="tabs">
+                <vaadin-tabs @selected-changed="${this._tabSelectedChanged}" orientation="vertical">
                     ${this._webDependencyLibraries.map(webDependency => html`
                         <vaadin-tab id="${webDependency.webDependencyName}">
                             ${webDependency.webDependencyName + " (" + webDependency.version + ")"}
                         </vaadin-tab>`)}
                 </vaadin-tabs>
-
-                ${this._webDependencyLibraries.map(webDependency => this._renderLibraryAssets(webDependency))}
-
-
-            </vaadin-tabsheet>
+                ${this._renderLibraryAssets(this._selectedWebDependency)}
         `;
     }
 
+    _tabSelectedChanged(e){
+        this._selectedWebDependency = this._webDependencyLibraries[e.detail.value];
+    }
+
     _renderLibraryAssets(library) {
         const dataProvider = function (params, callback) {
             if (params.parentItem === undefined) {
@@ -54,7 +64,7 @@ export class QwcWebDependencyLocatorLibraries extends LitElement {
         };
 
         return html`
-            <div tab="${library.webDependencyName}" class="full-height">
+            <div tab="${library.webDependencyName}" class="tabcontent">
                 <vaadin-grid .itemHasChildrenPath="${'children'}" .dataProvider="${dataProvider}"
                              theme="compact no-border" class="full-height">
                     <vaadin-grid-tree-column path="name"></vaadin-grid-tree-column>