From ca7add0a6496951b19f4ceff95c8b6648e0a90d5 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 28 May 2024 08:18:44 +0100 Subject: [PATCH 1/3] Update _command-palette.scss --- .../main/scss/components/_command-palette.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/war/src/main/scss/components/_command-palette.scss b/war/src/main/scss/components/_command-palette.scss index f01913f2a478..9b2bfff39c17 100644 --- a/war/src/main/scss/components/_command-palette.scss +++ b/war/src/main/scss/components/_command-palette.scss @@ -14,35 +14,35 @@ &::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.15s linear; } &[open] { - animation: command-palette-animate-in 0.2s cubic-bezier(0, 0.68, 0.5, 1.5); + animation: command-palette-animate-in 0.15s 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); } From cc0952bb2f8f4e3620128f188c91e62a57b22684 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri, 14 Jun 2024 17:04:24 +0100 Subject: [PATCH 2/3] Update _command-palette.scss --- war/src/main/scss/components/_command-palette.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/war/src/main/scss/components/_command-palette.scss b/war/src/main/scss/components/_command-palette.scss index 626cae362771..7b3cc52b4da8 100644 --- a/war/src/main/scss/components/_command-palette.scss +++ b/war/src/main/scss/components/_command-palette.scss @@ -14,11 +14,11 @@ &::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.15s linear; + animation: jenkins-dialog-backdrop-animate-in 0.1s linear; } &[open] { - animation: command-palette-animate-in 0.15s 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] { From 04c697f30776aee6d8efaa414cb07295dc79909c Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 9 Dec 2024 09:29:32 +0000 Subject: [PATCH 3/3] Tidy up, lint --- .../js/components/command-palette/index.js | 19 ++++++++++++++----- .../scss/components/_command-palette.scss | 8 ++------ src/main/scss/form/_search-bar.scss | 2 +- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/main/js/components/command-palette/index.js b/src/main/js/components/command-palette/index.js index 8f900acddd53..5ece1106aed0 100644 --- 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 index 7b3cc52b4da8..09df860fb523 100644 --- a/src/main/scss/components/_command-palette.scss +++ b/src/main/scss/components/_command-palette.scss @@ -9,7 +9,7 @@ max-width: 100vw !important; margin: 0 !important; padding: 0 !important; - transform-style: preserve-3d; + user-select: none; &::backdrop { background: var(--command-palette-backdrop-background); @@ -35,7 +35,6 @@ translate: 0 4px; scale: 98.5%; opacity: 0; - filter: blur(15px); transform: rotateX(30deg); } } @@ -44,7 +43,6 @@ to { 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 index ab4f6e9718cf..e520f9c7e69b 100644 --- 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 {