1.0.207

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.203",
+  "version": "1.0.207",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.203',
+  version: '1.0.207',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-contextmenu.ts

@@ -71,11 +71,11 @@ export class DeesContextmenu extends DeesElement {
         color: ${cssManager.bdTheme('#222', '#ccc')};
         font-size: 14px;
         width: 200px;
-        border: 1px solid #444;
+        border: 1px solid ${cssManager.bdTheme('#fff', '#444')};
         min-height: 34px;
         border-radius: 3px;
-        background: #222;
-        box-shadow: 0px 1px 4px #000;
+        background: ${cssManager.bdTheme('#fff', '#222')};
+        box-shadow: 0px 1px 4px ${cssManager.bdTheme('#00000020', '#000000')};
         user-select: none;
       }
 
@@ -92,7 +92,7 @@ export class DeesContextmenu extends DeesElement {
 
       .mainbox .menuitem:hover {
         cursor: pointer;
-        background: #ffffff10;
+        background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
       }
 
       .mainbox .menuitem:active {

ts_web/elements/dees-input-text.ts

@@ -124,7 +124,7 @@ export class DeesInputText extends DeesElement {
 
         .showPassword:hover {
           cursor: pointer;
-          background: #333;
+          background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
         }
       </style>
       <div class="maincontainer">

ts_web/elements/dees-table.ts

@@ -199,7 +199,7 @@ export class DeesTable<T> extends DeesElement {
         cursor: pointer;
       }
       tr:hover td {
-        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
+        background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
       }
       tr:first-child:hover {
         cursor: auto;
@@ -208,8 +208,13 @@ export class DeesTable<T> extends DeesElement {
         background: none;
       }
       tr.selected td {
-        background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
+        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
       }
+
+      tr.hasAttachment td {
+        background: ${cssManager.bdTheme('#0098847c', '#0098847c')};
+      }
+
       th {
         text-transform: uppercase;
       }
@@ -249,7 +254,7 @@ export class DeesTable<T> extends DeesElement {
         right: 0px;
         left: 0px;
         position: absolute;
-        background: #00000060;
+        background: #fa610140;
         color: inherit;
         font-family: inherit;
         font-size: inherit;
@@ -258,9 +263,10 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .action {
-        margin: -8px 0px;
-        padding: 8px;
-        line-height: 16px;
+        margin: -6px 0px;
+        padding: 10px;
+        line-height: 36px;
+        height: 36px;
         display: inline-block;
       }
 
@@ -270,7 +276,7 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme('#CCC', '#111')};
+        background: ${cssManager.bdTheme('#CCC', '#00000030')};
       }
 
       .footer {
@@ -391,14 +397,14 @@ export class DeesTable<T> extends DeesElement {
                           console.log('dragenter');
                           console.log(realTarget);
                           setTimeout(() => {
-                            realTarget.style.background = 'green';
+                            realTarget.classList.add('hasAttachment');
                           }, 0);
                         }}
                         @dragleave=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
                           eventArg.stopPropagation();
                           const realTarget = getTr(eventArg.target as HTMLElement);
-                          realTarget.style.background = 'none';
+                          realTarget.classList.remove('hasAttachment');
                         }}
                         @dragover=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
@@ -520,6 +526,45 @@ export class DeesTable<T> extends DeesElement {
 
   public async firstUpdated() {}
 
+  public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+    super.updated(changedProperties);
+    this.freezeColumnWidths();
+  }
+
+  freezeColumnWidths() {
+    // Get the table element
+    const table = this.shadowRoot.querySelector('table');
+    if (!table) return;
+  
+    // Create a colgroup if it doesn't exist
+    let colgroup = table.querySelector('colgroup');
+    if (!colgroup) {
+      colgroup = document.createElement('colgroup');
+      table.insertBefore(colgroup, table.firstChild);
+    }
+  
+    // Get the first row's cells to measure the widths
+    const cells = table.rows[0].cells;
+  
+    for (let i = 0; i < cells.length; i++) {
+      const cell = cells[i];
+  
+      // Get computed width
+      const width = window.getComputedStyle(cell).width;
+  
+      // Check if there's already a <col> for this cell
+      let col = colgroup.children[i] as HTMLElement;
+      if (!col) {
+        col = document.createElement('col');
+        colgroup.appendChild(col);
+      }
+  
+      // Set the width
+      col.style.width = width;
+    }
+  }
+  
+
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
     for (const action of this.dataActions) {