Skip to content

Commit

Permalink
Refine Command Palette UI (#10046)
Browse files Browse the repository at this point in the history
Refine command palette

Co-authored-by: Tim Jacomb <[email protected]>
  • Loading branch information
janfaracik and timja authored Dec 12, 2024
1 parent 8c9caff commit 65bbc5d
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 27 deletions.
18 changes: 16 additions & 2 deletions src/main/js/components/command-palette/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand All @@ -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) {
Expand Down
73 changes: 49 additions & 24 deletions src/main/scss/components/_command-palette.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
}

Expand All @@ -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 {
Expand Down
6 changes: 6 additions & 0 deletions src/main/scss/components/_dialogs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
2 changes: 1 addition & 1 deletion src/main/scss/form/_search-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
place-self: center center;
opacity: 0;
scale: 0;
filter: blur(5px);
filter: blur(2.5px);
}

&::after {
Expand Down

0 comments on commit 65bbc5d

Please sign in to comment.