Redesign YASQE buttons with modern styling and keyboard shortcuts

Copilot · MathiasVDA · Copilot · commit a17f51ac50bd · 2025-12-31T23:14:53.000Z
Co-authored-by: MathiasVDA &lt;15101339+MathiasVDA@users.noreply.github.com&gt;
diff --git a/packages/yasqe/src/defaults.ts b/packages/yasqe/src/defaults.ts
@@ -87,6 +87,10 @@ SELECT * WHERE {
         const yasqe: Yasqe = _yasqe;
         yasqe.getInputField().blur();
       },
+      F11: function (_yasqe: any) {
+        const yasqe: Yasqe = _yasqe;
+        yasqe.toggleFullscreen();
+      },
     },
 
     createShareableLink: function (yasqe: Yasqe) {
diff --git a/packages/yasqe/src/imgs.ts b/packages/yasqe/src/imgs.ts
@@ -13,7 +13,9 @@ export var fullscreen =
 export var fullscreenExit =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
 export var format =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3v18h18v-2H5V3H3zm14 4V5l-4 4 4 4V9h4V7h-4zM7 9v2h10V9H7zm0 4v2h10v-2H7zm0 4v2h10v-2H7z"/></svg>';
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>';
+export var save =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.94 129.94l-83.88-83.88A48 48 0 0 0 316.12 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V195.88a48 48 0 0 0-14.06-33.94zM224 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128zm96-224a16 16 0 0 1-16 16H144a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16z"/></svg>';
 export var snippet =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>';
 export var chevronDown =
diff --git a/packages/yasqe/src/index.ts b/packages/yasqe/src/index.ts
@@ -246,7 +246,48 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * draw share link button
+     * Draw query btn (FIRST)
+     */
+    if (this.config.showQueryButton) {
+      this.queryBtn = document.createElement("button");
+      addClass(this.queryBtn, "yasqe_queryButton");
+
+      /**
+       * Add text label
+       */
+      const queryTextLabel = document.createElement("span");
+      queryTextLabel.className = "yasqe_queryButton_text";
+      queryTextLabel.textContent = "Run query";
+      this.queryBtn.appendChild(queryTextLabel);
+
+      /**
+       * Add busy/valid/error btns
+       */
+      const queryEl = drawSvgStringAsElement(imgs.query);
+      addClass(queryEl, "queryIcon");
+      this.queryBtn.appendChild(queryEl);
+
+      const warningIcon = drawSvgStringAsElement(imgs.warning);
+      addClass(warningIcon, "warningIcon");
+      this.queryBtn.appendChild(warningIcon);
+
+      this.queryBtn.onclick = () => {
+        if (this.config.queryingDisabled) return; // Don't do anything
+        if (this.req) {
+          this.abortQuery();
+        } else {
+          this.query().catch(() => {}); //catch this to avoid unhandled rejection
+        }
+      };
+      this.queryBtn.title = "Run query (Ctrl+Enter)";
+      this.queryBtn.setAttribute("aria-label", "Run query");
+
+      buttons.appendChild(this.queryBtn);
+      this.updateQueryButton();
+    }
+
+    /**
+     * draw share link button (SECOND)
      */
     if (this.config.createShareableLink) {
       var svgShare = drawSvgStringAsElement(imgs.share);
@@ -481,41 +522,24 @@ export class Yasqe extends CodeMirror {
         }
       };
     }
+
     /**
-     * Draw query btn
+     * Draw save button (THIRD)
      */
