Merge branch 'command-palette--refine' into command-palette--add-icons

janfaracik · Dec 9, 2024 · ffdc89b · ffdc89b
2 parents 4de114b + 04c697f
commit ffdc89b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/src/main/js/components/command-palette/index.js b/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();
   });
 
@@ -121,10 +126,14 @@ function init() {
   function hideCommandPalette() {
     commandPalette.setAttribute("closing", "");
 
-    commandPalette.addEventListener("animationend", () => {
-      commandPalette.removeAttribute("closing");
-      commandPalette.close();
-    }, {once: true});
+    commandPalette.addEventListener(
+      "animationend",
+      () => {
+        commandPalette.removeAttribute("closing");
+        commandPalette.close();
+      },
+      { once: true },
+    );
   }
 
   function itemMouseEnter(item) {

diff --git a/src/main/scss/components/_command-palette.scss b/src/main/scss/components/_command-palette.scss
@@ -9,42 +9,40 @@
   max-width: 100vw !important;
   margin: 0 !important;
   padding: 0 !important;
-  transform-style: preserve-3d;
+  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.2s ease;
+    animation: jenkins-dialog-backdrop-animate-in 0.1s linear;
   }
 
   &[open] {
-    animation: command-palette-animate-in 0.2s cubic-bezier(0, 0.68, 0.5, 1.5);
+    animation: command-palette-animate-in 0.1s cubic-bezier(0, 0.68, 0.5, 1.5);
   }
 
   &[closing] {
-    animation: command-palette-animate-out 0.15s linear;
+    animation: command-palette-animate-out 0.1s linear;
 
     &::backdrop {
-      animation: jenkins-dialog-backdrop-animate-out 0.15s linear;
+      animation: jenkins-dialog-backdrop-animate-out 0.1s linear;
     }
   }
 }
 
 @keyframes command-palette-animate-in {
   from {
-    translate: 0 5px;
-    scale: 97.5%;
+    translate: 0 4px;
+    scale: 98.5%;
     opacity: 0;
-    filter: blur(15px);
-    transform: rotateX(40deg);
+    transform: rotateX(30deg);
   }
 }
 
 @keyframes command-palette-animate-out {
   to {
-    scale: 95%;
+    scale: 98.5%;
     opacity: 0;
-    filter: blur(2.5px);
   }
 }
 
@@ -113,7 +111,7 @@
     padding: 0.5rem;
 
     &__heading {
-      font-weight: 550;
+      font-weight: 500;
       font-size: 0.875rem;
       margin: 0;
       padding: 0.75rem 0.75rem 0.625rem;
@@ -144,7 +142,6 @@
       background: transparent;
       padding: 0.75rem;
       border-radius: 0.5rem;
-      font-weight: 550;
       cursor: pointer;
       color: var(--text-color) !important;
       transition: var(--standard-transition);
@@ -193,7 +190,6 @@
   }
 
   &__info {
-    font-weight: 550;
     font-size: 0.875rem;
     margin: 0;
     padding: 0 14px;

diff --git a/src/main/scss/form/_search-bar.scss b/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 {