@aaqu/fromcubes-portal-react 0.1.0-alpha.14 → 0.1.0-alpha.16

package/nodes/portal-react.html

@@ -567,26 +567,6 @@
     <label for="node-input-compName"><i class="fa fa-cube"></i> JSX Tag</label>
     <input type="text" id="node-input-compName" placeholder="MyComponent" />
   </div>
-  <div class="form-row" style="display:flex;gap:8px;">
-    <div style="flex:1">
-      <label><i class="fa fa-sign-in"></i> Input fields</label>
-      <input
-        type="text"
-        id="node-input-compInputs"
-        placeholder="payload,topic"
-        style="width:100%"
-      />
-    </div>
-    <div style="flex:1">
-      <label><i class="fa fa-sign-out"></i> Output fields</label>
-      <input
-        type="text"
-        id="node-input-compOutputs"
-        placeholder="payload,topic"
-        style="width:100%"
-      />
-    </div>
-  </div>
   <div class="form-row" style="margin-bottom:4px;">
     <label><i class="fa fa-code"></i> JSX Code</label>
   </div>
@@ -629,8 +609,6 @@
         name: { value: "" },
         compName: { value: "StatusCard", required: true },
         compCode: { value: COMP_STARTER },
-        compInputs: { value: "label,value,unit" },
-        compOutputs: { value: "" },
       },
       inputs: 0,
       outputs: 0,
@@ -1176,12 +1154,6 @@
                     return '<code style="background:rgba(128,128,128,.15);padding:0 4px;border-radius:2px;margin-right:3px;">' + p + '</code>';
                   }).join("") + '</div>');
               }
-              var io = [];
-              if ((c.inputs || []).length) io.push("in: " + c.inputs.join(", "));
-              if ((c.outputs || []).length) io.push("out: " + c.outputs.join(", "));
-              if (io.length) {
-                detailParts.push('<div style="font-size:10px;opacity:.4;margin-top:2px;">' + io.join(" &bull; ") + '</div>');
-              }
               var hasDetail = detailParts.length > 0;
 
               html +=
@@ -1479,12 +1451,12 @@ const { data, send, user, portalClient } = useNodeRed();
   var fileList = $('<div style="padding:0;"></div>').appendTo(content);
 
   // ── Toolbar ──
-  var toolbar = $('<div style="display:flex;align-items:center;gap:4px;"></div>');
+  var toolbar = $('<div style="display:flex;align-items:center;gap:6px;margin:0 6px;padding:2px 0 0;"></div>');
   var fileInput = $('<input type="file" multiple style="display:none;">').appendTo(toolbar);
-  $('<a class="red-ui-sidebar-header-button" href="#"><i class="fa fa-upload"></i> Upload</a>')
+  $('<button class="red-ui-button red-ui-button-small" style="flex-shrink:0;"><i class="fa fa-upload"></i> Upload</button>')
     .on("click", function (e) { e.preventDefault(); fileInput.trigger("click"); })
     .appendTo(toolbar);
-  $('<a class="red-ui-sidebar-header-button" href="#"><i class="fa fa-folder-open"></i> New folder</a>')
+  $('<button class="red-ui-button red-ui-button-small" style="flex-shrink:0;"><i class="fa fa-folder-open"></i> New folder</button>')
     .on("click", function (e) { e.preventDefault(); showNewFolderInput(""); })
     .appendTo(toolbar);
 
@@ -1758,14 +1730,31 @@ const { data, send, user, portalClient } = useNodeRed();
     return root;
   }
 
+  var ROOT_KEY = "__root__";
+
   function renderTree() {
     fileList.empty();
+    var isOpen = !collapsed[ROOT_KEY];
+
+    // Root folder row — always visible
+    var rootRow = $('<div style="display:flex;align-items:center;gap:5px;padding:4px 8px;border-bottom:1px solid var(--red-ui-secondary-border-color);"></div>');
+    var rootArrow = $('<i class="fa ' + (isOpen ? 'fa-caret-down' : 'fa-caret-right') + '" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:10px;text-align:center;cursor:pointer;"></i>');
+    rootArrow.on("click", function () { collapsed[ROOT_KEY] = isOpen; renderTree(); });
+    rootRow.append(rootArrow);
+    $('<i class="fa ' + (isOpen ? 'fa-folder-open' : 'fa-folder') + '" style="color:#fbbf24;font-size:12px;width:16px;text-align:center;"></i>').appendTo(rootRow);
+    $('<span style="flex:1;font-size:12px;cursor:pointer;opacity:0.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>').text(publicBase.replace(/\/$/, ""))
+      .on("click", function () { collapsed[ROOT_KEY] = isOpen; renderTree(); })
+      .appendTo(rootRow);
+    fileList.append(rootRow);
+
+    if (!isOpen) return;
+
     if (allEntries.length === 0) {
       fileList.append($('<div style="padding:16px;color:var(--red-ui-secondary-text-color);text-align:center;">No files uploaded.<br><span style="font-size:11px;">Drop files here or click Upload.</span></div>'));
       return;
     }
     var tree = buildTree(allEntries);
-    renderNode(tree, "", 0);
+    renderNode(tree, "", 1);
   }
 
   function renderNode(node, parentPath, depth) {
@@ -1800,7 +1789,7 @@ const { data, send, user, portalClient } = useNodeRed();
         });
         row.append(arrow);
         $('<i class="fa ' + (isOpen ? 'fa-folder-open' : 'fa-folder') + '" style="color:#fbbf24;font-size:12px;width:16px;text-align:center;"></i>').appendTo(row);
-        $('<span style="flex:1;font-size:12px;cursor:pointer;"></span>').text(name)
+        $('<span style="flex:1;font-size:12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + fullPath + '"></span>').text(name)
           .on("click", function () { collapsed[fullPath] = isOpen; renderTree(); })
           .appendTo(row);
 
@@ -1862,7 +1851,7 @@ const { data, send, user, portalClient } = useNodeRed();
         row.attr("draggable", "true").css("cursor", "grab");
         $('<span style="width:10px;"></span>').appendTo(row); // spacer for arrow alignment
         $('<i class="fa fa-file-o" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:16px;text-align:center;"></i>').appendTo(row);
-        $('<span style="flex:1;font-size:12px;word-break:break-all;"></span>').text(name).appendTo(row);
+        $('<span style="flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + fullPath + '"></span>').text(name).appendTo(row);
         $('<span style="font-size:10px;color:var(--red-ui-tertiary-text-color);white-space:nowrap;"></span>').text(formatSize(e.size)).appendTo(row);
 
         row.on("dragstart", function (ev) {