-    if (this.config.showQueryButton) {
-      this.queryBtn = document.createElement("button");
-      addClass(this.queryBtn, "yasqe_queryButton");
-
-      /**
-       * Add busy/valid/error btns
-       */
-      const queryEl = drawSvgStringAsElement(imgs.query);
-      addClass(queryEl, "queryIcon");
-      this.queryBtn.appendChild(queryEl);
-
-      const warningIcon = drawSvgStringAsElement(imgs.warning);
-      addClass(warningIcon, "warningIcon");
-      this.queryBtn.appendChild(warningIcon);
-
-      this.queryBtn.onclick = () => {
-        if (this.config.queryingDisabled) return; // Don't do anything
-        if (this.req) {
-          this.abortQuery();
-        } else {
-          this.query().catch(() => {}); //catch this to avoid unhandled rejection
-        }
-      };
-      this.queryBtn.title = "Run query";
-      this.queryBtn.setAttribute("aria-label", "Run query");
-
-      buttons.appendChild(this.queryBtn);
-      this.updateQueryButton();
-    }
+    const saveBtn = document.createElement("button");
+    addClass(saveBtn, "yasqe_saveButton");
+    const saveIcon = drawSvgStringAsElement(imgs.save);
+    addClass(saveIcon, "saveIcon");
+    saveBtn.appendChild(saveIcon);
+    saveBtn.onclick = () => {
+      this.saveQuery();
+    };
+    saveBtn.title = "Save query (Ctrl+S)";
+    saveBtn.setAttribute("aria-label", "Save query");
+    buttons.appendChild(saveBtn);
 
     /**
-     * Draw format btn
+     * Draw format btn (FOURTH)
      */
     if (this.config.showFormatButton) {
       const formatBtn = document.createElement("button");
@@ -532,7 +556,7 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * Draw fullscreen btn
+     * Draw fullscreen btn (FIFTH)
      */
     this.fullscreenBtn = document.createElement("button");
     addClass(this.fullscreenBtn, "yasqe_fullscreenButton");
@@ -926,7 +950,7 @@ export class Yasqe extends CodeMirror {
       this.queryBtn.title = this.config.queryingDisabled;
     } else {
       removeClass(this.queryBtn, "query_disabled");
-      this.queryBtn.title = "Run query";
+      this.queryBtn.title = "Run query (Ctrl+Enter)";
       this.queryBtn.setAttribute("aria-label", "Run query");
     }
     if (!status) {
diff --git a/packages/yasqe/src/scss/buttons.scss b/packages/yasqe/src/scss/buttons.scss
@@ -81,6 +81,12 @@
         height: 25px;
         width: 25px;
       }
+
+      &:hover {
+        svg {
+          fill: #337ab7;
+        }
+      }
     }
 
     button {
@@ -163,29 +169,57 @@
       }
     }
     .yasqe_queryButton {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
       position: relative;
-      border: none;
-      background: none;
-      padding: 0;
+      border: 1px solid #337ab7;
+      background: #337ab7;
+      padding: 8px 16px;
       cursor: pointer;
-      width: $queryButtonWidth;
-      height: $queryButtonHeight;
+      border-radius: 4px;
+      color: white;
+      font-weight: 500;
+      font-size: 14px;
+      transition: all 0.2s ease;
+
+      .yasqe_queryButton_text {
+        display: inline-block;
+        line-height: 1;
+      }
 
       .queryIcon {
-        display: block;
+        display: inline-flex;
+        align-items: center;
         svg {
-          width: $queryButtonWidth;
-          height: $queryButtonHeight;
+          width: 16px;
+          height: 16px;
+          fill: white;
         }
       }
+
+      &:hover {
+        background: #2868a0;
+        border-color: #2868a0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      &:active {
+        background: #1f5180;
+        border-color: #1f5180;
+      }
+
       .svgImg {
         position: absolute;
         height: inherit;
         top: 0;
       }
 
       &.busy {
+        background: #5a8fc2;
+        border-color: #5a8fc2;
+        cursor: wait;
+
         svg {
           #loadingIcon {
             stroke-dasharray: 100;
@@ -210,30 +244,34 @@
 
       .warningIcon {
         display: none;
+        position: absolute;
+        top: -4px;
+        right: -4px;
+
+        svg {
+          width: 18px;
+          height: 18px;
+          fill: #ffc107;
+          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+        }
       }
 
       &.query_error {
         .warningIcon {
           display: block;
-          top: 5px;
-          right: 0px;
-
-          svg {
-            width: 15px;
-            height: 15px;
-
-            g {
-              fill: red;
-            }
-          }
         }
       }
 
       &.query_disabled {
         cursor: not-allowed;
-        .queryIcon {
-          opacity: 0.5;
-          filter: alpha(opacity=50);
+        opacity: 0.6;
+        background: #95b3d0;
+        border-color: #95b3d0;
+
+        &:hover {
+          background: #95b3d0;
+          border-color: #95b3d0;
+          box-shadow: none;
         }
       }
 
@@ -244,7 +282,7 @@
       }
     }
 
-    .yasqe_saveManagedQueryButton {
+    .yasqe_saveButton {
       display: inline-block;
       border: none;
       background: none;
@@ -256,6 +294,12 @@
         height: 25px;
         width: 25px;
       }
+
+      &:hover {
+        svg {
+          fill: #337ab7;
+        }
+      }
     }
 
     .yasqe_formatButton {
