fixed appearance of remote file widget

ccp/js/inputwidgetcontroller.js

@@ -509,20 +509,8 @@ window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController)
 
 class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
   
-  #iss = null;
-  #addresses = {
-    "https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
-    "https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
-    "https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
-  };
-  
   constructor(){
     super()
-    this.#iss = document.querySelector("d4s-boot-2").loginToken.iss
-  }
-  
-  get baseurl(){
-    return this.#addresses[this.#iss]
   }
   
   connectedCallback(){
@@ -532,22 +520,41 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
         this.value[index] = ev.target.value 
       }
     })
+  }
+
+  addToolContent(){
+    const iss = document.querySelector("d4s-boot-2").loginToken.iss;
+    const addresses = {
+      "https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
+      "https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
+      "https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
+    };
     this.rootdoc.querySelector("div[name=tools]").innerHTML += `
       <svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
           <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/>
       </svg>
-      <d4s-storage-tree 
-        class="d-none position-absolute shadow border border-primary bg-light"
-        style="left: 100%; margin: 0 0 0 -.5rem;min-width:350px; max-width:500px;z-index:1000; line-height:1.5rem;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem; padding:5px;"
-        base-url="${this.baseurl}"
-        file-download-enabled="true" 
-        show-files="true"
-        allow-drag="true"/>
+      <div name="ws" class="d-none position-absolute shadow border border-primary bg-light p-2" style="left: 100%;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;">
+        <div class="d-flex justify-content-between" style="border-bottom: solid 1px gray;">
+          <h5 class="text-secondary">Access your workspace</h5>
+          <span class="btn text-danger p-0" style="font-weight:bold" name="closebtn">x</span>
+        </div>
+        <div style="min-width:350px; max-width:500px;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
+          <d4s-storage-tree 
+            base-url="${addresses[iss]}"
+            file-download-enabled="true" 
+            show-files="true"
+            allow-drag="true"/>
+        </div>
+      </div>
     `
-    const ws = this.rootdoc.querySelector("d4s-storage-tree")
+    const ws = this.rootdoc.querySelector("div[name=ws]")
     this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev=>{
       ws.classList.toggle("d-none")
     })
+
+    this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev=>{
+      ws.classList.add("d-none")
+    })
     
     this.addEventListener("dragover", ev=>{
       ev.preventDefault()
@@ -568,6 +575,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
   }
     
   content(){
+    this.addToolContent()
     if(this.value.length <= 1){
       return `
        <input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`