Improve appearance, use vars, improve animations

janfaracik · Oct 1, 2022 · 113aa94 · 113aa94
1 parent 8004e77
commit 113aa94
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 42 deletions.
diff --git a/war/src/main/js/components/command-palette/command-palette.js b/war/src/main/js/components/command-palette/command-palette.js
@@ -96,7 +96,7 @@ window.addEventListener('load', () => {
 
   commandPaletteInput.addEventListener("input", () => {
     commandPaletteSearchBarContainer.classList.add("jenkins-search--loading")
-    debounce(renderResults, 200)()
+    debounce(renderResults, 300)()
   })
 
   commandPaletteInput.addEventListener("keyup", function (event) {

diff --git a/war/src/main/less/form/search-bar.less b/war/src/main/less/form/search-bar.less
@@ -34,7 +34,7 @@
       min-height: 1.1rem;
       aspect-ratio: 1;
       margin-right: 0.2rem;
-      background: currentColor;
+      background: var(--text-color-secondary);
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/%3E%3C/svg%3E");
       mask-size: contain;
       mask-repeat: no-repeat;
@@ -45,11 +45,11 @@
       cursor: pointer;
 
       &:hover {
-        opacity: 0.75 !important;
+        opacity: 0.85 !important;
       }
 
       &:active {
-        opacity: 1 !important;
+        opacity: 0.7 !important;
       }
     }
 
@@ -65,7 +65,7 @@
         0 0 0 7px var(--focus-input-glow);
 
       &::-webkit-search-cancel-button {
-        opacity: 0.5;
+        opacity: 1;
         pointer-events: all;
         transform: scale(1);
       }
@@ -96,23 +96,25 @@
     &::before,
     &::after {
       content: "";
-      width: 0;
-      height: 0;
+      width: 45%;
+      height: 45%;
       max-width: 1.1rem;
       max-height: 1.1rem;
-      border: 0.125rem solid currentColor;
+      border: 0.125rem solid var(--text-color-secondary);
       border-radius: 100%;
       transition: var(--standard-transition);
       grid-column-start: 1;
       grid-row-start: 1;
       justify-self: center;
       align-self: center;
       opacity: 0;
+      scale: 0;
+      filter: blur(5px);
     }
 
     &::after {
+      border-color: currentColor;
       clip-path: inset(0 0 50% 50%);
-      transition: var(--standard-transition);
       animation: loading-spinner 1s infinite linear;
 
       @media (prefers-reduced-motion) {
@@ -158,19 +160,20 @@
     .jenkins-search__icon {
       svg {
         opacity: 0;
-        transform: scale(0);
+        scale: 0;
+        filter: blur(5px);
       }
 
       &::before {
-        opacity: 0.2;
-        width: 45%;
-        height: 45%;
+        opacity: 0.5;
+        scale: 1;
+        filter: blur(0);
       }
 
       &::after {
         opacity: 1;
-        width: 45%;
-        height: 45%;
+        scale: 1;
+        filter: blur(0);
       }
     }
   }

diff --git a/war/src/main/less/modules/command-palette.less b/war/src/main/less/modules/command-palette.less
@@ -1,17 +1,28 @@
-:root {
-  --command-palette-backdrop: rgba(125, 125, 125, 0.9);
-  --command-palette-background: rgba(255, 255, 255, 0.8);
-  --command-palette-focus-color: var(--item-box-shadow--focus);
-  --command-palette-drop-shadow: 0 5px 60px rgba(5, 5, 20, 0.4);
-  --command-palette-inset-shadow: inset 0 0 2px 2px rgba(white, 0.1);
+@media (prefers-color-scheme: light) {
+  :root {
+    --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5) saturate(1.4) blur(20px);
+    --command-palette-drop-shadow: 0 5px 60px rgba(5, 5, 30, 0.5);
+    --command-palette-inset-shadow: inset 0 0 2px 2px rgba(white, 0.1);
+  }
+
+  .jenkins-command-palette__dialog {
+    &::backdrop {
+      backdrop-filter: contrast(0.7) brightness(0.95) saturate(1.25) blur(3px);
+    }
+  }
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --command-palette-backdrop: rgba(20, 20, 25, 0.95);
-    --command-palette-background: hsla(250, 15%, 15%, 0.8);
-    --command-palette-drop-shadow: 0 0 60px rgba(0, 0, 15, 0.5);
-    --command-palette-inset-shadow: inset 0 0 0 1px hsla(250, 10%, 90%, 0.025);
+    --command-palette-results-backdrop-filter: contrast(0.95) brightness(1.2) saturate(2) blur(30px);
+    --command-palette-drop-shadow: 0 0 60px rgba(10, 10, 15, 0.65);
+    --command-palette-inset-shadow: inset 0 0 0 1px hsla(250, 10%, 90%, 0.035);
+  }
+
+  .jenkins-command-palette__dialog {
+    &::backdrop {
+      backdrop-filter: contrast(0.5) brightness(0.25) saturate(2) blur(5px);
+    }
   }
 }
 
@@ -24,11 +35,6 @@
   max-width: 100vw !important;
   margin: 0 !important;
   padding: 0 !important;
-
-  &::backdrop {
-    background: hsla(240, 10%, 85%, 0.8);
-    backdrop-filter: saturate(2) blur(5px);
-  }
 }
 
 .jenkins-command-palette__wrapper {
@@ -50,17 +56,23 @@
   margin: 0 auto 20vh;
 
   &__search {
-    background: var(--command-palette-background);
+    background: transparent;
     box-shadow: 0 0 0 20px transparent, var(--command-palette-inset-shadow);
     margin-bottom: 1.5rem;
-    border-radius: 10px;
+    border-radius: 0.8rem;
     transition: var(--standard-transition);
     z-index: 10;
-    backdrop-filter: saturate(2) blur(10px);
+    backdrop-filter: var(--command-palette-results-backdrop-filter);
     max-width: unset;
 
     input {
       background: transparent !important;
+      border-radius: inherit;
+
+      &::before,
+      &::after {
+        border-radius: inherit;
+      }
     }
 
     &::before {
@@ -71,29 +83,29 @@
   &__results-container {
     display: flex;
     flex-direction: column;
-    border-radius: 10px;
-    background: var(--command-palette-background);
-    backdrop-filter: saturate(2) blur(10px);
+    border-radius: 0.8rem;
+    backdrop-filter: var(--command-palette-results-backdrop-filter);
     box-shadow: var(--command-palette-inset-shadow);
     height: 0;
-    transition: height 0.3s ease;
+    transition: height var(--standard-transition);
     overflow: hidden;
+    will-change: height;
   }
 
   &__results {
     display: flex;
     flex-direction: column;
-    padding: 7.5px;
+    padding: 0.5rem;
 
     &__heading {
       font-weight: 600;
       font-size: 0.85rem;
       margin: 0;
-      padding: 12.5px 12.5px 10px;
+      padding: 0.75rem 0.75rem 0.625rem;
       color: var(--text-color-secondary);
 
       &:not(:first-of-type) {
-        padding-top: 30px;
+        padding-top: 2rem;
       }
     }
 
@@ -104,8 +116,8 @@
       align-items: center;
       justify-content: flex-start;
       background: transparent;
-      padding: 12.5px;
-      border-radius: 6px;
+      padding: 0.75rem;
+      border-radius: 0.25rem;
       font-weight: 600;
       cursor: pointer;
       color: var(--text-color) !important;