Refine command palette

Author: janfaracik

src/main/js/components/command-palette/index.js

@@ -94,18 +94,23 @@ function init() {
       }
 
       searchResultsContainer.style.height = searchResults.offsetHeight + "px";
+      debouncedSpinner.cancel();
       commandPaletteSearchBarContainer.classList.remove(
         "jenkins-search--loading",
       );
     });
   }
 
+  const debouncedSpinner = debounce(() => {
+    commandPaletteSearchBarContainer.classList.add("jenkins-search--loading");
+  }, 150);
+
   const debouncedLoad = debounce(() => {
     renderResults();
   }, 150);
 
   commandPaletteInput.addEventListener("input", () => {
-    commandPaletteSearchBarContainer.classList.add("jenkins-search--loading");
+    debouncedSpinner();
     debouncedLoad();
   });
 
@@ -119,7 +124,16 @@ function init() {
   }
 
   function hideCommandPalette() {
-    commandPalette.close();
+    commandPalette.setAttribute("closing", "");
+
+    commandPalette.addEventListener(
+      "animationend",
+      () => {
+        commandPalette.removeAttribute("closing");
+        commandPalette.close();
+      },
+      { once: true },
+    );
   }
 
   function itemMouseEnter(item) {

src/main/scss/components/_command-palette.scss

@@ -1,13 +1,5 @@
 @use "../abstracts/mixins";
 
-.jenkins-command-palette__dialog {
-  &::backdrop {
-    background: var(--command-palette-backdrop-background);
-    backdrop-filter: contrast(0.7) brightness(0.9) saturate(1.25) blur(3px);
-    animation: jenkins-modal-backdrop-animate-in 0.3s;
-  }
-}
-
 .jenkins-command-palette__dialog {
   background: none;
   border: none;
@@ -17,6 +9,41 @@
   max-width: 100vw !important;
   margin: 0 !important;
   padding: 0 !important;
+  user-select: none;
+
+  &::backdrop {
+    background: var(--command-palette-backdrop-background);
+    backdrop-filter: contrast(0.7) brightness(0.9) saturate(1.25) blur(3px);
+    animation: jenkins-dialog-backdrop-animate-in 0.1s linear;
+  }
+
+  &[open] {
+    animation: command-palette-animate-in 0.1s cubic-bezier(0, 0.68, 0.5, 1.5);
+  }
+
+  &[closing] {
+    animation: command-palette-animate-out 0.1s linear;
+
+    &::backdrop {
+      animation: jenkins-dialog-backdrop-animate-out 0.1s linear;
+    }
+  }
+}
+
+@keyframes command-palette-animate-in {
+  from {
+    translate: 0 4px;
+    scale: 98.5%;
+    opacity: 0;
+    transform: rotateX(30deg);
+  }
+}
+
+@keyframes command-palette-animate-out {
+  to {
+    scale: 98.5%;
+    opacity: 0;
+  }
 }
 
 .jenkins-command-palette__wrapper {
@@ -40,9 +67,7 @@
     --search-bar-height: 3rem !important;
 
     background: transparent;
-    box-shadow:
-      0 0 0 20px transparent,
-      var(--command-palette-inset-shadow);
+    box-shadow: var(--command-palette-inset-shadow);
     margin-bottom: 1.5rem;
     border-radius: 1rem;
     transition: var(--standard-transition);
@@ -71,7 +96,8 @@
     border-radius: 1rem;
     backdrop-filter: var(--command-palette-results-backdrop-filter);
     box-shadow: var(--command-palette-inset-shadow);
-    height: 0;
+    // If set to 0, Safari won't always show the backdrop-filter
+    height: 1px;
     transition: height var(--standard-transition);
     overflow: hidden;
     will-change: height;
@@ -83,8 +109,8 @@
     padding: 0.5rem;
 
     &__heading {
-      font-weight: 600;
-      font-size: 0.85rem;
+      font-weight: 500;
+      font-size: 0.875rem;
       margin: 0;
       padding: 0.75rem 0.75rem 0.625rem;
       color: var(--text-color-secondary);
@@ -113,8 +139,7 @@
       justify-content: flex-start;
       background: transparent;
       padding: 0.75rem;
-      border-radius: 0.66rem;
-      font-weight: 600;
+      border-radius: 0.5rem;
       cursor: pointer;
       color: var(--text-color) !important;
       transition: var(--standard-transition);
@@ -132,17 +157,17 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 1.4rem;
-        height: 1.4rem;
-        margin-right: 12.5px;
+        width: 1.375rem;
+        height: 1.375rem;
+        margin-right: 0.75rem;
         overflow: hidden;
         pointer-events: none;
         color: var(--text-color);
 
         svg,
         img {
-          width: 1.2rem;
-          height: 1.2rem;
+          width: 1.125rem;
+          height: 1.125rem;
         }
       }
 
@@ -163,10 +188,10 @@
   }
 
   &__info {
-    font-weight: 600;
-    font-size: 0.85rem;
+    font-size: 0.875rem;
     margin: 0;
-    padding: 12.5px 12.5px 10px;
+    padding: 0 14px;
+    line-height: 46px;
     color: var(--text-color);
 
     span {

src/main/scss/components/_dialogs.scss

@@ -87,6 +87,12 @@ $jenkins-dialog-padding: 1.3rem;
   }
 }
 
+@keyframes jenkins-dialog-backdrop-animate-out {
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes jenkins-dialog-animate-in {
   from {
     scale: 85%;

src/main/scss/form/_search-bar.scss

@@ -133,7 +133,7 @@
       place-self: center center;
       opacity: 0;
       scale: 0;
-      filter: blur(5px);
+      filter: blur(2.5px);
     }
 
     &::after {