@matdata/yasgui 5.8.1 → 5.9.0

package/src/TabSettingsModal.ts

@@ -67,7 +67,7 @@ export default class TabSettingsModal {
     // Theme toggle button (if enabled)
     if (this.tab.yasgui.config.showThemeToggle) {
       this.themeToggleButton = document.createElement("button");
-      addClass(this.themeToggleButton, "themeToggle");
+      addClass(this.themeToggleButton, "tabContextButton", "themeToggle");
       this.themeToggleButton.setAttribute("aria-label", "Toggle between light and dark theme");
       this.themeToggleButton.title = "Toggle theme";
       this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
@@ -82,8 +82,10 @@ export default class TabSettingsModal {
     this.prefixButton = document.createElement("button");
     this.prefixButton.setAttribute("aria-label", "Insert Prefixes");
     this.prefixButton.title = "Insert saved prefixes into query";
-    this.prefixButton.textContent = "PREFIX";
-    addClass(this.prefixButton, "tabPrefixButton");
+    this.prefixButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>
+    </svg>`;
+    addClass(this.prefixButton, "tabContextButton", "prefixButton");
     controlBarEl.appendChild(this.prefixButton);
     this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
 
@@ -272,6 +274,13 @@ export default class TabSettingsModal {
           content.innerHTML = "";
           this.drawEditorSettings(content as HTMLElement);
         }
+        // Refresh endpoints list when switching to endpoints tab
+        if (tabName === "endpoints") {
+          const endpointsList = content.querySelector(".endpointsTable");
+          if (endpointsList) {
+            this.renderEndpointsList(endpointsList as HTMLElement);
+          }
+        }
       } else {
         removeClass(content as HTMLElement, "active");
       }
@@ -453,6 +462,12 @@ export default class TabSettingsModal {
   }
 
   private drawEndpointsSettings(container: HTMLElement) {
+    // Developer-configured endpoint buttons section (if any)
+    const devButtons = this.tab.yasgui.config.endpointButtons;
+    if (devButtons && devButtons.length > 0) {
+      this.drawDeveloperButtonsSettings(container);
+    }
+
     const section = document.createElement("div");
     addClass(section, "settingsSection");
 
@@ -477,6 +492,92 @@ export default class TabSettingsModal {
     container.appendChild(section);
   }
 
+  private drawDeveloperButtonsSettings(container: HTMLElement) {
+    const section = document.createElement("div");
+    addClass(section, "settingsSection");
+
+    const label = document.createElement("label");
+    label.textContent = "Developer-Configured Endpoint Buttons";
+    addClass(label, "settingsLabel");
+
+    const help = document.createElement("div");
+    help.textContent = "These endpoint buttons were configured by the developer. You can enable or disable them.";
+    addClass(help, "settingsHelp");
+
+    section.appendChild(label);
+    section.appendChild(help);
+
+    // List of dev buttons
+    const devButtonsList = document.createElement("div");
+    addClass(devButtonsList, "devButtonsTable");
+    this.renderDeveloperButtonsList(devButtonsList);
+    section.appendChild(devButtonsList);
+
+    container.appendChild(section);
+  }
+
+  private renderDeveloperButtonsList(container: HTMLElement) {
+    container.innerHTML = "";
+    const devButtons = this.tab.yasgui.config.endpointButtons || [];
+    const disabledButtons = this.tab.yasgui.persistentConfig.getDisabledDevButtons();
+
+    // Create table
+    const table = document.createElement("table");
+    addClass(table, "devButtonsTableElement");
+
+    // Header
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    const headers = ["Label", "Endpoint", "Enabled"];
+    headers.forEach((h) => {
+      const th = document.createElement("th");
+      th.textContent = h;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement("tbody");
+
+    devButtons.forEach((button) => {
+      const row = document.createElement("tr");
+
+      // Label column
+      const labelCell = document.createElement("td");
+      labelCell.textContent = button.label;
+      addClass(labelCell, "devButtonLabelCell");
+      row.appendChild(labelCell);
+
+      // Endpoint column
+      const endpointCell = document.createElement("td");
+      endpointCell.textContent = button.endpoint;
+      endpointCell.title = button.endpoint;
+      addClass(endpointCell, "endpointCell");
+      row.appendChild(endpointCell);
+
+      // Enabled checkbox
+      const enabledCell = document.createElement("td");
+      const enabledCheckbox = document.createElement("input");
+      enabledCheckbox.type = "checkbox";
+      enabledCheckbox.checked = !disabledButtons.includes(button.endpoint);
+      enabledCheckbox.setAttribute("aria-label", `Toggle ${button.label} button`);
+      enabledCheckbox.title = "Show/hide this button";
+      enabledCheckbox.onchange = () => {
+        this.tab.yasgui.persistentConfig.toggleDevButton(button.endpoint, enabledCheckbox.checked);
+        this.tab.refreshEndpointButtons();
+      };
+      enabledCell.appendChild(enabledCheckbox);
+      addClass(enabledCell, "centerCell");
+      row.appendChild(enabledCell);
+
+      tbody.appendChild(row);
+    });
+
+    table.appendChild(tbody);
+    container.appendChild(table);
+  }
+
   private renderEndpointsList(container: HTMLElement) {
     container.innerHTML = "";
     const configs = this.tab.yasgui.persistentConfig.getEndpointConfigs();
@@ -1188,6 +1289,14 @@ export default class TabSettingsModal {
     if (editorContent && editorContent.innerHTML === "") {
       this.drawEditorSettings(editorContent as HTMLElement);
     }
+    // Refresh endpoints list in case new endpoints were added while modal was closed
+    const endpointsContent = this.modalContent.querySelector("#endpoints-content");
+    if (endpointsContent) {
+      const endpointsList = endpointsContent.querySelector(".endpointsTable");
+      if (endpointsList) {
+        this.renderEndpointsList(endpointsList as HTMLElement);
+      }
+    }
     addClass(this.modalOverlay, "open");
   }
 

package/src/endpointSelect.scss

@@ -126,11 +126,9 @@
     align-items: center;
     gap: 4px;
     margin-left: 4px;
-
-    // Hide on small screens (mobile)
-    @media (max-width: 768px) {
-      display: none;
-    }
+    position: relative;
+    flex-wrap: nowrap;
+    overflow: visible;
   }
 
   .endpointButton {
@@ -144,6 +142,7 @@
     font-weight: 500;
     white-space: nowrap;
     transition: all 0.2s ease;
+    flex-shrink: 0;
 
     &:hover {
       background-color: var(--yasgui-endpoint-button-hover-bg, #286090);
@@ -164,5 +163,99 @@
       padding: 4px 8px;
       font-size: 12px;
     }
+
+    // Hidden state for overflow
+    &.endpointButtonHidden {
+      display: none;
+    }
+  }
+
+  // Overflow button (ellipsis menu)
+  .endpointOverflowBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 24px;
+    padding: 4px;
+    border: 1px solid var(--yasgui-endpoint-button-border, #337ab7);
+    background-color: var(--yasgui-endpoint-button-bg, #337ab7);
+    color: var(--yasgui-endpoint-button-text, #ffffff);
+    border-radius: 3px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      background-color: var(--yasgui-endpoint-button-hover-bg, #286090);
+      border-color: var(--yasgui-endpoint-button-hover-border, #286090);
+    }
+
+    &:focus {
+      outline: 2px solid var(--yasgui-endpoint-button-focus, #5cb3fd);
+      outline-offset: 2px;
+    }
+
+    &[aria-expanded="true"] {
+      background-color: var(--yasgui-endpoint-button-hover-bg, #286090);
+    }
+  }
+
+  // Overflow dropdown menu
+  .endpointOverflowDropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 4px;
+    min-width: 150px;
+    max-width: 300px;
+    background-color: var(--yasgui-bg-primary, #ffffff);
+    border: 1px solid var(--yasgui-border-color, #ddd);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    overflow: hidden;
+
+    // Dark mode shadow
+    [data-theme="dark"] & {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  // Dropdown items
+  .endpointOverflowItem {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    text-align: left;
+    background: none;
+    border: none;
+    border-bottom: 1px solid var(--yasgui-border-color, #ddd);
+    color: var(--yasgui-text-primary, rgba(0, 0, 0, 0.87));
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: background-color 0.15s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--yasgui-bg-tertiary, #eee);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: var(--yasgui-bg-tertiary, #eee);
+    }
   }
 }

package/src/tab.scss

@@ -137,14 +137,14 @@
     border: none;
     background: none;
     align-self: center;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding: 6px;
     cursor: pointer;
     color: var(--yasgui-button-text, #505050);
     fill: var(--yasgui-button-text, #505050);
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
 
     .svgImg {
       width: 15px;
@@ -161,6 +161,16 @@
       color: var(--yasgui-button-hover, black);
       fill: var(--yasgui-button-hover, black);
     }
+
+    // Responsive spacing - reduce padding on smaller screens
+    @media (max-width: 768px) {
+      padding: 2px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
   }
 
   .controlbar {
@@ -168,5 +178,6 @@
     align-content: center;
     flex-shrink: 0;
     max-height: 35px;
+    gap: 2px;
   }
 }

package/src/version.ts

@@ -1,3 +1,3 @@
 // Version information for YASGUI
 // This file is auto-generated during build - do not edit manually
-export const VERSION = "5.8.1";
+export const VERSION = "5.9.0";