From 65bbc5d549e3d3e61c6279d92b6d7c6aea945695 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu, 12 Dec 2024 21:39:52 +0000 Subject: [PATCH] Refine Command Palette UI (#10046) Refine command palette Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com> --- .../js/components/command-palette/index.js | 18 ++++- .../scss/components/_command-palette.scss | 73 +++++++++++++------ src/main/scss/components/_dialogs.scss | 6 ++ src/main/scss/form/_search-bar.scss | 2 +- 4 files changed, 72 insertions(+), 27 deletions(-) diff --git a/src/main/js/components/command-palette/index.js b/src/main/js/components/command-palette/index.js index dfb3c6eb7efe..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(); }); @@ -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) { diff --git a/src/main/scss/components/_command-palette.scss b/src/main/scss/components/_command-palette.scss index 6c3b16517e3a..8aadde54608d 100644 --- a/src/main/scss/components/_command-palette.scss +++ b/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 { diff --git a/src/main/scss/components/_dialogs.scss b/src/main/scss/components/_dialogs.scss index 7040c70af0e2..fbefb7bbe275 100644 --- a/src/main/scss/components/_dialogs.scss +++ b/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%; 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 {