update visibility

Tray.js

@@ -18,7 +18,7 @@ class Tray {
     '#F8C471', // Light Orange
     '#85C1E9'  // Sky Blue
   ]
-  constructor(parent_id, id, name, labels = []) {
+  constructor(parent_id, id, name,color = null, labels = []) {
     this.id = id;
     this.name = name;
     this.labels = labels;
@@ -28,7 +28,12 @@ class Tray {
     this.element = this.createElement();
     this.updateAppearance()
     this.isFolded = false; // New property to track folded state
+    if (color==null){
     this.borderColor = Tray.colorPalette[0]; // Default to the first color
+    }
+    else{
+      this.borderColor = color
+    }
     this.updateBorderColor();
     // if (id!="0"){
     //   this.parent = getTrayFromId(parent_id)
@@ -373,15 +378,19 @@ class Tray {
   }
 
   onDoubleClick(event) {
-    if (event.target === this.element.querySelector('.tray-content') && !this.isSplit) {
-      const newTray = new Tray(this.id, Date.now().toString(), 'New Tray');
-      this.addChild(newTray);
-      event.target.appendChild(newTray.element);
-    }
-    if (event.target === this.element.querySelector('.tray-title-container')) {
+    if (this.isSplit) return; // Don't add new trays if the current tray is split
+
+    const content = this.element.querySelector('.tray-content');
+
+    if (event.target === content || event.target === this.element.querySelector('.tray-title-container')) {
       const newTray = new Tray(this.id, Date.now().toString(), 'New Tray');
       this.addChild(newTray);
-      this.element.appendChild(newTray.element);
+      content.appendChild(newTray.element);
+
+      // Optional: Focus on the new tray and start editing its title
+      newTray.element.focus();
+      const newTitleElement = newTray.element.querySelector('.tray-title');
+      newTray.startTitleEdit(newTitleElement);
     }
   }
 

styles.css

@@ -29,12 +29,14 @@
   text-overflow: ellipsis;
   cursor: text;
   position: absolute;
-  bottom: 10px;
+  /* bottom: 10px; */
   top: 10px;
-  left: 10px;
-  background-color: rgba(255, 255, 255, 0.7);
-  /* padding: 5px; */
+  /* left: 10px; */
+  /* Remove or comment out the next line */
+  /* background-color: rgba(255, 255, 255, 0.7); */
   border-radius: 3px;
+  /* Add a color that contrasts with the tray background */
+  color: #333;
 }
 
 .tray-title:focus {
@@ -48,18 +50,21 @@
 }
 
 .tray-title:hover {
-  background-color: rgba(255, 255, 255, 0.9);
+  /* Remove or comment out the next line */
+  /* background-color: rgba(255, 255, 255, 0.9); */
+  /* Optionally, add an underline or other visual indication on hover */
+  text-decoration: underline;
 }
 
 .tray-content {
   /* min-height: 100px; */
-  padding: 10px 20px 15px;
+  padding: 10px 5px 15px;
   background-color: #f5f5f5;
 }
 
 .tray .tray {
-  margin: 10px 0;
-  border: 1px solid #999;
+  margin: 0px 0;
+  /* border: 1px solid #999; */
   width: calc(100% - 10px);
 }
 

utils.js

@@ -63,7 +63,8 @@ function serializeDOM(tray) {
     labels: tray.labels,
     isSplit: tray.isSplit,
     children: tray.children.map(serializeDOM),
-    parent_id: tray.parent_id
+    parent_id: tray.parent_id,
+    borderColor:tray.borderColor
   };
 }
 
@@ -92,7 +93,7 @@ function loadFromLocalStorage() {
 }
 
 function deserializeDOM(data) {
-  const tray = new Tray(data.parent_id,data.id, data.name, data.labels);
+  const tray = new Tray(data.parent_id,data.id, data.name,data.borderColor, data.labels);
   tray.isSplit = data.isSplit;
   if (tray.isSplit) {
     tray.element.classList.add('split');