Revamp search styling

janfaracik · Jul 6, 2022 · 702bb2a · 702bb2a
1 parent fba08e7
commit 702bb2a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 244 deletions.
diff --git a/...rc/main/resources/lib/layout/search.jelly → ...esources/lib/layout/command-palette.jelly b/...rc/main/resources/lib/layout/search.jelly → ...esources/lib/layout/command-palette.jelly
@@ -37,14 +37,12 @@ THE SOFTWARE.
   <dialog id="command-palette" class="jenkins-command-palette__dialog">
     <div class="jenkins-command-palette__wrapper">
       <div class="jenkins-command-palette">
-        <div class="jenkins-command-palette__search">
-          <div class="icon">
-            <l:icon src="symbol-search" />
-          </div>
-          <input id="command-bar" placeholder="${%Search}" type="search" autocomplete="off" autocorrect="off"
+        <div class="jenkins-search jenkins-command-palette__search">
+          <input id="command-bar" class="jenkins-search__input" placeholder="${%Search}" type="search"
+                 autocomplete="off" autocorrect="off"
                  autocapitalize="off" spellcheck="false" />
-          <div class="keyboard-shortcuts" id="command-palette-keyboard-shortcut">
-
+          <div class="jenkins-search__icon">
+            <l:icon src="symbol-search" />
           </div>
         </div>
         <div id="search-results-container" class="jenkins-command-palette__results-container">

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -170,7 +170,7 @@ THE SOFTWARE.
   </head>
   <body id="jenkins" class="yui-skin-sam ${layoutType} jenkins-${h.version}" data-version="${h.version}" data-model-type="${it.class.name}">
 
-    <l:search />
+    <l:command-palette />
 
     <j:if test="${layoutType!='full-screen'}">
       <!-- for accessibility, skip the entire navigation bar and etc and go straight to the head of the content -->

diff --git a/war/src/main/js/components/command-palette/command-palette.js b/war/src/main/js/components/command-palette/command-palette.js
@@ -12,7 +12,7 @@ window.addEventListener('load', () => {
   const commandPalette = document.getElementById("command-palette")
   const commandPaletteWrapper = commandPalette.querySelector(".jenkins-command-palette__wrapper")
   const commandPaletteInput = document.getElementById("command-bar")
-  const commandPaletteLoadingSymbol = commandPalette.querySelector(".jenkins-command-palette__search .icon")
+  const commandPaletteSearchBarContainer = commandPalette.querySelector(".jenkins-command-palette__search")
   const searchResults = document.getElementById("search-results")
   const searchResultsContainer = document.getElementById("search-results-container")
 
@@ -92,11 +92,11 @@ window.addEventListener('load', () => {
     }
 
     searchResultsContainer.style.height = searchResults.offsetHeight + "px"
-    commandPaletteLoadingSymbol.classList.remove("icon--loading")
+    commandPaletteSearchBarContainer.classList.remove("jenkins-search--loading")
   }
 
   commandPaletteInput.addEventListener("input", () => {
-    commandPaletteLoadingSymbol.classList.add("icon--loading")
+    commandPaletteSearchBarContainer.classList.add("jenkins-search--loading")
     debounce(renderResults, 200)()
   })
 

diff --git a/war/src/main/less/abstracts/mixins.less b/war/src/main/less/abstracts/mixins.less
@@ -47,6 +47,7 @@
 .item() {
   position: relative;
   z-index: 0;
+  text-decoration: none !important;
 
   &::before, &::after {
     position: absolute;

diff --git a/war/src/main/less/form/search.less b/war/src/main/less/form/search.less
@@ -63,68 +63,70 @@
 
   &__icon {
     position: absolute;
-    top: 9px;
-    left: 9px;
-    width: 16px;
-    height: 16px;
-    fill: var(--input-border-hover);
-    transition: var(--standard-transition);
-  }
+    aspect-ratio: 1 / 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    display: grid;
+    pointer-events: none;
+
+    svg {
+      width: 45%;
+      height: 45%;
+      max-width: 1.1rem;
+      max-height: 1.1rem;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      justify-self: center;
+      align-self: center;
+      transition: var(--standard-transition);
+    }
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 17px;
-    left: 17px;
-    width: 0;
-    height: 0;
-    color: inherit;
-    border: 2px solid currentColor;
-    border-radius: 100%;
-    opacity: 0;
-    transition: var(--standard-transition);
-  }
+    &::before, &::after {
+      content: "";
+      width: 0;
+      height: 0;
+      max-width: 1.1rem;
+      max-height: 1.1rem;
+      border: 0.125rem solid currentColor;
+      border-radius: 100%;
+      transition: var(--standard-transition);
+      grid-column-start: 1;
+      grid-row-start: 1;
+      justify-self: center;
+      align-self: center;
+      opacity: 0;
+    }
 
-  &::after {
-    content: "";
-    position: absolute;
-    top: 17px;
-    left: 17px;
-    width: 0;
-    height: 0;
-    color: inherit;
-    border: 2px solid currentColor;
-    border-radius: 100%;
-    clip-path: inset(0 0 50% 50%);
-    opacity: 0;
-    transition: var(--standard-transition);
-    animation: loading-spinner 1s infinite linear;
+    &::after {
+      clip-path: inset(0 0 50% 50%);
+      transition: var(--standard-transition);
+      animation: loading-spinner 1s infinite linear;
 
-    @media (prefers-reduced-motion) {
-      animation-duration: 2s;
+      @media (prefers-reduced-motion) {
+        animation-duration: 2s;
+      }
     }
   }
 
   &--loading {
     .jenkins-search__icon {
-      opacity: 0;
-      transform: scale(0);
-    }
+      svg {
+        opacity: 0;
+        transform: scale(0);
+      }
 
-    &::before {
-      opacity: 0.2;
-      top: 9px;
-      left: 9px;
-      width: 16px;
-      height: 16px;
-    }
+      &::before {
+        opacity: 0.2;
+        width: 45%;
+        height: 45%;
+      }
 
-    &::after {
-      opacity: 1;
-      top: 9px;
-      left: 9px;
-      width: 16px;
-      height: 16px;
+      &::after {
+        opacity: 1;
+        width: 45%;
+        height: 45%;
+      }
     }
   }